Build a Survey Form- analyse

Hi guys,

if anyone’s free to take a look at my code and give me some constructive criticism that’ll be great. I have ran the test on code pen and it has past and it has passed the html/css validation but if I have picked up any bad habits feel free to let me know!

Thanks in advance!

Please see link -

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.114 Safari/537.36

Challenge: Build a Survey Form

Link to the challenge:

1 Like

Hi @raymond_clark ,

Good job completing this task, in my opinion you should work a little bit on colors to increase contrast and people can easier read your form. In addition your form is not responsive and you probably should add some media queries or use other units than pixels for width.
setting background size to cover also should make it a bit better :slight_smile:


Hey there @raymond_clark !

Great Job with your survey page, all tests pass!

Here’s my analysis:

  1. Your HTML has no syntax errors, great job!

  2. I would suggest not using the <br> tag so much; CSS can do a much better job and using the <br> tag instead of using CSS is a bit of a malpractice in web development. :grinning_face_with_smiling_eyes:

  3. Your design is great, but I would suggest a solid background because your current transparent background makes text a bit too hard to see.

That’s about all I got LOL

Happy coding!

1 Like

Your form looks good @raymond_clark. Some things to revisit;

  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in the HTML editor. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
    • For instance, links to fonts go in the box labeled ‘Stuff for <head>’
  • User’s should be able to click on the label to toggle a selection, not just the radio button / checkbox (not working for your radio buttons)
  • Change the cursor to a pointer when hovering over the submit button
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
  • Your form is hard to read. There is not enough contrast between the text color and the background color.

It looks odd seeing the checkboxes as part of a list. You can set container elements to be block-level elements so they’ll each take up the full width.
At the very least, hide the bullet points.

1 Like

Thanks a lots guys. This is great!

You’ve all given me some valuable feedback here which I’ll take on board. Still in the process of finding further tools as I go along also but the references here are great too. I know my design skills aren’t there yet ! :grinning_face_with_smiling_eyes:

I’m working through Treehouse css too at the moment so I’m feeling a bit more confident on the css now and will work through all your suggestions and comments.

Much appreciated, thank you all :grinning:

Hi Roma- I’ve finally come back to the project. What did you mean in the above comment?

I have amended the other issues so hopefully these are a bit better. I have some more reading to do on the colour contrast but I have the idea for now and will use that link.
Thanks, much appreciated

I mean that for the checkboxes, user’s are able to click on the checkbox to toggle or they can click on the checkbox itself to toggle.
This is code for one of your checkboxes

<p class="checkbox"><label><input type="checkbox" value="Push ups">Push ups </label></p>

In your form, click the checkbox a couple of times and see it toggle. Now click the label (the words “push up”) a couple of times and see it toggle.
Radio buttons obviously don’t toggle but user’s are unable to select by clicking the label, they can only select by clicking the radio button. This is a bad UX. Revisit this lesson and see how to properly nest the label.

There are still quite a few <br> elements being used to force spacing. Once again, that’s what CSS is for.

Side note, I’ll leave it to you to decide if your header and footer have a value add for your form.

I got it I think thanks Roma.

I can now select when clicking on the label. I realised I had left the label title out of the syntax which didn’t help and I have removed the header and footer as they don’t really add value you’re correct.

I have replaced the <br> elements with <p> elements but i’ll read up on these in more depth as I’m not sure if i’m overusing <p> now.

Many thanks

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