Responsive qr code component using pure css and html

Please log in to post a comment
Log in with GitHubCommunity feedback
- @correlucas
👾Hello Htet Arkar Ko, congratulations for your first solution! 👋 Welcome to the Frontend Mentor Coding Community!
👏 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.YOUR SOLUTION BEFORE THE REDUCTION:
<body cz-shortcut-listen="true"> <div class="card"> <div class="card-container"> <div class="img-container"> <img src="./images/image-qr-code.png" alt="frontend mentor qr code" class="image"> </div> <h3 class="card__title">Improve your front-end skills by building projects</h3> <p class="card__text">Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p> </div> </div> </body>
THE CODE REDUCED:
<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>
Here’s a good guide for writing a concise and clean code: https://altcampus.school/posts/writing-semantically-correct-and-clean-html
✌️ 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