# 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!** --- [Begin Workshop →](./00_introduction.md) | [Check Prerequisites](./prerequisites.md) | [Back to Overview](README.md)