ULTRAKIT · WIDGET #136

Modules and lessons with types, lengths that add up by themselves, free previews that play right on the page, locked lessons and a “mark as done” checklist students actually use.

accordion · timeline · splitauto totals7 lesson typesvideo previewslocked lessonsprogress trackinglesson searchCourse schema
CODING BOOTCAMP · SALES PAGE

Totals up top, a search for “flexbox” or “API”, a free first lesson and a checklist that fills a progress bar as students work — saved in their browser.

accordionprogress trackinglesson searchlocked capstoneCourse schema
Beginner · no experience needed

Front-end web development — 5 weeks

  • 5 weeks
  • 26 lessons
  • 22h 55m total
  • 1 free preview
Your progress0 / 26

How websites really work, and your first page online by Friday.

  1. Welcome to LaunchpadVideoFree4:10
  2. How the web worksVideo12:35
  3. Your first HTML pageVideo18:20
  4. Semantic HTML in plain EnglishReading15 min
  5. Build: a personal profile pageAssignment1h
  6. Week 1 check-inQuiz10 min

Flexbox, grid and designs that look great on every phone.

  1. Selectors and the cascadeVideo16:05
  2. Flexbox by exampleVideo21:40
  3. CSS grid layoutsVideo24:15
  4. Responsive design patternsReading20 min
  5. Build: a landing page from a Figma fileProject2h
  6. Live code reviewLive session1h

Variables, functions and making pages come alive.

  1. Thinking like a programmerVideo14:30
  2. Variables, types and functionsVideo26:10
  3. Working with the DOMVideo · New22:45
  4. Debugging without tearsVideo12:20
  5. Practice set: 20 small challengesAssignment1h 30m
  6. JavaScript quizQuiz15 min

Fetch real data and build a weather dashboard.

  1. Promises and async/awaitVideo19:50
  2. Fetching data from an APIVideo17:30
  3. Build: a weather dashboardProject3h
  4. Starter codeDownload

  1. Plan your capstoneVideo10:00
  2. Build and ship your capstoneProject8h
  3. Portfolio and résumé reviewLive session1h
  4. Mock interviewLive session45 min

Launchpad Code Academy is an example school — the course is made up for this demo.

VIDEO EDITING MASTERCLASS · SPLIT

Modules on the left, lessons on the right, and free previews that open in a lightbox. The four previews here are real clips you can play.

split layoutdark skinvideo lightboxlocked lessons
Intermediate

Post-production masterclass

  • 4 chapters
  • 15 lessons
  • 4h 8m total
  • 4 free previews
Chapter 1

Color grading

Turn flat footage into a film look — one node at a time.

5 lessons · 1h 41m
  1. Grading in ten minutesVideoPreview10:12
  2. Reading scopes without fearVideo14:30
  3. Matching shots across a sceneVideo18:45
  4. Building your own LUTVideo12:05
  5. Grade the practice clipAssignment45 min

Frame & Light Studio is an example course. The preview clips were made for UltraKit’s demos.

YOGA STUDIO · TEACHER TRAINING

A timeline for trainings, retreats and cohort programs — gentle warm colors, every step connected by a soft line.

timeline layoutwarm skinlive sessionsdownloads
Stillwater Yoga · Example

200-hour yoga teacher training

  • 4 steps
  • 16 lessons
  • 11h 41m total
  • 1 free preview

History, breath and the sun salutation, step by step.

  1. Welcome circleLive session1h
  2. A short history of yogaReading25 min
  3. Breath before movementVideoFree22:00
  4. Sun salutation A and BVideo35:10
  5. Journal: why I practiceAssignment30 min

Joints, alignment and keeping every student safe.

  1. The spine in motionVideo28:40
  2. Hips, knees and safe alignmentVideo31:15
  3. Anatomy workbookDownload
  4. Anatomy quizQuiz20 min

Build a 60-minute class and learn to cue it clearly.

  1. The shape of a great classVideo18:30
  2. Cueing that students hearVideo24:05
  3. Write your first sequenceAssignment2h
  4. Peer teaching practiceLive session2h

  1. Holding the roomVideo16:20
  2. Final teaching assessmentProject1h 30m
  3. Graduation circleLive session1h
COMMUNITY COLLEGE · WEEKLY SYLLABUS

Weeks instead of modules, one week open at a time, no progress tracking — a clear, printable-feeling outline for a class page.

“Week 1” labelsone open at a timesoft skin
Fall semester · 3 credits

FIN 101 · Personal Finance Basics

  • 6 weeks
  • 17 lessons
  • 15h 25m total

  1. Lecture: tracking spendingVideo45 min
  2. Read: chapter 1Reading30 min
  3. Spending diary (7 days)Assignment1h

  1. Lecture: the 50/30/20 ruleVideo40 min
  2. Budget templateDownload
  3. Build your first budgetAssignment1h
  4. Quiz 1Quiz15 min

  1. Lecture: how credit scores workVideo50 min
  2. Read: chapter 3Reading35 min
  3. Guest talk: a credit counselorLive session1h

  1. Lecture: emergency funds and index fundsVideo55 min
  2. Compound interest calculatorAssignment20 min
  3. Quiz 2Quiz15 min

  1. Lecture: reading a W-2 and filing a 1040Video50 min
  2. Practice returnAssignment1h 30m

  1. Your one-year money planProject3h
  2. PresentationsLive session2h

Riverside Community College is an example school.

THREE STEPS

No LMS plugin needed to show what’s inside.

1

Add modules

Title, a short line and an optional badge like “Bonus” or “Week 1”.

2

Type the lessons

One per line: Welcome | 4:10 | video | free https://… — lengths and totals are worked out for you.

3

Pick a layout

Accordion, timeline or split — then switch on search, progress or Google Course data.