00 · Before you start
The vocabulary the rest of this course assumes, in one sitting. If you already write software, skim it and move on.
Before you start
- You will be able to
- Explain what Claude Code is, what a project folder is, what a diff, a commit and a local page are, and the difference between saving and committing — and find files on your own machine.
- You need
- A computer you can install software on, and about fifteen minutes
- Nothing installed yet. Claude Code arrives in module 1
- Starting state
- Nothing. This is the only module with no prerequisites and no project.
Claude Chat and Claude Code are not the same thing
You may already have used Claude in a browser or an app: you type, it answers, and if you want the code it produced you copy it out and paste it somewhere yourself.
Claude Code is the version that has your files. It reads them, writes them, runs commands, and shows you each change before it happens. You stop being the transport layer between a chat window and your project.
Everything in this course is about that second thing. The same account gets you both; they are different surfaces, not different subscriptions.
The twelve words this course uses constantly
The first six you need before module 2. The last six appear from module 7 onwards; skim them now and come back when a module uses one.
| Word | What it means here |
|---|---|
| Project | One folder on your computer, and everything inside it. Claude Code works with a project open, the way a text editor works with a document open. |
| File | A single document inside that folder — index.html, styles/main.css. The slash means "inside the folder". |
| Diff | A view of a change rather than a file: the lines being removed, the lines being added, and enough of the unchanged lines to see where you are. You will read hundreds of these. |
| Commit | A saved point in your project's history that you can return to. See the box below — this is the one that trips people up. |
| Terminal | A window where you type commands instead of clicking. Track B of this course lives in one. Track A never opens it. |
| Session | One continuous conversation with Claude about your project. Inside a session it remembers what you said earlier; a new session starts with none of it. |
| Context window | How much Claude can hold in view at once in a session — your files, your messages, its answers. It is finite, and module 13 is about living within it. |
| Compaction | What happens when a session's context window fills: the older part of the conversation is replaced with a summary so the session can continue. Useful, and lossy — anything that must not be lost belongs in a file, not in a message. |
| Permission mode | The setting that decides how much Claude may do before asking you. Module 1 has you set it deliberately; module 7 covers all of them. |
bypassPermissions | The permission mode that stops asking altogether. It is named here so you recognise it when you meet it, and so you know it is the one to leave alone while you are learning. |
additionalDirectories | A setting that lets a session reach folders outside the one you opened. Worth knowing early, because it is the reason "I opened one folder" is not the same as "Claude can only touch that folder". |
| Skill | A procedure written down in a markdown file so Claude can follow it on request, instead of you re-explaining it. Module 9. |
This one is worth thirty seconds because everything from module 2 onwards leans on it.
Saving overwrites. You edit index.html, you save, and the previous version of that file is gone. Your disk holds exactly one version: the current one.
Committing keeps. A commit records what every file in the project looked like at that moment, and adds it to a list. Saving again does not disturb it. Ten commits means ten states you can go back and look at, or return to.
So the sequence is: change files, save them, and then — when the result actually works — commit. The commit is the thing that makes the next change safe to attempt, because it gives "put it back how it was" a meaning it does not otherwise have.
You will not type any git commands yourself in module 2 if you are on the desktop track; you will ask for them. But the distinction is yours to hold, not Claude's.
The three languages you will see
You are not going to learn to write these. You are going to read them often enough to tell when something is off, which is a much smaller job.
- HTML is the content and its structure: this is a heading, this is a paragraph, this is a link. Files end in
.html. - CSS is what it looks like: colours, spacing, type, layout. Files end in
.css. - JavaScript is what it does when you interact with it: a button that toggles dark mode, a menu that opens. Files end in
.js.
A page you can open in a browser needs the first one. The other two are optional and this course adds them in that order.
A page on your laptop is not a website
This distinction causes real confusion later, so it is worth ten seconds now.
| A local file | A published site | |
|---|---|---|
| Address | Starts file:/// — a path on your disk | Starts https:// — a name other people can type |
| Who can see it | Only you | Anyone with the address |
| Needs | A browser | Hosting, and a deliberate decision to publish |
Everything you build in modules 2 and 3 is a local file. Module 6 puts a copy on GitHub, which is storage and history rather than publishing, and says clearly which of the two you are doing.
One consequence to file away now, because it costs people an hour in module 3: a browser trusts a file:/// page less than an https:// one, and switches some features off for it. When something you built works over http:// and not from the file, that is the browser being careful, not your code being wrong. Module 3 shows you the thirty-second way to tell the difference.
What it costs, and what you are handing over
Two honest notes before you install anything.
This course is free. Claude Code is not. Running it consumes usage on a paid Claude plan, or credits on API access. Long sessions and large files cost more than short focused ones, which is one of several reasons module 13 is about keeping sessions tight. The current rules live in the costs and usage documentation.
Whatever Claude reads, leaves your machine. The model runs remotely, so the files in your project folder are sent as part of the request. For this course that is a blog full of invented posts about coffee, which is exactly the point of using a practice project. Do not point your first sessions at a folder containing client work, personal documents, medical records or credentials. What is retained and for how long is described in the data usage documentation; read it once rather than assuming either the best or the worst.
Which track to take
| Take the desktop track if | Take the terminal track if |
|---|---|
| You have never used a terminal, or you would rather not | You already run commands regularly |
| You want diffs in colour and permission prompts you click | You want to pipe output into other tools |
| You are on Windows and do not want to install a Unix shell | You are on macOS or Linux, or have Git Bash or WSL on Windows |
Both tracks build the same project and stop at the same checkpoints, so switching at a module boundary costs you nothing. The switch is at the top of every dual module and it recolours the page so you always know which one you are reading. Where a module has no switch, it says so at the top: that means one page serves both tracks, not that your track stops there.
There is a third way in that this course does not give its own track: the Claude Code extension for VS Code, which also installs in VS Code forks such as Cursor. If that is where you work, take the desktop track — the extension gives you the same things it describes: a panel you type into, side-by-side diffs you approve, a permission-mode control, and the same slash commands.
Module 1 has the install steps and the few places the wording differs from the standalone app.
Do this now: prove you can find a file
No Claude involved. This is the one manual exercise in the course, and it exists because every later module assumes you can do it.
- In Finder or File Explorer, go to your Documents folder.
- Make a new folder called claude-course. Everything in this course goes inside it.
- Open a plain text editor — TextEdit on a Mac (switch it to plain text under Format), Notepad on Windows.
- Type the three lines below, and save the file inside claude-course as hello.html.
<!doctype html> <html lang="en"> <h1>It works</h1>
Now double-click it, or right-click and open it with your browser. You should see It works as a large heading, and an address starting file:///.
That is a web page. It is not on the internet, nobody else can see it, and you made it in two minutes without any assistance. Module 1 installs the tool; module 2 uses it on this same folder.
You have finished when
- You can say, in your own words, how Claude Code differs from the Claude chat window
- You have created a folder called
claude-courseand you can find it again in Finder or File Explorer - You have opened an HTML file you made yourself in a browser and seen it render
If it goes wrong
| What you see | What to do |
|---|---|
| You cannot find the folder you just made | Make it somewhere you already know how to reach, such as your Documents folder. The path matters later — module 1 asks you to point Claude at it. |
| Double-clicking the HTML file opens a text editor, not a browser | Right-click it and choose Open with, then your browser. On Windows you may need Choose another app. |
| The browser shows the raw text instead of a heading | The file needs to end in .html, not .html.txt. Windows hides known extensions by default; turn that off in File Explorer's View menu. |
On your own
Add a second line to hello.html — a paragraph, in <p> tags — save it, and reload the browser. Nothing here needs Claude; the point is that you can make a change, save it and see the result, because that is the loop every later module runs inside.
Kept in this browser only. Nothing is sent anywhere.