Plays best on a computer.
Rotate your phone
This game plays better in landscape.
CSS Diner
Luke Pacholski (flukeout)
Keyboard/Mouse
Similar games
CSS Diner is a playful puzzle game that teaches CSS selectors on a restaurant table.
In each level you type the right selector to pick out the requested items among plates, bento boxes, apples and pickles. Across 32 levels you learn one of the cornerstones of web development by playing, from type and ID selectors to descendants and advanced pseudo-classes like :nth-child.
-
Step 1: Read the order at the top, type a matching selector into the CSS editor and press Enter.
-
Step 2: If it is correct, the chosen items fly off the table and you move on.
-
Step 3: Hover over items on the table to see their HTML and use the help panel on the right for hints.
-
Step 4: Type a number to jump straight to that level.
- Keyboard
- Mouse
Keyboard
- Enter Other keys
Once the game starts, its controls are also shown on screen.
Full instructions
Read the order at the top, type a matching selector into the CSS editor and press Enter. If it is correct, the chosen items fly off the table and you move on. Hover over items on the table to see their HTML and use the help panel on the right for hints. Type a number to jump straight to that level.
Credits and license
- Developer
- Luke Pacholski (flukeout)
- License
- MPL-2.0
- Source
- github.com/flukeout/css-diner
- Attribution
- CSS Diner by Luke Pacholski (flukeout), MPL-2.0. Fonts: Exo 2 (SIL OFL 1.1, The Exo 2 Project Authors) and Satisfy (Apache-2.0, Sideshow), bundled locally via Fontsource.
This game is hosted under the terms of its license.
Ratings and comments
Be the first to rate it
The average appears here once enough players have rated.
Rate this game
Write the first comment
Played it? Share what you think: the difficulty, your favourite level, a tip.
Comments could not be loaded.
