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

Sass, BEM with desktop first desgin

Clinton 260

@DarkFM

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


First time using Sass and BEM. Any advise on my code is welcome.

Community feedback

P
Matt Studdert 13,611

@mattstuddert

Posted

Great work on this challenge Clinton, you've done an awesome job! 👍

Nice to see you using Sass and BEM as well. Your class naming looks good and your Sass structure also looks nicely separated and organised.

Here are a few tips after taking a look at your code:

  • Your form errors are currently showing up immediately on page load. I would recommend hiding these errors and only showing them when the user actually tries to submit the form with invalid inputs.
  • Be sure to add a corresponding label for each input or add aria-label to the input elements. This will make sure screen reader users know what the form fields are for.
  • Add role="alert" to error messages in order to have the error messages read out to screen reader users when shown. Here's a great MDN resource with some tips on other ways to implement alerts effectively.
  • I would recommend trying to use min-width instead of max-width on a future project. Many people prefer using the mobile-first workflow and it also has added benefits, such as loading in fewer styles for mobile users.

I hope these tips help, keep up the great work! 👍

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