Submitted almost 3 years ago

QR code component

warya•30

@idirieh

A solution to the QR code component challenge

Preview Code

Solution retrospective

All feedback is welcome, Thank you

Code

Please log in to post a comment

Community feedback

Lucas 👾•104,160
@correlucas
Posted almost 3 years ago
👾Hello @idirieh, congratulations for your new solution!

Your solution is fine, the QR Code component design its done, you've applied a media query but its not necesary since your component is fully responsive.

Even the code is working, but I can say you that you can reduce the amount of <div> used, for this challenge all you need is a single block to hold all the content (img, h1 and p). You can keep everything inside <main> and remove all the other additional divs that unnecessary in this case.

Here’s a minimal html structure for this challenge:
```
<body>
<main> or <section> or <div> (not recommended)
<img>
<h1></h1>
<p></p>
</main>
</body>
```
✌️ I hope this helps you and happy coding!
Marked as helpful
romila•3,550
@romila2003
Posted almost 3 years ago
Hi Warya,

Welcome to the frontendmentor community and congratulations 🎉 for completing this challenge, it was a great attempt. The card looks great however there are some issues I want to address.
1. It is best practice to wrap the main content within the main tag which would ensure that your content is wrapped within the correct landmarks e.g. <main class="container"></main>
2. You should also wrap the footer within the footer tag e.g. <footer class="attribution"></footer>
3. Instead of using the margin to center the card, you can use the flexbox property to centre the card e.g.
```
body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background-color: var(--neutral-color-100);
  flex-direction: column;
}
```
I added the flex-direction property since you have a footer and it would be aligned under the card, with the flex-direction property.

Also, instead of using media queries, you can keep the same width from your mobile screen as the card's actual width.

Overall, great attempt and wish you the best for your future projects so keep coding 👍.
Marked as helpful

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