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
Not Found

Submitted

Intro-component-with-sign-up-form plain htmtl, css and JS

@the-coding-beekeeper

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


Hello everyone! Feedback always appreciated. Happy coding!

Community feedback

P. Ricardo 2,370

@pRicard0

Posted

Some more HTML tips

  • Everything inside the form should be wrapped inside a <fieldset> which will have a <legend> that is visually hidden using CSS. The legend tag is like the label of the form.
  • The error message is invisible but auxiliary devices can still read it. The message must contain aria-hidden="true"
  • The input must contain aria-invalid. It is used to indicate whether the value of an input field or form control is valid or invalid for the user. You should update the value using Javascript. aria-invalid should be true or false.

Marked as helpful

1

@the-coding-beekeeper

Posted

@pRicard0,

thank you for your helpful tips! greetings and happy coding!

0
P

@KrishnaVishwakarma1595

Posted

Hello, @the-coding-beekeeper,

Congratulations on completing the challenge. Nice and Wonderful solution, Great!

I just have one point to mention here about the HTML Accessibility -

  • So, for the second <section> tag in your HTML, there should be any h1-h6 heading tag as per the accessibility rule.

  • All the input fields should have an aria-label attribute which describes what the input is for, mainly for the screen readers.

I don't know it might have given you a warning/error for both of them at the time of submitting the solution. If not given that's good for you. We must follow the HTML accessbility rules while working with Semantic HTML tags.

Hope this will be helpful information for you.

Happy Coding

Marked as helpful

1

@the-coding-beekeeper

Posted

@KrishnaVishwakarma1595,

thank you for your helpful tips! No, there was no error-message when I submitted the solution. Greetings and happy coding!

1

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