๐ŸŸจ My First Browser Game ยท 6 Episodes ยท All Free
๐ŸŸจ Beginner Friendly ยท JavaScript ยท Ages 10+

My First
Browser Game

Build 6 games in the browser with vanilla JavaScript โ€” no installs, no frameworks. A text editor and a browser is all you need. Interactive quizzes take you from Flappy Bird to a full platformer.

๐Ÿง‘ Ages 10+ โœ“ Completely Free ๐ŸŸจ JavaScript ๐Ÿ‘จโ€๐Ÿ‘ง Parent & Child โœ“ No Experience Needed
๐Ÿš€ Start with Episode 1 โ†’
6
Episodes
40+
Steps
10+
Age
Free
Always
The Full Series

6 Projects to Build Step by Step

Start at Episode 1 with a single HTML file. Each game teaches new skills โ€” canvas, the DOM, physics, algorithms โ€” ending with a full platformer.

Ep 1
๐Ÿฆ
โญ Start Here ยท Canvas ยท Game Loop ยท Gravity
Flappy Bird Clone
Build the infamous one-button game: an HTML canvas, gravity, pipe gaps and a score that makes your friends rage. No installs needed.
Ages 10+ 6 Steps ยท ~1.5 hrs Start Building โ†’
Ep 2
๐Ÿง 
DOM ยท CSS Flips ยท Shuffle
Memory Card Game
Build a card-flipping memory game from real HTML elements, CSS 3D flips and DOM events โ€” the same skills as building web apps.
Ages 10+ 6 Steps ยท ~1.5 hrs Start Building โ†’
Ep 3
๐Ÿงฑ
Canvas Physics ยท Particles
Browser Breakout
The canvas classic: mouse paddle, spin physics, a glowing brick wall, particle bursts and gradients โ€” the prettiest Breakout of the series.
Ages 10+ 6 Steps ยท ~1.5 hrs Start Building โ†’
Ep 4
๐Ÿ
Grid ยท Input Queue ยท Touch
Browser Snake
Snake on canvas with crisp grid movement, an input queue that fixes the classic Snake bug, wrap-around walls and touch controls for phones.
Ages 10+ 6 Steps ยท ~1.5 hrs Start Building โ†’
Ep 5
๐ŸŒ
Live Builder ยท Fill the Blanks
Browser Platformer
Fill in the numbers and watch your Mario-style game run live. You control gravity, jump height, enemies, coins, health and more.
Ages 10+ Interactive Builder Start Building โ†’
Ep 6
๐ŸŒฒ
Double Jump ยท Parallax ยท Levels
Platformer Part 2
The finale: write the whole platformer yourself, then add double jump, wall slide, a parallax camera and your own text-based level format.
Ages 10+ 6 Steps ยท ~2 hrs Start Building โ†’
Before You Start

What You Need

Nothing to install. Every game is one HTML file you open in any browser. A free editor makes it nicer.

๐ŸŒ
A Web Browser
Chrome, Firefox, Edge or Safari โ€” you already have one. It runs the games with zero setup.
โœ“ Already Have It
๐Ÿ“
A Text Editor
Even Notepad works, but the free VS Code is nicer with colour highlighting and error hints.
โœ“ Free (VS Code)
๐Ÿ’ป
Any Computer
Windows, Mac, Linux or even a Chromebook โ€” if it has a browser, it can build and run these games.
Any OS
๐Ÿ“
No Experience Needed
We explain every line of JavaScript as we write it. No frameworks, no build tools, no accounts.
โœ“ Beginner Friendly
๐Ÿ› ๏ธ Free Browser Tools

Design Your Assets

Use these free browser tools alongside the workshops to design sprites, levels and sound for your games.

๐ŸŽจ
Pixel Studio
Draw pixel art sprites and animations for your characters and enemies. Export as PNG to use in your game.
Open Tool โ†’
๐Ÿ—บ๏ธ
Level Designer
Sketch out level layouts, platforms and enemy positions before you build them in code.
Open Tool โ†’
๐Ÿ”Š
SFX Generator
Generate retro sound effects โ€” jumps, shoots, pickups, game over โ€” and export them as WAV files.
Open Tool โ†’
๐Ÿ–Œ๏ธ
Colour Palette
Build a game-ready colour palette so your art stays consistent. Export hex values to use anywhere.
Open Tool โ†’
See all free dev tools โ†’

Ready to build your first browser game?

Open a text editor, create one HTML file, and start Episode 1. You will have a playable game running in your browser within the hour.

๐Ÿš€ Start Episode 1 โ†’ ๐Ÿ“Š Track My Progress

Questions & Answers

Do I need to install anything?
No. Every game is a single HTML file you open in your browser. A free editor like VS Code helps but even Notepad works.
Do I need to know JavaScript first?
No. Episode 1 starts with your first canvas and explains every line. JavaScript is a great first language because it runs instantly in the browser.
What will I build?
A Flappy Bird clone, a memory card game with CSS flips, Breakout with particles, Snake with touch controls, and a platformer with double jump and a scrolling camera.
Can I share my games?
Yes โ€” that is the best part. Send the HTML file or upload it to a free host like itch.io and anyone with a browser can play instantly, even on a phone.
Do the workshops save my progress?
Yes. Each tracks XP, streaks and completed steps (using the same localStorage the games teach), and reports to the My Progress page.
Is it really free?
All 6 episodes, forever. No ads, no paywall, no sign-up needed.
๐Ÿš€ Keep Going

Where to next?

Finished here, or just curious? These series are a natural next step, same step-by-step format, bigger games.

๐Ÿ
My First Python Game
Games with Python & Pygame.
Ages 9+ Start โ†’
๐Ÿ•น๏ธ
My First Godot Engine Game
2D games from scratch with GDScript.
Ages 10+ Start โ†’
๐Ÿ”ท
My First Unity Game
2D & 3D games with C#.
Ages 10+ Start โ†’
Browse all workshops โ†’