Freeframe
Education10 pages · 0 downloads · Free

Sketch

A playful course creator website for an illustrator who teaches drawing online.

Stack: HTML + Tailwindv1.0.0 changelog

DocsLive demo Download .zip172 KB

About this template

Sketch is a bright, hand-drawn personal-brand site for Marnie Draws, a fictional illustrator in Margate who teaches digital drawing on the iPad. It has a filterable course catalogue with saved courses, a sales page whose curriculum, lesson counts and runtime are computed from data, an early-bird price with a live countdown that switches itself off, live workshops in UK time with seats left and a waitlist, free downloadable worksheets and palettes, and a student gallery with a lightbox. Every illustration is SVG drawn for the template.

Features

  • Course catalogue filtered by level and topic, with shareable ?level= and ?topic= links
  • Saved courses (a wishlist) kept in localStorage, with a header count and a "saved only" filter
  • Course sales page generated from one data file: curriculum accordion with lesson counts and total runtime worked out from the lessons
  • Early-bird pricing with a live countdown in UK time that switches to the full price by itself when the offer ends
  • Live workshops in Europe/London time with BST/GMT, the visitor's own time, seats left and a waitlist
  • Free worksheets, colour palettes and cheat sheets generated as downloadable SVG files, filterable by type
  • Student gallery with course filters and a keyboard-friendly lightbox
  • Validated newsletter, contact, enrol and booking forms with demo success states
  • Hand-drawn SVG artwork everywhere: portrait, course covers, student work and doodles, no photos
  • Accessible mobile menu, skip link, reduced-motion support, scroll reveals and a back-to-top button

Pages included

Quick start

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

Changelog

  1. v1.0.0

    Added

    • Initial release with 10 pages: Home, Courses, Course sales page, Live workshops, Free resources, Student gallery, About, Newsletter, Contact and 404.
    • Course catalogue filtered by level and topic, with shareable ?level= and ?topic= links
    • Saved courses kept in localStorage (or in memory when storage is blocked), with a header count and a "saved only" filter
    • Course sales page generated from one data file: curriculum accordion with lesson counts and total runtime computed from the lessons, "what you'll make", reviews and FAQ
    • Early-bird pricing with a live countdown in UK time that switches to the full price when the offer ends
    • Demo dates that never go stale: a rolling early-bird deadline (EARLY_BIRD_ENDS = null) and workshop dates that move forward in whole weeks (KEEP_DEMO_CURRENT), both easy to switch to real dates
    • Live workshops in Europe/London time with BST/GMT labels, the visitor's own time, seats left and a waitlist
    • Free worksheets, colour palettes and cheat sheets generated as downloadable SVG files, filterable by type
    • Student gallery with course filters and a keyboard-friendly lightbox
    • Validated newsletter, contact, enrol and booking forms with demo success states
    • Hand-drawn SVG artwork throughout: portrait, course covers, student work and doodles
    • Accessible mobile menu, skip link, reduced-motion support, scroll reveals and a back-to-top button
    • Full documentation in DOCS.md.

More templates