Video Game Survey Page

Hi all.

I thought I was finished with this page and would welcome any feedback.

I cannot pass one test and that is to have a h1 with an id=“title”. I do have this but no matter what I do I cannot get it to pass.

I also struggled to perfectly center the title and main box so it is the same on all screens.

I followed Kevin Powell’s lesson on youtube to do the glitch effect who I find a really good resource.

The problem isn’t with the title but rather with the duplicate id’s here:

    <div id="description" class="info">
      <p id="description">Please take the time to tell us about your video game habits and preferences by answering the questions below.</p>

Get rid of the id inside the div element and it should pass the test. Remember that ids can only be used once.

Hope that helps.

Happy coding!

1 Like

Thank you! Was focused so much on the header didn’t think to look else where. Corrected and all tests passed!

Your form looks okay @rsheppard83. Some things to revisit;

  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.

Side note, not so much on the checkboxes but more on the radio buttons, when I click on a label I expect the radio button on the left to hightlight, not the one on the right. I feel as if I’ve made and incorrect choice.
If you’ve ever filled out a form on-line you must have noticed that the radio button / checkbox is on the left and the associated label is on the right.
And, that radio buttons and checkboxes are stacked rather than in-line. The human eye is not meant to follow a form that way.

1 Like

Thank you for your feedback. I’ve fixed the radio buttons and checkboxes to make it clearer. I am going to check out the HTML checker you recommended and make any alterations and will use for future projects!

1 Like