Simon’s teach-to-codeOne small project at a time

The coding trail

Every stop is a small, real thing you can open in a browser. Follow the path from buttons and pages to maps, motion, and a tiny strategy game.

Ready to explore Coming soon

Project trail map

01 / FIRST STEPSReady

Calculator

Make buttons remember numbers and update a page when you click.

VariablesFunctionsEvents
Open project →
02 / MOVING PARTSReady

Elevator

Build a state machine that queues requests and moves between floors.

QueuesTimersAnimation
Open project →
03 / WORDSReady

Hangman

Use strings, loops, and validation to make a word game.

StringsLoopsRules
Open project →
04 / DECKReady

Blackjack

Model cards as objects, shuffle a deck, and settle a round from rules.

ObjectsRandomnessPhases
Open project →
05 / MAPSReady

Battleship

Place ships on a grid. Learn coordinates, turns, and hidden information.

2D arraysCoordinatesTurns
Open project →
06 / CANVASReady

Paint app with undo

Draw with pointer events. Keep a history so undo and redo work.

CanvasPointer eventsHistory
Open project →
07 / PHYSICSReady

Balloon shooting game

Move objects through time. Add gravity, angles, and collisions.

Game loopsVelocityGravity
Open project →
08 / ENTITIESReady

Parachuter game

Update, collide, remove, and draw many moving things at once.

EntitiesSpritesStates
Open project →
09 / CHECKPOINTReady

Phaser remake

Rebuild the parachuter game with Phaser. See what the library replaces.

PhaserScenesAssets
Open project →
10 / WAVESReady

Alien Raid

Fly on the arrow keys and shoot up. The swarm marches as one block, and speeds up as you empty it.

KeyboardFormationsWaves
Open project →
11 / MAZEReady

The Cheese Vault

Keep the level as data. Read it, build it, and change it as the mouse eats.

Grid mapsTile collisionMap as data
Open project →
12 / WORLDReady

Cave Flyer

Fly through a cave bigger than the window. Move a camera, and keep it inside the world.

World spaceCameraGravity
Open project →
13 / DISTANCEReady

Rooftop Run

Run across rooftops that are built as you reach them, and thrown away once you pass.

GenerationDifficultySaving
Open project →
14 / CUTOVERReady

One program, many files

The same rooftop run, cut into six files. Each file has one job, and git remembers every version.

File structureScriptsGit
Open project →
15 / CUTOVERReady

Client and server

Catch falling stars, then send the score to a second program that holds one board for everybody.

Serverfetchasync
Open project →
16 / AIMReady

Tank Duel

Two tanks, one keyboard. Drive at any angle, slide along walls, and bounce shells off the blocks.

AnglesWall slidingHealth
Open project →
17 / CUTOVERReady

TypeScript

Tank Duel again, with types. It runs from npm on your own computer, so this card opens the code instead of the game.

Typesnpmimport
Open the code →
18 / EDITORReady

Map editor

Paint ground onto a grid and save it to a server. It runs from npm, so this card opens the code instead of the editor.

Content as dataSavingTests
Open the code →
19 / COMMANDReady

Unit selection

Click a tank, drag a box round several, and send them across a map. It runs from npm, so this card opens the code instead of the game.

SelectionOrdersTests
Open the code →
20 / ROUTESReady

Pathfinding

Watch a search spread across the map, and send tanks round the rock and the water. It runs from npm, so this card opens the code instead of the game.

SearchA*Tests
Open the code →
21 / GATHERReady

Resources

Six harvesters dig ore, drive it home, and tip it into the refinery while the credits counter climbs. It runs from npm, so this card opens the code instead of the game.

RatesBarsJobs
Open the code →
22 / QUEUEReady

Building and production

The credits finally buy something. A build yard sells harvesters and buildings, each with a price, a build time and a queue to wait in. It runs from npm, so this card opens the code instead of the game.

QueuesPrerequisitesState
Open the code →
23 / OPPONENTReady

Enemy AI

Three red tanks guard the map. Each one walks a beat, spots a tank of yours, finds a route round the rock, and opens fire. Five questions in one function are the whole brain. It runs from npm, so this card opens the code instead of the game.

TargetsPatrolAttack
Open the code →
24 / THE GAMEReady

Small strategy game

Two refineries, two build yards, one ore field, and an enemy that digs, buys and attacks the way you do. You write its commander: the plan it spends to, the moment it goes, and who has won. It runs from npm, so this card opens the code instead of the game.

EconomyStrategyWinning
Open the code →

Keep following the path.

Each project is deliberately small. Finish one, look back at what it taught you, and take the next step when you are ready.