
Design comparison
Community feedback
- @gmagnenatPosted about 2 months ago
Hi,
Your project is well-structured and functional, but there are some improvements you can make to enhance its accessibility, maintainability, and best practices.
HTML & Accessibility Improvements
-
Load stylesheet after Google Fonts Link your stylesheet after the Google Fonts link in your
<head>
to prevent a flash of unstyled text (FOUT). -
Duplicate stylesheet link You have two links pointing to the same stylesheet in your
<head>
. Remove the duplicate to avoid unnecessary requests and potential conflicts. -
Missing
<main>
landmark A<main>
element should wrap the primary content of your page for better accessibility and screen reader navigation. This helps assistive technologies understand the structure of your page. -
Use
<button>
vs<a>
correctly Buttons should be used to trigger actions (e.g., submitting forms, opening modals), while links should be used for navigation to different pages. Use the correct element for each purpose. -
Unnecessary
<section>
element A<section>
should be used when it groups multiple related content blocks and includes a heading (e.g.,<h2>
). Since your content does not require this, a simple<div>
is more appropriate. -
Incorrect file path for stylesheet Your stylesheet is currently inside the
/images
folder. It’s better to place it in a/css
folder or keep it at the root near your HTML file for better organization.
CSS Best Practices
-
Missing modern CSS reset A CSS reset helps normalize styles across different browsers. Consider using Andy Bell’s or Josh Comeau’s modern reset for consistency in styling.
-
Avoid styling HTML elements directly Only apply global styles to HTML elements if they are part of a reset. Instead, use class-based styles to keep styles modular and reusable. This makes your styles more maintainable in larger projects.
-
Use
rem
in media queries Avoid usingpx
in media queries since it does not respect users’ custom browser font sizes. Usingrem
improves accessibility and adaptability, especially for users who modify their browser’s default font size.
These changes will improve your project’s accessibility, maintainability, and scalability. Following these best practices will also make your codebase more structured and easier to work with in the long run. Let me know if you need clarification or further guidance!
Happy coding! 🚀
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