Skip to content
Submitted 3 months ago

Responsive Blog Preview Card

sj•100
@subjectiverealityy
A solution to the Blog preview card challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What challenges did you encounter, and how did you overcome them?

When I was pushing to Git, I kept making mistakes on the README.md file and had to keep repeating the process of git add, git commit and git push. I have now gotten it to read the way I want it to. The problems originated from using the wrong file paths for the README.md file and my project's screenshot initially.

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Kamran Kiani•2,780
    @kaamiik

    Hi. Some notes for your code:

    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 <img> tag you need alt text to describe the image. Although for decorative and avatar images You need to add an empty alt="" because there is no information in the photo. The point is you have to use alt.
    • Follow proper heading hierarchy:
      • Each page should have one <h1>
      • For components that are part of a larger page, use <h2> instead
      • This maintains proper document structure while reflecting component hierarchy
    • You do not need to wrap the person name into a <span>. Simply use a p tag.

    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;
}

    This ensures content can expand beyond viewport height

    • Avoid fixed widths and height for text containers:
      • Remove width: 384px and height: 522px from .wrapper
      • 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
    • Follow mobile-first approach:
      • Start with mobile styles as the default
      • Use min-width in media queries
      • Use em units for breakpoints

    Example media query:

    @media (min-width: 40em) {
  /* Desktop styles */
}
  • Stash443•120
    @Stash443

    The solution was well built, as well as the responsive(media query) part was well structured and understandable. I don't see any improvements that need to be implemented here. Well done.

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