Survey Form Project - Dog Temperament Questionnaire(Feedback welcome！)

Code Feedback
1

Hello Everyone,
It’s my first post. I just finished the first project in freeCodeCamp.

For this project, I created a simple dog temperament questionnaire. Use the simple questions to know about your dog(Assuming this questionnaire will receive a response).

I would love and appreciate any feedback or suggestion. Thank you for taking the time to read this post :heart:.

The project link is here :point_down:
Survey Form Project

1 Like
2

Hello

this is a pretty impressive early project:

The code looks clean and passes through the HTML validator,
you have a nice css reset “*” section including a professional font
(one of my favorites)

And you put the title inside the container where people can read it,
instead of throwing it on the background image like the majority does,
often making it unusable.

Well done!

3

Agreed, this is very nicely done. I don’t have many suggestions for improvement, just a few minor ones and one major one, which I’ll start with first.

  • Do not remove the outline on the inputs (i.e. do not set outline: none in the CSS). This is a big accessibility no-no. Keyboard users need to be able to see where their keyboard focus is at. The very narrow blinking cursor that shows up in the text inputs is not enough. And there is no other indicator on the select. I know a lot of people think that the outlines look ugly, but you can style them to match your page.

  • When the viewport is narrow I would recommend you lose the side margin/padding on the container div completely, or at least make them much smaller. Also increase the width on the container div. This will give more horizontal room for the inputs and text.

  • Conversely, when the viewport is very wide I think you should put a max width on the container div to keep the form from getting too wide. And I would suggest you set the max width in rems.

  • I am very impressed that you wrapped the two different sections of the form in a fieldset and used a legend to describe them. I would suggest that you make the legend text an h2 element. You can embed headings in legends. The text stands out on the page and looks like a heading and is basically acting as a heading, so it should be coded as a heading. This will help screen reader users navigate the page since navigating by headings is a very popular way of exploring a page.

  • And lastly, the main content on the page (which is the entire form in this case) should be wrapped in a main element. So change the container div to a container main.

Again, great work.

4

Hello @DanielHuebschmann,

I want to say thank you for letting me know where I’m doing well, then your feedback gives me more confidence in my homework and strengthens my motivation to be more active in learning :smiling_face_with_three_hearts:.

5

Hi @bbsmooth,

I want to say thank you for taking the time to provide me with such professional and informative advice :smiling_face_with_three_hearts:.

  • I probably wouldn’t have known this was a big problem if you hadn’t offered advice. Thanks, I’ll remove outline: none; and try to give it some style.

  • About viewport content, I wonder if this is related to RWD. If so, I would like to thank you in advance for guiding me on some basics of RWD, and I will try to adjust my assignment first as you suggest

  • I have no idea I could put a title in it! Thank you for reminding me about this point, it makes my assignment more comfortable for the user, and I completely forgot the main tag, so sorry for the main.

Finally, your sharing and replies have given me more courage and motivation to study. Thank you so much :muscle:.

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.