CraftedTemplate
OLP — Online Learning Template

OLP — Online Learning Template

Free, responsive HTML/CSS/JS learning template for students—header/nav, categories, course pages, lessons, search & quiz. Easy to customize; no frameworks.

What’s included
Free
  • Source code and assets
  • README with setup & deploy guides
  • Lifetime updates to this template
Free downloadLive demo
Updated 9/5/2025

Template details

What’s in the project

Pages

  • 404.html — Page Not Found (H1: 404)
  • about.html — About — OLP (H1: About)
  • admin-dashboard.html — Admin Dashboard — OLP (H1: Admin Dashboard)
  • admin-login.html — Admin Login — OLP (H1: Admin Login)
  • categories.html — OLP — Categories (H1: Categories)
  • category.html — OLP — Category (H1: Category)
  • contact.html — Contact — OLP (H1: Contact)
  • course.html — OLP — Course (H1: Course)
  • faq.html — FAQ — OLP (H1: FAQ)
  • index.html — OLP — Home (H1: Learn fast with concise, hands‑on courses.)
  • learn.html — OLP — Learn (H1: Lesson)
  • quiz.html — OLP — Quiz (H1: Quiz:)
  • result.html — OLP — Result (H1: Quiz Result)
  • search.html — OLP — Search (H1: Search)

Assets

  • assets/css/styles.css — global styles, layout, components, responsive nav & sticky header
  • assets/js/app.js — theme toggle, mobile menu, helpers (OLP namespace)
  • assets/js/pages/… — page-specific scripts: admin-dashboard.js, admin-login.js, categories.js, category.js, course.js, home.js, learn.js, quiz.js, result.js, search.js
  • assets/data/courses.json — categories, course list, lessons, quizzes
  • assets/img/course-default.svg — placeholder image

Tech stack: HTML, CSS, Vanilla JS (with jQuery loaded), no build tools.

What’s in the project

Pages

  • 404.html — Page Not Found (H1: 404)
  • about.html — About — OLP (H1: About)
  • admin-dashboard.html — Admin Dashboard — OLP (H1: Admin Dashboard)
  • admin-login.html — Admin Login — OLP (H1: Admin Login)
  • categories.html — OLP — Categories (H1: Categories)
  • category.html — OLP — Category (H1: Category)
  • contact.html — Contact — OLP (H1: Contact)
  • course.html — OLP — Course (H1: Course)
  • faq.html — FAQ — OLP (H1: FAQ)
  • index.html — OLP — Home (H1: Learn fast with concise, hands‑on courses.)
  • learn.html — OLP — Learn (H1: Lesson)
  • quiz.html — OLP — Quiz (H1: Quiz:)
  • result.html — OLP — Result (H1: Quiz Result)
  • search.html — OLP — Search (H1: Search)

Assets

  • assets/css/styles.css — global styles, layout, components, responsive nav & sticky header
  • assets/js/app.js — theme toggle, mobile menu, helpers (OLP namespace)
  • assets/js/pages/… — page-specific scripts: admin-dashboard.js, admin-login.js, categories.js, category.js, course.js, home.js, learn.js, quiz.js, result.js, search.js
  • assets/data/courses.json — categories, course list, lessons, quizzes
  • assets/img/course-default.svg — placeholder image

Tech stack: HTML, CSS, Vanilla JS (with jQuery loaded), no build tools.

:root { --brand: #7c3aed; --accent: #0ea5e9; }

Navigation

  • Update links in each page’s header <nav id="primaryNav">.
  • Mobile behavior is controlled in app.js (toggle) and CSS @media (max-width: 900px).

Grids & Cards

  • Utilities: .grid, .grid.cols-3, .grid.cols-4 with breakpoints at 900px and 600px.
  • Cards use .card; adjust padding, borders, and radius there.

Buttons & Forms

  • .btn and .btn.primary set rounding, borders, and gradients.
  • Inputs (.input, select, textarea) share base styles—override per page when needed.

Course Detail layout

  • The desktop 2‑col grid is in the HTML as an inline style. A mobile override in CSS forces single column at ≤900px. If you prefer CSS‑only, move the inline grid to a class and remove the inline style.

Data model (courses.json)

  • Categories: 9 entries (e.g., Programming, Data Science, Design, Marketing, Cloud, AI…).
  • Course fields (per course): id, slug, title, category, level, duration_hours, rating, price, image, description, lessons, quiz

Adding a course:

  1. Open assets/data/courses.json.
  2. Append a new object to courses[] with the fields above.
  3. Use a unique id and (optionally) a friendly slug.
  4. Provide lessons[] with {id, title, type, content}.
  5. Optionally add a quiz[] with {question, options[], answerIndex}.
  6. Point image to a file in assets/img/.

How pages find data:

  • Scripts call OLP.loadData() (in app.js) to fetch the JSON and cache it.
  • Detail pages read URL params (e.g., id) to select the right course.
⚠️ Local dev tip: Because fetch() can’t read files from file://, run a tiny server locally: python -m http.server from the project root and open http://localhost:8000.

Responsive behavior & sticky header

  • Header is sticky (position: sticky; top: 0) and adds a shadow once you scroll (via a small JS class toggle).
  • Mobile menu shows a hamburger at ≤900px, revealing a slide‑down panel; links become block‑level for easy tapping.
  • Grids collapse progressively at 900px and 600px for comfortable reading.
  • Course Detail sidebar drops below the content on small screens.

Edit breakpoints in the final @media blocks assets/css/styles.css to suit your audience.

Getting started (local & deploy)

Local

  1. Clone or unzip the project.
  2. From the project root, run:
python -m http.server
  1. Visit http://localhost:8000.

Deploy (static hosting)

  • GitHub Pages, Netlify, Vercel, S3/CloudFront all work—no build step needed.
  • Ensure assets/ is cached, and JSON is served with the correct MIME type.

Free for students

This template is free to use, learn from, and extend for student projects and clubs. Duplicate it, customize the palette and copy, add new pages (Resources, Blog, Portfolio), and publish as your learning hub.

If you remix it, a small attribution back to the original is appreciated.

Credits & license