0 / 13
Welcome

What Is Claude Code?

Meet your new AI-powered coding partner that lives in the terminal.

Imagine having a brilliant teammate who can read through thousands of lines of code in seconds, explain what anything does, make changes for you, and even run tests to check its own work. That's Claude Code.

Unlike older AI tools that just autocomplete one line at a time, Claude Code is fully agentic — it can explore your entire project, make plans, write whole features, fix bugs, and use tools on your behalf.

💡
Plain English: Claude Code is like having a very fast, very knowledgeable colleague who you communicate with by typing messages. You describe what you want, and it figures out how to do it.

🎬 AI Tools In Plain English

Before diving into Claude Code specifically, watch this beginner-friendly overview of what AI tools actually are and how they work under the hood. No technical background needed.

22 min · Covers what AI is, five types of AI tools, and how to prompt each one effectively.

🎬 See It In Action: Build Your First App

Watch someone build a real app with Claude Code from scratch — no coding experience needed. This is what you'll be doing by the end of this course.

14 min · Teacher's Tech · Build a complete app with Claude Code, step by step.

What Makes It Different?

  • Works everywhere — VS Code, Xcode, JetBrains, Vim, or any terminal
  • No special setup required — no pre-indexing your code, no waiting
  • Privacy-conscious — your files stay local; only relevant context is sent to Claude's model service per Anthropic's data policy
  • General purpose — ask questions, edit code, run commands, create files

Quick Check: What Can Claude Code Do?

Select all that apply:

Which of these can Claude Code help with?

Foundation

The Terminal Without Fear

The terminal is just a text-based control panel for your computer. Let's demystify it.

What Is a Terminal?

You probably use your computer by clicking on icons, dragging files, and using menus. The terminalA text-based control panel where you type commands instead of clicking buttons. Also called "command line" or "shell." is another way to control your computer — by typing short text commands instead.

Think of it like texting your computer: you type a command, press Enter, and the computer replies with text.

🌱
Analogy: If your computer's desktop is like a restaurant with a menu and pictures, the terminal is like calling the kitchen directly and telling them exactly what you want.

Try It: Your First Terminal Commands

This is a simulated terminal. Type the commands below and press Enter to see what happens. Don't worry — you can't break anything here!

Terminal Simulator
# Try these commands: pwd, ls, cd project, claude
~ $ 
📚
Command cheat sheet:
pwd — "Print Working Directory" — shows where you are
ls — "List" — shows files in the current folder
cd folder — "Change Directory" — moves into a folder
claude — starts Claude Code!

Key Vocabulary

Command

A short instruction you type

Directory

Another word for "folder"

Shell

The program that reads your commands

Path

The address of a file or folder

Getting Ready

Setting Up Claude Code

A step-by-step checklist to get everything ready.

Installation

Claude Code can be installed in two ways. The recommended method uses the native installer. If you already have Node.jsA program that lets you run JavaScript outside of a web browser. Version 18 or newer is needed for the npm install method. 18+, you can also use npm.

Installation (Recommended)
# Option 1: Native installer (recommended for beginners)
~ $ curl -fsSL https://claude.ai/install.sh | bash
✓ Claude Code installed successfully!
 
# Option 2: Via npm (if you have Node.js 18+)
~ $ npm install -g @anthropic-ai/claude-code

Setup Checklist

Click each item to expand and learn why it matters.

  • Run terminal setup
  • Choose a theme (/theme)
  • Install the GitHub app (/install-github-app)
  • Set up permissions
  • Enable voice dictation (optional)
💭
Pro tip from Boris: "I won't hand type most of my prompts. I use dictation and just speak to Claude Code like I would to another engineer."

Understanding Project Files

Before you start using Claude Code on real projects, here's what common files and folders mean:

README.md

The project's welcome page — explains what it does

src/

Source code — where the actual program lives

tests/

Automated checks that verify the code works

package.json

Lists the project's dependencies and scripts

.gitignore

Tells Git which files to skip (e.g., temp files)

CLAUDE.md

Instructions for Claude Code (we'll cover this later!)

💡
"Running a project" means starting the program so you can see it work — for a web app, that means opening it in your browser. An error message means something went wrong, and you can copy it and ask Claude to explain.
Foundation

GitHub: Your Code's Home

Understand what GitHub is, why every developer uses it, and set up your own account.

What Is GitHub?

GitHubA website where developers store, share, and collaborate on code. Think of it as Google Drive, but specifically designed for code projects with full version history. is a website where code projects live online. It's where teams collaborate, where open-source software is shared, and where Claude Code can create pull requests for you.

🌱
Analogy: If your code is a document, then:
  • Git = Track Changes (remembers every edit)
  • GitHub = Google Drive (stores it online so others can see and collaborate)
  • Repository = A shared folder for one project

Why Do You Need GitHub?

💾
Backup

Your code is safe online even if your laptop breaks

👥
Collaboration

Work with others without emailing files back and forth

🕐
History

See every change ever made and undo mistakes

🚀
Deployment

Many hosting platforms deploy directly from GitHub

Key GitHub Vocabulary

Repository (Repo)

A project folder on GitHub with all its files and history

Commit

A saved snapshot of changes with a message explaining what changed

Branch

A parallel version of your project for trying new things safely

Pull Request (PR)

A request to merge your changes into the main project (with review)

Clone

Download a copy of a repo to your computer

Push / Pull

Send your changes up (push) or get others' changes down (pull)

How to Create a GitHub Account

  • Step 1: Go to github.com
  • Step 2: Create your account
  • Step 3: Verify your email
  • Step 4: Install the GitHub CLI
  • Step 5: Authenticate

Creating Your First Repository

Creating a repo with Claude Code
# Option 1: Ask Claude Code to do it for you
You: Create a new GitHub repo called "my-first-project" and push this code to it.
 
# Option 2: Do it manually step by step
$ git init
Initialized empty Git repository
$ git add .
$ git commit -m "first commit"
$ gh repo create my-first-project --public --source=. --push
✓ Created repository yourname/my-first-project on GitHub
💡
Pro tip: You don't need to memorize Git commands. Just tell Claude Code what you want: "commit my changes", "push to GitHub", "create a pull request". It handles the details.

The GitHub Workflow (Visual)

✎
Edit Code
→
💾
Commit
→
▲
Push
→
📦
On GitHub

Edit locally → Save a snapshot (commit) → Upload to GitHub (push) → Now it's online!

Quiz: What is a "pull request"?

Foundation

What Is a Web App?

Understand what Claude Code is actually building — and which files do what.

The Three Languages of the Web

Every website or web app you've ever used is built from three fundamental languages working together. Think of building a house:

🏗
HTML

The structure

Walls, rooms, doors — what's on the page (headings, paragraphs, buttons, images)

🎨
CSS

The style

Paint, furniture, layout — how it looks (colors, fonts, spacing, animations)

⚡
JavaScript

The behavior

Electricity, plumbing — what happens when you click, type, or scroll

💡
Key insight: This very course you're reading right now is an HTML file with CSS for styling and JavaScript for the quizzes and interactions. It's a web app!

See It in Action

Here's a tiny web page broken into its three parts:

index.html (Structure)
<h1>Welcome to My App</h1>
<p>Click the button below!</p>
<button class="big-btn">Click Me</button>
style.css (Appearance)
.big-btn {
background: blue;
color: white;
padding: 12px 24px;
border-radius: 8px;
}
app.js (Behavior)
document.querySelector('.big-btn')
.addEventListener('click', () => {
alert('Hello! You clicked the button!');
});

Which Files Do What?

When you open a real project, you'll see many files. Here's what the common ones do:

File / Folder What It Does Analogy
index.html The main page structure The blueprint
*.css / styles/ All visual styling The interior designer
*.js / src/ Logic and interactivity The electrician
package.json Lists dependencies and scripts The shopping list
node_modules/ Downloaded libraries (don't edit!) Pre-built components from the store
public/ or static/ Images, fonts, icons The decoration box
api/ or server/ Backend code (talks to databases) The kitchen (hidden from guests)

Frontend vs. Backend

Web apps have two sides:

Frontend (Client)

What the user sees and interacts with in the browser.

  • HTML, CSS, JavaScript
  • Buttons, forms, animations
  • Runs on the user's computer

Backend (Server)

The hidden logic that processes data and stores things.

  • Node.js, Python, databases
  • User accounts, payments, data
  • Runs on a remote server
🍔
Restaurant analogy: The frontend is the dining room (what customers see — menu, decor, plates). The backend is the kitchen (hidden — cooking, storage, orders). They talk to each other through the waiter (the API).

How a Web App Runs

💻
You write code
→
▶
Start dev server
→
🌐
Open browser
→
👀
See your app!

A "dev server" watches your files and refreshes the browser automatically when you save changes.

Starting a dev server
$ npm run dev
Local: http://localhost:3000
Ready in 1.2s
 
# Open http://localhost:3000 in your browser to see the app
# "localhost" means "this computer" — it's not on the internet yet

Quiz: Match the file to its job

If Claude Code creates a file called styles.css, what does it control?

Common Frameworks

You'll hear these names a lot. They're frameworksPre-built toolkits that make it faster to build web apps. Instead of writing everything from scratch, you use their patterns and components. — toolkits that make building web apps faster:

React

Build UIs from reusable components

Next.js

React + server features + routing

Vue

Beginner-friendly UI framework

Tailwind CSS

Utility classes for fast styling

💡
You don't need to learn these now. Claude Code knows all of them. Just understand that when Claude creates files like .tsx, .vue, or uses className=, it's using React-style syntax or a framework.
Core Skill

Talking to Your Codebase

The #1 recommended starting point: ask Claude Code questions about your code.

Why Start With Questions?

At Anthropic, every new hire starts by asking Claude Code questions about the codebase. This approach cut technical onboarding from 2-3 weeks down to 2-3 days.

Asking questions teaches you two things at once:

  1. You learn about the codebaseAll the files that make up an app or project — the source code, configuration files, tests, documentation, and everything else.
  2. You learn how to communicate with Claude Code effectively
🔒
Privacy note: Claude Code does not pre-index your repository. Your files stay in your local project. When you interact with Claude, relevant conversation context is sent to Claude's model service according to Anthropic's data policy.

Good Questions vs. Vague Questions

Which prompt would get a better answer from Claude Code?

Example Questions You Can Ask

Claude Code Q&A Examples
You: What does this app do? Walk me through the main files.
 
You: How is the database connection set up in this project?
 
You: Why does this function have 15 arguments? Look through git history to explain.
 
You: What did I ship this week? Check the git log for my username.
 
You: Fetch GitHub issue #42 and summarize what it's asking for.
⚡
Boris's insight: "You don't have to tell Claude to search git history in detail. Just say 'look through git history' and it figures out the rest. The model is good."
Core Workflow

Plan Before You Edit

The golden rule: think first, code second. Let Claude brainstorm before making changes.

Claude Code's Built-in Tools

Claude Code has a small set of powerful tools it uses automatically:

🔍
Search

Find files and text

✎
Edit

Modify files

⌨
Bash

Run commands

📄
Read

View file contents

The Explore-Plan-Confirm Workflow

🔎
1. Explore
→
📝
2. Plan
→
✅
3. Confirm
→
💻
4. Code

Boris recommends telling Claude: "Before you write code, brainstorm ideas, make a plan, and run it by me for approval."

🎬 Turn A Prompt Into A Visual Plan

AI gives you walls of text. This video shows how to convert that into visual workflows, mind maps, and flowcharts that are actually useful for planning and presenting.

10 min · Shows how to go from a text prompt to a professional visual diagram.

Scenario: What Would You Do?

You want Claude to add a dark mode toggle to a web app. Which approach is better?

Safety First

Before we learn about pushing code, there are important safety rules to follow:

🛑
Golden Rules for Beginners:
  • Never approve commands you don't understand. Ask Claude to explain first.
  • Be careful with destructive actions: delete, overwrite, install, push.
  • Never paste passwords, API keys, or private data into prompts.
  • Review every diff before accepting changes.
  • Errors are information, not failure. Copy the full error and ask Claude to explain it in plain English.
🎓
Academic integrity: If you're a student, check your course policy on AI assistance. Understand the difference between learning with AI and having AI do all your thinking. Always disclose AI assistance when required.

The Magic Incantation: Commit, Push, PR

Once Claude finishes editing, you can tell it to handle the entire GitA version control system — think of it as an "undo history" for your entire project that also lets multiple people work on the same code. workflow:

One-line Git workflow
You: commit, push, and make a pull request
 
# Claude will automatically:
# 1. Look at what changed
# 2. Write a good commit message
# 3. Create a branch
# 4. Push to GitHub
# 5. Create a pull request with description
Critical Skill

Checking Claude's Work

AI can make mistakes. Learning to verify is the most important skill you'll develop.

The Iteration Loop

The most powerful workflow is giving Claude a way to check its own work. When it can see the results of what it built, it iterates and gets dramatically better.

💻
Write Code
→
👁
Check Result
→
🔄
Iterate
→
✨
Almost Perfect

Ways Claude Can Check Its Work

🧪
Unit Tests

Automated checks that verify specific functions work correctly

📸
Screenshots

Take a picture of the UI to see if it looks right

📋
Diff Review

Compare before/after to see exactly what changed

▶
Run the App

Start the project and test it manually

Reading a Diff

A diffA before-and-after view of file changes. Green lines are new (added). Red lines are old (removed). This helps you see exactly what Claude changed. shows you exactly what changed in a file:

src/components/Button.js
10 function Button({ label, onClick }) {
11- return <button onClick={onClick}>{label}</button>
11+ return (
12+ <button
13+ className="btn-primary"
14+ onClick={onClick}
15+ aria-label={label}
16+ >
17+ {label}
18+ </button>
19+ )
20 }

What did this change do?

Level Up

Giving Claude Better Context

The more context Claude has, the smarter its decisions. CLAUDE.md is the key.

What Is CLAUDE.md?

CLAUDE.md is a special file you put in your project folder. Claude Code reads it automatically at the start of every session. Think of it as a briefing document for your AI teammate.

📖
Analogy: If you hired a new team member, you'd give them a document explaining your project's rules, tools, and conventions. CLAUDE.md is that document.
Example CLAUDE.md
# Project: My Todo App
 
## Common Commands
- Run tests: npm test
- Start dev server: npm run dev
- Build: npm run build
 
## Style Guide
- Use TypeScript for all new files
- Components go in src/components/
- Always write tests for new features
 
## Important Files
- src/App.tsx - Main application entry
- src/api/client.ts - API configuration

The Context Hierarchy

Context can live at different levels, from personal to team-wide:

Enterprise Policy — Rules for everyone in the company
Example: "Never fetch URLs from this blocklist"
User Settings — Your personal preferences
Example: "I prefer concise explanations"
Project CLAUDE.md — Shared with the team via source control
Example: "Run npm test before committing"
Nested CLAUDE.md — Pulled in when working in that directory
Example: "This folder uses Python 3.11"

Prompt Improvement Lab

Which prompt gives Claude better context?

Efficiency

Memory & Keyboard Shortcuts

Teach Claude to remember things and work faster with shortcuts.

Memory System

Claude Code can remember things across sessions. Use # followed by what to remember, or use /memory to manage memories.

Memory Scope Sorting

Drag each instruction to the right category:

Always use TypeScript
I prefer short explanations
Follow company security policy
Run npm test before commits
Call me Alex
Never push to main directly
👤 Personal (User)
📁 Project
🏢 Team / Enterprise

Mobile? Click a card, then click a zone to place it.

Essential Keyboard Shortcuts

Click each card to reveal what the shortcut does:

Shift + Tab
Click to reveal
#
Click to reveal
!
Click to reveal
@
Click to reveal
Ctrl + C
Click to reveal
Ctrl + R
Click to reveal
Escape
Click to reveal
Advanced

Automation & Parallel Workflows

Use Claude Code as a programmable tool and run multiple sessions at once.

The CLI SDK: Claude as a Unix Tool

Claude Code isn't just interactive. You can use it as a CLI toolCommand-Line Interface tool — a program you use by typing commands, which can be combined with other tools using "pipes" to pass data between them. in automated workflows:

CLI SDK Examples
# Ask a question and get JSON back
$ claude -p "summarize this project" --output-format json
 
# Pipe data in from another command
$ git status | claude -p "what files changed?"
 
# Use in an automated pipeline
$ cat error.log | claude -p "what went wrong?"
💡
Think of it this way: Just like you can pipe data between commands in a terminal (command1 | command2), you can pipe data through Claude to have it analyze, summarize, or transform anything.

Visual Pipeline Builder

Here's how data flows through a Claude Code automation pipeline:

📄
Input File
→
🤖
Claude -p
→
📊
JSON Output
→
📨
Report / Alert
Click a step to learn more

Running Multiple Sessions

Power users run multiple Claude Code sessions in parallel for different tasks:

Session 1
Fixing failing tests in the backend
Session 2
Reading documentation and answering questions
Session 3
Prototyping a new UI component
⚠
For beginners: Start with one session at a time. Multiple parallel sessions are an advanced technique. You'll know when you're ready for it.
Ship It

Deploying Your Project

Make your project available on the internet so anyone can use it.

What Is Deployment?

Right now, your project only runs on your computer. DeploymentThe process of putting your project on a server (another computer connected to the internet) so anyone can access it via a URL. means putting it on a server so anyone in the world can visit it.

🌱
Analogy: Building a project is like writing a book. Deployment is like printing and distributing it to bookstores so people can actually read it.
💻
Your Computer

Only you can see it

→
🌐
The Internet

Anyone with the URL can use it

Common Deployment Platforms

These platforms make deployment easy — often just connecting your GitHub repository:

Vercel

Great for Next.js and React apps. Free tier available.

Netlify

Simple drag-and-drop or Git-based deploy. Free tier.

GitHub Pages

Free hosting for static sites, built into GitHub.

Railway / Render

For apps with servers/databases. Free to start.

The Deployment Flow

💻
Write Code
→
📦
Push to GitHub
→
⚡
Auto-Deploy
→
🌐
Live on Web!

Most platforms watch your GitHub repo — push code, and it deploys automatically.

Deploying With Claude Code

Claude Code can help you deploy! Here are common prompts:

Deployment prompts
You: Help me deploy this project to Vercel. Walk me through the steps.
 
You: Set up GitHub Pages for this static site.
 
You: My deploy failed. Here's the error log. What went wrong?
 
You: Add a Dockerfile so I can deploy this app to Railway.

Key Vocabulary

Server

A computer that's always on and connected to the internet

URL / Domain

The web address people type to visit your app (e.g., myapp.vercel.app)

CI/CD

Automated testing and deployment — push code and it goes live

Environment Variables

Secret settings (API keys, passwords) stored on the server, not in code

Quiz: Which is the safest way to handle API keys in a deployed app?

Practice

Capstone: Guide Claude Through a Task

Put everything together. Choose a task and walk through the complete workflow.

Choose Your Task

Select a beginner-friendly task to practice with: