First Challenge! Completed with the Handy Flexbox
Design comparison
Solution retrospective
Best Practices question: I used pixel values for everything because it appeared that the QR code content wouldn't change with the size of the viewport. Is there anything wrong with this approach? Should I use some other unit instead?
Community feedback
- @correlucasPosted about 2 years ago
👾Hello Jordan, Congratulations on completing this challenge!
1.Add the correct size to avoid the container growing more than it should. In this case the QR CODE component size is
max-width: 320px
.2.You’ve used
<div>
to wrap the card container, in this case you need to use<main>
since this is the main block of this page.3.You’ve used
px
as the unit for sizes but the problem with pixels is that its not optimized for multiple devices and screens. So a good fit its to userem
orem
that have a better performance and make your site more accessible between different screen sizes and devices.REM
andEM
does not just apply to font size, but to all sizes as well.✌️ I hope this helps you and happy coding!
Marked as helpful0 - @UrbanskiDevPosted about 2 years ago
Hello Jordan Kisiel !
Congratulation for finishing this project
To answer your question, there is nothing with using pixel values everywhere, but it is not the best units to use for every properties.
I have some links to help you learn more about the subject : -Medium CSS Which units to use
I hope it helps you to answer your question
Marked as helpful0 - @AyoifePosted about 2 years ago
Wow!!, This is the first solution for this challenge I've seen that matches the design perfectly and you did it without Figma right?!!, Nice work!
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