My page on survey. Please review

Hey guys, please help to rate my work. Criticisms welcome.https://codepen.io/obong003/pen/ExKZYLe?editors=1100

Hello! Overall you page looks good and it passes all the tests, I do think that you could add a Media Query so that the page fits smaller screens, I’m seeing this page on my phone and it looks like this:


As you can see the page itself is bigger than my screen, so I have to scroll to the right to see the full content, it would be nice to be able to see the full content on smaller screens.
You’re doing great so far, keep up the good work :grin:

1 Like

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

  • Run your HTML code through the W3C validator.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
    • There are HTML coding errors you should be aware of and address.
  • Codepen provides validators for HTML, CSS and JS. Click on the down arrow in the upper right of each section and then click on the respective ‘Analyze’ link.
    • The one for CSS is good. Use it, there’s something to clean up.
    • The one for HTML misses things which is why I recommend W3C
  • User’s should be able to click on the label to toggle selection. Not just the radio button / checkbox.
  • Maybe investigate how the fieldset element is used.
    • Briefly, it’s to group related elements in a form. You wouldn’t put your entire form in a fieldset element.
  • Your form needs to be responsive. On smaller screens there is a horizontal scrollbar.
    • You shouldn’t need a media query with your form if you define widths with a percentage instead of hardcoding pixel values. Hint: revisit this line, max-width: 900px; in your #survey-form declaration.
1 Like

Okay, I understand. I’ve been down with Malaria that’s why I did not respond on time. I’ll get to it. Thank you.

1 Like

I always look forward to your review. Thank you. I’ll get to the corrections now. Was sick.

1 Like

Oh i’m sorry to hear that, i hope you’re feeling better now