Your First Claude Code Session
Time to build something! Let's create a simple webpage together.
Starting a Session
$ mkdir my-first-project
$ cd my-first-project
$ claude
▌
You'll see Claude's interface:
╭─────────────────────────────────────────╮
│ ◆ Claude Code │
│ Your AI pair programmer │
╰─────────────────────────────────────────╯
Tips:
- Describe what you want to build
- Be specific about requirements
- You can ask follow-up questions
>
▌
Your First Prompt
Type this at the > prompt:
> Create a simple landing page for an Australian coffee shop called "Byron Beans". Include a hero section, about section, and contact info.
▌
What Happens Next
Claude will:
- Plan - Outline what files it will create
- Ask permission - Show you the changes before making them
- Create - Build the files when you approve
- Explain - Tell you what it did and why
Claude: I'll create a landing page for Byron Beans with:
Files to create:
📄 index.html - Main page structure
📄 styles.css - Styling with modern CSS
The page will include:
- Hero section with shop name
- About section with story
- Contact info with address
Proceed? [Y/n]
▌
Type y and press Enter to approve!
✓Tip
You can say n to cancel, or ask Claude to modify its plan before proceeding.
View Your Creation
Once Claude finishes:
$ ls
index.html styles.css
# Open in browser (macOS)
$ open index.html
# Windows
$ start index.html
# Linux
$ xdg-open index.html
▌
Iterating
Still in the session? Ask for changes:
> Add a menu section with coffee prices in AUD
> Make the hero section full-screen height
> Add a Google Maps embed for Byron Bay
▌
🇦🇺Aussie Note
Notice how Claude knows Byron Bay is in Australia? It picks up context from your prompts! 🏖️
The Conversation Flow
Claude Code remembers your conversation:
> Add a newsletter signup form
Claude: I'll add a newsletter form to the contact section...
> Actually, put it in the footer instead
Claude: Got it, I'll move it to the footer...
▌
Ending Your Session
When you're done:
Or press Ctrl + C.
⚠Warning
Your session history is saved. Next time you run claude in this folder, Claude remembers your project context!
What You Built
You just created a website without writing code manually! This is the power of AI-assisted development.
Key Takeaways
- Start with
claude in your project folder - Describe what you want in plain English
- Approve changes before they're made
- Iterate with follow-up requests
- Exit with
/exit or Ctrl+C