Skip to content
Submitted over 2 years ago

QR Code Component using CSS Grid

omar saleh•150
@omarsaleh11
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 do you think?

Community feedback

  • Account deleted

    Hey Omar, congratulations on completing the challenge! You did a great job 😉

    Let me give you some little tips for optimizing your code:

    • add main tag and wrap the card for improve the Accessibility
    • remove all unnecessary code, the less you write the better as well as being clearer: for example the div container of image
    • remove all margin from .container class
    • use flexbox to the body to center the card. Read here -> flex guide
    • after, add min-height: 100vh and padding:0 to body because Flexbox aligns child items to the size of the parent container
    • instead of using px use relative units of measurement like rem -> read here

    Hope this help! Happy coding 😁 by Travolgi

    Marked as helpful
    1
  • Lucas 👾•104,400
    @correlucasPosted over 2 years ago

    👾 Hello Omar, congratulations for your solution!

    You're the first person I saw that have used grid for this challenge, this is nice!

    Your solution is okay, the only thing you miss is the component alignment, see the code below to see how I've aligned your component just adding display: grid; and min-height: 100vh; inside the body:

        display: grid;
    min-height: 100vh;
    /* padding: 20px; */
    text-rendering: optimizeSpeed;
    overflow: hidden;
    line-height: 1.2;
    justify-items: center;
    align-items: center;
}

    Happy coding and I hope this helps you!

    Marked as helpful
    1
    omar saleh•150
    @omarsaleh11Posted about 2 years ago

    @correlucas ty, @correlucas on the advise

    0
  • Prince Roy•1,210
    @iprinceroyyPosted over 2 years ago

    That's excellent work @omarsaleh11. You need to focus on some key points here:-

    1. There should be one heading tag on a web page, if there is no heading element requirement, then set its font size to 0. h1{ font-size: 0; }
    2. The content should be wrapped inside the main landmark to avoid accessibility issues. Like this <body><main>your content goes here......</main></body>.

    Hope it adds to your learning. 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