Design comparison
Solution retrospective
My second project, easier than before.
Some advices are welcome π.
Community feedback
- @VCaramesPosted about 2 years ago
Hey, some suggestions to improve you code:
-
Change the
width: 325px;tomax-width: 325pxin 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! π»π
0 -
- @correlucasPosted about 2 years ago
πΎ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 thedivand 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
classthis 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!
0
Please log in to post a comment
Log in with GitHub
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