Design comparison
Solution retrospective
What should one do learn Flexbox properly? I am still not very comfortable with using Flexbox and media queries.
Community feedback
- @grace-snowPosted about 2 years ago
There are some important changes needed here
Html
- Container should be a
main
element. This is called a landmark and worth reading about to make sure you understand their use - The image is the most important content in this component. It is nit decorative. That means it needs a proper alt description like "QR Code to FrontendMentor.io"
- You should never have text in divs or spans alone. They are meaningless elements used for layout. For text you should always be using meaningful elements like heading and paragraph in this challenge
CSS
- Look up how to center a component o n the screen. In this case, your body element should have min-height 100vh along with flex or grid properties to center the component on the screen. The component should not have huge margins to try and center it
- You don't need max height on the image. Standard practice is to make images display block and max-width 100%.
- The container should not have an explicit width. Instead, use max width, so it can shrink if it needs to (like it does on my small phone screen)
- Give the card a small bit of margin so it can't hit the screen edges. Alternatively, you could give the body a little padding
- Font size should never ever be in px! Use rem. Very important
- This challenge does not need a media query
Marked as helpful2@abandonedwafflePosted about 2 years ago@grace-snow Thank you. Your feedback is much appreciated. I will keep all this points in mind and try to improve on it.
0@abandonedwafflePosted almost 2 years ago@grace-snow Hey. Thanks Grace. I have made changes to my code according to your feedback. I will keep these points on my mind from next time.
0 - Container should be a
- @AmiyahayadevPosted about 2 years ago
Your solution looks good, for best practice , use heading tags <h1>....to<h6> for any heading. try increasing the font-weight of the main heading by using a h2 or h3 instead of adding the text directly into a div. For flexbox, i found this game very helpful and i really recommend , https://flexboxfroggy.com/
Marked as helpful1 - @ralacerdaPosted about 2 years ago
Hey, great job on the solution.
If you want to learn flexbox, practice, read some articles and practice more. Flexbox can be simple, but it also has a lot of power to do complex things.
The "manual" for all web development is the MDN Web Docs, they have guides, visual examples and tips. Here is their guide to flexbox, worth a read: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox
CSSTricks also has a "visual guide" to flexbox, which is really helpful to visualize how some flex properties works: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
So here is a small challenge, try centering vertically and horizontally your
.container
div using flexbox.Marked as helpful0
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