Skip to content
Submitted over 2 years ago

Intro component with sign-up form using SASS and BEM

sass/scss, bem
Elio Flores•400
@elioflo
A solution to the Intro component with sign-up form challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • CSS Grid
  • Mobile-first workflow
  • SASS
  • BEM
  • JavaScript and the Constraint Validation API

What I learned:

I learn most of how to use form validation. Using the Constraint Validation API was easy to write the validation message.

Suggestion? Any feedback is welcome!

Thank you.

Elio Flores

Code

Please log in to post a comment

Log in

Community feedback

  • Vanza Setia•27,715
    @vanzasetia

    Hi, Elio Flores!

    I don't think you need to use a custom element for the Frontend Mentor attribution. You can use HTML and CSS to create it. My point is to not use JavaScript for something HTML can do. When HTML can't, use CSS. JavaScript should be the last resort.

    Other suggestions:

    • <input> with type="submit" is a legacy element. It was used before the <button> element exist. It is best to avoid using legacy elements. So, use <button> element instead.
    • Each <input> must have an accessible name or label. In this case, you can use aria-label to label each input since there is no visible label.
    • Each error message should be connected with each <input> element. To do that, use aria-describedby attribute.
    • Add aria-live attribute to each <input> to make the error gets announced by screen readers as soon as the element is populated with the error message.
    • Add novalidate attribute to the <form> with JavaScript. This way, if the JavaScript fails to load, the users get native HTML form validation.
    • Make the <body> element the container of the page instead of using <div class="container">.

    I recommend using rem for the font sizes. You want to use em only when you want the size to be relative to the font size of the parent element.

    Dive deeper — rem vs em Units in CSS | DigitalOcean

    I hope you find this useful.

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