qr-code-component using HTML CSS

Solution retrospective
Any advice will be good to me.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @correlucas
👾Hello Adrian, congratulations for your new solution!
Great start and great first solution! You’ve done really good work here putting everything together, I’ve some suggestions you can consider applying to your code:
Your component is done and the code is working, but the html markup/structure can be reduced by removing unnecessary divs, all you need is a single
<main>
or<div>
to keep all the content inside, and nothing more. The ideal structure is thediv
and only the image, heading and paragraph.Instead of using this long structure, you can remove some divs and clean your code:
<body> <main class="card" aria-label="Qr card" > <img src="./img/image-qr-code.png" alt="qr code"> <div class="caption"> <h1>Improve your front-end skills by building projects</h1> <p> Scan the QR code to visit Frontend Mentor and take your coding skills to the next level </p> </div> </main> </body>
Here’s a minimal html structure for this challenge:
<body> <main> <img src="./images/image-qr-code.png" alt="Qr Code Image" > <h1>Improve your front-end skills by building projects</h1> <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p> </main> </body>
✌️ I hope this helps you and happy 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