Project Feedback for Survey Form

Code Feedback
1

Hello everyone,

My name is Charah. I just completed the Survey Form and would greatly appreciate any feedback or critique. Thanks in advance and happy coding!!

Survey Form Project

2

Howdy. Congrats on completing the form. I’m big into accessibility so I’m going to point out a few issues that could be improved as far as that goes.

  • I can’t read the heading or paragraph at the top of the page. Can you? Black text on dark purple background probably is not the best combination :slight_smile:
  • You have a label for the select but it has the wrong for value. The value of the for attribute should be the value of the id on the select.
  • Speaking of labels, the textarea needs one. That’s easy, just change the p element you currently have the text in to a label and give it an appropriate for attribute.
  • When I narrow my browser real skinny then there are some display issues with the form. Try narrowing your browser as far in as it will go and I think you’ll see them. One of my recommendations would be not to set a width on the form. Definitely set a max-width to keep it from getting too wide. But when the browser is narrow you want it to take up as much horizontal space as possible, with perhaps a very tiny padding or margin around it so that it isn’t right up against the edge of the viewport.
3

Hi bbsmooth,

I greatly appreciate your suggestions and have implemented them. However, the form still doesn’t look right when I narrow the browser…Please advise!!

4

Ahh, I see. Don’t set the max-width in percentages. Percentages work well for some things, but you have to be very careful with them because they often don’t work well for narrow view ports. I would recommend you set the max-width in rem units so it will widen if the user manually increases the font size. Perhaps something like 30rem. I would do the same thing for the header as well.

Also, I would recommend when you are styling a page that you always start with the narrow view first. Narrow your browser as far in as it will go and make sure the styling looks good at that narrow view. This will be your default CSS. Then you can widen your browser and make any necessary adjustments, perhaps with media queries.

5

I have implemented those suggestions as well. I scrapped the background image. It looks much better now in a narrower window. Still can’t get the description id to sit flush when the browser is narrower. Guess I’m getting ahead of myself lol. I will come back to this project after I learn a little more about responsiveness. Thank you for your prompt and useful help!!!

6

Its a bit barebones, but otherwise good. I’d add some :hover action to the submit button so that the user knows that that is a clickable button. Actually I’d add that o all of your inputs.

7

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