Survey Form Remake

Hey guys so I have been taking a few other courses to get a better understanding of HTML and CSS before moving on to Javascript.

Will you take a look at my before and after project and lmk what you think?
So this is my updated, second version on the Survey Form:

And here is my first attempt at the Survey Form before taking any other online courses:

Hi @bbbbaopr, they look okay but there are some things you should revisit.

  • You’re consistent in your errors. Run your HTML code through the W3C validator. Just copy your HTML and paste it into the ‘Validate by Direct Input’ tab.
    • </input> is not valid
  • Make it so users can click on the labels, not just the radio buttons and/or checkboxes. You’re not using <label> correctly. I’d suggest you revisit the lesson on nesting radio buttons/checkboxes in the label element.
  • on your first attempt, black&white text on a black&white background is hard to read. black blends in with black.
    • and a tad more opacity to your form wouldn’t hurt
  • for each of them, change the cursor to a pointer when hovering over the submit button
1 Like

Thank you. I didnt realize I had any mistakes.

1 Like

Wow, I just ran my code through the validator.
I wasn’t aware that we had to insert the HTML boilerplate because it works regardless.
I am using the software Atom and I use the boilerplate there but didnt know we had to use it in codepen.

You don’t have to use it in codepen. Codepen only expects the code you’d put within the <body> </body> tags in HTML. (No need to include the body tags). For anything you want to add to <head> click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.

Edit: I should have noted that when using the validator if you’re copying your code from codepen you can ignore the first few errors.

1 Like