Skip to content
Submitted 8 months ago

Qr Code Component Using HTML and SCSS

dolapobj•310
@dolapobj
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

Most proud of completing it quickly within an hour and learning the proper way to format rounded corners, drop shadow, and align using CSS.

What challenges did you encounter, and how did you overcome them?

I eye-balled the dimensions of the qr code and the text size. I could do better to get the exact dimensions to understand how to replicate the design more closely.

What specific areas of your project would you like help with?

I would specifically like help on my CSS and if I structured my CSS in the most effective way. For example, in my styles.scss file, I set a variable for the distance between elements and made all distances on the page between elements a multiple of that initial value, which I think was a good practice. Are there other good practices like that that I should consider for future projects?

Community feedback

  • Abdul Khaliq 🚀•72,560
    @0xabdulkhaliqPosted 8 months ago

    Hello there 👋. Congratulations on successfully completing the challenge! 🎉

    • I have a suggestion regarding your needs that I believe will be of great interest to you.

    CSS NAMING CONVENTION 🚫:

    • Looks like the naming conventions you used for css needs to be better, you can take a look at BEM Naming Convention.
    • BEM helps to create modular, reusable, and maintainable code. With BEM, you can easily identify which styles apply to which elements, making it easier to modify and update your CSS.
    • BEM naming conventions provide a clear structure and naming hierarchy for your CSS classes. This makes it easier to read and understand your code, even for other developers who are not familiar with your project.
    • BEM helps to avoid naming collisions and specificity issues. For example take a look at your current code where naming collisions can happen which could lead to specificity issues.
    .card h1 {
  font-weight: 700;
  ....
}

    This can be refactored using BEM Method like this, (I changed h1 to heading because it's more verbose and readable).

    .card__heading {
  font-weight: 700;
  ....
}
    • BEM makes it easier to collaborate with other developers on larger projects. By using a shared naming convention and structure, you can ensure that everyone on the team is using a consistent approach to styling, which reduces confusion and errors.
    • This article on CSS-Tricks provides a beginner-friendly introduction to BEM and explains the key concepts and benefits of using BEM.

    .

    I hope you find this helpful 😄 Above all, the solution you submitted is great !

    Happy coding!

    0

Please log in to post a comment

Log in with GitHub

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