Design comparison
Community feedback
- @StroudyPosted about 2 months ago
Well done on getting this far! You’re clearly putting in the effort, and it shows. Just a few things I noticed that could enhance your solution…
- You have a few things in your body that are not doing anything and you can remove them, It creates unnecessary code and potential issues,
body { /* font-size: 16px; */ Remove /* font-weight: 400; */Remove background-color: #F5D04E; display: flex; justify-content: center; align-items: center; /* flex-direction: column; */Remove /* gap: 20px; */Remove font-family: var(--font-family); }
-
This does not matter that much at this stage but something to be mindful of for SEO(Search Engine Optimisation),
<meta>
description tag missing that helps search engine determine what the page is about, Something like this<meta name="description" content="" />
-
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. -
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.
I hope you found this advice helpful! Keep up the great work, and don’t forget to dive deeper into the details. You’re doing amazing, and I can’t wait to see what you create next. Happy coding! 🚀
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