TechWebster Code Playgrounds Code playgrounds
Interactive web skills · browser-based · no signup

Learn the web.
Make it move.

A growing set of hands-on coding games for the building blocks of the web. Start with CSS layout and selectors today; HTML and JavaScript challenges are next in the lab.

01 live path 40 missions 03 web skills
Live specimen

Build your browser instincts

Choose a web skill. Keep growing.

Every path turns a small concept into a visible result. The CSS path is open now; the next two are being built with the same play-first format.

Live nowCSSLayout, placement & precision
Coming nextHTMLStructure & semantics
In the labJavaScriptLogic & interaction
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