Tutoriel

Claude Code: The Complete Course for Beginners

Everything you need to know about Claude Code in a single guide: from installation to building automated skills, covering context management, plan mode, and MCP. A summary and notes from Nick Saraev's course.

Installation and first launch

To use Claude Code, you need at least Anthropic's Pro plan ($17/month). Installation is done via a simple terminal command:

curl -fsSL https://claude.ai/install | sh

Once installed, type claude in your terminal. On first use, authenticate with /login. The interface displays the model in use (e.g. Opus 4.6), your plan, the current working directory, and a token counter.

The terminal interface

The terminal screen can look intimidating, but it shows the essentials: the model, the context used (from 0 to 100%), tokens consumed, and a customizable status line. Context is automatically compressed by Claude Code as it approaches the limit.

IDEs: VS Code and Antigravity

An IDE (Integrated Development Environment) combines three things: a file explorer, a text editor, and an AI chat. Two IDEs dominate the market:

  • VS Code - Microsoft's classic, highly extensible. Install the "Claude Code" extension by Anthropic (check for the official badge).
  • Antigravity - A modernized, AI-oriented version of VS Code. It's a Google product, but Claude Code integrates into it perfectly.

In both cases, Claude Code appears in a side panel with the same features as the terminal: chat, permission modes, and access to project files.

CLAUDE.md: the project's brain

The CLAUDE.md file is injected at the very start of every conversation, even before your first message. It's the ship's initial heading - a slight deviation at the start translates into a huge gap on arrival.

The ship analogy

Imagine a ship crossing the Atlantic. If the starting angle is off, even by a single degree, after 10,000 km you completely miss your destination. CLAUDE.md narrows the space of possibilities so Claude stays on the right heading.

Best practices

  • Run /init in any new folder - Claude analyzes the codebase and generates a CLAUDE.md
  • Use bullet points and short headings, with a high information density
  • Put critical rules at the top (primacy bias: Claude retains the beginning and the end better)
  • Cap it at 200-500 lines max
  • Prune it regularly - treat it as technical debt

What NOT to do

  • Don't paste entire API docs (10,000 wasted tokens on every session)
  • Avoid vague instructions ("be smart", "don't make mistakes")
  • Don't forget to add rules when Claude repeats the same mistake

The three levels of CLAUDE.md

  1. Global (~/.claude/CLAUDE.md) - Applies to all workspaces
  2. Project (.claude/CLAUDE.md) - Specific to the current folder
  3. Enterprise - For enterprise licenses (rare)

All three are automatically merged when each session starts.

Building a website with Claude Code

Three methods for designing with Claude Code:

1. Screenshot + verification loop

Take a full-page screenshot of an inspiration site (via DevTools: Cmd+Shift+P > "Capture full size screenshot"), resize it to under 5 MB, then paste it into Claude Code along with the copied CSS styles. Claude reproduces the design, takes a screenshot of its own version, compares, and iterates until it reaches ~99% fidelity.

2. Voice transcript dump

We speak 3x faster than we type (~200 words/min vs 60). Use voice dictation to describe everything you want on the site, then let Claude iterate.

3. Components (21st.dev, etc.)

Services like 21st.dev offer components with a "Copy prompt" button. Paste the prompt into Claude Code and it reproduces the component.

The philosophy: Task > Do > Verify

The core loop of Claude Code: give it a task, let it execute, then let it verify the result (via screenshot, automated tests, etc.). Without this verification loop, you lose most of the AI's value.

The AI doesn't nail it 100% on the first try, but it reaches 80% in a few seconds, then 95%, then 99% - where a human would spend hours on a single high-quality pass.

The .claude folder: advanced features

The .claude/ folder is hidden (Unix convention: dot prefix). It contains Claude Code's advanced configuration:

  • settings.json - Team permissions and hooks
  • settings.local.json - Local settings (not pushed to GitHub)
  • CLAUDE.md / CLAUDE.local.md - Project instructions
  • agents/ - Sub-agent definitions
  • skills/ - Custom skills (formerly slash commands)
  • rules/ - Segmented rules (workflow, design, technical...)
  • .mcp.json - MCP configuration

Rules: splitting up CLAUDE.md

Instead of a single large CLAUDE.md file, split it into rule files under .claude/rules/: workflow.md, design-rules.md, tech-defaults.md. Each file handles a specific aspect, which makes maintenance and teamwork easier.

Memory: persistent memory

In addition to CLAUDE.md, a MEMORY.md file is injected at the start of every session. Say "remember that..." and Claude saves the info. Useful for personal preferences, but distinct from CLAUDE.md (it's Claude's notepad, not your instructions).

Sub-agents: delegating intelligently

Sub-agents are child agents launched by the main agent, with their own isolated context. They execute a task and return only a summary to the parent - huge token savings.

The 3 recommended sub-agents

  • Research agent - Does all the research (web, APIs, analytics) in its own context. It can consume 100K tokens but returns only ~2K worth of summary to the parent. Use a cheaper model like Sonnet.
  • Reviewer agent - Reads the code with no prior context, so without bias. Catches issues that the main agent, biased by its own reasoning, misses. The equivalent of a human code review.
  • QA / Testing agent - Runs automated tests in a separate context. Avoids polluting the parent with test logs.

How to create an agent

Create a file in .claude/agents/ with: the name, description, allowed tools, model, max number of turns, and instructions.

Permission modes

Four main modes, accessible via the button at the bottom of the interface or with Shift+Tab:

  1. Ask before edits - Claude asks for confirmation before every change. Safe but slow.
  2. Edit automatically - Auto-accepts edits to existing files, but asks for new files.
  3. Plan mode - Read-only. Claude can search, read files, and reason, but cannot modify anything. Produces a detailed plan before execution.
  4. Bypass permissions - Total carte blanche. Enable it in the extension settings (Allowed dangerously skip permissions).

Bypass warning

A famous case: someone in bypass permissions watched Claude run sudo rm -rf, wiping the entire hard drive. This is extremely rare, but possible. Use it knowingly.

Plan mode: planning before building

Plan mode is the most strategic mode. Claude can only search (web, files) and reason, without modifying any file. It produces a detailed plan that you validate before switching to execution mode.

Why plan?

One minute of planning saves ten minutes of building:

  • Without a plan: build (15 min) + test + discover a problem + rebuild = 35+ minutes
  • With a plan: plan (5 min) + catch the problem in theory + replan (5 min) + build (5 min) = 15 minutes

Planning also reduces token consumption, since Claude doesn't go off exploring during the build.

Practical example: a sales proposal app

Building a PandaDoc clone in ~20 minutes:

  1. Voice dump the specs in plan mode
  2. Claude asks questions (framework, database, payment...)
  3. Generate a detailed plan with a DB schema, API routes, and user flow
  4. Switch to bypass permissions for the build
  5. Configure Supabase + Stripe + Anthropic API while Claude codes
  6. Iterative testing: login, AI generation, signature, payment
  7. Deploy to Netlify

Result: a full-stack app with authentication, AI-generated proposals, electronic signature, and Stripe payment.

Context management

Context is the crux of the whole thing. Use /context to see exactly what's consuming your tokens:

  • System prompt (~5-10K) - Global + local CLAUDE.md + rules
  • System tools (~17K) - Claude Code's native tools (bash, read, edit, web search...)
  • MCP tools (variable) - Can balloon if MCPs are poorly written
  • Memory (~100 tokens) - The MEMORY.md file
  • Skills (~60 tokens each) - Only the front matter is loaded, not the content
  • Messages - Your conversation
  • Auto-compact buffer (~33K) - Reserved for automatic compression

Strategies to save on tokens

  • /compact - Manually compresses the history into a high-density summary
  • /clear - Starts fresh (useful when switching topics)
  • Speak with a high information density (or run your voice dump through a cheaper model to condense it)
  • Use cheaper models (Sonnet, Haiku) for sub-agents
  • Cut unnecessary MCPs - a single MCP tool can consume more than all your skills combined
  • Enable thinking (reasoning) - reasoning tokens don't pollute the context
  • Write specific prompts rather than vague ones ("fix this bug in auth.ts" > "improve the codebase")
  • Use plan mode for complex builds

Skills: automating intellectual work

Skills are Claude Code's most economically powerful feature. They are orchestrated checklists: a Markdown file that defines a procedure, paired with Python/JS scripts that execute the technical steps.

Anatomy of a skill

  • .claude/skills/skill-name/skill.md - The orchestrator (checklist + instructions)
  • .claude/skills/skill-name/scripts/ - The execution scripts (Python, JS...)

The front matter of skill.md (name, description, allowed tools) is the only part loaded into context (~60 tokens). The full content is only loaded once Claude decides to use the skill.

Concrete examples

  • Scrape Leads - Scrapes 1,000 dentists in 87 seconds, ranks them with an LLM, uploads to Google Sheets, and enriches the emails. A process that used to take 30+ minutes manually.
  • Literature Research - Academic research on PubMed with automated review
  • Shop Amazon - Browses and compares products via the Chrome DevTools MCP
  • Website Generator - Generates a custom site per prospect in 30 seconds from a template and a Google Sheet

Creating a skill

Simple procedure: describe what you want in bullet points, let Claude structure the skill.md and create the scripts. Test it with a fresh Claude instance, adjust, and repeat until you reach ~98-99% reliability.

Model Context Protocol (MCP)

MCPs are like skills, but built by other developers. You plug in an "MCP server" and Claude gains new tools (Gmail, ClickUp, Chrome DevTools...).

Where to find MCPs

  • mcpservers.org
  • modelcontextprotocol/servers (GitHub)
  • MCP Market

Installation

Copy the MCP's JSON configuration snippet, paste it into Claude Code and say "install this MCP in my local workspace." For authenticated MCPs (Gmail, ClickUp...), you'll need to provide an API key.

MCP vs Skills: the token trap

Watch out: a single MCP tool (e.g. ClickUp's "update task" = 1,600 tokens) can consume more than all your skills combined (~60 tokens each). The recommended strategy:

  1. Quickly test with the MCP (fast to install)
  2. If it works, convert it into a skill (use the API endpoints directly)
  3. Only keep the essential MCPs (Chrome DevTools is a must-have)

Security: essential precautions

Before deploying a vibe-coded app to the internet:

  • Don't use obvious URLs - scanners constantly crawl the web
  • Never charge customers without a security audit - have a developer review the authentication
  • Prefer internal apps (team, direct clients) over public ones
  • Claude Code is not yet able to patch 100% of frontend and backend vulnerabilities

Also covered in the video

This 3+ hour course also covers the following topics, not detailed in this article:

  • Slash commands - /compact, /clear, /context, /cost, /model, /thinking, /status-line, /init
  • Hooks - Custom scripts that trigger before/after each tool call (e.g. a sound chime when Claude finishes)
  • Agent teams - A feature where a lead agent delegates work to several sub-agents (7x more tokens than a standard session)
  • Git worktrees - Parallel sessions on different branches without context conflicts
  • Fast mode - A 2.5x faster mode for ~3x the price, useful for intensive workflows
  • Deployment - Netlify, Vercel, Modal to put your apps and automations into production
  • GitHub Actions - Running Claude Code in CI/CD via webhooks

Original video: Nick Saraev - The Definitive Claude Code Course for Beginners

Get started with Claude Code

Check out the official documentation and start building.

Claude Code Documentation