Gym Registration(Survey Form Challenge)Completed

My second project
Any advice for improvement is much appreciated.

Your form looks good @Dare. 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.
  • Codepen provides validators for HTML, CSS and JS. Click on the chevron in the upper right of each section and then click on the respective ‘Analyze’ link.
    • The one for CSS is good. Use it and address the issue(s).
    • (The one for HTML misses things which is why I recommend W3C)
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
  • It’s a bad UX to remove keyboard access. What if a user’s only way of interacting with the page is via the keyboard?
  • Do not use view port units for font sizes. The user should always be in control of the text size on the page (that is, they should be able to manually increase the text size). Using view port units prevents them from doing this. Your job as a developer is to make sure your page is responsive to text size increases. If you don’t know how to manually increase the text size, using Firefox, go to the ‘View->Zoom’ menu and activate ‘Zoom Text Only’. Then while holding down the Ctrl key scroll your middle mouse button to increase the text size. If font-sizes are defined with vw units the only way a user can increase the text size is to widen the browser window. What if the user has really bad eyesight and can’t make the browser window wide enough?
  • The font is extremely small on smaller screens
  • It’s a small thing but placeholder text should not mirror the label. Rather, it should show the format the user is to input.

Thank you @Roma .
After running the code through the validator I modified the code.

So I used CSS instead of using <br>.

Can you please explain a bit more? As I was able to interact with page via keyboard only.
Now instead of using “vw” I am using “rem” for texts.

It looks better @Dare. Some things to revisit;

  • Make your page responsive. Remember, the R in RWD stands for Responsive
    • There’s a horizontal scrollbar on smaller screens and elements fall out of the container.
  • Codepen provides validators for HTML, CSS and JS. Click on the chevron in the upper right of each section and then click on the respective ‘Analyze’ link.
    • The one for CSS is good. Use it and address the issue(s).
    • (The one for HTML misses things which is why I recommend W3C)

By interacting with the keyboard I mean using the ‘tab’ to navigate through the form. Try it and you’ll see that only the input fields give a hint to the user as to where they are because you’ve taken away the outline. That would be an accessibility concern.

Sorry for late reply I was busy with school.

  • The page is now responsive.

  • Addressed all the issues that the validator pointed out.

  • Added the outline.

Thank you for helping!

Nice job cleaning things up @Dare.

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