Introduction
A product page is one of the most important components of any eCommerce website. It helps users understand the product, view details, and take action like purchasing.
In this step-by-step project, you will learn how to build a clean, modern, and responsive product page using HTML & CSS.
What You’ll Learn
- HTML structure
- CSS layout
- Flexbox
- Button styling
- Basic responsiveness
- Clean product UI
Project Goal
We will create:
- Product image (left)
- Product details (right)
- Price
- Description
- Add to Cart button
- Responsive layout
Simple. Clean. Professional.
This layout is commonly used in modern eCommerce websites to display products in a clean and user-friendly way.
📝 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Product Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="product-container">
<div class="product-image">
<img src="https://via.placeholder.com/400" alt="Product Image">
</div>
<div class="product-details">
<h1>Wireless Headphones</h1>
<p class="price">$79.99</p>
<p class="description">
Experience high-quality sound with noise cancellation and
long battery life. Perfect for music lovers and professionals.
</p>
<button class="btn">Add to Cart</button>
</div>
</div>
</body>
</html>
🎨 style.css
body {
font-family: Arial, sans-serif;
margin: 0;
background-color: #f4f4f4;
}
.product-container {
display: flex;
max-width: 900px;
margin: 60px auto;
background: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 5px 20px rgba(0,0,0,0.1);
gap: 40px;
}
.product-image img {
width: 100%;
border-radius: 10px;
}
.product-image {
flex: 1;
}
.product-details {
flex: 1;
}
.price {
font-size: 24px;
color: #0077ff;
font-weight: bold;
}
.description {
margin: 20px 0;
line-height: 1.6;
color: #555;
}
.btn {
padding: 12px 25px;
background: #0077ff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
.btn:hover {
background: #005ecb;
}
/* Responsive */
@media (max-width: 768px) {
.product-container {
flex-direction: column;
text-align: center;
}
}
🧩 Step-by-Step Explanation
Step 1: Create Product Structure
The layout is divided into two sections:
- Product image
- Product details
👉 This creates a clean product layout.
Step 2: Use Flexbox for Layout
The .product-container uses Flexbox:
- Aligns image and details side by side
- Makes layout flexible and responsive
Step 3: Style Product Details
- Product name is highlighted
- Price is styled with bold color
- Description is easy to read
Step 4: Add Call-to-Action Button
- “Add to Cart” button added
- Styled with background color and hover effect
👉 Encourages user action.
Step 5: Make Layout Responsive
Using media query:
- Layout becomes vertical on small screens
- Improves mobile experience
🛠️ Enhancing the Product Page (Advanced Improvements)
Now that you have created a basic product page, you can improve it further by adding more real-world features.
- Add Product Ratings
You can include star ratings to show user feedback. This helps build trust and improves user experience. - Add Quantity Selector
Allow users to select quantity before adding to cart using an input field. - Add Product Gallery
Instead of a single image, you can add multiple images with thumbnails. - Improve Button Interaction
Add transitions and hover animations to make the UI more interactive. - Add Discount or Offer Badge
Show discount labels like “20% OFF” to attract user attention.
These enhancements will make your project closer to real eCommerce websites.
🎯 What You Can Modify in This Project
- Change product image and details
- Add multiple product images (gallery)
- Include ratings and reviews section
- Add discount or offer badges
- Improve button styles and colors
- Add quantity selector
💡 Real-World Use of Product Pages
Product pages are used in:
- eCommerce websites
- Online stores
- Digital product platforms
A well-designed product page improves user experience and increases conversions.
🚀 Final Output Overview
In this project, we created a simple and clean product page layout using HTML and CSS.
The layout includes:
– Product image on the left
– Product details on the right
– Price and description
– Call-to-action button
This type of layout is widely used in real-world eCommerce websites and can be extended further by adding features like product gallery, reviews, and dynamic cart functionality.
🧠 What You Learned
- Flexbox layout
- Responsive design using media queries
- Button hover effects
- Box shadow and modern UI
- Clean layout structure
⚡ Pro Tips
- Highlight price clearly
- Use strong CTA buttons
- Keep layout clean
- Use high-quality product images
🔗 Related Posts
- Modern Landing Page Using HTML & CSS
- Blog Layout Using HTML & CSS
- Flexbox Complete Guide
- Responsive Design in CSS