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

#webdev #programming #javascript #frontendchallenge

🚀 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)