Web Design Teaching Gallery

A comprehensive library for teaching: 38 design styles (overall aesthetics) and 64 interactive effects (individual techniques).

38Design styles
64Effects
102Live demos
Overall design

Design Styles

Full mini-site mockups — layout, typography, color, mood. Researched 2026 trends + essential site types.

Techniques

Interactive Effects

Individual techniques you can combine — scroll, motion, cursor, layout, UI patterns.

How to teach with this

  1. Styles first — “What kind of site is this? Who is it for?”
  2. Effects second — “Which techniques create that feeling?”
  3. Combine — e.g. scrollytelling + kinetic type + dark-first

Built for workshops and self-study. Each page is a self-contained HTML file — open DevTools to inspect the code.