DEV Community

Sathish 226
Sathish 226

Posted on

Day 2 - Session 1: Building a Product Card with HTML & CSS

#webdev #html #css #linux

Hi friends, welcome back!

Welcome to Day 2 of our web development journey. Today, we’ll build something practical: a product card — the kind you see on e-commerce sites. Along the way, we’ll explore some important CSS concepts like grid, transform, grid-template-columns, and cool*hover effects* on images.

1.What We’re Building

We’ll create:

✔ A simple product card layout.
✔ A grid that adjusts responsively.
✔ A hover effect on the product image.
✔ A smooth mouse hover scale-up effect.

2.HTML Structure

Here’s the basic markup:

<div class="product-grid">
  <div class="product-card">
    <img src="product.jpg" alt="Product Image">
    <h3>Product Name</h3>
    <p>$49.99</p>
    <button>Add to Cart</button>
  </div>
  <!-- Repeat product-card for more items -->
</div>
Enter fullscreen mode Exit fullscreen mode

3.CSS Styling

We use CSS Grid to lay out multiple product cards responsively.

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  padding: 20px;
}
Enter fullscreen mode Exit fullscreen mode

What’s happening?

• repeat(auto-fit, minmax(200px, 1fr)) → Automatically fit as many 200px-wide columns as possible, and let them expand to fill available space.
•gap → Adds space between grid items.

4.Styling the Card

.product-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  overflow: hidden;
  text-align: center;
  transition: transform 0.3s ease;
}

.product-card:hover {
  transform: scale(1.05);
}
Enter fullscreen mode Exit fullscreen mode

What’s happening?

• transition + transform: scale() → Adds a smooth zoom effect on hover.

5.Image Hover Effect

.product-card img {
  width: 100%;
  height: auto;
  transition: transform 0.3s ease;
}

.product-card img:hover {
  transform: scale(1.1);
}
Enter fullscreen mode Exit fullscreen mode

What’s happening?

• When you hover over the image, it slightly zooms in.

6.Important Topics Covered:

✔ display: grid
✔ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) → responsive layout
✔ transform: scale() → smooth hover effects
✔ transition → smooth animation
✔ Image hover → interactive, modern UI

7.Quick Recap

• Built a responsive product card grid
• Added hover effects using transform and transition
• Learned the power of grid-template-columns and CSS Grid for layouts

That’s it for Day 2!
Thanks for following along — happy coding!!!

Top comments (0)