If you are learning web development and want to build a real-world project for your resume, this project is for you 👇
I have created a Flipkart-inspired E-commerce frontend website using pure HTML, CSS, and JavaScript with a clean UI, interactive features, and real CDN images.
Project Highlights
✅ Modern Flipkart-style UI
✅ Fully responsive product grid
✅ Auto-sliding banner using JavaScript
✅ Add-to-cart functionality
✅ Hover effects & animations
✅ Real CDN images (Pexels – free & fast)
✅ Clean folder structure (separate files)
🛠️ Technologies Used
- HTML5 – Structure of the website
- CSS3 – Styling, layout, animations
- JavaScript (Vanilla JS) – Banner slider & cart logic
No frameworks. No libraries. 100% core concepts 💪
📂 Project Structure
flipkart-clone/ │── index.html │── style.css │── script.js
This structure is industry-friendly and easy to understand for beginners.
🎯 What You Will Learn From This Project
- How real e-commerce homepages are structured
- How to create an auto image slider using JavaScript
- DOM manipulation and event handling
- Writing clean, reusable frontend code
- Building resume-worthy projects
🧠 JavaScript Logic Explained (In Simple Words)
- Banner images are stored in an array
- JavaScript changes images automatically using
setInterval() - Cart count updates dynamically when user clicks Add to Cart
- DOMContentLoaded ensures JS runs after HTML loads
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Flipkart Clone | Aniruddh</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- ===== Navbar ===== -->
<header class="navbar">
<div class="logo">Flipkart</div>
<div class="search-box">
<input type="text" placeholder="Search for products, brands and more">
</div>
<div class="nav-actions">
<button class="login-btn">Login</button>
<span class="cart">🛒 Cart</span>
</div>
</header>
<!-- ===== Category Section ===== -->
<section class="categories">
<div class="cat">Mobiles</div>
<div class="cat">Fashion</div>
<div class="cat">Electronics</div>
<div class="cat">Home</div>
<div class="cat">Appliances</div>
<div class="cat">Travel</div>
</section>
<!-- ===== Banner ===== -->
<section class="banner">
<img id="bannerImg" src="" alt="Banner">
</section>
<!-- ===== Products ===== -->
<section class="products">
<h2>Best Deals For You</h2>
<div class="product-grid">
<div class="product-card">
<img src="https://images.unsplash.com/photo-1511707171634-5f897ff02aa9" />
<h3>Smartphone</h3>
<p>₹14,999</p>
<button>Add to Cart</button>
</div>
<div class="product-card">
<img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30" />
<h3>Smart Watch</h3>
<p>₹2,999</p>
<button>Add to Cart</button>
</div>
<div class="product-card">
<img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff" />
<h3>Shoes</h3>
<p>₹1,999</p>
<button>Add to Cart</button>
</div>
<div class="product-card">
<img src="https://images.unsplash.com/photo-1585386959984-a4155224a1ad" />
<h3>Headphones</h3>
<p>₹1,499</p>
<button>Add to Cart</button>
</div>
</div>
</section>
<!-- ===== Footer ===== -->
<footer class="footer">
<p>© 2025 Flipkart Clone | Made by Aniruddh</p>
</footer>
<script src="script.js"></script>
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
body {
background: #f1f3f6;
}
/* ===== Navbar ===== */
.navbar {
background: #2874f0;
color: white;
padding: 12px 30px;
display: flex;
align-items: center;
justify-content: space-between;
}
.logo {
font-size: 24px;
font-weight: bold;
}
.search-box input {
width: 350px;
padding: 8px;
border: none;
border-radius: 2px;
}
.nav-actions {
display: flex;
align-items: center;
gap: 20px;
}
.login-btn {
padding: 6px 15px;
background: white;
color: #2874f0;
border: none;
font-weight: bold;
cursor: pointer;
}
.cart {
cursor: pointer;
}
/* ===== Categories ===== */
.categories {
display: flex;
justify-content: space-around;
background: white;
padding: 15px 0;
}
.cat {
cursor: pointer;
font-weight: 500;
}
.cat:hover {
color: #2874f0;
}
/* ===== Banner ===== */
.banner {
width: 100%;
height: 320px;
background: #ddd;
overflow: hidden;
}
.banner img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* ===== Products ===== */
.products {
padding: 30px;
}
.products h2 {
margin-bottom: 20px;
}
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 20px;
}
.product-card {
background: white;
padding: 15px;
text-align: center;
border-radius: 6px;
transition: transform 0.3s, box-shadow 0.3s;
}
.product-card img {
width: 100%;
height: 180px;
object-fit: cover;
}
.product-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
.product-card h3 {
margin: 10px 0;
}
.product-card button {
margin-top: 10px;
padding: 8px 15px;
background: #ff9f00;
border: none;
cursor: pointer;
font-weight: bold;
}
/* ===== Footer ===== */
.footer {
background: #172337;
color: white;
text-align: center;
padding: 15px;
margin-top: 40px;
}
document.addEventListener("DOMContentLoaded", () => {
// ===== Banner Images =====
const bannerImages = [
"https://images.pexels.com/photos/7156886/pexels-photo-7156886.jpeg?auto=compress&cs=tinysrgb&w=1600",
"https://images.pexels.com/photos/3945684/pexels-photo-3945684.jpeg?auto=compress&cs=tinysrgb&w=1600",
"https://images.pexels.com/photos/3405454/pexels-photo-3405454.jpeg?auto=compress&cs=tinysrgb&w=1600"
];
let bannerIndex = 0;
const bannerImg = document.getElementById("bannerImg");
function updateBanner() {
bannerImg.src = bannerImages[bannerIndex];
bannerIndex = (bannerIndex + 1) % bannerImages.length;
}
updateBanner();
setInterval(updateBanner, 3000);
// ===== Cart Logic =====
let cartCount = 0;
const cart = document.querySelector(".cart");
const buttons = document.querySelectorAll(".product-card button");
buttons.forEach(btn => {
btn.addEventListener("click", () => {
cartCount++;
cart.innerText = `🛒 Cart (${cartCount})`;
btn.innerText = "Added ✔";
btn.disabled = true;
});
});
});
Who Is This Project For?
✔ Beginners learning web development
✔ Students building portfolio projects
✔ Freelancers showcasing frontend skills
✔ Anyone preparing for internships / jobs
📌 Final Words
Projects like this help you understand real-world UI development and boost confidence.
If you master HTML + CSS + JavaScript, frameworks become easy later.
