Survey Form Remake

1

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:

2

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
3

Thank you. I didnt realize I had any mistakes.
<3

1 Like
4

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.

5

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