Your first session

Let's build something small with Claude Code. In about fifteen minutes you will have a working web page that you never typed a line of code for.

What is a session?

A session is one conversation with Claude Code. It is like a work shift with a helper. You give instructions, the helper works, and you check the results.

Every session follows the same loop:

• You ask for something in plain English
• Claude Code plans and reads any files it needs
• It asks permission to create files or run commands
• You review what changed and try it out

Start in an empty folder

Use the hello-claude folder from the setup page, or make a new one. An empty folder is a safe sandbox. Nothing important can break.

cd hello-claude
claude

Keep VS Code open on the same folder, so you can watch files appear.

Ask it to build a tiny page

Type your request like you would to a helpful person. Be clear about what you want to see.

Create a single index.html page for a small plant shop called "Leaf & Pot".
Include:
- a heading with the shop name
- one short welcome sentence
- three plant cards, each with a name, a price, and an "Add to cart" button
- simple, friendly styling in the same file (no frameworks)
Keep it to one file.

Let's break this down:

• It names the file (index.html), so you know what to look for
• It lists exactly what should appear on the page
• It sets limits ("one file", "no frameworks") so the result stays small

Approve the permission prompt

Before Claude Code creates the file, it stops and asks you. You will see the file it wants to create and a few choices.

• Yes allows this one action
• Yes, and don't ask again allows this kind of action for the rest of the session
• No stops it, so you can tell it what to do instead

The exact wording may change between versions. For now, choose the plain "Yes" so you see every step. You can press Esc at any time to stop Claude Code mid-task.

Review the change and run it

When Claude Code finishes, it writes a short summary. Then check its work yourself:

1. Look in VS Code. You should see a new index.html file.
2. Open the file and scroll through it. You don't need to understand every line.
3. Open the page in your browser. Right-click the file in VS Code and choose Reveal in Finder (macOS) or Reveal in File Explorer (Windows), then double-click it.

You can also just ask:

Open index.html in my default browser.

Now ask for one small improvement:

Make the cards sit in one column on phones and three columns on wider screens.
Change the button color to a soft green.

Refresh the browser to see the change. That's vibe coding: describe, approve, check, repeat.

Ask it to explain what it did

Claude Code is also a patient teacher. Use it to understand your own project.

Explain what you just built, in simple words for a beginner.
Which part of index.html controls the layout of the cards?

Two keys to remember

• Esc interrupts Claude Code. Use it when it heads the wrong way. Then type a clearer instruction.
• /clear starts a fresh conversation. Use it when you switch to a new task, so old chat history doesn't confuse it. Your files stay exactly as they are.

To leave Claude Code completely, type /exit.

Common mistakes

Asking for too much at once

// Wrong
Build me a full online plant store with login, payments, and an admin panel.

// Right
Create a single index.html page with a heading and three plant cards.

Not checking the result

Claude Code's summary says what it meant to do. Always open the page and look. If something is off, tell it exactly what you see.

// Wrong
It's broken, fix it.

// Right
The third card is wider than the other two on my laptop screen. Make all cards the same width.

What's next?

Claude Code forgets each session when you clear it. Next, you'll give it a permanent memory for your project with a CLAUDE.md file.