Learning Objectives - Phase 3: Vibe Coding Mastery
Workshop Overview
Transform your ability to describe ideas into the ability to create them. By the end of this 3-hour session, you'll have built and deployed real web pages — entirely through conversation with AI, without writing a single line of code by hand.
Primary Learning Outcomes
By the end of this phase, you will be able to:
1. Conversational Creation (Core Skill)
You will be able to:
- Describe a web page in plain English and have AI generate working code
- Use natural language to specify layouts, colours, typography, and spacing
- Reference existing websites as inspiration ("like Stripe's layout but for a bakery")
- Combine multiple visual references into a single coherent design
- Create single-page websites, multi-section landing pages, and interactive tools
Success Criteria:
- Generated a working web page from a plain-English description
- AI understood and implemented your visual intent
- Result is responsive (works on desktop and mobile)
- No hand-written code required at any point
2. Iterative Refinement
You will be able to:
- Review AI output critically and identify what needs changing
- Describe visual and functional adjustments in natural language
- Follow the refinement loop: describe, review, refine, repeat
- Make targeted small changes rather than rewriting everything
- Know when to start fresh versus when to iterate
- Manage conversation context to keep AI on track
Success Criteria:
- Completed at least 3 refinement rounds on a single page
- Each round produced a visible, intentional improvement
- Final result matches your creative vision
- Used natural language throughout (no code editing)
3. Adding Interactivity Through Conversation
You will be able to:
- Add contact forms with validation using plain English descriptions
- Create hover effects, animations, and transitions conversationally
- Build functional elements: lightboxes, carousels, toggles, accordions
- Implement dark mode with a single conversational prompt
- Describe conditional behaviour ("when the form submits, show a thank-you message")
- Add scroll-based effects and navigation behaviours
Success Criteria:
- Added at least 2 interactive features to a web page
- Interactivity works correctly without manual debugging
- Can describe cause-and-effect behaviour naturally
- Understands the difference between structure, style, and behaviour
4. Deployment to the Live Internet
You will be able to:
- Create a GitHub repository for your project
- Deploy a static site to GitHub Pages
- View your creation at a live URL accessible to anyone
- Update and redeploy after making changes
- Understand the basics of free static hosting
Success Criteria:
- At least one page deployed to a live URL
- Page loads correctly for others (not just locally)
- Can update and redeploy independently
- Understands the deployment workflow
5. Tool Selection and Workflow
You will be able to:
- Choose the right tool for a given task (Claude Code, Cursor, ChatGPT, etc.)
- Use Claude Code effectively for file-based vibe coding projects
- Use chat interfaces (Claude.ai, ChatGPT) for quick prototypes
- Understand the strengths and trade-offs of each approach
- Manage AI costs and monitor token usage
Success Criteria:
- Can explain when to use Claude Code vs. a chat interface
- Used at least one tool to build a complete page
- Understands the cost model (pay-per-token vs. subscription)
- Knows how to check usage and set spending limits
Detailed Skill Breakdown
Beginner Level (First Hour)
Knowledge:
- Understand what vibe coding is and how it differs from traditional coding
- Know the three languages of the web (HTML, CSS, JavaScript) at a conceptual level
- Recognise effective vs. weak vibe coding prompts
- Understand the iterative refinement loop
- Know which tools are available in 2026
Skills:
- Write a clear opening prompt that produces a usable first draft
- Open and preview a generated HTML file in a browser
- Describe one or two visual changes and have AI implement them
- Use Claude Code to create files in a project folder
- Save work and keep track of versions
Mindset:
- Think like a director, not a developer
- Embrace experimentation — nothing is permanent
- Trust that "I want rounded corners" is a valid instruction
- Focus on what you want, not how to implement it
Intermediate Level (Second Hour)
Knowledge:
- Understand responsive design at a conceptual level (phone vs. desktop)
- Know how to describe interactivity without technical jargon
- Recognise when AI has misunderstood intent
- Understand the concept of progressive enhancement
Skills:
- Add interactivity: forms, animations, toggles, lightboxes
- Describe and fix mobile layout issues conversationally
- Combine multiple sections into a cohesive single-page site
- Use comparisons and references to guide AI output
- Iterate through 3+ refinement rounds on a single project
Mindset:
- Confidence to request complex features through conversation
- Patience with the iterative process
- Critical eye for design quality
- Willingness to try ambitious ideas
Advanced Level (Third Hour)
Knowledge:
- Understand GitHub Pages deployment workflow
- Know when to start a new conversation vs. continue an existing one
- Recognise the limits of single-file web pages
- Understand basic accessibility considerations
Skills:
- Deploy a finished page to GitHub Pages
- Build a complete multi-section page with interactivity
- Create data-driven content (charts, dashboards, dynamic lists)
- Polish a page to professional quality through iteration
- Troubleshoot deployment issues conversationally
Mindset:
- "I can build this" as the default response to any web idea
- Creative ambition matched with iterative patience
- Ownership mentality — you built it, you control it
- Readiness to apply these skills to real projects
Profession-Specific Objectives
For Business Owners and Entrepreneurs
You will be able to:
- Build a professional landing page for your business
- Create a pricing page or product showcase
- Deploy a contact form that looks polished and works correctly
- Update your site any time without hiring a developer
- Prototype ideas rapidly before committing resources
For Academics and Researchers
You will be able to:
- Create interactive visualisations of research data
- Build a personal academic portfolio or project showcase
- Generate conference presentation materials as web pages
- Prototype data dashboards for papers or grant applications
- Share interactive results with colleagues via a URL
For Consultants and Freelancers
You will be able to:
- Prototype client solutions on the spot during meetings
- Build demonstration sites to win pitches
- Create custom tools (calculators, quote generators) for clients
- Deliver web-based deliverables alongside traditional documents
- Differentiate yourself with rapid delivery capability
For Creatives and Designers
You will be able to:
- Build a portfolio site that reflects your aesthetic precisely
- Create interactive galleries and showcases
- Experiment with web-based art and animation
- Own your online presence completely — no template constraints
- Update and evolve your site as your work changes
Assessment Criteria
Knowledge Assessment (10 points)
You will demonstrate understanding of:
- Vibe coding principles and the director's mindset (2 points)
- The iterative refinement loop (2 points)
- Tool selection and the 2026 landscape (2 points)
- Prompt writing best practices (2 points)
- Deployment and hosting concepts (2 points)
Practical Skills (15 points)
You will successfully:
- Generate a web page from a plain-English description (4 points)
- Refine it through at least 2 conversational rounds (4 points)
- Add interactive features through conversation (4 points)
- Deploy to a live URL (3 points)
Application and Reflection (5 points)
You will:
- Complete a capstone project relevant to your work (3 points)
- Articulate how you'll use vibe coding going forward (2 points)
Passing Score: 24/30 (80%)
Success Indicators
Immediate (End of Workshop)
- Built at least one complete web page through conversation
- Page is live on the internet at a real URL
- Added interactivity without hand-coding
- Confident in describing what you want to AI
- Know which tool to reach for next time
Short-term (1 Week)
- Built something new using vibe coding
- Shared a creation with a colleague or friend
- Refined a page through 5+ iteration rounds
- Explored a tool you didn't use in the workshop
- Started a project relevant to your work or interests
Long-term (1 Month)
- Maintaining a live web presence you built yourself
- Using vibe coding regularly for prototyping or creating
- Comfortable with the full workflow: describe, build, iterate, deploy
- Helping others discover vibe coding
- Pushing into more ambitious projects
Your Commitment
I Commit To:
- Describing boldly — no idea is too ambitious to try
- Iterating patiently — the first draft is never the final product
- Experimenting freely — mistakes are just conversations away from fixes
- Deploying proudly — putting my creation live on the internet
- Continuing to create — using these skills beyond the workshop
This Workshop Promises You:
- A real, working web page built entirely through conversation
- A live URL you can share with anyone
- The confidence to build anything you can describe
- No code to memorise, no syntax to learn
- Creative freedom limited only by your imagination
Ready to Begin?
These objectives represent a fundamental shift in who gets to create on the web. By the end of today, the answer to "can I build a website?" will be a permanent, confident "yes."
Let's start creating!