December 22, 2025•9 min read•

Tags ▼

Claude Code
Cloud
Vscode

•

Share ▼

Share on Twitter Share on Facebook Share on LinkedIn Share on Reddit

Claude Code Tutorial for Beginners

One Sentence Summary

A hands-on walkthrough of using Claude Code (Anthropic) for end-to-end AI-assisted app development, from scratch to large architecture changes.

Main Points

AI-assisted coding with Claude Code, integrated into terminal and IDE workflows.
Start-to-finish: setup instructions for Mac, Windows, and Node.js/npm installation.
Prompt design: replace vague requirements with structured, prioritized prompts and plan mode for clarity.
Claude MD: a file injected into sessions to encode project conventions and standards.
Plan mode: Claude proposes implementation steps and questions before writing code.
TypeScript vs JavaScript: iterative reconfiguration of plans to enforce type safety.
Commit discipline: commit early, often, and maintain rollback-friendly workflows.
Claude as teammate: review and refine code together rather than handing off unreviewed output.
YOLO mode: dangerous skip permissions to accelerate changes (with risks acknowledged).
Architecture changes: exploring options, then implementing real-time syncing with a websocket server.

Takeaways

Treat Claude Code as a collaborative engineer; insist on plan reviews and questions.
Use Claude MD to encode project context and standards for consistency.
Prefer incremental, testable changes; use branches to isolate AI-driven edits.
Leverage plan mode and multiple options to evaluate architectural decisions.
Balance speed (YOLO) with safeguards; always verify changes in a controlled environment.

Extensive Breakdown

This tutorial demonstrates how to use Claude Code (by Anthropic) to:

Create a new app from scratch
Integrate Claude into an existing codebase
Perform a major architectural change (real-time sync via WebSockets)

The core technology stack used:

Node.js
npm
React
TypeScript
Visual Studio Code
Local storage (initially)
WebSocket server (for real-time sync)

The video emphasizes:

Proper installation
Plan Mode vs YOLO mode
Git discipline (commit early/often)
Using a claude.md onboarding file
Explore → Plan → Code → Commit workflow

Primary skill addressed: AI-assisted engineering using Claude Code with structured planning and safe iteration practices.

Detailed Step-by-Step Breakdown

1️⃣ Installing Claude Code

Option A – Mac (Bash Script)

Copy installation script from homepage
Run in Terminal
Script executes automatically

Option B – Windows (PowerShell Script)

Uses PowerShell installer
Script may fail (as noted in transcript)

Recommended Cross-Platform Method (npm Install)

Step 1 – Install Node.js

Go to:

Node.js

Download installer.

Verify installation:

node -v

Expected:

vXX.X.X

Step 2 – Install Claude Code via npm

npm install -g claude-code

(Exact package name assumed; transcript implies npm install command provided in resources.)

Step 3 – Initialize Claude

claude

Setup prompts:

Choose theme (Dark mode selected)
Select subscription method (Cloud account)
Authenticate

Successful install = CLI interface loads.

2️⃣ Integrating Claude Code into Visual Studio Code

Use:

Visual Studio Code

Open Integrated Terminal

Shortcut:

Ctrl + Shift + `

Initialize Git:

git init

Switch terminal to Command Prompt (if required)

Start Claude:

claude

Trust directory:

Press 1

3️⃣ Creating a New React App (Correct Way)

❌ Bad Prompt (Vague)

Make a chore app to manage chores at the office...

Problem:

No tech stack defined
No storage defined
No architecture defined
No engineering principles defined

✅ Proper Prompt Structure

Prompt includes:

Bullet list of product requirements
Explicit request for clarification questions
Instruction to ask about:
- Tech stack
- Storage
- Constraints
- Architecture
- Engineering principles

Multi-line input:

Alt + Enter (Mac Option + Enter)

Enable Plan Mode

Shift + Tab

Plan mode behavior:

Claude reasons
Asks clarifying questions
NEVER writes code automatically

Example Selections

React app
Local storage
No authentication
Enable extra features

Submit answers:

Press 1

Claude generates:

File structure
Data models
Implementation plan
Tech stack decisions

Modifying the Plan

Detected issue:

JavaScript instead of TypeScript

When prompted:

Option 3 → Modify Plan

Instruction:

Use TypeScript instead of JavaScript.

Claude regenerates plan.

Confirmed via:

.ts
.tsx

Executing Plan

Two options:

Auto accept changes
Manual review

After code generation:

Claude requests:

npm install

Approve or deny per security preference.

Starting Dev Server Manually

Instead of allowing Claude:

cd app-directory
npm run dev

App loads.

4️⃣ Git Discipline (Critical Practice)

Before fixing bugs:

git add .
git commit -m "Initial working version"

Principle:

Commit early. Commit often.

Reason:

Prompts may introduce regressions
Easy rollback

Work inside branches.

5️⃣ Using Claude in an Existing Project

Clear conversation history:

/clear

Simulates fresh onboarding.

6️⃣ Creating `claude.md`

Purpose: Onboard Claude into project standards.

File:

claude.md

Injected into every session.

Structure of claude.md

Layer 1 – Tech Stack & Structure

Frameworks
Packages
Folder layout

Layer 2 – Purpose of Components

Responsibilities
Domain model

Layer 3 – Operational Rules

Run tests after changes
Create branch before feature
Engineering constraints

Progressive Disclosure Pattern

Instead of large file:

Index file
Links to:
- architectural-patterns.md
- design decision docs
- conventions

7️⃣ Bug Fix Workflow

Example bug: Calendar click → wrong time assigned.

Procedure:

Exit Claude
Restart Claude
Provide simple bug prompt:

Bug fix:
Clicking calendar sets wrong time.

Claude:

Locates TSX file
Requests new Git branch

Creates branch automatically.

Fix applied.

Manual verification:

Add chore at 8:00 AM
Confirm correct rendering

8️⃣ Major Architecture Change (Real-Time Sync)

Requirement: Changes reflect across browser tabs without refresh.

Enable YOLO Mode

Shift + Tab

Toggle: Dangerously skip permissions

Behavior:

Claude runs commands automatically
No confirmation prompts

⚠ Risky but fast.

Follow Explore → Plan → Code → Commit

In Plan mode:

Prompt:

Explain architecture change
Ask Claude to explore files
Request 3 implementation options

Claude proposed:

Browser-based sync
Local sync method
WebSocket server

Selected: Option 3 (Full real-time server)

Result

Claude:

Created WebSocket server
Modified client to connect
Implemented real-time broadcasting

Verified:

Two browser instances
Add team member → reflects instantly
Add chore → sync confirmed

Key Technical Details

Commands Used

node -v
npm install -g claude-code
claude
git init
git add .
git commit -m "message"
npm install
npm run dev

Modes

Mode	Behavior
Normal	Asks permission for commands
Plan Mode	Reasons, no code written
YOLO Mode	Executes without approval

Project Stack (Final)

React
TypeScript
LocalStorage
WebSocket server
Git
VS Code

Pro Tips

1. Treat Claude Like a Senior Engineer

Clear
Specific
Direct
No fluff

2. Always Start in Plan Mode

Avoid:

Uncontrolled code generation
Poor architecture decisions

3. Modify Plans Before Execution

Use:

Option 3 → Modify Plan

Example:

Use TypeScript instead of JavaScript

4. Use claude.md for Consistency

Critical for:

Coding standards
Architecture compliance
Automated branching rules

5. Commit Before Prompting

Avoid regression risk.

6. Use Progressive Disclosure in claude.md

Keep:

Core rules in main file
Detailed architecture in separate markdown files

7. Prompt Engineering Still Applies