# Phase 3: Vibe Coding Mastery

## Build Anything You Can Describe — No Programming Required

Welcome to the most transformative session of your workshop journey. In the next 3 hours, you'll discover that the barrier between imagination and creation has fallen. Describe what you want in plain English, and watch AI bring it to life as a real, working web page — deployed live on the internet.

## Phase Overview

This session turns you from an AI-assisted writer into an AI-assisted creator. You'll learn "vibe coding" — the art of building websites, interactive tools, and data visualisations through natural conversation with an AI coding agent. No syntax to memorise, no error messages to decipher, no programming experience required. Just clear descriptions and creative iteration.

## Learning Outcomes

By completing this phase, you will:

### Core Capabilities
- Describe a web page in plain English and have AI generate working HTML, CSS, and JavaScript
- Iterate on designs through conversational refinement — changing colours, layouts, and behaviour with natural language
- Deploy a finished creation to the live internet using GitHub Pages
- Debug visual and functional issues without understanding code — just by describing what looks wrong

### Creative Skills
- Master the "director's mindset" — guiding AI like a film director guides a crew
- Write effective vibe coding prompts that produce professional results first time
- Combine inspirations from multiple reference sites into original designs
- Add interactivity (forms, animations, dark mode, lightboxes) through conversation alone

### Professional Outcomes
- Build a complete personal portfolio, business landing page, or data dashboard
- Own the code outright — no monthly fees, no vendor lock-in, no templates
- Understand when to use Claude Code, Cursor AI, ChatGPT, or other tools
- Evaluate and refine AI output with a critical, creative eye

## Phase Structure

### Chapter Navigation

1. **[Introduction](00_introduction.md)** — The Vibe Coding Revolution (10 min)
   - What vibe coding is and why it changes everything
   - What you'll create in this phase
   - Addressing common concerns

2. **[Core Concepts](01_concepts.md)** — Understanding Conversational Creation (30 min)
   - The 2026 tool landscape: Claude Code, Cursor, Windsurf, Copilot
   - The language of creation: describing UI without technical jargon
   - Anatomy of a vibe coding session: vision, structure, refinement, polish, deploy
   - Debugging through conversation

3. **[Hands-On Practice](02_hands_on.md)** — Building Your First Vibe Creation (90 min)
   - Build a personal portfolio page through pure conversation
   - Iterative refinement: layout, visual polish, content
   - Adding interactivity: lightbox, contact form, dark mode
   - Mobile-first thinking and responsive design

4. **[Creative Challenges](03_exercises.md)** — Progressive Exercises (30 min)
   - 5 exercises from simple landing pages to data visualisations
   - Practise prompt writing, iteration, and deployment
   - Stretch challenges for fast finishers

5. **[Capstone Project](04_project.md)** — Your Live Creation (20 min)
   - Choose a project path: portfolio, business page, dashboard, or creative tool
   - Build and deploy a complete web page through conversation
   - Showcase your creation to the group

6. **[Assessment](05_assessment.md)** — Validate Your Mastery (10 min)
   - Knowledge check on vibe coding principles
   - Practical demonstration tasks
   - Self-assessment and reflection

7. **[Resources](06_resources.md)** — Continue Creating
   - Tool directory: Claude Code, Cursor, Windsurf, and more
   - Prompt libraries and reference sites
   - Deployment guides and community links

## Who This Phase Is For

### Perfect For:
- **Business Owners** who want custom websites without hiring developers
- **Academics** who need interactive visualisations for teaching or research
- **Consultants** who want to prototype solutions for clients on the spot
- **Creatives** who want portfolio sites, galleries, or interactive showcases
- **Entrepreneurs** who need to launch landing pages quickly and cheaply
- **Anyone** with an idea they want to bring to life on the web

### You'll Succeed If You:
- Can describe what you want clearly in English
- Completed Phase 2 (API access configured)
- Have enthusiasm for experimenting and iterating
- Are willing to try wild ideas and refine from there

### No Experience Required In:
- HTML, CSS, or JavaScript
- Programming of any kind
- Web design or development
- Command line usage

## Technical Requirements

### Minimum:
- **Computer**: Windows 10+, macOS 10.15+, or Linux
- **RAM**: 8GB minimum
- **Internet**: Stable connection for AI APIs and deployment
- **Browser**: Chrome, Firefox, or Edge (latest)

### From Phase 2:
- VS Code installed with AI extensions configured
- Claude Code CLI installed (or Cursor / Windsurf / ChatGPT as alternative)
- API key active with credit (free tiers sufficient)
- GitHub account (for deployment)

## Learning Approach

### Our Teaching Philosophy:
- **Describe, Don't Code**: Every creation starts with plain English
- **Iterate Rapidly**: Small changes, frequent reviews, constant refinement
- **Real Deployments**: Your creations go live on the actual internet
- **Creative Freedom**: No templates, no limits — build what you imagine
- **Own Everything**: The code is yours, hosted for free, no subscriptions

### Phase Timing:
- **Total Duration**: 3 hours
- **Format**: Self-paced with suggested timings
- **Balance**: 70% hands-on creation, 30% concepts and reflection
- **Breaks**: Take them — creativity needs breathing room

## Success Stories

> "I described my dream portfolio site in 10 minutes of chatting. It would have cost me five thousand pounds to hire someone. Now it's live and I update it myself."
> — Lisa Park, Graphic Designer

> "Our team needed a custom calculator for client quotes. I 'vibed' it into existence in 30 minutes. It's been running flawlessly for months."
> — Robert Singh, Financial Consultant

> "I thought websites required coding. Now I build them during lunch breaks. My side business launched because of vibe coding."
> — Maria Gonzalez, Teacher turned Entrepreneur

## Ready to Create?

### Quick Readiness Check:
- [ ] Phase 2 completed (API access working)
- [ ] VS Code or alternative AI tool open and ready
- [ ] Web browser available for previewing
- [ ] An idea — however vague — for what you want to build
- [ ] Willingness to experiment and iterate

### Begin Creating

**[Start with the Introduction →](00_introduction.md)**

Or jump directly to:
- [Core Concepts](01_concepts.md) — Understand the principles
- [Hands-On Practice](02_hands_on.md) — Start building immediately
- [Check Prerequisites](prerequisites.md) — Ensure you're ready

## Tips for Success

1. **Start Simple**: A heading, a paragraph, a colour — then build up
2. **Be Specific**: "Sky blue background" beats "nice colour"
3. **Iterate Small**: Change one or two things at a time
4. **Use References**: "Like Stripe's landing page but for a bakery"
5. **Embrace Mistakes**: Every wrong turn is a conversation away from being fixed

---

*After this phase, "I can't build websites" becomes "I just built three." Let's begin!*

**[Start Phase 3: Introduction →](00_introduction.md)**