Design comparison
Solution retrospective
I am a newbie in HTML and CSS. So, it was hard to find they right way to start. I was trying to use non popular methods but failed. After that I searched for possible way and found FLEX
solution. I read more about this function and finally did it.
Despite it is the first challenge, it was really hard.
Community feedback
- @correlucasPosted about 2 years ago
๐พHi @Masunsa, congratulations on your solution!๐ Welcome to the Frontend Mentor Coding Community!
Great solution and a great start! From what I saw youโre on the right track. Iโve few suggestions for you that you can consider adding to your code:
- A best practice to have all the images 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%; }
- 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. - Add a margin of around
margin: 20px
to avoid the card touching the screen edges while it scales down. - Use relative units as
rem
orem
instead ofpx
to improve your performance by resizing fonts between different screens and devices. These units are better to make your website more accessible. REM does not just apply to font size, but to all sizes as well.
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 helpful0@MasunsaPosted about 2 years ago@correlucas Thank you. I really appreciate your feedback. I will try to use more direct selectors instead of using classes.
0 - A best practice to have all the images inside the container scaling and respecting the size of the container, you need to add
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