DEV Community

Cover image for Building a Clean Blog Preview Card with Just HTML & CSS
Vijay Kumar
Vijay Kumar

Posted on

Building a Clean Blog Preview Card with Just HTML & CSS

๐Ÿš€ Introduction

Frontend Mentor offers amazing challenges to sharpen your frontend skills, and I recently took on a simple yet effective one โ€” the Blog Preview Card.

At first glance, it looks like a basic card layout, but itโ€™s a great opportunity to practice clean, semantic HTML and well-organized CSS. No JavaScript or frameworks โ€” just HTML and CSS doing all the work.

In this post, Iโ€™ll walk you through what I built, how I approached it, and what I learned along the way.


๐ŸŽฏ The Challenge

This challenge came from Frontend Mentor, which provides developers with real-world designs and style guides to recreate.

Goal:
Build a responsive card component that displays a blog preview, using the provided design specs.

Tools Used:


๐Ÿ“ Project Structure

blog-preview-card/
โ”œโ”€โ”€ index.html
โ””โ”€โ”€ style.css
Enter fullscreen mode Exit fullscreen mode

Simple structure. No frameworks, no build tools โ€” just good old HTML and CSS.


๐Ÿ”ง HTML Breakdown

Here's the base structure of the component:

<div class="card">
  <img src="illustration-article.svg" alt="Article illustration" class="card-image" />
  <div class="card-body">
    <p class="category">Learning</p>
    <h2 class="title">HTML & CSS Foundations</h2>
    <p class="description">
      These languages are the backbone of every website, defining structure, content, and presentation.
    </p>
    <div class="author">
      <img src="avatar.webp" alt="Author" class="author-img" />
      <span class="author-name">Greg Hooper</span>
    </div>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

Itโ€™s all semantic โ€” with headings, paragraphs, and image alt text for accessibility.


๐ŸŽจ CSS Highlights

I used Flexbox and basic utility styles to align and space content.

.card {
  max-width: 350px;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  font-family: 'Figtree', sans-serif;
}

.card-image {
  width: 100%;
  display: block;
  border-bottom: 1px solid #eee;
}

.card-body {
  padding: 20px;
}

.category {
  background: #f4d04e;
  color: #000;
  display: inline-block;
  padding: 4px 12px;
  font-weight: bold;
  border-radius: 4px;
  font-size: 14px;
  margin-bottom: 12px;
}

.title {
  font-size: 20px;
  font-weight: 800;
  margin: 10px 0;
  cursor: pointer;
}

.title:hover {
  color: #f4d04e;
}

.description {
  font-size: 14px;
  color: #666;
  margin-bottom: 20px;
}

.author {
  display: flex;
  align-items: center;
  gap: 10px;
}

.author-img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}
Enter fullscreen mode Exit fullscreen mode

Responsive layout is handled naturally with the card's fixed width and flex structure. You could easily add a media query for smaller screens if needed.


๐ŸŽฅ Final Result

Hereโ€™s a short video demo of the finished card:

๐ŸŽฌ Watch the video

Itโ€™s simple, responsive, and matches the original design closely.


๐Ÿ“š What I Learned

  • How subtle UI elements (spacing, hover states) really improve polish
  • Better understanding of semantic HTML and how it helps accessibility
  • Practiced organizing my CSS for readability and reusability
  • Clean designs donโ€™t require complicated tools โ€” just precision and attention to detail

๐Ÿง  Wrap-Up

Even the smallest challenges can teach you a lot. This blog card was a great warm-up, and Iโ€™ll be moving on to more advanced Frontend Mentor challenges next โ€” possibly adding animations, JavaScript, or using frameworks like React.

If youโ€™re starting out in frontend or just want to improve your HTML/CSS game, I highly recommend these challenges.

Would love to hear your thoughts or feedback!


๐Ÿ”— Links

Top comments (0)