Skip to content
Submitted over 2 years ago

QR code component using semantic HTMl and CSS flexbox

Steven perry•20
@ST3V3NP3RRY
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

This is my first project on frontend mentor I'm just starting to learn HTML and CSS, and trying to get a handle on github and git, so any help or recommendations with code formatting and best practices would be most welcome. Sorry if that's too much of a generalisation.

I've seen some other solutions where developers have used custom CSS properties to provide variables for colours etc is this a best practice for me to consider moving forward?

All comments about how the code could be improved would be greatly received.

Thanks

Steven

Community feedback

  • Christian Prasetya•370
    @christian-prasetyaPosted over 2 years ago

    Hi Steven, great job, your solution is almost perfect with the design.

    You've done a great job with the HTML semantic and accessibility, and your CSS is really great. And you perfectly measure the width and the heigth of the rectangle.

    As for the custom CSS variables, Yes, it can help make your life easier in the long run, so you don't have to remember every color you want to use, or the font and font size for your heading, paragraph, etc. But, it came back with the personal preference. For me personally, I use the CSS variable in all my project, so I can focus more on the other solution without worrying what color I've used, what the hex or rgb code, etc.

    Once again, well done, and hope to see more challenge solved.

    Marked as helpful
    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