Project Overview

This project is a static Online Shopping Website developed using HTML, CSS, JavaScript (ES Modules), and Bootstrap.
The website follows a modular architecture, where common components like Navbar, Footer, and Product Cards are dynamically loaded using JavaScript.
Products are displayed using reusable card components, making the application scalable and easy to maintain.

Screenshots

Key Features

• Dynamic product card generation using JavaScript
• Reusable components (Navbar, Footer, Cards)
• ES6 Module-based structure
• Responsive UI using Bootstrap 5
• Image carousel for hero/banner section
• Single layout loader for all pages
• Mobile-friendly design

Functionality

• Dynamically loads:
  • navbar.html into <header>
  • footer.html into <main>
• Ensures consistent layout across all pages

Card Component (card)

• Dynamically creates product cards using JavaScript
• Accepts product data (image, title, description, button)
• Appends cards into a container
• Enables easy product list updates without HTML changes

Product Pages

• Uses JavaScript arrays to store product details
• Loops through products and renders cards dynamically
• Supports future expansion like:
  • Add to cart
  • Product details page

Home Page

• Hero carousel with promotional banners
• Call-to-action button (Shop Now)
• Fully responsive layout

Technology Used

• HTML5 – Page structure
• CSS3 – Styling (via Bootstrap)
• JavaScript (ES6) – Logic & DOM manipulation
• Bootstrap 5 – Responsive design & UI components

Why Use This Project ?

Reduces code duplication using reusable components

Improves maintainability and scalability

Helps understand real-world frontend architecture

Useful for beginners learning:

• JavaScript DOM manipulation
• ES Modules
• Component-based design (foundation for React)

Download Source Code

Project Setup Instructions

Note: This project is for educational purposes only. Not for commercial sale.