Skip to content
Submitted about 2 months ago

3-column-preview-card-component

jamilgillani•110
@jamilgillani
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...3-column preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Community feedback

  • Gwenaël Magnenat•1,520
    @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 using px in media queries since it does not respect users’ custom browser font sizes. Using rem 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 helpful
    0

Please log in to post a comment

Log in with GitHub

Join 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