Learn by Building: learn to code by building games and web pages

Learn to code by building things you can see: web pages and real games, one small step at a time. Every step goes the same way: what we are doing, the code, what it means, then your turn. The result shows up right next to your code.

Learn by Building is free and open source. If it helps you, a star on GitHub helps others find it too. GitHub

Build projects

• My business card: Build your own business card page with HTML and CSS: a heading, a card with rounded corners and a shadow, and your links. The page updates as you type. (12 steps)
• Traffic light: A traffic light that switches by itself, with only HTML and CSS: boxes, circles, flexbox, colors by position, and a CSS animation with a timeline. (12 steps)
• Text detective: A page that studies any text as you type: characters, words, the most common word, and the text in Caesar code. Your first real JavaScript: variables, functions, arrays, loops and a Map. (13 steps)

Games

• Tic-tac-toe: X and O on a 3×3 board. Mouse clicks, a board as an array, finding the winner, and a computer that never loses, thanks to recursion. (33 steps)
• Simon Says Colors: Watch the pads light up and repeat the sequence, one more color every round. Timers that drive a show, turns between the computer and the player, checking answers step by step, and a game that speeds up. (27 steps)
• Connect Four: Drop discs into the columns and get four in a row before the computer does. A 2D array with gravity, a falling animation, checking lines in four directions, and a computer opponent that wins, blocks and thinks one move ahead. (38 steps)
• Memory: Flip cards two at a time and find the pairs. Shuffling fairly, finding what was clicked, timers, and a card-flip animation. (25 steps)
• Wordle-style Word Guess: Guess the five-letter word in six tries, with green, yellow and gray hints. Keyboard input, string handling, the scoring rules for repeated letters, an on-screen keyboard for phones and saved statistics. (26 steps)
• Whack-a-Mole: Moles pop out of holes; click them before they hide. Time-based state, circle hit tests, a timed round and a difficulty curve. (18 steps)
• 15 Puzzle: Slide the numbered tiles back into order. Positions in a flat array, neighbours on a grid, why a shuffle must be made of real moves (and the math that proves which puzzles can be solved), and smooth sliding animation. (27 steps)
• Candy Crush-style Match 3: Swap neighbouring gems to line up three of a color. A starting board with no matches, finding runs with a Set, gravity with two pointers, cascades that score more and more, a state machine for flashing and falling, a hint found by trying every move, and a move budget. (29 steps)
• Sudoku: Play Sudoku, then teach the computer to solve it and to invent new puzzles. A grid read from a string, the three rules in one loop, a backtracking solver that picks the most constrained cell, a generator that keeps each puzzle to exactly one solution, and a number pad for phones. (28 steps)
• Endless Runner: Jump over cacti and duck under birds while the world speeds up. Jump physics, variable jump height, random spawning and forgiving hitboxes. (19 steps)
• Blackjack: Beat the dealer without going over 21. Cards as objects, a fair Fisher–Yates shuffle, aces worth 11 or 1, a dealer that follows fixed rules, chips and payouts, a turn spread over time, doubling down, and buttons that show what you can do. (22 steps)
• Hangman: Guess the word one letter at a time before the figure is drawn. A Set of guesses, a masked word in one line, keys filtered down to letters, a drawing made from an array of functions, every() to know when you win, and a keyboard on the screen. (36 steps)
• Conway's Game of Life: Four simple rules, and a world that comes alive. A grid of cells, counting neighbours, why every cell must change at the same moment (double buffering), a world that wraps around, painting with the pointer, and the famous glider gun. (32 steps)
• Typing Rain: Type the falling words before they land. Measuring text to place it, locking on to the most urgent word, drawing half a word in another color, lives, levels tuned by measuring real typing speeds, words per minute and accuracy, and a keyboard that lights up the next key. (33 steps)
• Sokoban: Push every box onto a goal. Reading a standard level format, sets for walls and goals, the pushing rules, levels, and undo with a history of snapshots. (29 steps)
• Puzzle Bobble-style Bubble Shooter: Shoot bubbles to pop three of a color and drop what they hold up. A hex grid in a 2D array, aiming with atan2, shots that bounce and snap into the grid, a flood fill for groups and another for what still hangs, a ceiling that comes down, and a guide that simulates the shot. (31 steps)
• Klondike Solitaire: The classic card game, built from piles. Thirteen piles in one object, overlapping columns, the rules as pure functions, tap to move, drag and drop with a grab offset, a win check after every move, and undo with a stack of snapshots. (40 steps)
• Rhythm Lanes: Hit the notes as they reach the line. A song written as text, notes placed by time and drawn from the clock, timing windows for perfect and good, misses, combos that raise a multiplier, accuracy and a grade, and lanes you can tap on a phone. (35 steps)
• Snake: Steer a growing snake to the food without hitting the walls or yourself. Grids, arrays, the game loop and keyboard input. (28 steps)
• Pong: The first video game hit: two paddles and a ball. Held keys, bouncing, angles, scoring and a simple computer opponent. (26 steps)
• Flappy-style Bird: Tap to flap between the pipes. Velocity, gravity, game states, spawning obstacles and a frame-rate-proof loop. (30 steps)
• Breakout: Smash a wall of bricks with a ball and a mouse-driven paddle. Nested loops, circle-versus-box collision, lives and serving, and particle effects. (39 steps)
• Frogger-style Crossing: Hop across a busy road and ride logs over a river to reach the homes. Grid movement in a real-time world, lanes that wrap around with modulo, riding moving platforms and levels that speed up. (22 steps)
• Doodle Jump-style Climber: Bounce from platform to platform and climb as high as you can. One-way platforms, a camera that follows you up, endless platforms generated so they are always reachable, moving platforms and traps. (24 steps)
• Lunar Lander: Fire the engine and tilt the lander to touch down gently on the pad. Random terrain, gravity and thrust along an angle with sin and cos, rotating drawings, the rules of a safe landing, and debris when it goes wrong. (31 steps)
• Mario-style Platformer: Run, jump and stomp through a scrolling level to the flag. A level made of text, tile collisions, acceleration, coyote time, a camera, enemies and stomping. (37 steps)
• 2048: Slide numbered tiles and merge equal ones to reach 2048. A 2D grid, a pure slide-and-merge function reused in four directions, and swipe input. (26 steps)
• Minesweeper: Clear the field without touching a mine, reading the numbers as clues. Neighbour counting, a safe first click, flood fill with a stack, flags and a timer. (26 steps)
• Tetris-style Blocks: Falling pieces, rotation and line clears. Pieces as matrices, rotating a matrix, collision against a grid, locking, clearing rows, levels and a fair random bag. (32 steps)
• Tower Defense: Build towers beside the road and stop the waves before they get through. Walking along a path by distance, turning mouse clicks into tiles, choosing targets, homing bullets, splash damage and waves that grow stronger. (42 steps)
• Space Invaders-style: Hold the line against a marching alien formation. Shot cooldowns, bullet lists, group movement, a speed-up that emerges from the rules, and enemy fire. (21 steps)
• Battleship: Sink the enemy fleet before it sinks yours, and teach the computer to hunt. Random fleets that never overlap, one fire function for both sides, turns, and three computer players you can measure: random (about 95 shots), hunt and target (about 56) and a heat map of every possible ship position (about 44). (35 steps)
• Missile Command-style Defense: Click the sky to fire interceptors and protect six cities from falling missiles. Moving towards a target at a set speed, explosions that grow and shrink, chain reactions, limited ammo, waves and missiles that split. (35 steps)
• Bomberman-style Arena: Blast through crates and trap the enemies. A grid of walls, pillars and crates, sliding from tile to tile, bombs with fuses, cross-shaped explosions that stop at walls and set off chain reactions, wandering enemies, power-ups kept in a Map, and touch controls that reuse the keyboard's rules. (42 steps)
• Asteroids: Rotate, thrust and shoot through a field of breaking rocks. Angles and vectors with cos and sin, inertia, screen wrap, vector drawing and circle collisions. (41 steps)
• Pool: Clear the table in as few shots as you can. Velocity from an angle, friction and cushions, elastic collisions between equal balls (and why they leave at 90 degrees), pockets, a slingshot aim, smaller physics steps for fast shots, and a ghost ball that predicts the hit. (33 steps)
• Pac-Man-style Maze Chase: Eat every pellet in the maze while four ghosts hunt you. Smooth tile-to-tile movement, buffered turns, ghost AI with four personalities, scatter and chase modes, and power pellets that turn the hunters into the hunted. (42 steps)
• Pinball: Keep the ball alive with two flippers. A table made of line segments, bouncing a ball off any line with the closest point and the normal, bumpers that add energy, turning flippers, the relative-velocity trick that lets a flipper throw the ball, a spring launcher, and two-thumb touch controls. (42 steps)
• Wolfenstein-style 3D Maze: Walk through a 3D maze drawn from a flat map, the way the first 3D shooters did it. Angles with sin and cos, sliding along walls, casting rays through a grid (DDA), perspective, the fish-eye fix and shading. (18 steps)
• Chess: Build a complete chess game and a computer that plays it. Move patterns as data, check found by looking outwards from the king, legal moves by trying and taking back, castling, en passant, promotion, checkmate, and a minimax search with alpha-beta pruning. (48 steps)
• OutRun-style Racer: Race down a winding road in fake 3D, the way arcade racers did it before real 3D. Perspective projection, painting from far to near, steering against the pull of curves, cars that shrink into the distance and lap times. (44 steps)
• Zelda-style Dungeon: Explore four rooms, fight with a sword, find the key, open the door and escape. Rooms written as text, walking and sliding along walls, moving between rooms, a sword hitbox, enemies that wander and chase, hearts, keys and a world that remembers what you took. (22 steps)
• Scorched Earth-style Artillery: Lob shells over the hills at a computer opponent. Hills from added sine waves stored as a height map, aiming by angle and power (and the atan2 trap), flight one frame at a time, round craters dug into the ground, damage that falls off with distance, wind, and a computer that aims by imagining thousands of shots. (23 steps)
• Angry Birds-style Slingshot: Launch birds at towers of wood and stone and knock out the pigs. Aiming with an angle and a pull, gravity and the parabola (drawn before you shoot), boxes that stack, push and bounce by their mass, damage from hard hits, three birds per level, and levels written as data and tested to stand. (47 steps)