Eduland Education

About the Project: Eduland is a clean, modern education website built with HTML, Tailwind CSS, and JavaScript. It showcases departments, instructors, and course offerings in a component-based structure — demonstrating organized frontend architecture without any framework.

Key Highlights: Component-based JavaScript architecture, responsive layout with Tailwind CSS, sticky header, animated back-to-top button, and a mobile-friendly slide-in navigation menu.

Project Details

What's Inside

• Header — Sticky navigation with logo, menu links, and mobile drawer.
• Hero Section — Headline, description, CTA button, and banner image.
• About Section — Two-column layout with image and animated play button.
• Departments Section — Card grid showcasing three popular departments.
• Instructors Section — Instructor profiles with name, role, and social links.
• Footer — Brand info, navigation links, and social media icons.
• Back to Top — Fixed button that appears after scrolling 600px down.

Key Features

• Component-Based Architecture — Each section is a separate JavaScript module with its own data and render logic.
• Sticky Header — Header gets a white background and shadow on scroll.
• Mobile Navigation — Slide-in menu with overlay for small screen devices.
• Data-Driven Rendering — All section content is stored as JavaScript objects and rendered dynamically into the DOM.
• Back to Top Button — Smooth scroll to top with fade-in visibility on scroll.
• Responsive Layout — Mobile-first design built with Tailwind CSS utility classes.
• Hover Animations — Subtle transitions on cards, buttons, and instructor images.

Technologies Used

• HTML5 — Semantic markup with root elements for each component.
• Tailwind CSS (CDN) — Utility-first CSS framework for responsive styling.
• JavaScript (ES Modules) — Modular JS with import/export for clean code structure.
• Ionicons — Icon library used for navigation, social, and UI icons.

Project Structure

eduland-education/
│
├── index.html                 # Main HTML with root elements for each component
│
├── assets/
│   ├── js/
│   │   ├── app.js             # Entry point — imports and initializes all components
│   │   ├── header.js          # Header with sticky scroll, nav links, and mobile menu
│   │   ├── hero.js            # Hero section with title, description, and CTA button
│   │   ├── about.js           # About section with image and animated play button
│   │   ├── departments.js     # Departments grid with card layout
│   │   ├── instructor.js      # Instructor profiles with role and social icons
│   │   ├── footer.js          # Footer with links, contact info, and social media
│   │   └── backTop.js         # Back to top button with scroll visibility logic
│   │
│   └── images/                # Logo, hero banner, department images, instructor photos
│
└── README.md                  # Project documentation
    

Quick Start

1. Clone the repository:

   git clone https://github.com/nawazdevx/eduland-education.git

  <li>
    <strong>Open the project:</strong>
    <ul>
      <li>Open <code>index.html</code> directly in your browser</li>
      <li>Or run a local server:</li>
    </ul>
    <pre><code>python -m http.server 3000</code></pre>
    Then visit <code>http://localhost:3000</code>
  </li>

  <li>
    <strong>Start Customizing:</strong>
    <ul>
      <li>Update nav links and button text in <code>header.js</code></li>
      <li>Change headline, description, and hero image in <code>hero.js</code></li>
      <li>Edit department names, descriptions, and images in <code>departments.js</code></li>
      <li>Replace instructor names, roles, and photos in <code>instructor.js</code></li>
      <li>Update footer links, contact info, and copyright in <code>footer.js</code></li>
    </ul>
  </li>
</ol>

License: This project is licensed under the MIT License.

Contact: Connect with me on LinkedIn or visit my Portfolio.

Support: Found this helpful? Give it a ⭐ on GitHub! Thank you.

Project Preview

Live project ➜ Live Demo