HTML starter
The original blank HTML document, CSS imports and teaching reference.
ZIP · 1 KB · No installation requiredTHE REFERENCE ROOM
Yours to explore.
Download the original files, open them in an editor and make your own version. These ZIPs contain real, self-contained workshop resources.
The complete packs
CSS starter
A populated Alice page with basic type styles. Start adjusting the values.
ZIP · 2 KB · No installation requiredTypography workshop
All six sequential examples and the two-hour teaching guide.
ZIP · 15 KB · No installation requiredAlice: the complete journey
All ten preserved demonstrations, including the interactive rabbit-hole finale.
ZIP · 62 KB · No installation requiredAlice, one step at a time
01
The starting point
The original reset and unstyled chapter. Start with the content.
HTML · Reset
02
Type & hierarchy
Size, weight and space establish a clear reading hierarchy.
Font size · Weight · Spacing
03
Colour, meet code
Reusable colour variables introduce the visual identity.
Custom properties · Colour
04
An editorial grid
The chapter becomes a three-column editorial composition.
Grid · Gap · Containers
05
Turn up the type
Scale, outlines and rotation make the same words more expressive.
Transforms · Stroke · Shadow
06
Made to respond
Fluid type and a mobile grid adapt the composition.
clamp() · Media queries
07
A little interaction
Hover and focus transitions make the chapter link respond.
Hover · Focus · Transitions
08
Type in motion
Short keyframe sequences introduce kinetic typography.
Keyframes · Stagger
09
Take control
JavaScript buttons start, replay and pause the movement.
Events · Classes · Replay
10
Down the rabbit-hole
Follow the White Rabbit into a choreographed 3D descent.
Perspective · Spiral · Reduced motion
The typography workshop
CSS WORKSHOP / 01
Basic typography
Stage 1 of the two-hour typography workshop. Compare the CSS with the preceding example.
CSS WORKSHOP / 02
Line height & spacing
Stage 2 of the two-hour typography workshop. Compare the CSS with the preceding example.
CSS WORKSHOP / 03
Alignment & transformation
Stage 3 of the two-hour typography workshop. Compare the CSS with the preceding example.
CSS WORKSHOP / 04
Margins, padding & width
Stage 4 of the two-hour typography workshop. Compare the CSS with the preceding example.
CSS WORKSHOP / 05
Colour & contrast
Stage 5 of the two-hour typography workshop. Compare the CSS with the preceding example.
CSS WORKSHOP / 06
Experimental typography
Stage 6 of the two-hour typography workshop. Compare the CSS with the preceding example.