简体中文
EnglishWhat coding games are available on Codepip?
Updated
Codepip hosts a catalog of browser-based coding games organized by web development topic. CSS has the largest selection, followed by HTML, JavaScript, and a few specialized topics like SQL and Tailwind. Most games are marked "Pro," while a handful are free to play, including Flexbox Froggy, Grid Garden, Anchoreum, and the beta Tailwind Trainer.
CSS games
CSS is Codepip's deepest category, covering layout, selectors, transforms, and utility classes.
| Game | Focus | Access |
|---|---|---|
| Flexbox Froggy | CSS flexbox fundamentals | Free |
| Flexbox Froggy Pro | Flexbox mastery with infinite practice levels | Pro |
| Grid Garden | CSS grid | Free |
| Anchoreum | Positioning and sizing elements with CSS anchor | Free, new |
| Cascade | Rapid-fire CSS microgames | Pro |
| CSS Scoops | CSS selectors | Pro |
| Nth Cart | The :nth-child() selector |
Pro |
| Selector Showdown | CSS selector specificity | Pro |
| CSS Surgeon | Scaling, rotating, and moving elements with transform |
Pro |
| Tailwind Trainer | Tailwind utility classes | Free, beta |
If you are new to layout, start with Flexbox Froggy and Grid Garden before moving to the Pro variants. Selector-focused games (CSS Scoops, Nth Cart, Selector Showdown) target a different skill set and are worth revisiting separately.
HTML games
Three Pro games cover HTML structure and file organization:
- Nester — practice nesting HTML code correctly.
- Pathfinder — construct file paths.
- Sourcery — write HTML using Emmet abbreviations.
JavaScript games
JavaScript games split into math, arrays, strings, console, and internationalization:
- Code Crunchers — JavaScript math.
- Disarray — JavaScript array methods.
- Stringo — JavaScript string methods.
- Regex Machina — regular expressions.
- Console Caper — getting the most out of the browser developer console.
- Intl Delivery — the JavaScript internationalization API.
Other topics
- Querymon — SQL database queries (Pro).
How to choose
Match the game to the skill you want to drill rather than working through the catalog in order. Layout problems point to Flexbox Froggy or Grid Garden; selector confusion points to CSS Scoops or Selector Showdown; array and string method recall points to Disarray or Stringo. Free games let you sample a topic before deciding whether the Pro tier is worth it for the deeper practice levels.
A free account adds checkpoints (saved progress accessible from any device), achievements, and notifications about new releases. Pro plans are listed separately on the site's Plans page, with monthly, annual, lifetime, and group options.