E-commerce Project - CSS Practice

E-commerce Product Page Project

Build a product page with image gallery, product details, reviews, and related products.

Project Overview

This project will guide you through creating a modern, responsive e-commerce product page using HTML and CSS. You'll learn to structure product details, galleries, and review sections.

Product image gallery
Product details and pricing
Review section with star ratings
Related products carousel

Estimated Time

Intermediate: 2-3 hours | Advanced: 1-2 hours

Difficulty Level: Intermediate

Step-by-Step Implementation

1 Create the HTML Structure

HTML Example

<div class="product-page">
    <div class="product-gallery">
        <img src="product-main.jpg" alt="Product Main">
        <div class="thumbnails">
            <img src="thumb1.jpg" alt="Thumb 1">
            <img src="thumb2.jpg" alt="Thumb 2">
        </div>
    </div>
    <div class="product-details">
        <h2>Product Name</h2>
        <p class="price">$99.99</p>
        <p>Short product description goes here.</p>
        <button class="add-to-cart">Add to Cart</button>
    </div>
    <div class="product-reviews">
        <h3>Reviews</h3>
        <div class="review">
            <span class="stars">★★★★★</span>
            <p>Great product!</p>
        </div>
    </div>
    <div class="related-products">
        <h3>Related Products</h3>
        <div class="related-grid">
            <div class="related-item">...</div>
        </div>
    </div>
</div>

2 Add CSS for Layout & Design

Basic CSS Example

.product-page {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    max-width: 1100px;
    margin: 2rem auto;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    padding: 2rem;
}
.product-gallery img {
    width: 100%;
    border-radius: 8px;
}
.thumbnails {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}
.thumbnails img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 6px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border 0.2s;
}
.thumbnails img:hover {
    border: 2px solid #667eea;
}
.product-details {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.price {
    color: #28a745;
    font-size: 1.5rem;
    font-weight: bold;
}
.add-to-cart {
    background: linear-gradient(90deg, #667eea, #764ba2);
    color: white;
    border: none;
    padding: 0.75rem 2rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}
.add-to-cart:hover {
    background: #764ba2;
}
.product-reviews {
    grid-column: 1 / -1;
    margin-top: 2rem;
}
.stars {
    color: #ffc107;
    font-size: 1.2rem;
}
.related-products {
    grid-column: 1 / -1;
    margin-top: 2rem;
}
.related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}
.related-item {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
}
@media (max-width: 900px) {
    .product-page {
        grid-template-columns: 1fr;
        padding: 1rem;
    }
}

3 Add Interactivity (JS)

Gallery Thumbnail Switch (JS)

const mainImg = document.querySelector('.product-gallery img');
const thumbs = document.querySelectorAll('.thumbnails img');
thumbs.forEach(thumb => {
    thumb.addEventListener('click', () => {
        mainImg.src = thumb.src;
    });
});

4 Test Responsiveness & Accessibility

                    Checklist
                    Test on mobile, tablet, and desktop
Check keyboard navigation and focus states
Use semantic HTML for product details
Ensure color contrast is accessible
Validate your HTML and CSS

                