In today’s digital age, every business relies on an e-commerce website to establish its identity. Whether you’re looking at major companies like Amazon, Flipkart, or Myntra, or a local business, all sell products on online platforms. If you’re learning web development, an e-commerce website project is the most important project for you.
In this project you will learn how to create a homepage, product grid, categories, shopping cart, wishlist and checkout system.
This is the best project for beginners to intermediate level developers as you learn HTML structure, CSS design and JavaScript interactivity all together.
In this article, we’ve provided the code for a modern e-commerce website so you can review and practice, and you can also copy-paste the ready-to-use HTML code, which includes features like responsive design, add-to-cart, wishlist, and checkout, as it teaches you HTML structure, CSS styling, and basic JavaScript functionality all in one.
Features
In this project, you will get real-world features like:
1. Responsive Navigation Bar with Search
- Logo, menu links, and search box.
- Users can easily search for products.
2. Hero Section (Homepage Banner)
- Big heading, description, and “Shop Now” button.
- Perfect for attracting visitors.
3. Product Grid Layout (More Products)
- Responsive grid which will have 8+ products.
- Every product has image, title, price, rating, add to cart button, wishlist button.
4. Discount Labels (Sale/New Tag)
- Products will display a “Sale” or “New” tag.
- Users will instantly know which product is special.
5. Shopping Cart (Slide-in Panel)
- On adding to cart the product will be added to the cart.
- Quantity increase/decrease option.
- Remove button.
- Auto total price calculation.
6. Wishlist Feature
- Users can save products to a “Wishlist.”
- Helpful for future shopping.
7. Checkout Button
- The cart contains a “Proceed to Checkout” button.
- This takes users to the next step in making a purchase.
8. Responsive Design & Hover Effects
- Perfect layout on mobile, tablet, and desktop.
- Hover animation makes the website look attractive.
Benefits of E-Commerce Website Project
1. Real-World Practice
- This project will give you experience of real e-commerce sites.
2. Resume & Portfolio Ready
- You can showcase this project on your resume and portfolio.
- You’ll have a strong advantage in interviews.
3. JavaScript Mastery
- With features like add to cart, wishlist, search filter, quantity update, you’ll learn JavaScript DOM manipulation in depth.
4. Freelancing Opportunities
- You can create similar websites for small business owners.
- This could also be a great way to start a freelancing career.
5. Confidence Boost
- Building this project boosts beginners’ confidence.
Step-by-Step Explanation of the Code
1. HTML Structure
- Navbar (logo + menu + search box)
- Hero section (banner with heading and button)
- Product section (grid with multiple products)
- Cart section (slide-in panel with items list)
- Footer (copyright)
2. CSS Design
- Responsive layout with grid system
- Attractive colors (green for cart, orange for wishlist, red for sale tag)
- Hover animation for products
3. JavaScript Functionality
- addToCart(name, price) → Adds the product to the cart.
- removeFromCart(index) → Delete the product from the cart.
- changeQty(index, +/-) → Updates the quantity.
- renderCart() → Updates the cart items and total price.
- addToWishlist(name) → Adds the product to the wishlist.
- searchProducts() → Filters products from the search box.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dharmesh E-Commerce Store</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', sans-serif; background: #f8f9fa; color: #2c3e50; }
/* Navbar */
nav { background: #1abc9c; padding: 15px 30px; display: flex; justify-content: space-between; align-items: center; color: white; flex-wrap: wrap; }
nav h2 { font-size: 1.5rem; }
nav ul { list-style: none; display: flex; flex-wrap: wrap; }
nav ul li { margin: 0 15px; }
nav ul li a { color: white; text-decoration: none; font-weight: 500; transition: 0.3s; }
nav ul li a:hover { text-decoration: underline; }
.search-box { background: white; padding: 5px 10px; border-radius: 6px; margin-top: 8px; }
.search-box input { border: none; outline: none; padding: 5px; }
/* Hero */
.hero { background: linear-gradient(135deg, #16a085, #1abc9c); color: white; text-align: center; padding: 70px 20px; }
.hero h1 { font-size: 2.6rem; margin-bottom: 15px; }
.hero p { font-size: 1.1rem; margin-bottom: 20px; }
.hero button { padding: 12px 25px; background: #fff; color: #1abc9c; border: none; border-radius: 8px; cursor: pointer; font-weight: bold; transition: 0.3s; }
.hero button:hover { background: #2c3e50; color: #fff; }
/* Products */
.products { padding: 40px 20px; }
.products h2 { text-align: center; margin-bottom: 25px; color: #16a085; }
.product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.product { background: #fff; padding: 15px; border-radius: 12px; box-shadow: 0 6px 16px rgba(0,0,0,0.1); text-align: center; transition: 0.3s; position: relative; }
.product:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.2); }
.product img { width: 100%; height: 180px; object-fit: cover; border-radius: 8px; }
.product h3 { margin: 10px 0; font-size: 1.1rem; }
.price { color: #1abc9c; font-weight: bold; font-size: 1.1rem; margin: 5px 0; }
.stars { color: gold; margin-bottom: 8px; }
.btn { background: #1abc9c; color: white; padding: 8px 12px; border: none; border-radius: 8px; cursor: pointer; transition: 0.3s; margin: 5px; }
.btn:hover { background: #16a085; }
.wishlist { background: #e67e22; }
.wishlist:hover { background: #d35400; }
.tag { position: absolute; top: 10px; left: 10px; background: #e74c3c; color: white; padding: 4px 8px; border-radius: 6px; font-size: 0.8rem; }
/* Cart */
.cart { position: fixed; right: 0; top: 0; width: 320px; height: 100%; background: #fff; box-shadow: -2px 0 10px rgba(0,0,0,0.2); padding: 20px; transform: translateX(100%); transition: 0.3s; overflow-y: auto; }
.cart.open { transform: translateX(0); }
.cart h2 { margin-bottom: 15px; }
.cart ul { list-style: none; padding: 0; }
.cart li { margin: 10px 0; display: flex; justify-content: space-between; align-items: center; }
.remove { background: #e74c3c; border: none; color: white; padding: 5px 10px; border-radius: 6px; cursor: pointer; }
.qty { display: flex; align-items: center; gap: 6px; }
.qty button { padding: 2px 6px; }
.total { margin-top: 15px; font-size: 1.2rem; font-weight: bold; }
.checkout { background: #27ae60; color: white; padding: 10px; width: 100%; border: none; border-radius: 8px; margin-top: 10px; cursor: pointer; }
.close-btn { background: #1abc9c; color: white; padding: 8px 15px; border: none; border-radius: 6px; margin-bottom: 15px; cursor: pointer; }
/* Footer */
footer { background: #1abc9c; color: white; text-align: center; padding: 15px; margin-top: 30px; }
@media(max-width: 768px) {
nav { flex-direction: column; align-items: flex-start; }
nav ul { margin-top: 10px; }
}
</style>
</head>
<body>
<!-- Navbar -->
<nav>
<h2>🛒 Dharmesh Store</h2>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#products">Products</a></li>
<li><a href="#" onclick="toggleCart()">Cart 🛍</a></li>
</ul>
<div class="search-box">
<input type="text" id="search" placeholder="Search products..." onkeyup="searchProducts()">
</div>
</nav>
<!-- Hero -->
<section class="hero">
<h1>Welcome to Dharmesh Store</h1>
<p>Best Quality Products at Affordable Prices</p>
<button onclick="document.getElementById('products').scrollIntoView({behavior:'smooth'})">Shop Now</button>
</section>
<!-- Products -->
<section class="products" id="products">
<h2>Featured Products</h2>
<div class="product-grid" id="product-list">
<div class="product">
<span class="tag">Sale</span>
<img src="https://via.placeholder.com/200x180.png?text=Shoes" alt="Shoes">
<h3>Running Shoes</h3>
<div class="stars">⭐⭐⭐⭐☆</div>
<p class="price">₹1999</p>
<button class="btn" onclick="addToCart('Running Shoes',1999)">Add to Cart</button>
<button class="btn wishlist" onclick="addToWishlist('Running Shoes')">Wishlist</button>
</div>
<div class="product">
<span class="tag">New</span>
<img src="https://via.placeholder.com/200x180.png?text=Watch" alt="Watch">
<h3>Smart Watch</h3>
<div class="stars">⭐⭐⭐⭐⭐</div>
<p class="price">₹2999</p>
<button class="btn" onclick="addToCart('Smart Watch',2999)">Add to Cart</button>
<button class="btn wishlist" onclick="addToWishlist('Smart Watch')">Wishlist</button>
</div>
<div class="product">
<img src="https://via.placeholder.com/200x180.png?text=Headphones" alt="Headphones">
<h3>Wireless Headphones</h3>
<div class="stars">⭐⭐⭐☆☆</div>
<p class="price">₹1499</p>
<button class="btn" onclick="addToCart('Headphones',1499)">Add to Cart</button>
<button class="btn wishlist" onclick="addToWishlist('Headphones')">Wishlist</button>
</div>
<div class="product">
<img src="https://via.placeholder.com/200x180.png?text=Bag" alt="Bag">
<h3>Travel Backpack</h3>
<div class="stars">⭐⭐⭐⭐☆</div>
<p class="price">₹1299</p>
<button class="btn" onclick="addToCart('Backpack',1299)">Add to Cart</button>
<button class="btn wishlist" onclick="addToWishlist('Backpack')">Wishlist</button>
</div>
<!-- More Products -->
<div class="product">
<span class="tag">Sale</span>
<img src="https://via.placeholder.com/200x180.png?text=Laptop" alt="Laptop">
<h3>Gaming Laptop</h3>
<div class="stars">⭐⭐⭐⭐⭐</div>
<p class="price">₹59999</p>
<button class="btn" onclick="addToCart('Gaming Laptop',59999)">Add to Cart</button>
<button class="btn wishlist" onclick="addToWishlist('Gaming Laptop')">Wishlist</button>
</div>
<div class="product">
<img src="https://via.placeholder.com/200x180.png?text=Camera" alt="Camera">
<h3>DSLR Camera</h3>
<div class="stars">⭐⭐⭐⭐☆</div>
<p class="price">₹25999</p>
<button class="btn" onclick="addToCart('DSLR Camera',25999)">Add to Cart</button>
<button class="btn wishlist" onclick="addToWishlist('DSLR Camera')">Wishlist</button>
</div>
<div class="product">
<img src="https://via.placeholder.com/200x180.png?text=Tablet" alt="Tablet">
<h3>Tablet Pro</h3>
<div class="stars">⭐⭐⭐☆☆</div>
<p class="price">₹19999</p>
<button class="btn" onclick="addToCart('Tablet Pro',19999)">Add to Cart</button>
<button class="btn wishlist" onclick="addToWishlist('Tablet Pro')">Wishlist</button>
</div>
<div class="product">
<img src="https://via.placeholder.com/200x180.png?text=Shoes2" alt="Shoes2">
<h3>Sports Shoes</h3>
<div class="stars">⭐⭐⭐⭐☆</div>
<p class="price">₹2499</p>
<button class="btn" onclick="addToCart('Sports Shoes',2499)">Add to Cart</button>
<button class="btn wishlist" onclick="addToWishlist('Sports Shoes')">Wishlist</button>
</div>
</div>
</section>
<!-- Cart -->
<div class="cart" id="cart">
<button class="close-btn" onclick="toggleCart()">Close</button>
<h2>🛍 My Cart</h2>
<ul id="cart-items"></ul>
<p class="total">Total: ₹<span id="total">0</span></p>
<button class="checkout">Proceed to Checkout</button>
</div>
<!-- Footer -->
<footer>
<p>© 2025 Dharmesh Store | Designed with ❤️</p>
</footer>
<script>
let cartItems = [];
let wishlist = [];
function toggleCart() {
document.getElementById("cart").classList.toggle("open");
}
function addToCart(name, price) {
let existing = cartItems.find(item => item.name === name);
if (existing) {
existing.qty++;
} else {
cartItems.push({
name,
price,
qty: 1
});
}
renderCart();
toggleCart();
}
function removeFromCart(index) {
cartItems.splice(index, 1);
renderCart();
}
function changeQty(index, change) {
cartItems[index].qty += change;
if (cartItems[index].qty <= 0) cartItems.splice(index, 1);
renderCart();
}
function renderCart() {
let cartList = document.getElementById("cart-items");
let totalPrice = 0;
cartList.innerHTML = "";
cartItems.forEach((item, index) => {
totalPrice += item.price * item.qty;
cartList.innerHTML += `<li>${item.name} - ₹${item.price} x ${item.qty}
<div class="qty">
<button onclick="changeQty(${index},-1)">-</button>
<button onclick="changeQty(${index},1)">+</button>
<button class="remove" onclick="removeFromCart(${index})">X</button>
</div>
</li>`;
});
document.getElementById("total").innerText = totalPrice;
}
function addToWishlist(name) {
if (!wishlist.includes(name)) {
wishlist.push(name);
alert(name + " added to Wishlist!");
} else {
alert(name + " is already in Wishlist!");
}
}
function searchProducts() {
let input = document.getElementById("search").value.toLowerCase();
let products = document.querySelectorAll(".product");
products.forEach(product => {
let name = product.querySelector("h3").textContent.toLowerCase();
product.style.display = name.includes(input) ? "block" : "none";
});
}
</script>
</body>
</html>The design of this card will look like the image given below,
Conclusion
E-Commerce Website Project in HTML, CSS & JavaScript is the most useful project for beginners as it helps you learn real-world concepts.
In this project we covered:
- Homepage + Hero Banner
- Product Grid Layout with Ratings & Tags
- Search Filter
- Shopping Cart with Quantity Update
- Wishlist System
- Checkout Button
If you are learning web development then this project will give you advantage in job interviews, portfolio showcase and freelancing projects.
So start practicing today by using the free source code of this project and take your skills to the next level.