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

Flexbox and BEM naming

gsemyong 110

@gsemyong

Desktop design screenshot for the Stats preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi everyone, this is my first project! Feeling excited :)

I'd really appreciate any feedback, but to how some starting ground will point few things:

  1. Did I follow all the best practices for HTML structuring (what I could've have done to achieve more semantically meaningful HTML)?
  2. Did I follow all the best practices regarding BEM naming?
  3. What could I improve in my CSS code?

Thank you in advance!

Community feedback

Franco A. 200

@franco-a

Posted

Hey gsemyong, good job with the design! I only have one comment. In your h1 header you use a b tag to differentiate the purple insights word. According to the HTML5 specification, the b tag should be used as a LAST resort when no other tag is more appropriate. I think it would've been better if you used a span tag instead and gave it a modifier class (card__heading--purple for example) and styled it from there. Other than that you did solid!

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