🚀 Build a Modern eCommerce Website with Vanilla HTML, CSS, and JS

Frameworks are great, but sometimes Vanilla JS is all you need.

I built MILTON, a premium fashion eCommerce template, using ZERO dependencies (okay, maybe Swiper.js). Here’s the 2-minute breakdown of how it works.

⚡ The Tech Stack

• HTML5: Semantic & Clean.
• CSS3: Variables + clamp() for fluid responsive text.
• ES6 JS: Modules & Classes.

---

1. The "Component" Hack 🧩

Hate copying the Header/Footer to every HTML file? Me too. Use a simple JS injector.

components.js

const HEADER = `<header>...your header html...</header>`;

export function loadHeader() {
  document.body.insertAdjacentHTML("afterbegin", HEADER);
}

main.js

import { loadHeader } from './components.js';
loadHeader(); // 💥 Boom, header on every page.

---

2. Dynamic Products 🛍️

Don't hardcode HTML. Store data in an array and render it.

products.js

export const products = [
  { id: 1, name: "Urban Hoodie", price: 85.00, img: "hoodie.png" },
  { id: 2, name: "Trench Coat", price: 159.00, img: "coat.png" },
];

main.js

import { products } from './products.js';

const grid = document.getElementById('grid');

products.forEach(p => {
  grid.innerHTML += `
    <div class="card">
      <img src="${p.img}">
      <h3>${p.name}</h3>
      <p>$${p.price}</p>
    </div>
  `;
});

Pro Tip: Use filter() to create "New Arrivals" or "Best Sellers" sections easily.

---

3. Responsive Text with clamp() 📐

Stop writing a million @media queries for font sizes. Use clamp().

h1 {
  /* Resizes smoothly between 2rem and 4.5rem based on viewport width */
  font-size: clamp(2rem, 4vw + 1rem, 4.5rem);
}

---

📥 Download the Code

Want to see the full code? Grab it below!

https://buymeacoffee.com/clicktogain/e/499335