Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Claude Code Bootcamp: Design, Build, Test and Deploy with Claude
Module 0: Introduction
Introduction (4:04)
Exercise: Meet Your Classmates and Instructor
Course Resources
Understanding Your Video Player
Set Your Learning Streak Goal
Module 1: Claude - Project Workflow
Demo: Start with your Browser and an Idea... (8:24)
The Three Standards (8:07)
Web App Anatomy (12:21)
Product Requirement Document (PRD) (11:32)
Content Model (6:50)
Site Contract (8:41)
Design Standard Document (7:42)
Programming Agents (8:31)
Claude Project (6:17)
Building a Website (8:18)
The Director's Audit (11:34)
Finishing the Director's Audit (9:26)
Let's Have Some Fun (+ More Resources)
Module 2: Claude Code - Fundamentals in the Terminal
Introduction to Claude Code (11:45)
Optional: Developer Setup
Setting Up the Agentic Development Environment (17:21)
Optional: Agentic Engineering Practice Repository
Slash Commands and Modes Steering (13:23)
Plan Mode and Memory Architecture (14:30)
Memory in Practice (14:37)
Optional: Ogham MCP
Extended Memory: Ogham MCP & Context7 (15:06)
Practice Repository: Architecture Refactor (13:48)
Permissions, YOLO Mode and Autonomous Execution (14:23)
Verification Loops (14:09)
Routines (14:30)
'/Goal' Command (8:16)
Plugins (13:00)
Install a Plugin (14:28)
Optional: My Standards Plugin Repository
Vercel (CLI vs. MCP) (8:27)
Exercise: Imposter Syndrome (2:55)
Module 3: Claude Code - Desktop App
Claude Code Desktop App (9:54)
Optional: Parallel Sessions Practice Repository
Practice Project: Parallel Sessions Test (10:54)
Remote Control Feature (3:03)
Atomic Shipping and the Logic Surgeon Model (8:26)
Course Check-In
Module 4: Claude Code - VibeMail Project Backend
Project: VibeMail Backend - Architecture and Planning (15:37)
Setting Up Google Cloud (9:47)
Repository Creation & CLAUDE.md (9:40)
Worktree Architecture: Parallel Sessions (10:05)
Database Planning (15:02)
Building the Core Engine (15:23)
Writing Out Our Server Based Logic (14:16)
Combining the Server and Schema Sessions (12:33)
Deploying and Configuring Production Infrastructure (13:38)
Verifying What We Built (16:48)
Running Final Tests (13:17)
VibeMail Backend Project
Unlimited Updates
Module 5: Claude Design / Code - VibeMail Project UI
What is Claude Design? (11:29)
Opening Up the Claude Design Tool (15:16)
What Is a Behavioural Spec? (10:31)
Populating Our DESIGN_SPEC.md (12:52)
Building the DESIGN.md System (11:51)
DESIGN.md Previewer
Setting Up the Claude Design System (9:38)
Iterating Our Email UI in Claude Design (14:52)
Auditing Our Claude Design (11:39)
Producing a Migration Plan in Claude Code (15:42)
Migrating the Handoff Components into a Next.js Structure (7:36)
Visual Inspection with Our Agent and Accessibility Review (15:03)
API Integration with UI (9:45)
Email Bodies & Attachments (11:44)
Final Pass & Deployment (15:12)
VibeMail Full-Stack Project
Implement a New Life System
Module 6: Building a Cinematic Portfolio
How to Build a Cinematic Portfolio (8:57)
Art Direction & Motion Brief (19:39)
Building the Portfolio Shell (15:22)
Understanding Shaders (10:42)
Directing a Shader Hero Section (10:27)
Building a Control Panel for Shaders (11:31)
Scroll Motion Foundations (10:06)
Pinning and Scrubbing an Element (12:08)
About Section Timeline (10:43)
Working on the Project Grid (15:13)
Deployment & Director's Audit (10:50)
Wire Up Our Contact Form (13:40)
Portfolio Project
Where To Go From Here?
Thank You! (1:17)
Review This Course!
Become An Alumni
Learning Guideline
ZTM Events Every Month
LinkedIn Endorsements
Appendix: Developer Setup (Optional)
Developer Environment Setup
4.1 Creating a Development Environment (10:56)
4.2 Mac / Linux: Homebrew, Git & Visual Studio Code Installation (5:34)
4.3 Windows: Git & Visual Studio Code Installation (6:57)
4.4 Visual Studio Code Overview (11:03)
4.5 Terminal & Node.js Setup (16:06)
4.6 GitHub Workflow - Method 1 (10:36)
4.7 GitHub Workflow - Method 2 (9:36)
Design Standard Document