I built interview prep games where you write real CSS and JavaScript

Interview prep has a habit problem. You open a list of questions, read a solution, and close the tab feeling productive. A week later the idea is gone, because you never used it.

I wanted something I would actually open for ten minutes. That is how Playhire started: interview topics turned into short browser games, with no sign-up required to play. There are 13 games live, grouped into six Masters — CSS, DSA, JavaScript, OOP, system design, and interview English — and 181 levels in total. I want to talk about a design rule we refused to break, and what it taught me about teaching hard ideas.

The rule: write the real thing

A lot of learn-to-code games hide the language behind arrow keys or a custom mini-language. That can be delightful, and it is also a step away from the interview. On Playhire, when the topic is CSS, you type CSS. When it is JavaScript, you type JavaScript. The page's own engines decide if you are right. That sounds obvious. It is also the whole product.

How Flexbox becomes a game you cannot fake

Take Flex Escape. A horde is closing in on a building site. The steel beams are flex items; the gap you need to cross only closes when they sit in the right place. You type into an editor and watch the beams move. There are 14 sites.

The mechanic forces a mental model interviewers care about: the main axis and the cross axis. With flex-direction: row, justify-content works left to right and align-items works top to bottom. Change the direction to column and those properties appear to swap, because the axes rotated. Once you think in axes instead of "move it up", most Flexbox puzzles get easier. Putting justify-content on the item instead of the container also fails in public, which is the most common real-world bug.

Flex Strike uses the same language in a tighter loop: 24 waves across Easy, Hard, and Pro. Hostiles sit in fixed lanes. Your turrets sit on a flex rail. Guessing does not work, because the alignment has to be exact. That is how we drill the spacing tools people mix up: space-between versus space-evenly versus gap, margin: auto to push one item to the far end, order, and flex-grow. You can feel why flex-grow: 2 is twice the leftover space, not twice the total width.

Later CSS games keep the "real CSS, live preview" contract and change the question:

• In Drone Dock (18 levels) the hangar is the container and the drones are items. Levels start with single-line Flexbox and move into Grid, including place-items: center as the short way to center a child on both axes.
• Blueprint (11 levels) shows a dashed target layout. You edit real CSS until the live preview sits on the dashed lines. Early levels are Flexbox classics — centering, space-evenly, flex: 1. Later ones are Grid: fr units, grid-template-areas, auto-fit, dense packing. When two tools can solve the same level, that is the interview: knowing which one fits.
• Selector Quest (18 chambers) runs your selector through the page's own query engine. The vault opens only if you matched exactly the right elements, no more and no fewer — through combinators, attribute selectors, :has(), and specificity duels.
• Position Ninja (15 missions) is checked by the browser's layout engine, so the traps are real. position: sticky that silently fails inside overflow: hidden, or fixed that stops being relative to the viewport because an ancestor has a transform, fails in the game the same way it fails in production.

HTML Lab, which starts the CSS Master path, applies the same idea to markup: 16 lessons where you write real HTML and watch the rendered page, the DOM tree, and a screen-reader view update together.

Mapping a mechanic to a concept

The event loop is hard to lecture about and easier to play if you design the loop correctly.

Event Loop Express has ten levels. You read a short snippet, predict the console.log order, then watch the call stack, the microtask queue, and the task queue run the code step by step. Every answer is checked against real Node output. Level 3, "The VIP lane", is the classic rule in game form: promise callbacks are microtasks, setTimeout even with 0 ms is a task, and the engine drains every microtask before it takes the next task.

console.log("A");
setTimeout(() => console.log("B"), 0);
Promise.resolve().then(() => console.log("C"));
console.log("D");
// A, D, C, B

The important design choice is the order of play: predict first, then watch. If we only animated the queues, people would nod along. A wrong prediction is what makes the rule stick.

Sorting and graph search needed a different trick: either you do the comparison with your hands, or your algorithm has to work on a map it has never seen.

In Duck Pond you send each duck left or right of a party-hat pivot — that is quick sort. Web Sort lets you tap boxes through merge sort, or write merge() yourself. Every comparison is a move you make, which is why the O(n log n) / O(n²) trade-off is easier to explain afterwards.

Code Arena is closer to a real interview: six turn-based puzzles, one turn(state) function, three test cases, and a replay of what your code did each turn. A solution only counts when it passes every test, not just the example. Because turn is called again every turn, any memory you need has to live outside the function or in the state you are given — the same idea as a visited set during a graph search.

Rover Protocol pushes that further. Twelve missions, from loops up to BFS, Dijkstra, DFS, and flood fill, each tested on maps your code has never seen. A path hard-coded for the first map dies on the second. The game only lets a general algorithm through. That is a more honest teacher than a green check on the sample input.

What I learned about making learning games fun

A few things we kept running into.

One idea at a time. If a level also sneaks in a new API, failure becomes ambiguous. You do not know whether you missed the concept or the syntax.

Make the feedback visual and immediate. Beams moving, drones landing, queues emptying, a rover taking a wrong turn — that loop is the reason you try one more level.

Do not rely on a single metaphor. Flexbox is more interesting when it is an escape route, a turret rail, a hangar, and a dashed blueprint, not fourteen screens of the same animal.

After a win, explain the interview angle in a few lines — the complexity, the trap, the one-liner you should be able to say out loud. Blueprint and Code Arena do this on purpose. The Blockchain labs go further: each of the 16 topics ends with a three-question quiz and a typical interview question with a model answer. The hashing and signatures are real SHA-256 and ECDSA from the browser's WebCrypto API.

Keep the door open. Every game works as a guest; progress stays in the browser. Optional Google sign-in keeps progress across devices, puts you on the weekly leaderboard (it resets every Monday at 00:00 PKT), and unlocks a Certificate of Mastery with a unique ID and a public verify link when you clear every live game in a Master. XP is simple on purpose: +50 per level, +20 per star, and a 1.2× daily streak. Ads appear on some pages, but they never block a game, and you never pay to unlock a level.

Fun, here, is not jokes on the loading screen. It is a problem small enough to finish, a check you cannot argue with, and a reason to start the next one.

Try it

Playhire is free at playhire.online. If you want a CSS session, start with Flex Escape or Drone Dock. If you want JavaScript, start with Event Loop Express. You can play the first level in the time it takes to read a blog intro — which was the point.