Design comparison
Solution retrospective
Hi folks, I have created this QR component with HTML and CSS. Your feedback is appreciated.
Thanks.
Community feedback
- @correlucasPosted about 2 years ago
๐พHello Rochak Pandey, Congratulations on completing this challenge!
Iโve few suggestions for you that you can consider adding to your code:
1.Use
<main>
instead of a simple<div>
this way you improve the semantics and accessibility showing which is the main block of content on this page. Remember that every page should have a<main>
block and that<div>
doesn't have any semantic meaning.2.The main heading has the tag
<h2>
, in this case, you should replace it with<h1>
since this heading is the main title on this page. Remember that every page should have one<h1>
to declare which is the most important title and that you should follow the hierarchy using the heading sequence(h1, h2, h3, h4, h5)
and never jump a level.3.Since your html structure is already minimal, 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).4.Add a margin of around
margin: 20px
to avoid the card touching the screen edges while it scales down.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!
Marked as helpful1@pandeyrochakPosted about 2 years ago@correlucas Thank you so much for your valuable suggestions. ๐ I'll update the changes. Really liked the dark mode toggle you've added to your component.
0
Please log in to post a comment
Log in with GitHubJoin 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