Working with Files

You built a website in the last lesson. Before you add more to it, you need to understand how Claude Code sees your project. This changes how you work with it.

Open your project

In your terminal, go to your website folder and start Claude Code:

cd my-site

claude

Context is everything

When you open Claude Code in a folder, it can read every file in that folder and its subfolders. It does not load them all at once. It reads files as it needs them, choosing what is relevant to your request.

You can see this happen in real time. When you ask Claude Code to do something, watch the tool calls that appear. You will see it read files before making changes.

Try it

Tell Claude Code:

Show me all the files in this project and explain what each one does

Claude Code will find your files, read each one, and give you a summary. This is not a guess. It is reading your actual files right now.

Why this matters

When you ask Claude Code to make a change, it reads the relevant files first. It sees what already exists before deciding what to do. This means:

• It will not overwrite your work unless you tell it to
• It matches the existing code style automatically
• It understands how your files connect to each other

An empty folder has no context. A project with existing files gives Claude Code a map. The more it can read, the better decisions it makes.

Claude Code does not just read files. It creates new ones and edits existing ones. These are two different operations, and understanding the difference makes you a better director.

Creating files

When Claude Code makes a new file, it writes the entire thing from scratch. Tell it:

Create an about page for my site with a short bio and a link back to the homepage

Claude Code will read your existing homepage to understand your project’s style, then create a new about.html that matches. Same colors, same fonts, same layout patterns.

Editing files

When Claude Code modifies an existing file, it makes precise, surgical changes. It does not rewrite the entire file. It changes only the specific lines that need to change.

Try:

Add a link to the about page in the navigation on the homepage

Watch how Claude Code reads the homepage, finds the right spot, and makes a targeted edit. The rest of the file stays untouched.

The difference matters

Creating builds from scratch. Editing modifies precisely. When you ask Claude Code to “change the header color,” it edits one CSS property. When you ask it to “create a contact page,” it writes a new file.

You do not need to specify which operation to use. Claude Code picks the right one. But knowing this helps you understand what it is doing and why.

Check your work

After Claude Code creates the about page and adds the link, tell it:

Open my site in the browser so I can check it

Click the link to your about page. Click back to the homepage. Your site now has two pages that link to each other, and you described both in plain English.

Claude Code does more than read and write files. It runs terminal commands on your computer. You never need to know these commands yourself. You describe what you want, and Claude Code picks the right command.

What kind of things?

• Starting a preview server so you can see your site as it would look online
• Installing tools that add features
• Checking for problems in your project

Every command requires your permission. You will see what it wants to run before it runs.

Try it

Your website currently works by opening the HTML file directly. But a preview server shows your site the way it will look on the internet. Tell Claude Code:

Start a local preview server so I can see my site in the browser like a real website

Claude Code will pick the right tool, start the server, and tell you which URL to open. It will be something like http://localhost:3000. Open that in your browser.

When you are done previewing, tell Claude Code:

Stop the server

You never type commands

Notice what happened: you asked for a preview server in plain English. Claude Code figured out which command to run, asked your permission, and ran it. You did not need to know the command.

This applies to everything. Need to install something? Say “install what we need for this feature.” Need to check if something works? Say “test this and tell me if anything is broken.” Claude Code translates your intent into the right technical commands.

Now you know the building blocks: reading, writing, editing, and running commands. Here is how they work together.

It searches before it acts

When you say “add a dark mode toggle,” Claude Code does not start writing immediately. It searches first: it finds all relevant files, reads them to understand the current structure, plans the approach, then executes. This means it works with your project, not against it.

Expand your site

Your my-site project has a homepage and an about page. Try something more ambitious. Tell Claude Code:

Add a projects page that lists three placeholder projects. Use a card layout with a title, short description, and a link for each one. Match the existing design and add it to the navigation.

Watch how Claude Code reads your existing files, matches the style, creates the new page, and links it into your navigation. It figured out the design patterns, the navigation structure, and the layout conventions from context. You described the outcome. It handled every technical detail.

Tips for better results

• Be specific about outcomes. “Add a projects page with cards” is better than “add another page.”
• Reference what exists. “Match the existing design” tells Claude Code to stay consistent.
• One thing at a time. “Add a projects page” then “now add a contact form to the homepage” works better than requesting five changes at once.

What’s next

You now understand how Claude Code interacts with files and commands. In the next lesson, you will build something different: a command-line tool that solves a real problem. This reinforces the same skills in a new context.