Skip to content
Submitted over 2 years ago

Vanilla CSS and HTML Solution to the QR Code Component Challenge

Nahri Jae•30
@JaeZzZ
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

Hello, everyone! I'm unsure of positioning and margin best practices, so if you have any advice for me I would be super appreciative! Also, let me know if my code could be optimized. Looking forward to growing and getting better. Thank you :)

Community feedback

  • egai•30
    @egaiosoworPosted over 2 years ago

    Went through your source code, your HTML is clean and well structured. In your style sheet, I noticed some issues. I don’t feel it’s a good practice making use of so much positioning. On your body, you can just use display: grid and then place-items: center. It will place your main in the center of the page. Give your figure a width of about 80%, then give your figure image a 100% width, all these help eliminate the excessive use of positioning.

    Marked as helpful
    0
    Nahri Jae•30
    @JaeZzZPosted over 2 years ago

    @egaiosowor Wow, thank you, Egai! I'll remember your advice and try again.

    1
  • egai•30
    @egaiosoworPosted over 2 years ago

    You’re welcome 👍🏾

    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