Lesson 6

Use Claude Code for Structured File and Build Tasks

You understand what the Code tab is and how it keeps you in control (it proposes every change and nothing happens until you approve it), and you have safely built one real thing: a one-page personal website that opens in your web browser, with at least one change you reviewed and approved yourself.

This is the tool that scares people most, and it should not. In the Code tab, Claude does the building and you stay the approver: you see a clear preview of every change before it happens, and your work is saved as you go. Once you have done it once on a practice folder, the fear is gone and a whole category of "I could never build that" becomes "I can ask for that."

~25 min Paid plan needed: the Code tab is on Pro, Max, Team, and Enterprise, not on the Free plan. On Free you can still read Phase 1 to see exactly what the Code tab is and how it keeps you in control. See content/capabilities.yaml (claude-code-desktop-tab).
I'm using:
0%

0 of 6 complete

Reset your progress?

This clears everything you have marked complete and any notes, on this device only. It cannot be undone.

Phase 1: Meet the Code Tab (No Terminal Required)

0 of 3
Note

On the Free plan? You can still do this part.

The Code tab is a paid feature (Pro, Max, Team, or Enterprise). This first phase is a read-along tour: what the Code tab is, how it keeps you in control, and the safety rules. It is genuinely useful on its own, and there is nothing to buy to read it. The hands-on build in Phase 2 needs a paid plan and the desktop app. See content/capabilities.yaml (claude-code-desktop-tab).

What the Code Tab Is

Tool: Claude Code ~3 min
The Claude desktop app has three tabs across the top: Chat, Cowork, and Code. You already know Chat. The Code tab is where Claude helps build and change files on your computer: web pages, documents, small projects. Anthropic describes it as an assistant that has "direct access to your local files," where "you review and approve each change in real time." See content/capabilities.yaml (claude-code-desktop-tab).
Here is the part that surprises people. You do not need a terminal. A terminal is the plain text screen that programmers type commands into, and it is the thing that makes this tool look scary. The Code tab gives Claude Code a normal, friendly window instead. Anthropic's own words: "No terminal required." You type what you want in plain English, the same as Chat.
Note

You may not see the Code tab

The Code tab needs a paid plan (Pro, Max, Team, or Enterprise). If you are on a paid plan and still do not see it, make sure your app is up to date and check again; if clicking Code asks you to upgrade, your plan does not include it yet. Either way it is not your fault. Everything in Phase 1 is worth reading now. See content/capabilities.yaml (claude-code-desktop-tab).

How You Stay in Control

Tool: Claude Code ~4 min
The Code tab has three ways of working, and you pick one from a small menu next to where you type. Think of it as how much you want Claude to check with you before it does anything.
The three modes, in plain terms. Manual: Claude proposes every change and waits for your approval before touching a single file. Accept edits: Claude makes file changes on its own but still asks before running other actions. Plan: Claude only describes an approach and does not change anything. See content/capabilities.yaml (claude-code-desktop-tab).
Note
Start on Manual. Anthropic marks Manual as the default and says it is "Recommended for new users." It is the safest way to learn, because nothing happens until you say yes. If you have read an older guide that calls this mode "Ask," it is the same thing under its previous name. This lesson uses Manual the whole way through.
When Claude wants to change a file in Manual mode, you do not just get a yes or no. You see a diff. A diff is a simple preview that shows exactly what will be added or removed, so you can read the change before it happens. Then you click Accept or Reject. In Anthropic's words, "Your files aren't modified until you accept." Nothing is a surprise.
There is a second safety net underneath. Claude Code keeps a running history of your files as you work, using a standard tool called version control (you may hear it called Git). Because you approve every change and earlier versions are saved as you go, it is very hard to lose your work by accident. You can build with a light heart.
Note
Asking Claude to explain something is not the same as letting it act. You can have it describe its whole plan first, in plain words, and in Manual mode it still will not change anything until you approve. Here is a safe first thing to type once you are in the Code tab on a paid plan:
Prompt: type into the Code tab to see it explain, not act
Before you do anything, explain in plain language what you can do in this folder and what you would change. Do not create or edit any files yet. Just describe your plan so I can read it first.

Set Your Safety Rules First

Tool: Claude Code ~3 min
Because the Code tab can create and change real files, a few simple rules keep you fully in control. Read these before you build anything. They are the real skill in this lesson, and they are the same habits that make every powerful tool safe.
Safety first

The four rules that keep you in control

1. Use a dedicated practice folder. Make a brand-new, empty folder just for practice, and point the Code tab at that folder only. Never start in your Documents or Desktop, or any folder with real or private files. Claude Code only works inside the folder you choose. 2. Stay on Manual mode. Manual means Claude asks before every change and shows you the diff first. Keep it on Manual while you are learning, so nothing happens without your yes. 3. Read the diff, then decide. When a change is proposed, actually read the preview before you click Accept. If something looks wrong, click Reject and tell Claude what to do differently. 4. Explaining is not authorizing. You can ask Claude to describe what it would do, in full, and it still will not act until you approve. Understanding a plan and running a plan are two separate steps, and you control the second one.
Note
That is the whole safety model: a folder that holds only practice files, Manual mode, a diff you read before you approve, and your clear separation between "explain it" and "do it." With those in place, the build in Phase 2 is low risk and easy to reset, since you can just delete the practice folder when you are done.

Phase 2: Build Your First Web Page

0 of 3
On a phone
The build needs the Claude desktop app open on a computer, because the Code tab works with files on your computer. On a phone you can read this part, but the hands-on build happens on a Mac or Windows computer. Read along now, then run these steps later on a computer. See content/capabilities.yaml (claude-code-desktop-tab).

Make a Practice Folder and Open the Code Tab

Tool: Claude Code ~4 min
First, rule number one. Make a new, empty folder just for this. Name it claude-code-practice and put it somewhere easy to find, like your home folder. Do not use your Documents or Desktop folder, and do not put anything real in it. It will hold nothing but the practice website you are about to build.
Now open the Claude desktop app and click the Code tab at the top. When it asks where to work, choose Local. Local simply means Claude works with files on your own computer (there is also a Remote option that runs in the cloud, which you do not need today). Then click Select folder and choose your claude-code-practice folder. See content/capabilities.yaml (claude-code-desktop-tab).
Make sure the mode menu next to where you type is set to Manual. If a model menu appears, leave the default selected. That is all the setup. You have a safe, empty folder and Claude is set to ask before every change.

Ask Claude to Build the Page

Tool: Claude Code ~6 min
Now the fun part. You are going to ask Claude to make a simple one-page personal website. The file it creates will be called index.html, which is just the standard name for a web page's home page. Type the prompt below and fill in your own details where it asks.
Prompt: type into the Code tab (Manual mode, practice folder open)
Create a file called index.html in this folder. Make it a simple, friendly one-page personal website about me. Put my name as a large heading, a short sentence about what I do or enjoy, and a small list of three things I like. Give it clean, easy-to-read styling and a pleasant background color, all inside the one file. Show me the change before you save it, and wait for me to approve.

Replace the details with your own as you like, or just run it as written and edit later. There is nothing private here, which is the point.

Claude will propose the new file and show you a diff: a preview of everything the file will contain, usually marked as added lines. Read it over. You do not need to understand every line. You are just confirming it is building the page you asked for. When it looks right, click Accept. If not, click Reject and tell Claude what to change.
Now see your page. The simplest way is to find the claude-code-practice folder on your computer and double-click index.html, which opens it in your web browser. You can also ask Claude to open it for you with the prompt below.
Prompt: ask Claude to open your page
Open index.html so I can see it in a web browser, and also tell me in one simple step how to open it myself by double-clicking the file.
Check it worked

Your one-page website should now be open in your web browser, showing your name and the details you asked for. If you can see it, you have built and previewed your first web page with Claude Code.

Make One Change and Wrap Up

Tool: Claude Code ~5 min
One more step, to feel the review habit for real. Ask for a small change, read the diff, and approve it. This is the whole loop of working in the Code tab: ask, review, approve.
Prompt: make one reviewed change
Change the background color of the page to something I would like better, and add one short line under my name with a fun fact about me. Show me exactly what will change before you save it, and wait for my approval.
Read the diff again. This time you will see a mix: a few lines removed and a few added, which is what a change looks like. Click Accept, then refresh the page in your browser (or reopen index.html) to see it update. You just proposed, reviewed, and approved a real change, and you stayed in control the entire time.
Check it worked

You are done when two things are true: your page is open in your web browser, and you approved at least one change after reading its diff. That is the proof you can build safely in the Code tab.

When you want to use this on something of your own later, keep the same rules. Start Claude in a folder that holds only copies of files with nothing sensitive in them, stay on Manual, and read each diff before you approve. Here is a safe way to begin any real task:
Prompt: for a real folder later (copies only, nothing sensitive)
I have a folder of my own files I would like help with. Before you change anything, look at what is in the folder and tell me your plan in plain language. Do not edit any files yet. Wait for me to approve the plan first, and then ask before each change.
If something does not work
  • You do not see a Code tab in the desktop app. The Code tab needs a paid plan (Pro, Max, Team, or Enterprise). Make sure you are on a paid plan and your app is up to date, then check again. If clicking Code asks you to upgrade, that confirms your plan does not include it yet. See content/capabilities.yaml (claude-code-desktop-tab).
  • On Windows, it says Git is required. Git is a small, free helper that Claude Code uses to save versions of your files. Install it from the link the app shows you (git-scm.com), then restart the app. Most Macs already have it, so this note is usually just for Windows.
  • Claude changed something before you were ready. Make sure the mode menu is set to Manual, not Accept edits. On Manual, Claude shows you a diff and waits for Accept before changing anything. You can always click Reject on a proposed change.
  • Your page looks plain or empty when you open it. Tell Claude what you see and what you wanted, for example "the page opened but the background is white and there is no list." It will propose a fix as a diff for you to review and approve.
Note
That is Claude Code: real building on your computer, with you approving every step after seeing exactly what changes. You have now met Chat, Cowork, and the Code tab. The next lesson helps you choose the right tool for any task and understand where each one stops.