Skip to content
Submitted about 2 years ago

QR code component using Flexbox

B33th0v3n•70
@B33th0v3n960
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

Community feedback

  • PhoenixDev22•16,950
    @PhoenixDev22Posted about 2 years ago

    Hi B33th0v3n,

    Congratulation on completing this frontend mentor challenge. Your solution looks great. I have some suggestions regarding your solution:

    • You should use <main> for the card. HTML5 landmark elements are used to improve navigation experience on your site for users of assistive technology.
    • In my opinion, the image is an important content. The alternate text is needed on this image. The alternate text should indicate where the Qr code navigate the user : like QR code to frontend mentor not describes the image.
    • Add min-height: 100vh to the body that let the body grows taller if the content outgrows the visible page instead.

    Hopefully this feedback helps.

    Marked as helpful
    1
  • Lucas 👾•104,340
    @correlucasPosted about 2 years ago

    👾Hello @B33th0v3n960, congratulations for your first solution and 😎 welcome to the Frontend Mentor Coding Community!

    Great great great start, nice solution!

    Something can be a good exercise for you is to reduce your code by removing unnecessary blocks/divs, all you need is a single <main> or <div> to keep all the content inside, and nothing more. The ideal structure is the div and only the image, heading and paragraph.

    Here’s a minimal html structure for this challenge:

    <body><div><img><h1></h1><p></p></div></body>

    Add a margin to avoid the container touching the screen edges while scaling, margin: 20px

    👋 I hope this helps you and happy coding!

    Marked as helpful
    1

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