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.
CSS starter
A little type hierarchy to build on.
Get the CSS starter ↓Type workshop
Six steps. Two hours. Your own composition.
Explore the workshop ↘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.
Basic typography
Stage 1 of the two-hour typography workshop. Compare the CSS with the preceding example.
Line height & spacing
Stage 2 of the two-hour typography workshop. Compare the CSS with the preceding example.
Alignment & transformation
Stage 3 of the two-hour typography workshop. Compare the CSS with the preceding example.
Margins, padding & width
Stage 4 of the two-hour typography workshop. Compare the CSS with the preceding example.
Colour & contrast
Stage 5 of the two-hour typography workshop. Compare the CSS with the preceding example.
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.
The starting point
The original reset and unstyled chapter. Start with the content.
HTML · Reset
Type & hierarchy
Size, weight and space establish a clear reading hierarchy.
Font size · Weight · Spacing
Colour, meet code
Reusable colour variables introduce the visual identity.
Custom properties · Colour
An editorial grid
The chapter becomes a three-column editorial composition.
Grid · Gap · Containers
Turn up the type
Scale, outlines and rotation make the same words more expressive.
Transforms · Stroke · Shadow
Made to respond
Fluid type and a mobile grid adapt the composition.
clamp() · Media queries
A little interaction
Hover and focus transitions make the chapter link respond.
Hover · Focus · Transitions
Type in motion
Short keyframe sequences introduce kinetic typography.
Keyframes · Stagger
Take control
JavaScript buttons start, replay and pause the movement.
Events · Classes · Replay
Down the rabbit-hole
Follow the White Rabbit into a choreographed 3D descent.
Perspective · Spiral · Reduced motion
Original workshop code, preserved as written. Early examples intentionally precede the responsive lesson. Individual Alice ZIPs include neighbouring examples so their navigation keeps working.
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.
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