Claude Code: Complete Tutorial for Beginners

This tutorial starts from the very beginning. It does not assume you know what an LLM is, how a terminal works, or why anyone would write code using artificial intelligence. If you already know all of that, skip ahead to Section 4 and get your hands dirty.

For everyone else, the path is: understand the concept, install the tool, run a few commands, and build something real. By the end, you will have a personal page running in your browser — made by you, with the help of an AI.

Part 1: Understanding the Landscape

What is an LLM?

LLM stands for Large Language Model. In practical terms, it is a program trained on billions of texts from the internet: books, articles, forums, technical documentation, source code, conversations. All of it.

The most honest analogy is a superintelligent autocomplete. When you type a message on your phone and it suggests the next word, that is a simple language model at work. An LLM does the same thing — predicts the next word — but with so much competence that the result looks like reasoning, comprehension, intelligence.

Looks like. But it is not — at least not in the way humans understand those concepts. An LLM does not "think" about your problem. It calculates which sequence of words is most likely to be useful given the text you provided. The practical difference is that when it gets something wrong, it gets it wrong in ways no human ever would — and with unshakable confidence.

This matters because it defines how you should use the tool. An LLM is extraordinarily capable at generating code, explaining concepts, identifying patterns, and suggesting solutions. But it is not infallible. Verifying the output is part of the process.

To give a concrete sense of scale: the most advanced LLMs of 2026 were trained on datasets containing trillions of tokens. A token is the basic unit the model processes — roughly, one English word equals about one token. The volume of text these models absorbed is greater than any human could read in a thousand lifetimes.

That raw training volume is what allows an LLM to write code in dozens of languages, translate between them, explain quantum physics, and draft contracts — all with the same model. Not because it "learned" each subject individually, but because the statistical patterns between words capture a surprising amount of structure and knowledge.

Model vs Interface

One detail that trips people up: the model (the "brain") and the interface (how you access that brain) are different things.

Claude is a model. Claude.ai is a web interface for chatting with that model. The API is another interface — for developers to connect the model to their own programs. And Claude Code is yet another interface, but with a fundamental difference that changes everything.

When you use Claude.ai or ChatGPT, the dynamic goes like this: you ask, the AI responds, you copy the result and paste it where you need it. It is a conversation. Useful, but limited by the friction of copying and pasting, and by the fact that the AI cannot see the real context of your project.

Claude Code breaks that dynamic. Instead of talking about code, it works directly on the code. It reads your files, understands the project structure, edits what needs editing, runs terminal commands, tests whether the result works. All without you copying or pasting a thing.

Here is the difference in a nutshell: using ChatGPT or Claude.ai is like texting a friend for advice. They might have great ideas, but you still have to do all the manual work. Using Claude Code is like having a colleague sitting next to you, with access to your computer, who executes tasks while you steer.

Model vs Agentic Tool

This distinction deserves more attention because it defines an entire category of software.

Tools like ChatGPT and Claude.ai are conversational interfaces. You talk, they respond. The flow is: human acts, AI reacts. Every concrete action — saving a file, running a command, testing a result — falls on you.

Tools like Claude Code are agents. They do not just respond — they act. An agent can decide to read a file for context before answering. It can run a command to check whether the code works. It can edit three different files in sequence to implement a change. It can notice a missing dependency and install it.

The crucial point: an agent makes intermediate decisions. You say "add a login button to this page" and it decides on its own which files to open, what to modify, which library to use, and how to test. You describe the destination; it charts the route.

This does not mean the agent always gets it right. It means the type of interaction is fundamentally different. Instead of micro-managing each step ("open this file, go to line 42, change X to Y"), you work at the level of intent ("I want the button to do this") and review the result.

In practice, this shifts who needs to know what. With a conversational interface, you need to know how to do something in order to describe the steps. With an agent, you just need to know what you want. The agent handles the how. That inversion is what makes agentic tools accessible to people without a technical background — and it is what makes this tutorial possible.

Where Things Stand Right Now

The evolution has been rapid. In 2023, most developers used AI as chat — asked a question and copied the answer. In 2024, code editors with integrated AI (like Cursor and Copilot) gained traction. In 2025, terminal agents like Claude Code shifted the dynamic again, operating directly on code with growing autonomy.

By 2026, experimental agents operating with near-total autonomy have emerged — the OpenClaw project is the most visible example of that trend. For a full overview of this evolution, read the article The Evolution of AI Coding Tools: From Chat to Autonomous Agents.

In the current landscape, Claude Code is the most popular agentic tool among professional developers. Not because it is perfect — it has real limitations — but because it strikes the right balance between autonomy and control. The agent does a lot on its own, but asks for confirmation before destructive actions. That calibration between "do it for you" and "ask first" is what builds trust in daily use.

Part 2: What is Claude Code?

Claude Code is a command-line tool (CLI) created by Anthropic. It runs directly in the terminal, uses the Claude model as its brain, and functions as a coding agent: it reads your files, understands the project context, edits code, runs commands, and makes intermediate decisions without you having to guide every step.

The numbers

According to the Pragmatic Engineer survey of 906 software engineers conducted between January and February 2026, Claude Code is the "most loved" tool for 46% of respondents. It is also responsible for roughly 4% of all commits on GitHub — a number that sounds small until you calculate how many millions of commits that represents.

What's new

Anthropic has been shipping features at a rapid pace. Among the most notable:

Remote Control — lets you continue a Claude Code session running on your computer from your phone or browser via claude.ai/code. The work stays local — the connection is remote control only.
Voice Mode — programming by voice, useful for brainstorming and for those who prefer speaking over typing.
Agent Teams — multiple agents working in parallel on the same project.
Auto Mode — the agent operates with expanded autonomy, asking for fewer confirmations.

Each of these features has practical implications, but for beginners the priority is mastering the basics first. The advanced features make more sense once the fundamentals are solid.

How Claude Code "sees" your project

A point worth highlighting: when you start Claude Code inside a folder, it analyzes the file structure, reads configuration files, identifies the programming language, and understands the context. If the folder contains a package.json, it knows it is a JavaScript project. If there is a requirements.txt, it knows it is Python.

This context awareness is what lets you give high-level instructions like "add authentication" instead of specifying every technical detail. The agent already knows which framework is in use, which libraries are installed, and how the project is structured.

Honest positioning

Claude Code is not the only option. Google's Gemini CLI is free and capable. GitHub's Copilot has deep integration with the Microsoft ecosystem. Alternatives exist — and exploring them before committing to a paid plan is worthwhile.

What sets Claude Code apart is the quality of the model behind it (Claude) and the terminal experience. But that is an assessment, not an absolute fact. The best tool is the one that fits your workflow.

Prerequisites

To follow this tutorial, you need:

A computer running macOS, Linux, or Windows
Access to a terminal (Terminal on Mac/Linux, PowerShell or WSL on Windows)
An Anthropic account with a Pro plan or higher (starting at $20/month)

You do not need to install Node.js. The native installer takes care of everything.

Part 3: Installation

The Claude Code installation process has changed. It used to require Node.js and npm. Now the installer is native — a single command that downloads, installs, and configures everything automatically, including future updates.

macOS, Linux, and WSL

Open the terminal and run:

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

That is it. The script detects your operating system, downloads the correct version, and places the executable in your system path.

Windows (PowerShell)

Open PowerShell and run:

irm https://claude.ai/install.ps1 | iex

Windows (CMD)

If you prefer the Command Prompt:

curl -fsSL https://claude.ai/install.cmd -o install.cmd && install.cmd && del install.cmd

Alternatives

If you use a package manager, that works too:

# Homebrew (macOS/Linux)
brew install --cask claude-code

# WinGet (Windows)
winget install Anthropic.ClaudeCode

On Windows, you also need Git for Windows installed.

First run

With the installation done, run:

claude

The first time you run it, Claude Code opens your browser for authentication. Log in with your Anthropic account and authorize access. After that, the terminal is ready to use.

If everything went well, you will see the Claude Code prompt waiting for your first instruction. A good way to test it is to type something simple like "Hello, who are you?" and check that a response appears.

From this point on, Claude Code updates itself automatically. You do not need to run the installer again when a new version is released.

Other ways to access it

Beyond the CLI, Claude Code is also available as a web application at claude.ai/code, as a desktop app, and as an extension for VS Code and JetBrains. The core experience is the same — what changes is the interface.

Part 4: First Commands {#first-commands}

Claude Code is installed. The terminal is open. Now it is time to understand how the interaction works in practice.

Having a conversation

The simplest way to use Claude Code is to ask a question. No special syntax required — just write in plain English as if you were talking to someone.

> What is HTML?

Claude Code will respond with a clear, direct explanation. So far, it works like any chat. The difference shows up when you ask it to do something.

Notice that no special command was needed. No slash, no prefix, no syntax. Natural language is the interface. You can ask in English, in another language, or mix them — the model understands.

Creating a file

Navigate to an empty folder and ask:

> Create an index.html file with a welcome page. Title "My First Page", 
  a short introduction paragraph, and a light gray background.

Claude Code will not just display the code on screen. It will create the file on your computer. After it runs, you can verify:

ls

The index.html file is there. Open it in a browser and the page appears, exactly as described.

This is what separates an agent from a chat. ChatGPT would show the code and say "paste this into a file called index.html." Claude Code creates the file directly. Less friction, more results.

Editing an existing file

Now ask for a change:

> Change the title color to dark blue and increase the font size.

Claude Code reads the existing file, identifies what needs to change, and makes the edit. It shows a diff — a comparison between what was there before and what it looks like now — so you can see exactly what changed before accepting.

This concept of a diff is important. It means you have full control. Nothing is altered without you seeing and approving the change. If something looks wrong, you can reject the edit and ask for it differently. It is a collaborative process, not an automatic one.

The diff uses colors for readability: removed lines appear in red, added lines in green. Even without knowing how to code, it is intuitive to see what changed.

Running terminal commands

Claude Code can also execute terminal commands when needed. If you ask it to create a Node.js project, for example, it will run npm init automatically. If you ask it to install a library, it runs the installation command.

> Install the live-server package so I can preview the page in real time.

Before executing any terminal command, Claude Code shows what it intends to run and asks for your confirmation. Something like:

Will execute: npm install -g live-server
Allow? (y/n)

This is a safety barrier — no command runs without explicit permission. You always get a chance to evaluate before any action on your system.

The work cycle

In practice, interacting with Claude Code follows a consistent cycle:

You describe what you want in natural language
The agent proposes an action (create a file, edit code, run a command)
You review what will be done (diff, command, etc.)
You accept or request an adjustment
The result appears immediately

This cycle repeats with every interaction. Over time, it becomes second nature — like talking to someone who executes your ideas in real time.

Part 5: Mini-Project — Your Personal Page

Theory without practice is just information. Now you are going to build something real: a personal page/portfolio using only HTML and CSS, guided entirely by Claude Code.

Why a personal page? Because it is genuinely useful. By the end of this exercise, you will have something you can publish on the internet and share with other people. This is not a throwaway "hello world" — it is a project with practical value.

Setup

Create a folder for the project and start Claude Code:

mkdir ~/my-personal-page
cd ~/my-personal-page
claude

The initial prompt

A good prompt is specific without being rigid. Describe what you want, give context about the visual style, and leave room for the AI to make implementation decisions. The rule of thumb: the more context in the first request, the fewer correction iterations later.

> Create a personal page/portfolio with HTML and CSS in a single index.html file.

  Content:
  - Name: [Your Name]
  - Professional title: [Your Profession]
  - An "About me" section with 2-3 sentences
  - A "Projects" section with 3 cards side by side (title, short description, placeholder link)
  - A contact section with links to email and LinkedIn
  - A footer with the current year

  Visual:
  - Modern, clean design
  - Dark background with light text
  - Sans-serif font (use Google Fonts)
  - Responsive layout that works on mobile
  - Accent colors in shades of blue

Claude Code will generate the complete file. Open it in your browser to see the result:

open index.html        # macOS
xdg-open index.html    # Linux
start index.html       # Windows

First iteration: visual adjustments

The result will probably be good, but not exactly what you pictured. That is normal — and this is exactly where the process gets interesting. Adjust through iteration:

> Change the accent color from blue to emerald green. Add a subtle gradient 
  to the header background, going from dark to a slightly lighter tone.

Each request is an iteration. Claude Code reads the current file, figures out what needs to change, and applies the edits while showing the diff. Reload the page in your browser to see the result. Not happy? Ask for something else. Partially satisfied? Request a specific tweak. This loop of trial and refinement is how professionals work with AI every day.

Second iteration: adding personality

> Add a circular photo at the top of the page. Use a placeholder from 
  https://placehold.co/200x200 for now. The photo should have a thin border 
  in the accent color and a soft shadow.

The page starts to take on an identity. Each iteration takes seconds — you describe, Claude Code executes, you review in the browser.

Third iteration: interactivity

> Add a hover effect on the project cards: when the mouse hovers over them, 
  the card lifts slightly and the shadow increases. Use smooth CSS transitions. 
  Also add a hover effect on the header link that smoothly underlines it.

With pure CSS, no JavaScript, the page comes alive. Effects like these are small details that make an enormous difference in perceived quality.

Fourth iteration: responsiveness

If the page is not behaving well on smaller screens, ask:

> Check if the layout works well on mobile screens (360px wide). 
  The project cards should stack vertically on small screens instead 
  of sitting side by side.

Claude Code will adjust the CSS media queries so the layout adapts. This kind of request is especially useful because responsiveness is one of the most tedious aspects to implement manually — and one of the things AI handles with the most ease.

The result

In under 10 minutes, you have a functional personal page:

Modern, responsive design
Organized sections with real content
Visual hover effects
Works in any browser

All done by describing what you wanted in plain English. Not a single line of code typed by hand.

Take a moment to consider what just happened. You described a page in natural language, iterated on the visuals with simple requests, and ended up with a result that could go live right now. The entire process took less time than watching a TV episode.

The file is on your computer. You can host it for free on GitHub Pages or Netlify so other people can access it. That is a topic for another tutorial — but the point is that the result is real, not a throwaway exercise.

Next steps

If this tutorial made sense to you, there are two natural paths forward.

The first is to expand on what you learned here. The article Your First App with Claude Code: From Zero to Working goes beyond static pages and shows how to build a functional application with real interactivity.

The second is to learn the commands that make Claude Code more productive in day-to-day use. The guide 10 Essential Claude Code Commands covers the ones you will reach for most often.

For those who want to go deeper and learn how to create complete applications from scratch using AI — from idea to deployment — the Claude Code Course: App Creator covers the entire process with hands-on lessons and real projects.

The most important takeaway: you just built something functional using a tool that, months ago, did not exist. The speed at which this technology evolves means the best time to start is now — and now you have already started.

References

Anthropic. Claude Code — Quickstart. Official documentation. Available at: code.claude.com/docs/en/quickstart
Anthropic. Claude Code — Remote Control. Official documentation. Available at: code.claude.com/docs/en/remote-control
Orosz, Gergely. AI Tooling in 2026. The Pragmatic Engineer, 2026. Available at: newsletter.pragmaticengineer.com/p/ai-tooling-2026
Wikipedia contributors. OpenClaw. Wikipedia, The Free Encyclopedia. Available at: en.wikipedia.org/wiki/OpenClaw

Claude Code: Complete Tutorial for Beginners — From Concept to First Project

#Claude Code: Complete Tutorial for Beginners

#Part 1: Understanding the Landscape

#What is an LLM?

#Model vs Interface

#Model vs Agentic Tool

#Where Things Stand Right Now

#Part 2: What is Claude Code?

#The numbers

#What's new

#How Claude Code "sees" your project

#Honest positioning

#Prerequisites

#Part 3: Installation

#macOS, Linux, and WSL

#Windows (PowerShell)

#Windows (CMD)

#Alternatives

#First run

#Other ways to access it

#Part 4: First Commands {#first-commands}

#Having a conversation

#Creating a file

#Editing an existing file

#Running terminal commands

#The work cycle

#Part 5: Mini-Project — Your Personal Page

#Setup

#The initial prompt

#First iteration: visual adjustments

#Second iteration: adding personality

#Third iteration: interactivity

#Fourth iteration: responsiveness

#The result

#Next steps

#References