Skip to content
Submitted 27 days ago

Mentor blog preview card solution in CSS (almost Pixel perfect)

Karen•20
@karenhim
A solution to the Blog preview card challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

I am able to recognize which margin will collapse to make it pixel perfect according to Figma.

What challenges did you encounter, and how did you overcome them?
  1. The image was broken at first, but I added ./ and now it works normally.
  2. Centering the card was a bit challenging, since I haven't yet learned flexbox.
What specific areas of your project would you like help with?
  1. Do my HTML semantic tags improve accessibility?
  2. Sometimes margins and spacing are all over the place, and the code becomes messy.

Any review would be appreciated!

Code
Loading...

Please log in to post a comment

Log in

Community feedback

  • Harsh Kumar•3,410
    @thisisharsh7

    👏 Great work on the Blog Preview Card!

    What you did well:

    • Nice job recognizing margin collapsing and aligning with the Figma design.
    • Semantic structure is mostly solid — using <main>, <strong>, and <h2> helps with accessibility.
    • The design is responsive and scales well on different devices.

    Suggestions for Improvement:

    1. HTML:

      • The img tag for the thumbnail has two src attributes. Remove src="thumbnail" — it’s invalid HTML.
      • Consider wrapping Published 21 Dec 2023 in a <p> or <time> element for better semantics.
      • Use an <article> tag around .card for improved accessibility and structure.

    2. CSS:

      • To improve spacing control, consider using utility classes or a spacing scale system for consistency.

        Two ways to do this:

        • Manual scale (in plain CSS):

          :root {
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
}

          Then use:

          margin: var(--space-lg);

        • Utility framework (like Tailwind CSS):
          Tailwind has a built-in spacing scale like p-4, m-6, etc. for consistent spacing.

    Overall: Clean work and well-structured! Keep it up! 🚀

    Marked as helpful

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