Games / Puwesto

Puwesto

Learn CSS flexbox and grid: park the jeepneys at the terminal and plant the rice terraces, one line of CSS at a time.

Chapter – Cleared –

This game needs JavaScript.

Goal:

Changes show on the board as you type. Ctrl or ⌘ + Enter checks, then goes to the next level. Tab leaves the editor.

How to play

Puwesto is Filipino for someone's place or spot. Every level has pieces and a target spot for each one, and you write the CSS that puts them there. The editor already has the selector and the braces; you type the declarations, like justify-content: center;.
The Flexbox chapter is a jeepney terminal: park each jeepney in the bay painted for its route (Q for Quiapo, C for Cubao, B for Baclaran). It covers justify-content, align-items, flex-direction, order, align-self, flex-wrap, flex-flow, align-content, gap and flex-grow.
The Grid chapter is the payyo, the rice terraces of the Cordillera: plant the seedlings and the palay on their flooded paddies. It covers grid lines and span, grid-column, grid-row, grid-area, grid-template-columns and rows with fr, repeat() and minmax(), grid-template-areas, gap and the alignment properties.
The board changes as you type, and the level is cleared the moment everything is in place. Stuck? After three checks you can show the answer.
Your progress and the code you typed stay in your own browser only. Works with a keyboard, a screen reader and on your phone.