🚀 Session 1

🎨 Part 1

What is Vibe Coding?

Traditional Coding vs Vibe Coding

The Vibe Coding Philosophy

"You don't need to know everything.
You just need to know how to ask."

AI is your coding partner, not a replacement for thinking.

Who Is This For?

• ✅ People who want to build useful tools
• ✅ People who understand logic but not syntax
• ✅ Anyone curious about making things with code
• ✅ YOU!

🤖 Part 2

How AI Assists Coding

AI Can Help You...

• 📝 Generate code from descriptions
• 🔧 Fix errors and bugs
• 📖 Explain how code works
• 💡 Suggest improvements
• 🎨 Create designs and layouts

The AI Coding Loop

Good Prompts = Good Results

Tips for Better Prompts

• Be specific about what you want
• Mention colors, sizes, positions
• Give examples if helpful
• Ask one thing at a time
• Don't be afraid to ask follow-up questions!

👋 Part 3

Meet Claude Code

What is Claude?

• AI assistant created by Anthropic
• Excellent at writing and explaining code
• Free to use on the web
• Great for beginners!

🌐 Open Claude AI

Claude Interface Tour

• Chat interface — type your requests
• Code blocks — formatted code you can copy
• Artifacts — preview HTML/websites live
• History — your past conversations

View Example Chat →

🔴 Live Demo

Let's try Claude together!

Create a simple HTML page that says 
'Hello, World!' in big blue letters centered on the page.
Add a fun emoji too.

Try it now →

Demo Result

🛠️ Part 4

Hands-On: Your First Project

Build an HTML Marketing Email or Event Flyer

Project Options

📖 Step 1: Choose Your Project

Pick one of these options (or create your own!):

• 🎂 Birthday party invitation
• 🏫 School event announcement
• 🍳 Family recipe card
• 📣 Club/group newsletter
• 🎪 Weekend activity flyer

📝 Step 2: Write Your Prompt

Copy this template and customize it:

Create an HTML email template for a kids' birthday party.

Include:
- A colorful header with "You're Invited!" text
- Party details: Saturday March 15th, 2-5 PM
- Location: 123 Fun Street, Playground Room
- A fun description about games and cake
- An RSVP button that says "Count me in!"
- Use bright, cheerful colors (pink, blue, yellow)
- Add some fun emojis

Alternative Prompts

School Event:

Create an HTML flyer for a school science fair.
Date: April 20th, 6-8 PM
Location: School Gymnasium
Include: event description, what to expect, contact info
Use professional but fun colors (blue and green)
Add a science emoji theme

🚀 Step 3: Generate in Claude

1. Go to claude.ai
2. Paste your customized prompt
3. Press Enter and watch the magic!

🔍 Step 4: Review the Output

Look at what Claude created. Ask yourself:

• ✅ Does it look right?
• ✅ Is anything missing?
• ✅ Do you like the colors?
• ✅ Is the text correct?

✨ Step 5: Refine with Follow-ups

Ask Claude to make changes! Try these:

Make the header bigger and add a fun gradient background

Change the RSVP button to green and make it rounder

Add more party emojis and make it look more festive

More Refinement Ideas

💾 Step 6: Save Your Work

1. In Claude, find the code block with your HTML
2. Click the Copy button in the top-right
3. Open Notepad (Windows) or TextEdit (Mac)
4. Paste the code (Ctrl+V / Cmd+V)
5. Save as my-project.html

⏱️ Activity Time!

15 minutes

1. Open Claude at claude.ai
2. Create your own email or flyer
3. Refine it with at least 3 follow-up requests
4. Save the HTML code to your computer

🌟 Show & Tell

Let's see what everyone created!

• Who wants to share their screen?
• Tell us: What did you make?
• What's your favorite part?

🎨 Part 5

Adding AI-Generated Images

Free AI Image Tools

Tips for Image Prompts

• Describe the style (cartoon, realistic, flat)
• Mention colors you want
• Specify the subject clearly
• Add "on white background" for easy placement

A cartoon birthday cake with colorful candles and 
confetti, flat design style, bright cheerful colors, 
on white background

More Image Prompt Examples

A friendly robot waving hello, cute and simple, 
blue and silver colors, cartoon style

Science fair poster banner with beakers, atoms, 
and microscopes, educational style, green and blue theme

Delicious chocolate chip cookies on a plate, 
warm and cozy feeling, food photography style

Adding Images to Your HTML

Ask Claude to add an image placeholder:

Add an image placeholder at the top where I can put 
my party image. Make it centered and 400px wide with 
a nice border.

⏱️ Quick Activity

5 minutes

1. Go to Playground AI
2. Generate an image for your flyer/email
3. Download it to your computer
4. Save it in the same folder as your HTML file

📝 Session Wrap-up

What We Learned Today

• ✅ Vibe Coding = Describing what you want
• ✅ AI is a coding partner
• ✅ Good prompts = good results
• ✅ Claude can generate HTML
• ✅ AI can also create images!

Key Takeaways

1. You don't need to memorize code
2. Be specific in your prompts
3. Iterate and refine
4. Have fun experimenting!

📚 Homework

1. Create another HTML page (recipe card, announcement, etc.)
2. Generate at least 2 AI images
3. Try asking Claude to explain how the code works

Bring your creations to share next week!

🔜 Next Session Preview

Session 2: HTML Foundations Through AI

• Deeper dive into HTML structure
• Learn to ask AI for specific edits
• Build a personal introduction webpage
• Add images properly!