Complete Workshop Guide
2-Hour AI Coding Introduction
A comprehensive workshop designed for high school students with mixed tech experience. Students will learn to use AI as a coding partner to build a fun, interactive "Personality Quiz App".
No prior coding experience needed
Works on PC and Mac
Browser-based - no downloads
Build a complete web application
Hour 1: AI Coding Foundations
Opening (10 minutes)
Hook Activity
Show a completed version of the quiz app
- "By the end of today, you'll build this yourself using AI as your coding partner"
- Quick poll: "Who has coded before?" / "Who has used AI tools?"
Segment 1: Meet Your AI Coding Partner (20 minutes)
What is Claude Sonnet 4?
- AI (Artificial Intelligence) assistant that understands and writes code
- Think of it as having a super-smart coding tutor available 24/7
- Works in your web browser - no downloads needed (PC and Mac friendly)
Demo: First Interaction
Hi! I'm new to coding. Can you explain what HTML is in simple terms?
Key Teaching Point
AI responds to natural language - talk to it like a helpful person!
Segment 2: Basic Coding Prompts (30 minutes)
The Art of Asking AI for Code
Prompt Pattern 1: Be Specific
Make a website
Create a simple HTML page with a blue background and a heading that says 'Welcome to My Site'
Hands-on Practice: Students try both prompts and see the difference
Prompt Pattern 2: Ask for Explanations
Create a button in HTML and explain what each part does
Student Practice Round (10 minutes)
- Students experiment with different prompts
- Peer sharing: "What's the coolest thing it made for you?"
Hour 2: Building the Personality Quiz App
Segment 3: Project Planning (10 minutes)
Our Goal: Build a "What's Your Study Style?" quiz app
Welcome page with app title
5 multiple-choice questions
Personalized results based on answers
Colorful, mobile-friendly design
Fun animations/effects
The AI Development Process:
- Start with basic structure - Get the foundation right
- Add questions one by one - Build incrementally
- Create the scoring system - Make it interactive
- Make it look awesome - Polish the design
- Add special effects - Enhance user experience
Segment 4: Guided Building Session (40 minutes)
Step 1: Foundation (8 minutes)
Prompt to Use
Create an HTML page for a personality quiz called 'What's Your Study Style?'. For now, just include a welcome message, a start button, and make it look modern with CSS. Use colors that appeal to high school students. We'll add more functionality later
Teaching Moment
Point out the HTML (structure), CSS (styling), and JavaScript (interactivity) in Claude's response
Step 2: Adding Questions (10 minutes)
Prompt to Use
Add the first quiz question: 'When you have a big test coming up, you:' with 4 multiple choice options:
A) Make detailed study notes and flashcards
B) Study with friends in a group
C) Review everything the night before
D) Find videos and interactive content online
Make each option clickable.
Step 3: Building the Full Quiz (10 minutes)
Prompt to Use
Add 4 more questions about study habits, preferred learning times, organization style, and motivation. Keep the same 4-option format but vary the content. Use what you know about the psychology of learning where question A's describes an Organizer, B's Collaborator, C's Procrastinator, D's Digital Native.
Step 4: Results System (10 minutes)
Prompt to Use
Create a scoring system that tracks which letter (A, B, C, or D) the user picks most often, then shows a personalized result:
- Mostly A's: 'The Organizer' - detailed description
- Mostly B's: 'The Collaborator' - detailed description
- Mostly C's: 'The Last-Minute Hero' - detailed description
- Mostly D's: 'The Digital Native' - detailed description
Include fun emojis and encouraging messages.
A
The Organizer
Methodical, detailed, and loves structure in their learning approach.
B
The Collaborator
Social learner who thrives in group settings and peer discussions.
C
The Last-Minute Hero
Works best under pressure and pulls through with intense focus.
D
The Digital Native
Tech-savvy learner who prefers multimedia and interactive content.
Step 5: Polish and Effects (2 minutes)
Prompt to Use
Add smooth transitions between questions, a progress bar, and make the results page more visually exciting with animations and better colors.
Segment 5: Customization and Debugging (10 minutes)
Make It Your Own
- Students modify colors, questions, or results
- Add personal touches (school name, inside jokes, etc.)
Common Issues & AI Solutions
- "My button doesn't work" → Ask AI to debug
- "I want different colors" → Ask AI to modify CSS
- "Can you make it look more like TikTok/Instagram?" → Describe the style you want
Sample Debugging Prompt
My quiz isn't working properly. When I click an answer, nothing happens. Can you help me fix it and explain what went wrong?
Wrap-up and Next Steps (10 minutes)
Show and Tell (5 minutes)
- Students share their quiz apps
- Highlight creative modifications
- Celebrate different approaches
Key Takeaways (3 minutes)
AI is a powerful coding partner, not a replacement for learning
Good prompts = better results (be specific, ask for explanations)
Iteration is key - build, test, improve, repeat
Don't be afraid to experiment and ask questions
Continue Your Journey (2 minutes)
What's Next:
- Practice with different types of apps (games, calculators, creative tools)
- Learn to read and modify the code AI creates
- Explore other programming languages (Python, JavaScript frameworks)
- Join coding communities and continue learning
Teaching Notes
For Mixed Experience Levels
Beginners
Focus on understanding prompts and seeing code work. Don't worry about syntax details.
Experienced
Challenge them to modify Claude's code or ask for advanced features.
Technical Requirements
Reliable internet connection
Modern web browser (Chrome, Firefox, Safari, Edge)
No software installation needed
Works identically on PC and Mac
Backup Plans
Common Scenarios
- If AI is slow: Have pre-made code snippets ready
- If students finish early: Challenge them to add new features
- If someone gets stuck: Pair them with a peer or use it as a teaching moment
Assessment Ideas
- Can they successfully prompt AI to create code?
- Do they understand the basic structure of their app?
- Can they make simple modifications?
- Are they thinking about how to improve their prompts?
Extension Activities
- Create different quiz themes (movie preferences, career matcher, etc.)
- Add social sharing features
- Make the app mobile-responsive
- Connect multiple apps together
Ready to Start Teaching?
Try the demo quiz app to see what your students will build