Freeframe
Education10 pages · 2 downloads · Free

Academy

A friendly online course platform with a catalogue, lesson player and student dashboard.

Stack
v1.0.3 changelog
DocsLive demo Download .zip140 KB

About this template

A complete site for an online school: a searchable, filterable course catalogue, detailed course pages with curriculum and reviews, learning paths, instructor profiles, pricing with a team seats calculator, a student dashboard with progress rings, streaks and certificates, and a lesson player with notes. Progress is saved in the browser so every page feels alive. Light and dark themes included.

Features

  • Course catalogue with search, topic, level, length, price and rating filters, sorting and grid/list views kept in the URL
  • Course pages generated from one data file: curriculum accordion with free preview lessons, reviews histogram and sticky enrol card
  • Student dashboard with progress rings, a learning streak, continue-where-you-left-off and certificates
  • Lesson player with a course sidebar, mark-as-complete, per-lesson notes and accessible tabs
  • Progress, notes and preferences saved in localStorage and validated on every read
  • Pricing with a monthly/yearly toggle, comparison table and team seats calculator
  • Dark mode that remembers the visitor's choice, with no flash on load
  • Generated SVG course art, instructor portraits and certificates; no image files needed
  • Validated forms, accessible mobile menu, scroll reveals and a back-to-top button
  • SEO and Open Graph tags, SVG favicon and PNG social image on every page

Pages included

Quick start

unzip academy.zip && cd academyopen index.html        # that's it # optional, after adding new Tailwind classes:npm install && npm run build
Read the Academy documentation →

Changelog

  1. v1.0.3

    Fixed

    • The page titles the script sets on course, instructor and lesson pages use a single SITE_NAME constant at the top of assets/js/main.js instead of a hard-coded "Northfield Academy", so renaming the school is one change (as in the Astro, Next.js and WordPress versions).

    Changed

    • The CSS build no longer reads the documentation and metadata files (*.md, *.json), so words in the guides can no longer add unused rules to assets/css/style.css. No visible change.

  2. v1.0.2

    Fixed

    • Generated lesson titles keep the module title's casing ("Core ideas: Components and JSX" instead of "Core ideas: components and jsx").
    • A stored streak count that isn't a whole number from 0 to 3,650 resets the streak (like other tampered progress) instead of being clamped to 3,650 days.
    • The "Teach with us" and team quote forms' fields have name attributes (name, email, topic, idea; name, email, company), so a real form backend receives their values.

  3. v1.0.1

    Added

    • Full documentation in DOCS.md.

  4. v1.0.0

    Added

    • Ten pages: home, course catalogue, course detail, learning paths, instructors, instructor profile, pricing, student dashboard (My learning), lesson player and a 404 page.
    • One data section for the whole site (top of assets/js/main.js): 12 courses, 6 instructors and 4 learning paths, with curricula and lesson lengths generated from each course.
    • Course catalogue with search and filters for topic, level, length, price and rating, six sort orders and grid/list views; filters live in the URL and the view is remembered.
    • Course pages with outcomes, a curriculum accordion with free preview lessons, a preview dialog, instructor bio, reviews with a rating histogram, FAQs and a sticky enrol card.
    • Student dashboard with stats, a learning streak, continue-where-you-left-off, progress rings and certificates (generated SVG) in a dialog.
    • Lesson player with a course sidebar, mark-as-complete, per-lesson notes, accessible tabs and previous/next navigation; locked lessons until you enrol.
    • Progress, notes and preferences saved in localStorage and validated on every read, so tampered or corrupt data never breaks a page.
    • Pricing with a monthly/yearly toggle, comparison table, team seats calculator with volume discounts and a validated quote form.
    • Dark mode, accessible mobile menu, scroll reveals that respect reduced motion, back-to-top button, validated forms with success states, SEO and Open Graph tags, favicon and social image.

More templates