Tell me what you think

Take a look at this and tell me what you think. This is a link to my pen,
copy this link into a tab.

I say it’s pretty good with all tests passing.
But try to work a bit more on making it responsive to mobile as the options or checkmarks look weird on mobile.

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

  • Run your HTML code through the W3C validator.
    • There are HTML syntax/coding errors you should be aware of and address.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
  • User’s should be able to click on the label to toggle a selection, not just the radio button / checkbox
  • Change the cursor to a pointer when hovering over the submit button

I don’t often comment on styling because I’m not the best at it but a few things you need to consider;

  • The light grey (silver) text on a yellow (gold) background makes the text very hard to read. Consider using a contrast checker to improve accessibility
  • Maybe add a little padding so the submit button does not rest on the bottom of the page. Maybe make it look like a button instead of a bar.
  • The text is very large on smaller screens and the form itself becomes too narrow.
    • To help with responsiveness do not use fixed dimensions on elements, use max-width/height and relative units like %, em, rem and vw

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