# 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

1. Pick a design. Each one comes with its own pictures and fonts, and a picture of the finished page.
2. Watch me build it: click through its steps and see what each piece of CSS changes on the page.
3. 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.
4. Build it from the picture: only the finished page to go by, with hints if you need them.
5. 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](https://www.ask-codey.com/games/restyle/novice/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](https://www.ask-codey.com/games/restyle/novice/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](https://www.ask-codey.com/games/restyle/novice/morning-paper): A broadsheet: a masthead, thin rules, small caps. A Novice Restyle design in 10 steps. Free to play.
- [Terminal](https://www.ask-codey.com/games/restyle/novice/terminal): Green on black, a $ prompt before every heading, a soft screen glow. A Novice Restyle design in 10 steps. Free to play.
- [Trailhead](https://www.ask-codey.com/games/restyle/novice/trailhead): Loose watercolor mountains, pine green and sky blue, a field-journal feel. A Novice Restyle design in 11 steps. Free to play.
- [Botanical](https://www.ask-codey.com/games/restyle/apprentice/botanical): Cream and leaf green, an italic serif, a leafy frame. A Apprentice Restyle design in 13 steps. Free to play.
- [Café Chalkboard](https://www.ask-codey.com/games/restyle/apprentice/cafe-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](https://www.ask-codey.com/games/restyle/apprentice/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](https://www.ask-codey.com/games/restyle/apprentice/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](https://www.ask-codey.com/games/restyle/apprentice/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](https://www.ask-codey.com/games/restyle/journeyman/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](https://www.ask-codey.com/games/restyle/journeyman/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](https://www.ask-codey.com/games/restyle/journeyman/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](https://www.ask-codey.com/games/restyle/journeyman/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](https://www.ask-codey.com/games/restyle/journeyman/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](https://www.ask-codey.com/games/restyle/freelancer/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](https://www.ask-codey.com/games/restyle/freelancer/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](https://www.ask-codey.com/games/restyle/freelancer/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](https://www.ask-codey.com/games/restyle/freelancer/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](https://www.ask-codey.com/games/restyle/master/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](https://www.ask-codey.com/games/restyle/master/observatory): A night sky, frosted-glass panels, a slowly shifting gradient. A Master Restyle design in 20 steps. Free to play.
- [Parkland](https://www.ask-codey.com/games/restyle/master/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](https://www.ask-codey.com/games/restyle/master/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.

[Watch me build Terminal](https://www.ask-codey.com/games/restyle/novice/terminal/watch)

[Every game](https://www.ask-codey.com/games)

Source: https://www.ask-codey.com/games/restyle