Building the Stats Preview Card Component: A Beginner's Project

Creating visually appealing and functional components is a crucial skill for front-end developers. In this blog, I’ll share how I built a Stats Preview Card Component using HTML and CSS. This project challenged my design and responsiveness skills while teaching me some best practices.

Overview

The Stats Preview Card Component displays business insights with a clean layout, bold typography, and a visually striking image overlay. It adapts seamlessly to different screen sizes, ensuring users get a consistent experience on all devices.

Here’s the project structure at a glance:

• HTML: Semantic structure for accessibility and clarity.
• CSS: Variables, Flexbox, and media queries for styling and responsiveness.

Project Structure

The project consists of a single HTML file, a CSS stylesheet, and assets like fonts and images. Here's the folder structure:

stats-preview-card/
├── index.html
├── style.css
├── images/
│   └── image-header-desktop.jpg
└── README.md

The HTML Layout

The component is divided into two sections:

1. Text Content: Includes the heading, description, and statistics.
2. Image: A decorative image with an overlay effect.

Here’s the HTML code:

<div class="preview-card-container">
  <div class="details-container">
    <h1 class="inter-bold">
      Get <span>insights</span> that help your business grow.
    </h1>
    <p class="paragrph">
      Discover the benefits of data analytics and make better decisions
      regarding revenue, customer experience, and overall efficiency.
    </p>
    <div class="ratings">
      <div class="testimonials">
        <h3>10k+</h3>
        <p>companies</p>
      </div>
      <div class="testimonials">
        <h3>314</h3>
        <p>templates</p>
      </div>
      <div class="testimonials">
        <h3>12m+</h3>
        <p>queries</p>
      </div>
    </div>
  </div>
  <div class="image-container">
    <img src="./images/image-header-desktop.jpg" alt="business insights" />
  </div>
</div>

The use of semantic tags like <h1>, <p>, and <div> ensures better accessibility and a clear structure.

Styling with CSS

1. Using CSS Variables

To maintain consistency, I used variables for colors and fonts.

:root {
  --bg-color: hsl(233, 47%, 7%);
  --card-background: hsl(244, 38%, 16%);
  --soft-violet: hsl(277, 64%, 61%);
  --main-heading: hsl(0, 0%, 100%);
  --main-paragraph: hsla(0, 0%, 100%, 0.75);
  --stat-headings: hsla(0, 0%, 100%, 0.6);
}

1. Designing the Card

The card is styled with Flexbox for a clean, side-by-side layout.

.preview-card-container {
  display: flex;
  background-color: var(--card-background);
  color: var(--main-heading);
  width: 974px;
  height: 388px;
  border-radius: 10px;
  overflow: hidden;
}

1. Adding the Image Overlay

I added a soft violet overlay to the image using the ::before pseudo-element.

.image-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--soft-violet);
  opacity: 0.6;
  pointer-events: none;
}

1. Making It Responsive

A media query ensures the layout adjusts for smaller screens.

@media (max-width: 991px) {
  .preview-card-container {
    flex-direction: column-reverse;
    width: 290px;
    height: auto;
  }
  .details-container {
    text-align: center;
    padding: 1rem;
  }
  .ratings {
    flex-direction: column;
    align-items: center;
  }
  .image-container img {
    border-radius: 10px 10px 0 0;
  }
}

Key Challenges

Image Overlay
Using position: absolute for the overlay required careful attention to ensure it worked seamlessly with the image container.

Typography and Spacing
Balancing font sizes, line heights, and padding was critical to achieve a polished look.

Check out the live version here: https://shiny-frangollo-b13c2a.netlify.app/

Check out the entire code here: https://github.com/drishti1920/Frontend-Mentor-Challenges/tree/main/preview-card-component

Conclusion

This project was a great way to practice building responsive components with clean, reusable code. I encourage you to try this challenge to improve your HTML and CSS skills.

Happy coding! 🎉