Skip to content
Submitted over 3 years ago

QR Code Component Challenge

Jason Hamrick•30
@JasonAHamrick
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

This was my first attempt at any kind of challenge like this. I'm fairly pleased with the result, but my solution is almost certainly bloated. I struggled with positioning the card and footer, due to not yet having a great understanding of relative and absolute position attributes. I was also overly eager with my use of custom properties for the colors. Having no prior experience, I thought they would be far more useful. I'm very interested in any feedback I can get from the community. Thanks for checking out my solution!

Code

Please log in to post a comment

Log in

Community feedback

  • Travolgi 🍕•31,300
    @denielden

    Hi Jason, I took some time to look at your solution and you did a great job!

    Also I have some tips for improving your code:

    • add main tag and wrap the card for Accessibility
    • remove all margin, top and transform properties from card class
    • try to use flexbox to the body for center the card. Read here -> best flex guide
    • after add min-heigth: 100vh to body because Flexbox aligns to the size of the parent container
    • instead of using px try to use relative units of measurement -> read here

    Overall you did well :)

    Hope this help and happy coding!

    Marked as helpful
  • Naveen Gumaste•10,420
    @NaveenGumaste

    hay! Jason Nice work

  • Hexer•3,620
    @EmmanuelHexer

    Great work overall man.

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