Skip to content
Submitted about 2 months ago

Responsive Blog Preview Card with HTML and CSS

muhamed453•60
@muhamed453
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Blog preview card
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Community feedback

  • Alaa Mekibes•1,540
    @alaa-mekibesPosted about 2 months ago

    Well done 🎉

    • Use min-height: 100vh; inside the body 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
    muhamed453•60
    @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 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