Your AI Adventure Starts Here
Learn to talk to Claude and build anything you can imagine.
📜 YOUR QUEST MAP
🎯 SKILLS YOU'LL UNLOCK
Navigate your computer like a pro
Learn to talk to AI and get great results
Create real apps that run in browsers
Build projects you can show off to friends
Terminal Basics
Learn to speak the computer's secret language
MISSION BRIEFING
Before you can team up with your AI coding buddy, you need to learn the terminal - a secret text-based way to control your computer!
Think of it like this: normally you click on things with your mouse. But coders type commands instead - it's like texting your computer and having it do exactly what you say!
🚀 Opening Your Terminal
- Press Cmd + Space (opens Spotlight)
- Type
Terminal - Press Enter
- Press the Windows key
- Type
PowerShell - Click to open
- Press Ctrl + Alt + T
- That's it! 🎉
⌨️ Your First Commands
Try these in the simulator below, then on your real terminal!
pwd
+5 XP
"Print Working Directory" - shows your current location
🧠 Memory trick: "Print Where am I, Dude?"
ls
+5 XP
Lists all files and folders in your current location
🧠 Memory trick: "List Stuff"
cd [folder]
+5 XP
"Change Directory" - moves you to a different location
🧠 cd .. goes back one folder
mkdir [name]
+5 XP
"Make Directory" - creates a new folder
🧠 Example: mkdir claude-quest creates a folder called "claude-quest"
clear
+5 XP
Clears the terminal screen - nice and tidy!
🎮 TERMINAL SIMULATOR
Practice commands right here! Complete the challenges below.
🎯 CHALLENGE MISSIONS
pwd to see where you are
ls to list files
cd Documents
mkdir claude-quest and press Enter
Meet Claude Code
Your AI Coding Companion
MISSION BRIEFING
Now you're going to meet your new teammate: Claude Code! It's an AI that understands what you want to build and helps you create it.
Think of Claude as a super-smart coding buddy who never gets tired of your questions!
🖥️ Time to Use a REAL Terminal!
In Level 1, you practiced with a simulator in your browser. Now it's time to use a real terminal on your computer!
Open your terminal and put it side-by-side with this website so you can follow along.
How to open Terminal on Mac:
- Press
Cmd + Spaceto open Spotlight - Type "Terminal" and press Enter
Or find it in Applications → Utilities → Terminal
How to open Terminal on Windows:
- Press
Windows key, type "PowerShell" - Click "Windows PowerShell" to open it
Or right-click the Start button and select "Terminal"
🔧 Installing Claude Code
Before we can use Claude, we need to install some things. Ask a parent or guardian to help!
Install Node.js
First, check if Node.js is already installed. In your terminal, type:
node --version
If you see a version number (like v18.0.0), skip to Step 2!
If you get an error, you need to install Node.js:
- Go to nodejs.org
- Click the big green "LTS" button (LTS = stable version)
- Open the downloaded file (it ends in .pkg)
- Click "Continue" through each step, then "Install"
- Enter your Mac password when asked
- Close and reopen Terminal, then try
node --versionagain
- Go to nodejs.org
- Click the big green "LTS" button (LTS = stable version)
- Open the downloaded file (it ends in .msi)
- Click "Next" through each step (default options are fine)
- Click "Install", then "Finish"
- Close and reopen PowerShell, then try
node --versionagain
Install Claude Code
Now install Claude Code with this command:
npm install -g @anthropic-ai/claude-code
This downloads Claude Code to your computer. It might take a minute!
⚠️ Getting a permission error?
If you see "EACCES" or "permission denied", try one of these fixes:
Mac/Linux - Option 1 (easiest): Add sudo before the command:
sudo npm install -g @anthropic-ai/claude-code
Enter your Mac password when asked (you won't see it typing - that's normal!).
Mac/Linux - Option 2 (better long-term): Fix npm permissions:
sudo chown -R $(whoami) ~/.npm
Then try the install command again (without sudo).
Get an API Key
Parents: This step requires creating an Anthropic account.
- Go to console.anthropic.com
- Create an account or sign in
- Go to "API Keys" and create a new key
- Copy the key (you'll need it in the next step)
The first time you run Claude, it will ask for this key.
Create Your Project Folder
Remember the claude-quest folder from Level 1? That was practice! Now let's make a real one:
cd ~/Desktop && mkdir claude-quest && cd claude-quest
cd ~\Desktop; mkdir claude-quest; cd claude-quest
This creates your project folder on your Desktop and moves into it!
🚀 Starting Claude Code
You're ready! In your terminal (inside the claude-quest folder), type:
claude
The first time you run it, Claude will ask for your API key. Paste it in and press Enter!
You'll see Claude Code start up with a welcome message.
👨👩👧 Note for Parents
Claude Code asks for permission before doing things like creating files. This is a safety feature! However, the prompts can be confusing for kids.
Option 1 (Recommended for learning): Use normal mode. Help your child understand the permission prompts - it teaches good habits!
Option 2 (Smoother experience): Start Claude with:
claude --dangerously-skip-permissions
This skips permission prompts. Only use this in a safe folder where Claude can freely create and edit files.
💬 Talking to Claude
Claude understands plain English! Here are some things you can say:
⚡ Power Tips
Be Specific
Instead of: "Make me a game"
Try: "Make a number guessing game where I guess 1-10"
Follow Up
"Can you explain that again?"
"What does that line do?"
No Dumb Questions
Claude loves to explain things! If you don't understand, just ask again.
🎮 Claude Commands
/help
See all commands
/clear
Fresh conversation
Ctrl+C
Exit Claude
🎯 CHALLENGE MISSIONS
Complete these on your REAL terminal with Claude Code!
claude
/help command
Your First Prompts
Learn to Ask Claude to Build Things!
MISSION BRIEFING
This is where the magic happens! You'll learn to prompt Claude to build cool things.
The secret to great AI prompts: Be specific about what you want! Tell Claude what to build, how it should work, and what it should look like.
🎮 PROMPT PRACTICE
Copy each prompt, paste it to Claude, and watch the magic happen!
Generate epic random gamer tags!
Create a gamer tag generator that makes random cool names by combining adjectives + nouns + numbers (like "ShadowNinja_99" or "EpicWolf_X"). Let me click to generate new ones!
Roll different types of dice for games!
Create a dice roller where I can roll different dice (d4, d6, d8, d12, d20). Show buttons for each dice type and animate the roll!
Guess the secret number - higher or lower!
Create a number guessing game! Pick a random number 1-100, let me type guesses, tell me "too high" or "too low", count my attempts, and show a celebration when I win!
Calculate weapon damage with crits!
Create an RPG damage calculator! I enter base damage, it checks for critical hits (20% chance for 2x damage), adds random variance, and shows the total with cool visual effects!
Countdown timer like in games!
Create an esports match countdown timer! Click to start, show big dramatic numbers counting down from 10, then flash "MATCH START!" with epic effects!
Battle the computer - best of 3!
Create rock paper scissors! Click buttons to choose, play against the computer, best of 3 rounds. Show each choice with emoji, track the score, and declare a champion!
🌐 Opening Your Creation
Claude will create an HTML file. To see it:
- Find the .html file in your claude-quest folder
- Double-click it to open in your browser!
🔧 The Art of Iteration
Your first version is just the start! Try asking Claude to improve it:
Pro tip: Good prompts are specific! Instead of "make it better", try "add a confetti animation when I win".
Level Up Your Projects
Master the Art of Iteration!
MISSION BRIEFING
Your simple projects work, but they could be SO much cooler! Time to learn the pro skill: iteration.
Iteration means making something better step by step. The best creators don't get it perfect the first time - they improve it!
🎯 The Iteration Loop
Pro creators follow this cycle:
Build
Create a basic working version
Test
Try it out, find what's missing
Improve
Ask Claude to add one feature at a time
The key: One change at a time! Don't ask for 10 features at once - add them step by step.
🚀 UPGRADE CHALLENGES
Take any project from Level 3 and make it awesome! Here are upgrade ideas:
Make it look professional!
Make this look more professional: add a dark gaming theme with a gradient background, make the buttons glow when I hover, and add smooth animations when things change.
Add audio feedback!
Add sound effects! Play a click sound when buttons are pressed, a success sound when I win, and a fail sound when I lose. Use the Web Audio API or audio elements.
Remember my high scores!
Add localStorage to save my progress! Save my high score and display it. When I come back, my record should still be there. Add a "Reset" button to clear saved data.
Works on phones too!
Make this work great on mobile phones! Buttons should be big enough to tap, text should be readable, and it should look good on small screens. Use responsive CSS.
Add confetti, shakes, and more!
Add exciting animations! When I win, show confetti falling. When something big happens, shake the screen. Make numbers bounce when they update. Make it feel alive!
Add something totally new!
Add a new feature I didn't have before! [Describe what you want - like "add a leaderboard", "add difficulty levels", "add a history of past rounds", or "add multiplayer mode"]
💡 Pro Prompting Tips
Be Specific
"Add a red glow" is better than "make it look cool"
One Thing at a Time
Ask for one change, test it, then ask for the next
Describe Problems
"The button doesn't work when I click it" helps Claude fix it
Share Examples
"Make it look like Fortnite's menu" gives Claude a clear target
Epic Web Apps
Build Something Amazing You Can Show Off!
FINAL MISSION
This is it. The final boss. Time to build a REAL web app - something big enough to show your friends!
Pick an epic project below, or create your own idea. These are bigger projects, so take your time!
🎮 EPIC WEB APP PROJECTS
Choose a project that sounds awesome to you!
Battle Royale Simulator
Fortnite-style survival in the browser!
Create a web app "battle-royale.html" - a battle royale simulator game! Show a map grid where I can move around. Find loot (weapons, shields, meds) by exploring. A storm circle shrinks every 30 seconds. Fight AI enemies. Track health, shields, and inventory with a cool HUD. Dark theme with neon accents!
- "Add keyboard controls (WASD to move)"
- "Make loot have rarity colors like Fortnite"
- "Add a kill feed that shows eliminations"
Brawler Arena
Brawl Stars-style character battles!
Create a web app "brawler.html" - a turn-based battle game! Character select screen with 4 brawlers (Tank, Assassin, Healer, Sniper) - each with unique stats, a basic attack, and a special ability. Battle against an AI enemy. Show health bars, ability cooldowns, and battle log. Animated attacks!
- "Add character portraits and descriptions"
- "Make health bars animate when taking damage"
- "Add a 'Super' ability that charges up"
Crafting & Inventory
Minecraft-style crafting system!
Create a web app "craft.html" - a Minecraft-inspired crafting game! Click to mine resources (wood, stone, iron, diamond, coal). Drag-and-drop inventory system. 3x3 crafting grid where I place items to craft tools and items. Show recipe book. Track total items crafted. Pixelated graphics style!
- "Add tool durability that decreases with use"
- "Make better tools mine faster"
- "Add achievements for first craft of each item"
Loot Box Simulator
Open boxes, collect rare items!
Create a web app "lootbox.html" - a loot box opening simulator! Earn coins over time. Buy different box tiers (Common $10, Rare $50, Legendary $200). Epic unboxing animation! Items have rarity colors (gray→green→blue→purple→gold). Collection page showing all items and completion %. Satisfying effects!
- "Add a 'pity system' - guaranteed rare after X opens"
- "Make duplicate items give coins back"
- "Add sound effects for different rarities"
💡 Or Create Your Own!
Have a different idea? Go for it! Here are some starters:
Tournament bracket maker
Click-speed aim trainer
Random dungeon map generator
Game stats dashboard
Character creator with export
Virtual pet / Tamagotchi
Achievement unlock system
Fake hacker terminal
🛠️ Pro Tips for Big Projects
Start Small
Get the basic version working first. Add features one at a time.
Test Often
Refresh and test after each change. Easier to fix bugs early!
Save Progress
Ask Claude to add localStorage so your game saves between sessions.
Style Last
Get it working first, then make it pretty. Function before fashion!