12/01/2025
✅ *How to Build a Simple E-Commerce Website* 🛒💻
Perfect beginner project to learn full-stack basics. Follow these steps:
*1️⃣ Setup Your Environment*
• Install VS Code
• Create folder: `ecommerce-site`
• Files: `index.html`, `style.css`, `script.js`, `products.json`
*2️⃣ Create Basic HTML (`index.html`)*
```html
Simple Store
My Store
© 2025 My Store
```
*3️⃣ Add Basic CSS (`style.css`)*
```css
body { font-family: sans-serif; margin: 0; padding: 0; }
header { background: #222; color: ; padding: 1rem; text-align: center; }
-list { display: flex; flex-wrap: wrap; padding: 1rem; }product { background: ; border: 1px solid ; margin: 1rem; padding: 1rem; width: 200px; }
footer { background: ; text-align: center; padding: 1rem; }
```
*4️⃣ Sample Product Data (`products.json`)*
```json
[
{ "name": "Shoes", "price": 1999 },
{ "name": "T-shirt", "price": 799 },
{ "name": "Backpack", "price": 1499 }
]
```
*5️⃣ JavaScript for Product Display (`script.js`)*
```javascript
fetch('products.json')
.then(res => res.json())
.then(data => {
const list = document.getElementById('product-list');
data.forEach(item => {
const div = document.createElement('div');
div.className = 'product';
div.innerHTML = `item.name₹{item.price}Add to Cart`;
list.appendChild(div);
});
});
```
*6️⃣ Add Features Later*
• Cart functionality
• Checkout form
• Search/filter
• Login/signup (optional)
*7️⃣ Host It*
• Push to GitHub
• Deploy using Netlify or Vercel
💬 *Double Tap ❤️ for more!*
