TechWebster — Learn CSS by playing CSS Arcade
Learn CSS by playing — flexbox · grid · position · selectors

Type CSS.
Watch it obey.

Four interactive CSS games, forty guided missions. Write real CSS — flexbox, grid, positioning and selectors — run it, and watch each scene respond instantly. Free, in your browser, no signup.

04 worlds 40 missions 01 browser
Live specimen
0 / 12

Yardmaster — Learn CSS Flexbox

The night shift is yours. Marshal freight cars against each waybill with justify-content, align-items, order, wrap and flow, then watch your train depart. 12 flexbox missions.

12 missions · Flexbox Open →
0 / 10

Grid Garden — Learn CSS Grid

Water the carrots with two-dimensional thinking. Tracks, fr units, repeat(), spans, gaps, areas and place-items across ten beds.

10 missions · Grid Open →
0 / 8

Position Patrol — Learn CSS Position

Deep space, drifting ships. Learn relative, absolute, fixed, sticky, offsets, inset and z-index dogfights across eight sectors.

8 missions · Position Open →
0 / 10

Selector Sniper — Learn CSS Selectors

One selector. Exactly the right targets, nothing else. Sharpen classes, ids, combinators, attributes and pseudo-classes across ten ranges.

10 missions · Selectors Open →

Why learn CSS by playing?

Reading about CSS flexbox and CSS grid only goes so far. CSS Arcade makes you write real CSS and see the result instantly — the fastest way to build layout intuition. Each mission is a small puzzle: a visual goal, an editor, and a live scene that obeys your code. No videos to pause, no boilerplate to wrestle — just you, the spec, and immediate feedback. Perfect for beginners, bootcamp students, and anyone who wants to learn CSS positioning and selectors interactively without leaving the browser.

Interactive, not passive

Type justify-content, grid-template-columns, inset or a precise selector — the scene updates live. Mistakes are visible, fixes are instant.

Free & local

All 40 missions run in your browser. Progress saves locally, works offline after first load — no signup, no install.

Four worlds, one arc

Start with Yardmaster (Flexbox), grow into Grid Garden, navigate Position Patrol, then sharpen aim in Selector Sniper.

Built by TechWebster

A learning lab from TechWebster — alongside CRM, Internship, Drive, Meet and more.

How it works

  1. Pick a world — Flexbox, Grid, Position or Selectors. Each opens at level 1.
  2. Write CSS in the editor to match the goal shown on the right.
  3. Run & watch — the scene updates live. Pass to unlock the next mission.

Search: learn css flexbox game, learn css grid interactive, css position tutorial game, css selectors practice — you are in the right arcade.

Frequently asked questions