Intro component with sign-up form

Solution retrospective
I'm looking forward to any feedback you could have 😇
Please log in to post a comment
Log in with GitHubCommunity feedback
- @grace-snow
One more thing - just a best practice advice rather than something that should change...
I'd recommend adding js-specific class selectors to your html elements like
js-signup-form
and using those to get elements in your js file with querySelector. This is a good practice once working in dev teams as it tells other developers exactly what a class is there for and not to change it. Getelementbyid is slightly less performant, and can be problematic when ids get changed (surprisingly common occurance!)Just an idea for you anyway ☺
- @grace-snow
Hi Mathieu
This looks really nice, you should be very pleased with it!
Only a few minor improvements to suggest:
- the try it free bit is text so should Probably be inside a text element of some kind (paragraph or heading)
- the email input should be
type="email"
- the error messages should be linked to their associated input using an ID and an aria-describedby on the input. They should probably have
aria-live=polite
on those error tags too, so assistive tech knows to announce them.
Hope thats helpful. I look forward to seeing your next solution!
(please upvote comment if you find comments like this helpful so I know, thanks )
- @ApplePieGiraffe
Hey, Mathieu! 👋
Nice job on this challenge! 👍 Your solution looks good! 👏
I suggest,
- Using fixed margins or padding to add room between the edges of the page and content so that there isn't too much room between the two when the layout first changes from desktop to tablet.
- Removing the error messages around the inputs when the valid input is entered into them and the form is submitted a second time. 😉
Keep coding (and happy coding, too)! 😁
And have a happy new year! 🎉
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