Lesson 4

Your First Claude Code Session — Build a real tool

Let's Build Something

Theory is over. Let's have Claude Code build a real (if simple) project so you can feel the workflow in your hands.

We're going to create a personal daily notes web page — a single HTML page you can open in your browser. Simple, but real. By the end, you'll have built something with Claude, opened it, changed it, and understood how it works.

Setting Up Your First Project Folder

Open your terminal and run these commands:

# Go to wherever you keep projects (Desktop, Documents, etc.)
cd ~/Documents

# Create a new folder for our experiments
mkdir claude-experiments
cd claude-experiments

# Start a Claude Code session
claude

You'll see Claude Code's prompt:

Welcome to Claude Code! Type your request and press Enter.
>

Your First Request

Type this — or something like it — and press Enter:

"Create a simple, beautiful HTML page called daily-notes.html that I can open in my browser. It should have:

A title at the top: 'My Daily Notes'

Today's date displayed automatically

A large text area where I can type notes

A 'Save to Clipboard' button that copies the notes text

Clean, minimal styling — white background, readable font, centered content with a max-width of 700px"

Now watch what happens. Claude will:

Think through the request
Create a file called daily-notes.html
Show you the code it wrote
Tell you how to open it

Notice how specific the request is. The clearer your description, the closer the first result lands to what you pictured.

Opening the Result

Claude will usually tell you how to open the file. If not, you can open it yourself:

On Mac:

open daily-notes.html

On Windows:

start daily-notes.html

Your browser should open and show the page. That's a thing you built — with a sentence.

Your First Iteration

The page works, but you might want to change something. Let's practice giving feedback.

In the Claude Code terminal, type:

"This is great! Can you make two changes:

Change the font to something more elegant — maybe Georgia or a system serif font.

Add a character counter that shows how many characters are in the notes area as you type."

Watch Claude update the file, then refresh your browser to see the changes. This is the loop in action: describe → build → review → refine.

Understanding What Claude Is Doing

Claude Code operates in two modes:

1. Direct actions (no approval needed)

When Claude creates or edits files, it usually just does it and shows you the result.

2. Asking for approval

For more significant actions — like running commands that could have side effects — Claude pauses and asks first:

I'd like to run: npm install
Allow? [y/n]

Type y and press Enter to allow, or n to decline. This keeps you in control of anything that actually changes your system.

Reading the Code Claude Wrote

Open VS Code to look at what Claude created:

code .

VS Code opens. In the left sidebar (the Explorer), you'll see daily-notes.html. Click it.

You'll see the HTML code. Don't worry if you don't understand all of it. But notice the three building blocks:

Structure — sections like <head> and <body>
Styling — CSS between <style> tags
Functionality — JavaScript between <script> tags

Curious about any part? Ask Claude:

"Can you explain what the <script> section of daily-notes.html does? I want to understand the character counter logic."

Key Claude Code Commands

While in a Claude Code session, these shortcuts come in handy:

What to type	What it does
Your request	Ask Claude to do something
`/help`	Show available commands
`/clear`	Clear the conversation history
`Ctrl + C`	Exit Claude Code

When Claude Makes a Mistake

It will happen. Claude might:

Create a file with a bug
Misunderstand what you wanted
Change something you didn't ask it to

Here's how to handle each:

If it's a bug:

"The button doesn't work. When I click it, nothing happens. Can you debug this?"

Claude will read the code, find the issue, and fix it.

If it misunderstood you:

"That's not quite what I meant. I wanted [more specific description]. Can you redo it?"

If it changed something you liked:

"I liked the old version of [specific thing]. Can you revert just that part?"

Mistakes aren't failures — they're just the next turn in the loop.

The Power of "Explain This to Me"

One of the best uses of Claude Code is learning. After Claude builds something, ask it to teach you:

"Can you walk me through the daily-notes.html file and explain what each section does? Assume I have no coding background."

This is how you go from "Claude built this for me" to "I understand what's here, and I can build on it." Every time you ask for an explanation, you're trading a little time now for a lot of capability later.

Practice Exercise: Customize Your Notes Page

Before tackling the module exercises, try these on your own:

Ask Claude to change the color scheme to something you prefer.
Ask Claude to add a "Clear All" button that empties the text area.
Ask Claude to show the current time alongside the date.

Each one is a one- or two-sentence request. Practice the describe → review → refine loop until it feels natural.

Summary

Typing claude in a terminal starts a session in your current folder.
Describe what you want in plain English — no code knowledge required.
Claude creates or edits files directly, and asks before running anything with side effects.
Open files in VS Code with code . to see what was built.
Use Claude to explain the code it writes — that's how you actually learn.
The loop is always the same: describe → Claude builds → you review → you refine.