Design comparison
Solution retrospective
Feedbacks are welcome.
Having used flexbox I had expected elements to be centred but it was a little more difficult than I thought. I'm unsure whether margin: 0 auto
was the appropriate fix.
Community feedback
- @itushPosted over 1 year ago
Congratulations on completing the challenge! 🎉
Welcome to the platform! 🎉 We're thrilled to have you here and excited to see your progress 💪as you continue your front-end development journey.
Your solution looks nice to me :)
Please note that:
- To reset default browser style we use:
* { margin: 0; padding: 0; box-sizing: border-box; }
-
margin: 0 auto;
sets the top and bottom margin to 0 and the left and right margin to auto. Setting the left and right margin to auto centers the element horizontally within its container. -
You can achieve the exact same result if you use the mentioned CSS reset, remove
flex-direction: column;
&width: 15em;
from body and applywidth: 15em;
to the container.
In my projects:
- I always start with mobile-first workflow.
- I use at least one main element for a page (entire content goes into the main, if I'm not using header & footer), and avoid divs as much as possible and use section and article element wherever I can.
<body> <main> All content </main> </body>
-
I Use relative units as much as possible and avoid absolute units whenever possible.
-
I remember when I started out, I made countless mistakes and spent long hours searching for solutions. But hey, you don't need to go through the same struggles! 🙌 To help you shorten the learning curve, I recommend going through the following articles. They contain valuable insights that can make your journey smoother:
📚🔍 12 important CSS topics where I discuss about css position, z-index, box-model, flexbox, grid, media queries, mobile-first workflow, best practices etc. in a simple way.
📚🔍 11 important HTML topics where I discuss about my thought process and approach to convert a design/mock-up to HTML along with other topics.
I hope you find these resources helpful in your coding adventures! 🤞
I'm eagerly looking forward to seeing the amazing projects you'll create in the future! 🚀💻
Keep up the fantastic work and happy hacking! 💪✨
0 - @Thewatcher13Posted over 1 year ago
You have to rewrite you HTML!
HTML is a markup language and is important to use semantic html.
- You should use a main landmark element
- get rit of that div container
- that first p tag is the title of your project, the important thing, this is an H1
- The alt text is not meaningfull, imagine you are blind and the screenreader tell you "img of qr code" A qr code to where?
- Don't use ID for css selectors, it has a high specificity, use classes instead.
0 - @DarrenBerg1Posted over 1 year ago
margin: 0 auto is something that a lot of people use! This is because margin in flexbox is a bit finicky and acts weird. I have linked an article that goes a bit more in depth and explains it better!
Good luck on your future projects! https://css-tricks.com/the-peculiar-magic-of-flexbox-and-auto-margins/
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