Design comparison
Community feedback
- @MH-SunShinePosted about 2 months ago
- Using semantic html tags to organize the solution was a clever idea, I really liked it.
- In the CSS file, it's better to import the font family link. Also, specifying the flex direction will be much helpful. I recently learned that using max and min width instead of just using width property will help in the website responsiveness.
- Please consider adding this in every single project you will work on: *{ padding: 0; margin: 0; box-sizing: border box; }
You did a great job, keep going :)
Marked as helpful0 - @StroudyPosted about 2 months ago
Awesome job tackling this challenge! You’re doing amazing, and I wanted to share a couple of suggestions that might help refine your approach…
-
You have 2
body
elements in your HTML this does not work and you should remove the one in the middle because everything should be contained inside the body, -
Using a
<main>
tag inside the<body>
of your HTML is a best practice because it clearly identifies the main content of your page. This helps with accessibility and improves how search engines understand your content. -
Developers should avoid using pixels (
px
) because they are a fixed size and don't scale well on different devices. Instead, userem
orem
, which are relative units that adjust based on user settings, making your design more flexible, responsive, and accessible. For more information check out this, Why font-size must NEVER be in pixels or this video by Kevin Powell CSS em and rem explained.- Another great resource for px to rem converter. -
Using
max-width: 100%
ormin-width: 100%
is more responsive than justwidth: 100%
because they allow elements to adjust better to different screen sizes. To learn more, check out this article: responsive-meaning. -
Line height is usually unitless to scale proportionally with the font size, keeping text readable across different devices. Best practice is to use a unitless value like
1.5
for flexibility. Avoid using fixed units likepx
or%
, as they don't adapt well to changes in font size or layout.
You’re doing fantastic! I hope these tips help you as you continue your coding journey. Stay curious and keep experimenting—every challenge is an opportunity to learn. Have fun, and keep coding with confidence! 🌟
Marked as helpful0 -
- @MohneeshRautelaPosted about 2 months ago
Your code looks well structured.
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