Start Here

Create a Free Claude Account

Go to claude.ai and sign up for free. The free tier has daily usage limits but it's enough to get started. You don't need Claude Pro to follow this workflow — but if you're building actively, the $20/month Pro plan is worth it.

Tell Claude Who You Are Before You Prompt

Before you ask Claude to build anything, give it context. Paste something like this at the start of your conversation:

I'm [your name]. I'm building [what you're building].
My skill level is [beginner / some experience / developer].
My tech stack is [HTML/CSS/JS or React or whatever].
I'll be working in VS Code with Claude Code.
Ask me clarifying questions before you write any code.

This one step makes Claude's output dramatically more relevant. Without it, you're prompting blind.

Download the CLAUDE.md Template

The CLAUDE.md file is the backbone of every project. It's a structured document that tells Claude exactly what you're building, who it's for, what the tech stack is, what's out of scope, and anything else it needs to know before touching code.

Without this file, every new conversation with Claude starts from zero. With it, Claude has full project context instantly — every session.

Fill Out the Template

Open the CLAUDE.md template and fill in every section. Be specific. The more context Claude has, the better the output.

If you're stuck on how to structure it, use ChatGPT free to help. Paste the empty template into ChatGPT and say:

"Help me fill out this CLAUDE.md template for my project.
I'm building [your idea]. Ask me questions to fill in the sections."

Drop the Filled CLAUDE.md into VS Code

Open VS Code. Open your project folder. Drop your filled CLAUDE.md file into the root of the project — same level as your main files.

Don't have VS Code yet? Download it free here. It takes 2 minutes to install.

Install the Claude Code Extension

In VS Code, open the Extensions panel (the icon on the left sidebar that looks like four squares). Search for Claude Code and install it. Sign in with your Claude account.

Claude Code is the bridge between Claude and your actual files. It can read your whole project, make multi-file edits, run terminal commands, and execute build steps — all from inside VS Code.

Tell Claude Code to Read the File and Write a Build Plan

Open Claude Code in VS Code and paste this prompt:

Read the CLAUDE.md file in this project.
Write a complete numbered build plan — every step required to build
this project from scratch. For each step include:
- What gets built
- What to test
- What command to run (if applicable)
Number every step. Do not skip anything.

Claude will read your CLAUDE.md and output a full build plan. This is your roadmap. Save it.

Build Step by Step — Test Before You Advance

Execute one step at a time. After each step, test what was built before asking Claude to move on. Open the file in your browser. Click the buttons. Check the console for errors.

If you skip testing and chain 5 steps together, when something breaks you won't know which step caused it. One step. Test. Next step. That's the discipline.

When Errors Happen — Use ChatGPT to Debug

Claude sometimes gets stuck in circular error loops — it tries to fix something, the fix creates a new error, and you're going in circles. This is normal. Here's how to break out of it:

1. Screenshot the error (terminal output, browser console, or the broken UI)
2. Open ChatGPT free in another tab
3. Paste the screenshot and say: "What is the most likely cause of this error and what is the fix?"
4. Copy ChatGPT's response
5. Paste it into Claude Code: "Here's the probable cause from a second opinion. Apply this fix."

This multi-AI approach works better than either tool alone. Claude builds, ChatGPT debugs. Use both.

Push to GitHub and Deploy

When your project is working locally, it's time to get it live. Two good options for free hosting:

Ask Claude Code to walk you through either deployment. It knows the steps.