Design comparison
SolutionDesign
Solution retrospective
Probably overdoing it with the flex usage... It works though. Open to any feedback.
Community feedback
- @UnkookerinhoPosted over 1 year ago
Hi Roeeka! 👋 Congratulations on succesfully finishing challange! 🎉
Your flex usage looks good to me! There are some other things that you could improve in your code:
- Instead of using id's it's better to use classes. It is far better practice, because with id you can target only one element at the time, which generates longer and less readable codes. With classes you can target few elements at once, and that is really useful in lot of circumstances.
- Instead of using div for everything you should try semantic HTML5 markup, which is a lot more readable and easier to work with. You will have sections like main, section or footer instead bunch of divs everywhere. You can read more about it there - https://developer.mozilla.org/en-US/docs/Glossary/Semantics
- Instead of setting up width and height of body to 100%, you can use min-width and min-height, because it causes problems on mobile where screen is much higher and cuts off content of the page. You would then need to change min-height of main container to 100vh, so it covers whole screen. In my projects I put all of my content directly into the body and center it instead of making seperate container for this task, set
min-height: 100vh;
and center everything with flex, everything on body. Then you can comfortably work on main content of your page which is nicely centered. You can also usemargin: auto
on that main element, so .attribution is pushed to bottom of the page.
I hope you will find my feedback helpful and I wish you happy coding! 😃 Keep up your great work!
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