Course Syllabus
Start here: course overview, prerequisites, and what you will build.
What You'll Learn
This course teaches you to build a production-ready website using Claude Code as your AI programming partner. You'll learn the partnership model where you make creative decisions and Claude Code implements them in code.
By the end, you'll have created:
- A professional design system (consistent typography, colors, spacing)
- A responsive layout (looks great on phones, tablets, and desktops)
- Smooth animations (scroll-triggered effects, subtle motion)
- Backend functionality (forms, user data, authentication)
- Automated testing (catch bugs before your users do)
- A deployment pipeline (publish changes confidently)
Who This Course Is For
This course is for non-technical or semi-technical people who want to build professional websites—without writing code themselves.
You might be:
- A founder who needs a website that reflects your company's quality
- An operator who wants to update your site without depending on developers
- A consultant who wants to build client deliverables faster
- Anyone curious about AI-assisted development
What you don't need:
- Coding experience
- Technical background
- Understanding of programming languages
What you do need:
- Clear ideas about your brand and content
- Patience to learn a new workflow
- An Apple Mac computer with internet access
System Requirements
This course is designed for Apple Mac users.
You can follow along using:
- MacBook (Air or Pro, any recent model)
- iMac or Mac Mini
- Mac Studio or Mac Pro
Minimum requirements:
- macOS Monterey (12.0) or newer
- 8GB RAM (16GB recommended)
- 20GB free disk space
- Stable internet connection
The Partnership Model
You are the creative director. Claude Code is the production team.
Just like a creative director doesn't personally operate cameras or editing software, you don't need to write code. But you do need to:
- Know what "good" looks like for your brand
- Make decisions about design, content, and functionality
- Communicate clearly what you want
- Verify quality of what gets built
| Your Role | Claude Code's Role |
|---|---|
| Make creative decisions | Implement those decisions in code |
| Describe what you want | Figure out how to build it |
| Review and approve work | Execute tasks precisely |
| Set quality standards | Follow them consistently |
The Modules
Module 1: Setting Up Your Environment
Install Claude Code and configure your development tools
You'll install Claude Code, set up Visual Studio Code, configure MCP servers that give Claude superpowers, and create your CLAUDE.md project instructions file.
Deliverable: Working Claude Code installation with MCP servers configured
Module 2: Planning Your Website
Define your creative vision and let Claude Code help with technical planning
Before writing any code, you'll define what you're building. Create a project brief, plan your sitemap, and establish sprint cycles that keep you organized.
Deliverable: PROJECT-BRIEF.md with sitemap and sprint plan
Module 3: Professional Development Workflow
Learn the practices that separate amateur projects from professional ones
Set up Git for version control, organize your work with sprints and changelogs, and establish a workflow that would make any professional developer proud.
Deliverable: Git repository with CHANGELOG.md and sprint structure
Module 4: Project Initialization
Create your Next.js project with the right configuration
Initialize a Next.js project with the exact configuration Claude Code expects. Understand the file structure you'll be working with.
Deliverable: Initialized Next.js project ready for development
Module 5: Creating Your Design System
The most important module—this is what separates amateur websites from professional ones
Define your typography, colors, spacing, and component patterns. This is what transforms generic AI output into something that reflects your brand.
Deliverable: Complete design system in docs/design-system.md and tailwind.config.ts
Module 6: Building Components
Create reusable building blocks for your website
Build the components that will appear across multiple pages: navigation, footers, buttons, cards, and section containers.
Deliverable: Component library with Container, Section, Button, Header, Footer
Module 7: Building Pages
Assemble components into complete, professional pages
Combine your components and design system into real pages. Build your homepage, about page, and contact page with animations.
Deliverable: Complete homepage, about page, and contact page
Module 8: Setting Up the Backend
Connect your site to a database and add user authentication
Set up Supabase for your database and authentication. Create forms that actually save data.
Deliverable: Working contact form with database storage
Module 9: Testing Your Site
Catch bugs before your users do
Write automated tests that verify your site works correctly. Test visual appearance, user flows, and accessibility.
Deliverable: Test suite covering visual, functional, and accessibility tests
Module 10: Deploying Your Site
Publish your website to the internet
Deploy your site to Vercel and set up a custom domain. Configure production environment variables.
Deliverable: Live website accessible at your domain
Module 11: Maintaining & Iterating
Keep your site growing and improving
Learn how to add new features, respond to feedback, and keep your site improving over time.
Deliverable: Documented maintenance workflow and first iteration
Module 12: Quick Reference
Essential templates, checklists, and troubleshooting guides
Everything you need for quick reference: CLAUDE.md templates, quality checklists, MCP setup guides, and common troubleshooting solutions.
Deliverable: Personal reference guide customized for your workflow
Course Navigation
- Module 1: Setting Up Your Environment
- Module 2: Planning Your Website
- Module 3: Professional Development Workflow
- Module 4: Project Initialization
- Module 5: Creating Your Design System
- Module 6: Building Components
- Module 7: Building Pages
- Module 8: Setting Up the Backend
- Module 9: Testing Your Site
- Module 10: Deploying Your Site
- Module 11: Maintaining & Iterating
- Module 12: Quick Reference
Important Disclaimer
This course is provided for educational and informational purposes only.
By accessing or using these materials, you acknowledge and agree:
-
No Warranty: These materials are provided "as is" without warranties of any kind, express or implied, including but not limited to warranties of merchantability, fitness for a particular purpose, accuracy, or completeness.
-
Use at Your Own Risk: You assume all risk associated with applying the concepts, techniques, prompts, or code patterns presented in this course. Charter Oak Strategic Partners is not responsible for any websites, applications, code, content, or other outputs you create.
-
Third-Party Tools: This course references third-party tools and services including Claude Code, Anthropic, Vercel, GitHub, and others. Charter Oak Strategic Partners has no control over, makes no guarantees about, and assumes no liability for these external services.
-
Not Professional Advice: Nothing in this course constitutes legal, business, technical, or professional advice. Consult qualified professionals for specific guidance.
-
Limitation of Liability: In no event shall Charter Oak Strategic Partners, its officers, employees, or affiliates be liable for any direct, indirect, incidental, special, consequential, or punitive damages arising from your use of these materials or any code, websites, or applications you develop.
-
Your Responsibility: You are solely responsible for ensuring that anything you build complies with applicable laws, regulations, and third-party terms of service.
By continuing with this course, you accept these terms. For full terms, see our Terms & Conditions.