Design comparison
SolutionDesign
Community feedback
- @kanishkasubashPosted about 1 year ago
Hello there 👋. Congratulations on completing the challenge!
Your solution looks great, and you've done a fantastic job overall! However, here are some small suggestions after taking a look at your code to make it even better:
HTML :
- The
<main>
element should wrap around the entire component. Use semantic elements such as<main>
and<footer>
to improve accessibility and organization of your page. - Always avoid skipping heading levels; Starting with
<h1>
and working your way down the heading levels<h2>
,<h3>
etc. helps ensure that your document has a clear and consistent hierarchy. Source
CSS
- For proper centering, you use Flexbox on the
div
element with class.flex
. However, to ensure it's always centered vertically, it's essential to addmin-height: 100vh
andjustify-content: center
. This makes sure that your content is always centered, regardless of the screen size.
.flex { height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; }
I hope you find this helpful! 😄 Keep up the great work! 👍
🖥️Happy coding!
Marked as helpful0@Kateryna4715Posted about 1 year ago@kanishkasubash Thanks a lot for the feedback! I will try not to make the same mistakes next time :)
0 - The
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