Claude Code

Terminal-based AI coding assistant for developers

Claude Cowork

Desktop tool for non-developers to automate file and task management

Official "Claude Code in Action" Course

Anthropic's official training course for Claude Code

God of Prompt: Claude Cowork Deep Dive

Comprehensive guide to mastering Claude Cowork

Alex Finn

Great step by step Claude code

Dylan Davis

Many different step by step Vibe coding use cases

Nate B

Daily Big picture insights

Leon Van Zyl

Ray Amjad

Nic Conley

First, Watch Alex Finn

The only Claude Code guide you'll ever need (Opus 4.5) — 25 mins. This YouTube walks through how to install Claude Code, use a Terminal like VS Code (free), GitHub (free) and Vercel (free). It takes you all the way from setup to building and installing a website in a professional way.

youtube.com/watch?v=UVJXh57MgI0

Second, Watch Dylan Davis

I Stopped Using PowerPoint Once I Learned This Claude Method — 20 mins. This YouTube walks through how to build a modern clean looking presentation in HTML (web browser based). Note, use VS studio Code (free, set up decribed in first video below) instead of Cursor.

VS Code

A free code editor from Microsoft. This is your workspace. It has a built-in terminal (a command-line panel at the bottom of the window) where you will type commands. Open it from the top menu: Terminal → New Terminal.

Claude Code

Anthropic's command-line AI coding tool. After installing Node.js, you install this by typing npm install -g @anthropic-ai/claude-code in your VS Code terminal. It requires a paid Anthropic account or API access.

GitHub CLI

A command-line tool for GitHub (where your code is stored and versioned). Create a free GitHub account, install the CLI, then run gh auth login to connect it.

Vercel CLI

The hosting service that puts your site on the internet. Create a free Vercel account, then install the CLI by typing npm install -g vercel and run vercel login.

Phase 0 — Plan Before You Build

AI performs dramatically better with a clear brief than a vague prompt. Before opening Claude Code, write out your answers to a few foundational questions: What is this site's purpose, and who is the audience? What are the main pages or sections? What tone do you want—clinical, casual, authoritative? Are there existing sites whose look and feel you admire?

You can use any AI chatbot to sharpen your thinking. Open Claude Code in your VS Code terminal (type claude) and paste your notes with the instruction: "Help me turn these notes into a clear project brief for building a website." Claude is a planning partner before it is a builder.

Phase 1 — Capture the Design

Instead of trying to describe a visual style from scratch, point Claude at a website you like. In Claude Code, say something like: "Visit [URL] and write a file called STYLE_GUIDE.md that captures its visual style, typography, spacing, color palette, and content tone. Save it to my project folder."

This style guide file becomes your design "lock." Paste its contents at the beginning of every new Claude Code session to maintain visual consistency. AI models can drift aesthetically across sessions; the style guide prevents that.

Also ask Claude to generate a REQUIREMENTS.md listing every page, section, and feature you need to build. Read these documents carefully. Fixing the plan at this stage costs nothing. Fixing it after three pages are built is frustrating.

Phase 2 — Build One Page at a Time

Never ask the AI to build the whole site at once. Start with one page (usually the homepage). Tell Claude: "Build the homepage only, following REQUIREMENTS.md and STYLE_GUIDE.md. Run the dev server when done and give me the local URL."

Open that URL in your browser to see the result. Review the page and give feedback in plain English: "The header is too large," "I want the nav links right-aligned," "Change the background to a lighter grey." Approve the page, then move to the next one.

Keep structure and content as separate steps—build the layout first with placeholder text, then fill in your real content in a dedicated pass. This protects your layout from accidental changes.

Key tip: Press Shift+Tab inside Claude Code to enter Plan Mode. In this mode, Claude outlines what it intends to do before writing any code, giving you a chance to approve or adjust the approach first. This is especially valuable early on.

Scaling to interactive features: When you're ready to add a quiz, a calculator, a branching clinical case, or any other interactive tool, the workflow is identical. Describe the interaction in plain English. The same site can host these features as embedded components. You do not change your process—you change what you ask for.

Phase 3 — Deploy to the Internet

Once your pages look right locally, tell Claude Code to handle deployment. The sequence is three commands in plain English:

1. "Initialize a git repository in this project folder."
2. "Create a new GitHub repository called [your-site-name] and push all code to it."
3. "Deploy this project using the Vercel CLI."

Within minutes, Vercel gives you a live public URL. From this point forward, every time you push a change to GitHub, Vercel automatically redeploys your site—no manual steps needed. You can later add a custom domain through Vercel's dashboard if you wish.

Phase 4 — Maintain and Iterate

Your site is now live, version-controlled, and auto-deploying. To make changes, open the project folder in VS Code, start Claude Code, paste your STYLE_GUIDE.md to re-establish context, and describe what you want to change. Claude makes the edits, you review in the browser, and when you're satisfied, tell Claude to commit and push. Vercel handles the rest.

For error messages: "Here is the exact error: [paste]. Explain what happened and fix it."

For visual issues: "The page doesn't match the style guide. Here is what I see: [describe]. Correct it."

For lost context: "Here is my STYLE_GUIDE.md and REQUIREMENTS.md. Remind yourself of the project and tell me where we left off."