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

React.js site using Sass, CSS grid, Gulp, Formik, Yup

@denizerisen

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


I feel like my CSS structure and naming could be better. Should I've made the form submit button another component? Also, I think I'm lacking on the a11y and cross-browser compatibility part.

Community feedback

P
Matt Studdert 13,611

@mattstuddert

Posted

Great work on this challenge, your solution looks great! 👍

I'd say that your CSS structure looks fine. The fact that you're using Sass and breaking styles out into themed files is perfect. As far as your naming goes, it looks OK to me as well. You might want to check out BEM if you want to see another approach. Or, considering you're using React, you could try building a project using Styled Components to see if you like it. I use a React + Styled Components combo for Frontend Mentor and love it.

As far as a11y goes, there are a couple of improvements that could be made:

  • Either add a corresponding label for each input (which you can then hide just for screen reader users) or add aria-label to each input. This is so that screen reader users know what each field is for.
  • Also, you could add role="alert" to each error message to make sure they are announced to screen reader users when they are shown.

One good way to test forms is to turn on a screen reader and then only try and fill it in by using the keyboard (i.e. no cursor).

I hope these tips help! Let me know if you have any questions.

0

@denizerisen

Posted

@mattstuddert I'll improve the project with these tips thank you! Also these challenges are awesome. I loved working with a styleguide.

0
P
Matt Studdert 13,611

@mattstuddert

Posted

@denizerisen you're welcome! Really happy to hear you like the challenges. Looking forward to seeing your next solution.

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