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)