Frontend Mentor | QR code component coding using CSS HTML and a bit of SASS coding challenge solution

Community feedback

Travolgi 🍕• 31,420

@denielden

Posted 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

Chijioke Ihedioha• 50

@CEE-AI

Posted 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.

Travolgi 🍕• 31,420

@denielden

Posted 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>

Chijioke Ihedioha• 50

@CEE-AI

Posted over 2 years ago

@denielden Thank you, super helpful

suraj gehlot• 180

@enggsuraj

Posted 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 😊

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

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community