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

BEM QR Code layout

Denis Saripov• 10

@saripovdenis

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Please, give me feedback about naming of the classes and semantic layout

Community feedback

Chris• 400

@chrisvn188

Posted

@saripovdenis Hey! Congratulation on the first project! It looks great! I had a look at your html and I see that you are trying to use BEM naming convention for classes. For better practice, "No matter how many levels deep a descendent is nested the double-underscore pattern should appear only once in his selector name." You can read more here: https://assist-software.net/blog/css-guideline-tutorial-bem-sass

  • eg: instead of writting class="card__content__body", you just write class="card__body"

Hope it will help! Happy coding!

Marked as helpful

1

@miguelbittencourt

Posted

I really like your solution, my feedback for you is to use semantic html, such as the tags "main", "header" and "section", I also recommend you to abbreviate the class names, using "-" to split the names.

By the way, how much margin did you use for the card to be in the same position as the proposed one?

Marked as helpful

0
Dev Rathore• 2,600

@GitHub-dev12345

Posted

@saripovdenis :) hi Very nice work

Used <main class="container"> to replace the <div class="container">, Your accessibility will be reduce. And Nice Code Keep it up

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