Skip to content
Submitted over 2 years ago

QR code component coding using CSS HTML and a bit of SASS

Chijioke Ihediohaā€¢50
@CEE-AI
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

Redone as suggested, Thank you @denielden and @enggsuraj. I can even get better... more suggestions are appreciated, thanks again.

Community feedback

  • Travolgi šŸ•ā€¢31,400
    @denieldenPosted over 2 years ago

    Hi Chijioke, great work on this challenge! šŸ˜‰

    Here are a few tips for improve your code:

    • add main tag and wrap the card for improve the Accessibility
    • remove all margin from body
    • after, add min-height: 100vh 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

    Overall you did well šŸ˜ Hope this help!

    Marked as helpful
    0
    Chijioke Ihediohaā€¢50
    @CEE-AIPosted over 2 years ago

    @denielden Deniel Den, Thanks for the corrections and suggestions, I find them super helpful, thank you. Please can you further expatiate on the first suggestion: add main tag and wrap the card to improve accessibility? thank you.

    1
    Travolgi šŸ•ā€¢31,400
    @denieldenPosted over 2 years ago

    @CEE-AI You are welcome! Sure, Read here. Wrap card like this:

    <body>
   <main>
        <div class="card">
             .... card content
        </card>
   </main>
</body>
    0
    Chijioke Ihediohaā€¢50
    @CEE-AIPosted over 2 years ago

    @denielden Thank you, super helpful

    1
  • suraj gehlotā€¢180
    @enggsurajPosted over 2 years ago

    Instead of adding margin-top:100px in body

    Add

    body { background: hsl(212, 45%, 89%); display: flex; /* margin-top: 100px; */ justify-content: center; align-items: center; height: 100vh; }

    To perfectly center the container šŸ˜Š

    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