Request path contains unescaped characters
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Vanilla JS form

@Eric-Ferole

Desktop design screenshot for the Intro component with sign-up form coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Im slowly improving. Any feedback would be much appreciated.

Community feedback

@Eric-Ferole

Posted

Thank you for taking the time to review my code. I found this about the input labeling. Very interesting https://www.w3.org/WAI/tutorials/forms/labels/ I'll take your advises ! Much appreciated.

0
P
Grace 27,350

@grace-snow

Posted

Hi this is a great start. The solution looks and functions close to the design, just a few important principles to learn still

  • don’t have any text in divs or spans alone when you could use a meaningful element. That “try it free…” text should be a paragraph, or maybe even a heading element
  • inputs always need labelling. That’s essential, even if it’s not visible on the design. Read up on adding accessible visually hidden labels
  • the autocomplete value is incorrect on first name
  • the inputs and error messages need linking together for screenreaders. You do that with aria-describedby on the input pointing to the unique ID of that inputs error element
  • the error elements also need an aria live attribute so they get announced as soon as they appear

In the js a small enhancement could be to move focus to the first input with an error. That’s quite a common task we get when building forms

I hope this was helpful. Good luck

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord