Project Overview

This project is a responsive Educational Institute Website developed using HTML, Bootstrap, and JavaScript (ES6 Modules).
The website provides complete information about an educational institute including Home, About Us, Courses, Faculty, Gallery, Contact, Admissions, Blogs, and Rankings.

A modular approach is used where Navbar and Footer are dynamically loaded on every page using JavaScript, ensuring consistency and easy maintenance.

Screenshots

Key Features

• Multi-page educational website
• Reusable Navbar & Footer using JavaScript modules
• Fully responsive design using Bootstrap 5
• Image gallery and blog sections
• Dynamic course cards using JavaScript
• Faculty showcase with category buttons
• Google Maps integration on Contact page
• Admission & Contact forms
• Clean UI with modern layout

Functionality

• Dynamically loads:
  • navbar.html into <header class="head">
  • footer.html into <main>
• Ensures uniform layout on all pages

Course Card Component

• Courses are stored in JavaScript objects
• Cards are generated dynamically using a reusable card() function
• Allows easy addition/removal of courses without changing HTML

Home Page

• Hero section with background image
• Institute introduction and mission
• Student rankings and achievements
• Blog previews

Technology Used

• HTML5 – Structure of webpages
• CSS3 – Styling (via Bootstrap)
• Bootstrap 5 – Responsive layout & UI components
• JavaScript (ES6) – Logic, DOM manipulation, modules
• Font Awesome – Icons
• Google Maps Embed API – Location display

Why Use This Project ?

Reduces repeated HTML code using modular layout loading

Easy to update navigation and footer across all pages

Demonstrates real-world website structure

Helps beginners understand:

• Component-based frontend development
• DOM manipulation
• Modular JavaScript

Download Source Code

Project Setup Instructions

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