Qr-code component using CSS&HTML

Solution retrospective
This is my first attempt, so please comment.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @correlucas
👾Hello Nimesh, 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:
1.Replace the
div
with<main>
(every page should have a main landmark and also a main h1 heading) and add a margin of aroundmargin: 20px
to avoid the card touching the screen edges while it scales down.2.A best practice to have all the image inside the container scaling and respecting the size of the container, you need to add
max-width: 100%
and add alsoobject-fit: cover
to make the image auto-crop when resizing inside the column:img { display: block; object-fit: cover; max-width: 100%; }
3.Use a CSS reset to avoid all the problems you can have with the default CSS setup, removing all margins, making the images easier to work, see the article below where you can copy and paste this css code cheatsheet: https://piccalil.li/blog/a-modern-css-reset/
✌️ 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