My second project, easier than before.
Some advices are welcome π.
@VCarames
Posted
Hey, some suggestions to improve you code:
Change the width: 325px; to max-width: 325px in your **.qr-card ** to make it responsive.
The Alt Tag description for the QR image needs to be improved upon. Its needs to tell screen reader users what it is and where it will take them to when they scan it.
Happy Coding! π»π
@correlucas
Posted
πΎHi @EidrianMax, congratulations on your solution!
Iβve few suggestions for you that you can consider adding to your code:
Your solution is great and the code is working, but the HTML 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 the div and only the image, heading, and paragraph.
Hereβs one example to show can be cleaner this HTML structure:
<body>
<main>
<img src="./images/image-qr-code.png" alt="QR Code Frontend Mentor" >
<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>
To reduce the CSS you can use the direct selector for each element instead of using class this way you have a code even cleaner, for example, you can select everything using the direct selector for (img, h1, and p, main).
Here's my solution for this challenge if you wants to see how I build it: https://www.frontendmentor.io/solutions/qr-code-component-vanilla-cs-js-darklight-mode-nS2aOYYsJR
βοΈ I hope this helps you and happy coding!
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
