Education Online Course PWA Mobile Html Template

Education Online Course PWA is a modern, mobile-first Progressive Web App template designed specifically for online learning platforms, course marketplaces, and educational applications.

It offers a comprehensive UI solution for building powerful e-learning systems, featuring a clean design, smooth user experience, and app-like performance—all running directly in the browser.

Built with Tailwind CSS and Vanilla JavaScript, this template is lightweight, fast, and easy to customise without relying on heavy frameworks or dependencies.

### ✨ Main Features

- ✅ Progressive Web App (PWA) Ready

- ✅ Developed with Tailwind CSS

- ✅ Pure Vanilla JavaScript (No jQuery, No Frameworks)

- ✅ Over 40 Mobile App Screens

- ✅ Clean & Modern UI Design

- ✅ Fully Responsive (Mobile-First 430px)

- ✅ Course Listing & Details Pages

- ✅ Learning Progress Tracking UI

- ✅ Authentication Pages (Login, Signup, OTP, Reset Password)

- ✅ Dashboard & User Profile

- ✅ Wishlist/Bookmark System

- ✅ Toast Notification System

- ✅ Bottom Navigation (Mobile UX Optimized)

- ✅ SEO-Friendly & Semantic HTML5

- ✅ Easy to Customize Code Structure

- ✅ Cross-Browser Compatibility

### Charts & Analytics

- Interactive charts powered by Chart.js

- Track user learning progress and performance

### What You Get

- Full HTML Template Files

- Compiled CSS (Tailwind)

- JavaScript Files

- PWA Files (Manifest + Service Worker)

- Documentation

### ⚡ Quick Start

1. Extract the downloaded package.

2. Open `app.html`.

3. Run with Live Server (recommended). No build process is required; the template works out of the box.

### PWA Features

- Installable on mobile devices

- Offline support enabled

- Fast loading and caching

- App-like user experience

### Pages Included

- Splash Screen

- Onboarding

- Login / Signup

- Forgot Password

- OTP Verification

- Home Dashboard

- Course List

- Course Details

- Lesson View

- Progress Tracking

- Wishlist

- Profile

- Settings

- Notifications

- And many more…

### Customization Options

- Adjust colors via Tailwind configuration

- Modify layout and components

- Data handling through localStorage or API integration

### Technologies Used

- HTML5

- Tailwind CSS

- Vanilla JavaScript

- Chart.js