Hello everyone, I was hoping I would be able to get some feedback for my second ever project. I worked hard on it as it was my first time going deeper with CSS and it definitely caused me a few headaches. They were, of course, well worth it. I learned a lot more by pushing through the brick walls I encountered.
That being said, I feel like perhaps my CSS may be a bit sloppy, or hacky. I was hoping to get feedback on my project’s html and (more so) my CSS. I am happy with the end result but as I am still a beginner, I could use the feedback to improve it further.
I also had a few questions on things I could not figure out:
I used ‘fieldset’ in my form, however the top border is not appearing and I cannot understand why, even after googling it endlessly.
In the date and submit field, both the ‘mm/dd/yyyy’ and ‘submit’ texts are centered between the left and right but they seem to be closer to the top border. How can I center them along the top-bottom so that it is completely centered inside the rectangle? (sorry for my primitive coding vocabulary)
Your form looks good @rorocipriano. Some things to revisit;
The test script, with all tests passing, should be included when you submit your projects.
Your page passes 16/17 user stories. Click the red button to see which test(s) are failing and text to help you correct the issue.
Be sure and read more than just the first line of the failing message. The ability to read and comprehend error messages is a skill you’ll need to acquire as a developer. Ask questions on what you don’t understand.
There are HTML syntax/coding errors you should be aware of and address.
Since copy/paste from codepen you can ignore the first warning and first two errors.
Codepen provides validators for HTML, CSS and JS. Click on the chevron in the upper right of each section and then click on the respective ‘Analyze’ link.
The one for CSS is good. Use it and address the issue(s).
(The one for HTML misses things which is why I recommend W3C)
On smaller screens the input area is not completely shown and the user cannot see what they’re entering. This is a bad UX.
On a side note, debug view is for looking at the Pen full-screen with no iframe. The view opens in a new tab and is only for you, the logged user, so it is not great for sharing but it is great for debugging. (Also not good for sharing because it expires)
In other words, the link to your pen should be to the editor view or the full view.
Thank you for this great feedback, I will implement your advice right away. I had 17/17 before I began my CSS so I must have changed an id somewhere during my styling, I need to go fix that now. I also completely forgot to run it through the w3c as you advised me last time. How embarrassing
I will be focusing on being careful and detail-oriented going forward. Thank you for taking the time out to help me.
Hello Roma, I fixed up my project using your feedback and I appreciate the help. W3C is amazing. Also, I was hoping you could help me figure out two things that I cannot seem to understand:
I attempted to fix the problem with smaller screens by adding more media queries, but I feel like it may be incorrect to include all of the ones I added.
Related to my previous question:
You mentioned that the input area doesn't show on smaller screens. To fix this, would I need to add a media query for smaller devices or would I have add 'position: absolute' to my input css? Or am I completely off the mark here?
Thank you for your time, this forum has been a godsend.
Best,
Roberto
Technology Stack
You can use HTML, JavaScript, and CSS to complete this project. Plain CSS is recommended because that is what the lessons have covered so far and you should get some practice with plain CSS. You can use Bootstrap or SASS if you choose. Additional technologies (just for example jQuery, React, Angular, or Vue) are not recommended for this project, and using them is at your own risk. Other projects will give you a chance to work with different technology stacks like React. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding!
Content
I can see a title with id=“title” in H1 sized text.
I can see a short explanation with id=“description” in P sized text.
I can see a with id=“survey-form”.
Inside the form element, I am required to enter my name in a field with id=“name”. If I do not enter a name I will see an HTML5 validation error.
Inside the form element, I am required to enter an email in a field with id=“email”. If I do not enter an email I will see an HTML5 validation error.
If I enter an email that is not formatted correctly, I will see an HTML5 validation error.
Inside the form, I can enter a number in a field with id=“number”.
If I enter non-numbers in the number input, I will see an HTML5 validation error.
If I enter numbers outside the range of the number input, I will see an HTML5 validation error.’
For the name, email, and number input fields inside the form I can see corresponding labels that describe the purpose of each field with the following ids: id=“name-label”, id=“email-label”, and id=“number-label”.
For the name, email, and number input fields, I can see placeholder text that gives me a description or instructions for each field.’
Inside the form element, I can select an option from a dropdown that has corresponding id=“dropdown”.’
Inside the form element, I can select a field from one or more groups of radio buttons. Each group should be grouped using the name attribute. Each radio button must have a value attribute.
Inside the form element, I can select several fields from a series of checkboxes, each of which must have a value attribute.
Inside the form element, I am presented with a at the end for additional comments.’
Inside the form element, I am presented with a button with id=“submit” to submit all my inputs.
It looks better @rorocipriano. The form is responsive and passes the tests. Some things you may want to revisit;
Something small like this shouldn’t require media queries. To help with responsiveness, rather than hard coding pixel values you can/should use relative values like em or rem, and percentages.
Not sure if you’ve noticed but you try and use font-weight: bold; and font-weight: 900: but your form does not render either of those. The browser will do it’s best but it only has the normal weight that you linked to work with.
there’s also reference to a font (Lato) that has no link to it.
The form is not keyboard accessible. A user that cannot manipulate with a mouse should be able to use the keyboard to get around the form. You’ve turn portions of this off which is not a good UX.
Thank you, I will get to work on fixing it up some more. I’m just curious; I see font-weight: bold used in many form examples as well as online resources. Why does the browser fail to render it in this case?
Is it something I should refrain from using, or does the error lie in my use of both ‘bold’ and ‘900’?
