Design comparison
Community feedback
- @StroudyPosted 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…
- I would put these into a
<ul> <li>
, and the text should be wrapped with a<a>
so it is accessible with a keyboard using the tab key, Unlike a<button>
or a<div>
not intended for links.
<a href="#" class="btn">GitHub</a> <a href="#" class="btn">Frontend Mentor</a> <a href="#" class="btn">LinkedIn</a> <a href="#" class="btn">Twitter</a> <a href="#" class="btn">Instagram</a> </div>
-
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. -
Using a full modern CSS reset is beneficial because it removes default browser styling, creating a consistent starting point for your design across all browsers. It helps avoid unexpected layout issues and makes your styles more predictable, ensuring a uniform appearance on different devices and platforms, check out this site for a Full modern reset
-
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.
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! 🌟
0 - I would put these into a
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