Design comparison
SolutionDesign
Solution retrospective
If you have any advice to improve my solution, don't hesitate to send feedback😊.
Community feedback
- @jrleijnsePosted almost 2 years ago
Hey there! Great job completing this challenge! 🎊
I have some suggestions for your code that might interest you.
CSS 🎨:
- To make your project more responsive and adaptable (in this case as well: especially when you start building bigger and bigger projects), I would suggest to use rem instead of px. This basically means that all sizing will be calculated in relation to the root element (rem). To set the standard font-size for the root element, you can provide a font-size inside the HTML element inside your CSS. For example:
html {font-size: 15px;}.
For more information on this topic, you can read the following article: PX or REM in CSS? 📘
- An easy way to quickly and automatically center your
<main>element inside the<body>of your page, is by setting the following properties onto the<body>element inside your CSS like so:body { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; }
I hope you find my suggestions useful, and above all: the solution you provided is very good!
Keep it up and happy coding! 😃
0 - To make your project more responsive and adaptable (in this case as well: especially when you start building bigger and bigger projects), I would suggest to use rem instead of px. This basically means that all sizing will be calculated in relation to the root element (rem). To set the standard font-size for the root element, you can provide a font-size inside the HTML element inside your CSS. For example:
Please log in to post a comment
Log in with GitHub
Join 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