🚀

Workshop Access

Claude Kids

Enter the password your instructor gave you.

🎮 Hands-On Workshop · Ages 12–16

Build with
AI Superpowers

You're about to build real games and apps using Claude — your AI coding partner. No experience needed. Just ideas.

Let's Go! See What We'll Build
3
Hours of Building
0
Experience Needed
1
Game You'll Ship
∞
Ideas to Explore
Workshop Overview

What You'll Build Today

You'll go from zero to a real, playable game — entirely by talking to an AI. Here's the plan:

Who is this for? Ages 12–16. Zero coding experience needed. If you can type, you can build.
What you need A laptop (Windows or Mac), a browser, and your imagination.
What you'll make A fully playable retro shooter game — that you built yourself by talking to Claude.
How it works You describe what you want in plain English. Claude Code writes the code. You play it, change it, and make it your own.
Duration ~3 hours (with breaks)
🤯 Did you know?

Claude can write an entire browser game in under 60 seconds. Your job today is to be the game designer — you decide what to build, and Claude handles the code. Real game designers at big studios use tools like this every day.

Today's Schedule

Time Section What we do
0:00 Section 1 Install Claude Code, open your project folder, say hello to your AI
0:15 Section 2 Learn 4 magic moves: Build it, Change it, Fix it, Ask it
0:35 Section 3 Build your Space Shooter game step by step
1:30 Break Play your game! Show it to someone.
1:45 Section 4 Make your game unique — your ideas, your way
2:15 Wrap Up Show & tell, next steps, what to build next

Let's Get Started

1.1
Install Claude Code
⏱ 3 min

First, you need to install the app. Follow the setup guide for your computer:

Claude Code Setup Guide
Download the desktop app — no terminal needed. Works on Windows & Mac.
Tip: If the app is already installed on your computer, skip ahead to step 1.2!
1.2
Open Your Workshop Folder
⏱ 3 min

Claude Code works inside a folder on your computer. Think of it like giving Claude a room to work in — everything it builds goes in that room.

Windows
1. Open the Start menu → type Claude → press Enter
2. Click "Open Folder" in the app
3. Go to Documents and create a new folder
   called "my-games"
4. Click Select Folder
macOS
1. Open Launchpad or Applications → click Claude
2. Click "Open Folder" in the app
3. Go to Documents and create a new folder
   called "my-games"
4. Click Open

You'll see a chat box at the bottom of the screen. That's where you type messages to Claude. You're now connected!

What can Claude Code actually do?
  • Read and write files in your folder
  • Build entire websites and games from your description
  • Fix bugs and explain what went wrong
  • Answer any question about code or your project
  • Remember everything you've said in the current session
1.3
Say Hello to Your AI
⏱ 9 min

Let's try a few quick things to see what Claude can do. Try these prompts one at a time.

Prompt 1 — Ask it something
Type this in the chat box:

"What files are in my folder right now?"

Claude will look in your folder and tell you what it finds. Notice it tells you what it's doing before it does it — that's important.

Prompt 2 — Build something
Now type this:

"Create a file called hello.html. Make a page with a big colourful greeting that says my name. Use a dark background with neon text. Make the text bounce up and down."

Wait for Claude to finish, then open the file to see what it made:

Windows
Open File Explorer → Documents → my-games
Double-click hello.html
macOS
Open Finder → Documents → my-games
Double-click hello.html
Prompt 3 — Change it
Back in Claude, type:

"Change the background to a galaxy — dark blue with tiny white stars that twinkle. Keep the bouncing text."

Refresh your browser tab (press F5) and see the update. Claude changed the file in place — you didn't have to rebuild anything!

Prompt 4 — Ask it to explain
Type this:

"Explain what you just built, like you're talking to a 12-year-old."

Claude will walk you through the code it wrote in plain English. You can ask as many follow-up questions as you like.

You just did something real. You described what you wanted, an AI built it, you changed it, and it explained itself. That's the whole workflow — and you already know it.

Learn the 4 Moves

Every time you work with Claude Code, you'll use one of these four moves. Learn them now and you can build anything.

The 4 Moves
  1. Build it — describe something new and Claude creates it from scratch
  2. Change it — tell Claude to update or improve something that already exists
  3. Fix it — describe what's broken, and Claude finds and fixes the problem
  4. Ask it — ask Claude to explain anything in plain English
2.1
Move 1 — Build It
⏱ 5 min

"Build it" means describing something from scratch and letting Claude create it. The more detail you give, the better the result.

Vague prompt (try this first)
Type this:

"Add a button to hello.html."

Claude adds a button — but it might not be exciting. Now try giving it more detail:

Detailed prompt (this is better)
Now type this:

"Add a big glowing button below the text that says 'LAUNCH 🚀'. When you click it, the whole page flashes with a random bright colour and plays a short explosion animation. The button should pulse in and out slowly."

See the difference? More detail = better result. When you build something with AI, you are the designer — Claude is the builder. Good designers give clear instructions.

💡 Pro tip

Include the what (a glowing button), the where (below the text), the what it does (flashes the page), and the how it looks (pulsing). Four things. Better prompts every time.

2.2
Move 2 — Change It
⏱ 4 min

You don't have to rebuild things from scratch every time. Just tell Claude what you want to change — it remembers everything.

Try these one at a time:

"Make the button twice as big."

Then:

"Change the button colour to hot pink with a neon glow effect."

Then:

"Make the explosion animation last longer — 1 full second instead of the current speed."

Each message changes just one thing. This is on purpose — small changes are easy to undo if you don't like the result. If something goes wrong, just say:

Magic undo prompt:

"Undo that last change."

2.3
Move 3 — Fix It
⏱ 5 min

Bugs are when something goes wrong — the page looks weird, a button doesn't work, or something crashes. The "Fix it" move is telling Claude what's wrong and asking it to find the cause.

You don't need to know what the bug is. Just describe the symptom — what you see happening vs. what you expected.

Let's create a bug on purpose
Type this to break something:

"Change the button click handler so the colour flash only works every other click."

Click the button a few times — every other click does nothing. Now fix it:

The fix-it prompt
Tell Claude what's wrong:

"The LAUNCH button is broken. It only flashes the page on every second click — it should flash on every click. Find the bug and fix it."

Claude will read the code, find the logic error, explain what it found, and fix it. You didn't need to touch a single line of code.

The Fix-It Formula

"[What is happening] instead of [what should happen]. Find the bug and fix it."

You can also paste error messages directly: "I got this error in my browser: [paste the error]. Fix it."

2.4
Move 4 — Ask It
⏱ 6 min

Claude is a teacher as much as it is a builder. You can ask it to explain any code it wrote, any decision it made, or any concept you're curious about.

Ask it to explain its code
Try this:

"Explain the button click code you wrote. What does each part do? Use really simple language."

Ask follow-up questions
Then:

"What is a JavaScript function? Give me a real-world example."

Then:

"What would happen if I deleted the click listener from the button?"

No such thing as a dumb question. Claude never gets bored and never judges you. Ask "explain this to me like I'm 8" as many times as you want. The more you ask, the more you learn.

Here's a cheat-sheet of great "Ask it" prompts you can use throughout the workshop:

If you want to… Say this
Understand some code "Explain this to me like I'm 12."
Know why Claude chose something "Why did you write it that way?"
Understand a new word "What is [word]? Give me an analogy."
Know if something will break "What breaks if I remove [X]?"
Explore ideas "What are 5 cool things I could add to this?"

Build Your Space Shooter

Now for the main event. You're going to build a fully playable Space Shooter game from scratch — using nothing but your words. Each step adds one feature. By the end you'll have a real browser game you can share with anyone.

Before you start

Make sure you're inside your "my-games" folder in Claude Code.

All 5 steps happen in the same Claude conversation — don't press the "New Chat" button between them.

After each step: open the file, play the game, then come back and do the next step.

3.1
Step 1: Create the Game
⏱ 8 min
Copy and paste this exactly:

"Build a Space Shooter game as a single HTML file called space-shooter.html. Dark space background with tiny stars. Green player spaceship at the bottom — moves left and right with arrow keys, shoots laser beams with spacebar. Red alien enemies arranged in rows at the top — they move side to side and slowly drift downward. Show the score in the top left corner and lives as small heart icons in the bottom left. When an enemy is hit, it disappears with a flash. Game over screen when lives run out."

Wait for Claude to finish, then open the game:

Windows
File Explorer → Documents → my-games
Double-click space-shooter.html
macOS
Finder → Documents → my-games
Double-click space-shooter.html

Play it! Move with arrow keys. Shoot with spacebar. Make sure the basics work before moving on.

🤯 What just happened

Claude just wrote hundreds of lines of HTML, CSS, and JavaScript — a complete game engine — in under a minute. Professional game devs would spend days on this. You just described it in one paragraph.

3.2
Step 2: Add Explosions & Sound
⏱ 8 min
In the same Claude chat, type:

"Add satisfying effects to space-shooter.html. When an alien is destroyed, show a dramatic explosion animation — expanding orange and yellow particles that fade out. When the player fires, add a short laser zap sound (use the Web Audio API to generate it, no external files). When the player is hit by an alien, add a shield-breaking flash effect and a low rumbling boom sound."

Refresh space-shooter.html and play again. The game should now feel much more alive!

Tip: If the sounds don't work at first, click anywhere on the page before pressing spacebar. Browsers require one click before they allow sounds.
3.3
Step 3: Add a Boss Enemy
⏱ 10 min
Type this:

"Add a boss enemy to space-shooter.html. When the player clears all the regular aliens, a huge purple boss ship appears at the top. The boss has a health bar (10 hits to kill), moves faster than regular enemies, and fires back at the player occasionally. When the boss is defeated, show a massive explosion, add 500 bonus points to the score, and start a new wave of regular aliens. Show a 'BOSS INCOMING!' warning message when it appears."

Clear the first wave of aliens to trigger the boss battle. Can you beat it?

🎯 Challenge: Try This

After beating the boss, ask Claude: "What does the boss firing logic look like? How does it decide when to shoot?" See if you can understand the answer.

3.4
Step 4: Power-ups
⏱ 10 min
Type this:

"Add power-ups to space-shooter.html. Every 30 seconds, a glowing power-up capsule drifts down from the top. There are 3 types that appear randomly: a yellow star (rapid fire — shoots 3x faster for 8 seconds), a blue shield (blocks 2 hits), and a green double-shot (fires two lasers side by side for 10 seconds). Show an icon in the top right corner to indicate the active power-up and a countdown timer."

Wait for a power-up to appear (or ask Claude to make them spawn faster for testing) and try each one!

3.5
Step 5: High Score & Level Progression
⏱ 10 min
Type this:

"Add level progression and a high score table to space-shooter.html. Each wave that the player clears counts as one level. With each new level, aliens move slightly faster and the boss (if present) fires more frequently. Show the current level number in the top centre. When the game ends, show a Game Over screen with the player's score and the top 5 high scores saved in the browser — the player can enter their name. Add a 'Play Again' button that restarts the game."

Play through a few waves and get a high score! Your leaderboard is saved even if you close the browser and come back later.

🎉 You built a real game!

You've just built a multi-level space shooter with explosions, sound effects, a boss fight, power-ups, and a persistent high score table. This is the kind of thing that takes experienced developers a weekend to build from scratch. You did it in an hour by knowing how to ask the right questions.

Make It Yours

Now comes the most fun part. Your game works — but it's still the default version. This section is about making it yours. Use your own ideas to change anything and everything.

Below are some ideas to get you started. Pick any that sound fun — you don't have to do all of them. Or ignore this list completely and do your own thing!

4.1
Change the Theme
⏱ 5 min

Don't like space? Change the whole setting. Here are some ideas — or make up your own:

Ocean theme example:

"Change the game's theme to an underwater world. The background is deep ocean blue with bubbles floating up. The player is a yellow submarine instead of a spaceship. Enemies are red crabs and jellyfish. Lasers are replaced with torpedoes. Change all the sound effects to match the theme."

Halloween theme example:

"Change the game's theme to Halloween night. Dark purple sky with a full moon. The player is a broomstick with a witch riding it. Enemies are flying bats, ghosts, and jack-o-lanterns. The player shoots magic bolts. Make everything spooky!"

Your own theme:

"Change the game's theme to [your idea here]. Describe the background, the player character, the enemies, and the type of attack."

4.2
Add a Feature You Want
⏱ 10 min

What would make your game even better? Here are some popular upgrades to try:

  • 2-player mode — "Add a second player controlled with WASD keys. Player 2 is blue and appears on the left side."
  • Different enemy types — "Add 3 new alien types: tiny fast ones worth 10 points, big slow ones worth 50 points, and armoured ones that take 3 hits."
  • Moving obstacles — "Add asteroid fields that drift across the screen. The player and enemies have to avoid them."
  • Upgradeable player ship — "Every 200 points, let the player upgrade their ship. Show a menu with 3 options: faster movement, more lives, or a spread shot."
  • A story intro — "Add a short story intro screen before the game starts, with animated text that tells the player why they're fighting aliens."
  • Cheat codes — "Add a secret cheat: if the player types 'GODMODE' on the keyboard, they become invincible for 15 seconds."
4.3
Style It Your Way
⏱ 5 min

Small visual details make a big difference. Try some of these:

Change the colour palette:

"Change all the game colours to a synthwave palette — deep purple background, hot pink player ship, cyan enemies, neon green laser beams."

Add a game title screen:

"Add an animated title screen before the game starts. The game title should be in huge pixel-art style text with a glowing rainbow effect. A 'Press SPACE to Start' prompt blinks slowly underneath."

Add particle trails:

"Add a cool exhaust trail behind the player ship — tiny glowing orange particles that fade out after half a second."

4.4
Show It Off
⏱ 10 min

Your game is a real HTML file — it works in any browser, on any computer. Here's how to share it:

Ways to share your game
  • Email the file — just attach space-shooter.html to an email and anyone can open it
  • USB drive — copy it to a USB stick and play it on any computer
  • Ask your instructor — we'll put it online so anyone in the world can play it via a link
  • Local network — on the same Wi-Fi, you can open it from a shared folder
🏆 Final Challenge: The High Score Battle

Everyone in the workshop plays each other's games. Highest score on someone else's game wins bragging rights. Your instructor will call this out!

What's Next?

You've just done something real. You described ideas in plain English and turned them into working software. That skill doesn't disappear when you leave today — here's how to keep going.

💡
Project Ideas to Try at Home
Pick one and build it this week
  • A quiz game — "Build a quiz game about [your favourite topic]. 10 questions, multiple choice, show the score at the end."
  • A clicker game — "Build a Cookie Clicker style game. Click a big cookie to earn points. Use points to buy upgrades that auto-click for you."
  • A personal website — "Build a personal profile page for me. Dark theme, my name in big text, a section for my favourite games, a section for my hobbies."
  • A platformer game — "Build a side-scrolling platformer game in a single HTML file. Jump between platforms, collect coins, avoid spikes."
  • A music visualizer — "Build a page that listens to the microphone and draws colourful animated patterns based on the sound."
  • A drawing app — "Build a drawing app in the browser. The user can draw with the mouse, change brush size and colour, and save their drawing as an image."
The Secret to Getting Good at This
The more you build, the better your ideas get
How to keep improving
  1. Build one small thing every week — doesn't have to be big. A page, a game, a tool. Just build.
  2. When something doesn't work, describe the problem clearly — Claude can fix almost anything if you tell it what's wrong.
  3. Ask "why" more than "how" — understanding why code works teaches you more than just copying it.
  4. Share what you make — showing your work gets you feedback and keeps you motivated.
  5. Look at what others build — play with the sample games below and ask Claude to explain how they work.
🚀
You Already Think Like a Developer
Seriously — you do

Today you did everything a real developer does:

  • You specified requirements — describing what you wanted is exactly what developers call "writing a spec"
  • You iterated — making changes one at a time is how all software is built
  • You debugged — describing a symptom and asking for a fix is real debugging
  • You designed — choosing the theme, features, and style is exactly what game designers do
  • You shipped — you have a real, working file you can share with anyone
Claude Code is free to use with a Claude.ai account. You can keep building everything you made today at home. Go to claude.ai and download the app — it's the same one you used today.
Quick Reference

Your Cheat Sheet

The most useful prompts to keep using at home.

Move What it does Example prompt
Build it Create something from scratch "Build a [thing] as a single HTML file. [describe what it does and looks like]."
Change it Update something that exists "Change [X] so that [Y]."
Fix it Describe a bug and ask for a fix "[X] is doing [Y] instead of [Z]. Find the bug and fix it."
Ask it Get an explanation in plain English "Explain [X] like I'm 12."
Undo it Revert the last change "Undo that last change."
Add to it Add a new feature to existing code "Add [feature] to [file]. It should [describe behaviour]."
What if? Explore ideas before building "What are 5 cool features I could add to make this game more fun?"
Sample Games

Games Built with Claude Code

These were all built using the same prompting techniques you learned today. Click play to try them — and ask Claude to explain how any of them work.

Play
Bullet Hell

Bullet Hell Shooter

Dodge hundreds of enemy bullets in an intense pattern-based shooter. How long can you survive?

Open full screen
Play
Classic

Frogger

Help the frog cross the busy road and river without getting squashed. A faithful remake of the arcade classic.

Open full screen
Play
Endless Runner

Jet Blast

Fly your jet through an endless obstacle course, dodging barriers and collecting fuel. Survive as long as you can.

Open full screen
Play
Space Shooter

Space Invaders Classic

The original arcade experience — the same game you built today, fully polished. Compare it to yours!

Open full screen