01 / STRUCTURE
HTML starter
A blank page and the essential file structure.
Get the template ↓WEB FORTYPE
Explore typography, HTML, CSS and creative coding for the web.
A browser is
your next sketchbook.
HTML gives your ideas structure. CSS gives them a voice. JavaScript adds a response. Learn by changing a value, testing a layout and making something your own—on every screen.
01 / Start
somewhere.
Open a file. Make a change. See what happens. These are real workshop files, ready to use in your own editor.
02 / STYLE
CSS starter
A little type hierarchy to build on.
Get the CSS starter ↓03 / EXPERIMENT
Type workshop
Six steps. Two hours. Your own composition.
Explore the workshop ↘04 / GO FURTHER
Follow Alice
Ten versions of one evolving website.
See the journey ↘02 / Six steps.
Endless variations.
The two-hour HTML & CSS workshop. Start simple, work through the properties, then make your own typographic composition.
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.
03 / Same words.
New worlds.
One chapter. Ten progressive demonstrations. Follow Alice from a plain HTML document to an interactive typographic rabbit-hole.
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
04 / THE STRUCTURE
Give your
words a home.
Headings, paragraphs, links and meaningful sections. HTML describes what your content is.
Start with meaning
A heading and a paragraph are enough to begin.
<h1>Alice in Wonderland</h1>
<p>Down the Rabbit-Hole.</p>Edit HTML
Try this → Add a chapter heading using h2.
SELECTOR { PROPERTY: VALUE; }
Style is
a choice.
Size. Weight. Colour. Space.
Small changes can make a big difference.
05 / THE APPEARANCE
Now make
it yours.
CSS controls typography, colour, spacing and layout. Learn individual properties, then combine them into a responsive composition.
06 / Play
with the type.
No wrong turns. Adjust the controls and watch the same words change character. Copy the CSS when you find a direction you like.
Down the
Rabbit-Hole.
07 / THE INTERACTION
Make
something happen.
A button click can change text, toggle a class or trigger an animation. Keep the behaviour in JavaScript and the appearance in CSS.
What happens next?
08 / Keep
going.
A reference room for the things you want to understand, try again or take further.
09 / Take
the files.
Free, editable and ready for your own experiments. Unzip a folder and open index.html. No accounts. No installation.
HTML starter
The original blank HTML document, CSS imports and teaching reference.
ZIP · 1 KB · No installation requiredCSS 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 required