Restyle: one page, many designs, built by you
Restyle is a CSS game: one web page per Level that never changes, and designs you build on it with CSS from a set of pictures. Free to play.
How to play
- Pick a design. Each one comes with its own pictures and fonts, and a picture of the finished page.
- Watch me build it: click through its steps and see what each piece of CSS changes on the page.
- Build it one step at a time: write the CSS yourself in a workspace like a code editor, and each step ticks when your page passes it.
- Build it from the picture: only the finished page to go by, with hints if you need them.
- Every design uses only the CSS of its Level, from colors, fonts and background pictures at Novice up, and each step links to the lesson that teaches it.
The designs
- Bakery Morning: Warm morning light on a flour-dusted board, crusty bread, a handwritten title. A Novice Restyle design in 10 steps. Free to play.
- Ballpark: A vintage baseball card: navy and red on cream, halftone dots, striped outfield grass. A Novice Restyle design in 11 steps. Free to play.
- Morning Paper: A broadsheet: a masthead, thin rules, small caps. A Novice Restyle design in 10 steps. Free to play.
- Terminal: Green on black, a $ prompt before every heading, a soft screen glow. A Novice Restyle design in 10 steps. Free to play.
- Trailhead: Loose watercolor mountains, pine green and sky blue, a field-journal feel. A Novice Restyle design in 11 steps. Free to play.
- Botanical: Cream and leaf green, an italic serif, a leafy frame. A Apprentice Restyle design in 13 steps. Free to play.
- Café Chalkboard: A café's chalkboard: chalk doodles in pastel colors, a wooden frame, dusty smudges. A Apprentice Restyle design in 13 steps. Free to play.
- Game Night: Board-game night: a walnut table, a felt mat, dice, game pawns and playing cards tipped at angles. A Apprentice Restyle design in 14 steps. Free to play.
- Paper Cutout: Layers of colored paper, slightly turned, with soft shadows and torn edges. A Apprentice Restyle design in 13 steps. Free to play.
- Road Trip: A mid-century travel poster: a teal convertible on a coast road at sunset, postcards tipped at angles. A Apprentice Restyle design in 14 steps. Free to play.
- Blueprint: White lines on drafting blue, a grid-paper background, dimension lines around headings. A Journeyman Restyle design in 16 steps. Free to play.
- Gym Board: Bold sporty graphics: volt yellow on charcoal, kettlebells, a stopwatch, workout cards. A Journeyman Restyle design in 16 steps. Free to play.
- Pit Lane: Race day: carbon fiber, a red car seen from above, starting lights, tire marks. A Journeyman Restyle design in 16 steps. Free to play.
- Pizzeria: Overhead food photography: a wood-fired pizza on a peel, basil, tomatoes, dark stone. A Journeyman Restyle design in 16 steps. Free to play.
- Swiss Poster: Huge black type, one red accent, an off-center grid, strict left edges. A Journeyman Restyle design in 15 steps. Free to play.
- Arcade Night: Neon pink and cyan on dark navy, a pixel font, scanlines, a flickering title. A Freelancer Restyle design in 18 steps. Free to play.
- Brutalist: Raw: thick black borders, hard offset shadows, clashing yellow and blue, stickers stuck on at angles. A Freelancer Restyle design in 17 steps. Free to play.
- Mountain Lodge: A cozy winter cabin: night blue, snowfall, warm windows, knitted wool. A Freelancer Restyle design in 17 steps. Free to play.
- Skate Park: A photocopied skate zine: grainy black-and-white cutouts, torn tape, fluorescent pink. A Freelancer Restyle design in 17 steps. Free to play.
- Magazine: An editorial spread: text wrapping around a cut-out portrait, a big first letter, vertical section labels. A Master Restyle design in 20 steps. Free to play.
- Observatory: A night sky, frosted-glass panels, a slowly shifting gradient. A Master Restyle design in 20 steps. Free to play.
- Parkland: A layered screen-print landscape at dusk that moves in depth as you scroll. A Master Restyle design in 20 steps. Free to play.
- Reef: Under the sea: sunlit water, coral, tropical fish swimming across the page. A Master Restyle design in 20 steps. Free to play.
Free for everyone. Play as a guest and nothing is saved; registration is free and keeps track of your stats and progress.