A Simple QR Code Component Using only HTML and CSS

Solution retrospective
Hey! Started my day by building this simple QR Code Component. It took me 12 minutes to make this, which I think is not bad. Feedback is always welcome. Thank you.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @vanzasetia
Hi, Purnima Kumar! 👋
Congratulations on finishing this challenge! 🎉
You have done the challenge really fast! But, I would not recommend focusing too much on time especially when you just get started. I recommend focusing on the code quality instead.
Some more suggestions.
- I suggest putting the
attribution
outside themain
element. It is not the main content of the site. So, I would recommend wrapping theattribution
withfooter
tag inside (or swapping thediv
withfooter
).
<body> <main> page content goes here... </main> <footer class="attribution"> attribution links goes here... </footer> </body>
- I recommend improving the alternative text of the QR code by telling the users about the QR code. In this case, it will navigate the user to https://www.frontendmentor.io/ so I recommend improving the alternative text to "QR code to frontendmentor.io".
- Lastly, put all the CSS on its own file. It is best to separate the HTML and the CSS whenever possible. It may not be a big deal in this case. But, in large projects or multiple-page websites, external CSS can be reused on the entire website. Also, it makes styling easier to maintain because you only need to change the CSS file and then all pages would reflect the change.
Hope this helps. 🙂
Marked as helpful - I suggest putting the
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