Skip to content
Submitted 28 days ago

Blog post card

evitakatrina•10
@evitakatrina
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

  • P
    Kamran Kiani•2,740
    @kaamiikPosted 28 days ago

    Hi. I see some issues in your code I wanna mention:

    HTML

    • A proper page structure inside <body> should look like this:
    <body>
  <header>...</header>
  <main>...</main>
  <footer>...</footer>
</body>

    Since this is a card component, we only need the <main> element.

    • For decorative and avatar images, use empty alt text: alt=""
    • Avoid using words like image, picture, or photo in alt descriptions
    • The "Learning" text should not be a <span> - it should be a <p> tag. The person name is a <p> tag too.
    • Elements with hover effects are considered interactive
    • If an element with hover effects navigates to a new page, wrap it in an <a> tag. Here your h2 is interactive too. So you need to wrap it inside the a tag:
    <h2><a href="#">Title Text</a></h2>

    CSS Best Practices

    • Start with a proper CSS reset (Andy Bell or Josh Comeau resets are recommended)

    • Use viewport height properly:

      /* Instead of: */
body {
  height: 100vh;
}

/* Use: */
body {
  min-height: 100vh;
}
    • Avoid fixed widths for text containers:
      • Remove width: 300px from .card
      • Use max-width for better text container adaptability
    • Use relative units:
      • rem for font-size and max-width instead of px
      • Learn more about this here
    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