
Design comparison
Community feedback
- @alaa-mekibesPosted about 2 months ago
Well done 🎉
-
Use
min-height: 100vh;
inside thebody
to get full-screen. -
Use semantic HTML elements for better structure and accessibility. For example:
<body> <main> <!-- Your code --> </main> </body>
- Use css variables to improved maintainability like this:
:root { --bg-color: hsl(210, 46%, 95%); /* Add your other colors here */ } body { background-color: var(--bg-color); /* Other properties */ }
- Avoid Using px Unless Necessary
Use relative units like rem or em for sizing instead of px. This ensures better scalability and responsiveness.
More Info:
Rem in CSS: Understanding and Using rem Units
- Use Only One <h1> Per Page
Maintain a proper heading structure, using <h1>, <h2>, and <h3> in a hierarchical manner. This improves both organization and SEO.
- Change the font family. All detail are in guide readme.
Amazing effort, , continue your great work and stay motivated!
1@muhamed453Posted about 2 months ago@alaa-mekibes Thank you for the detailed feedback and helpful suggestions! I'll implement these changes to improve my code structure, accessibility, and maintainability. I really appreciate your support and encouragement. I'll keep working hard and stay motivated!
1 -
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