🧠 AI Kids Coding Workshop:

📌 Before Class (Preparation)

• Set up 6 laptops for 12 students (2 per laptop).
• Place hex code color worksheets and markers at each seat.
• Test WiFi and Claude.ai access on each laptop.
• Write "AI + Coding = Magic!" on the whiteboard.

---

⏳ 1-Hour AI Kids Coding Workshop

🕐 0:00 - 0:15 | Welcome & Icebreaker

• Greet students and introduce yourself.
• Icebreaker: Each student shares their name and one thing they like to do.
• Agenda Overview:
  • Learn how to use AI to code a website game! 🎮
  • Hack and customize your game.
  • (optional) Host your game on GitHub
  • Present and share your game with the class.

---

🕐 0:15 - 0:20 | Inspiration: What Can We Create?

• Show examples of simple website games
  • 🐋 Sea Creature Speed Game
  • ❓ Fruit Emoji Matching Game
  • 🐶 Puppy Sunshine Spam Game
• Ask:
  • "Who has made a website before?"
  • "What is a website made of?"
    • 🏗 HTML = The bones (structure)
    • 🎨 CSS = The skin & clothes (colors, fonts, layout)
    • 🧠 JavaScript = The brain (makes things move and interact)
  • "What are hex codes?""
    • Hex codes are special color codes made of six numbers and letters that computers use to know exactly what color to show on a screen! 🎨💻

---

🕐 0:20 - 0:40 | Hands-on: AI-Powered Coding

1. Open Claude.ai on laptops.
2. Prompt students to type:

"Make me an HTML website game fill in the blank" - fill in the blank with any idea you have!

If you want help coming up with ideas you can type:

Can you give me some ideas for prompts that will generate fun HTML games and use emoji?

🔍 Discuss:

• What do you see? 🤔
• What kind of game did you create?

🛠 Tweak & Hack:

Try asking Claude

"Use emoji"

"Make the cars bigger."

"Change the background color to blue."

"Make it a two-player game."

🎮 Exploration Time:

• Give students 10 minutes to explore, tweak, and "hack" their games.
• Pair up! Each student plays their neighbor’s game.
• Encourage experimentation:
  • 🎨 Change colors
  • 🔊 Add sound effects
  • 🏎 Adjust difficulty

---

Optional ✨

Intro to GitHub: Hosting Your Game

🎥 See video tutorial here.

🌐 What is GitHub?

GitHub is like a magic folder where you save and share your website.

📁 Create a GitHub Repository:

1. Go to GitHub.com & login
2. Click Repositories → New.
3. Name the game (e.g., car-race-game).
4. ✅ Check "Add a README file."
5. Click Create Repository.

⬆️ Uploading Code to GitHub

📜 Copy the game code from Claude.ai.

🖥 On GitHub:

1. Click "Add File" → "Create new file."
2. Name it index.html.
3. Paste the code.
4. Click Commit (Green Button).

🚀 Now make it live!

1. Click on Settings (top right of repo).
2. Scroll down to GitHub Pages.
3. Under "Branch," select main and hit "Save."
4. The website will take a few minutes to "deploy" so go play your game once and come back.
5. At the top of your setting pages you will see the link for your website!
6. 🎉 Your website is now live! Share the link with friends! 🌍

---

🕐 0:40 - 1:00 | Game Showcase & Wrap-Up

• 🎤 Each student comes up and demos their game.
• 👏 Class claps and cheers for each demo!
• 📸 Take a group photo with their games displayed.

✨ Wrap-up Message:

"AI is magic, and YOU are now an AI coder!" 🎩✨

• Encourage students to share their game links with friends and family.