Module 1: Meet Your AI Coding Partner - Claude Code

Overview

Welcome to the future of web development. Claude Code is an AI agent that lives in your terminal, understands natural language, and can build entire projects from simple descriptions. This module introduces you to AI-assisted development—where you describe what you want, and Claude creates it.

What You'll Learn

Understanding AI agents in development
Installing and setting up Claude Code
Basic Claude Code commands and interactions
Generating projects from natural language
How Claude interacts with your file system

Prerequisites

Terminal access (Terminal on Mac, Command Prompt on Windows)
Node.js 18+ installed
Internet connection
45 minutes of hands-on time

What is Claude Code?

Your AI Terminal Companion

Claude Code is different from chatbots or copilots you might have seen:

Traditional Tools:

Live in separate windows
Suggest code snippets
Require copy-paste
Limited context

Claude Code:

Lives in your terminal
Writes complete files
Executes commands
Understands your entire project
Works autonomously

The Terminal Advantage

Working in the terminal with Claude Code means:

Direct file system access
Running build commands
Git operations
Installing dependencies
Testing code
All without leaving your workflow

Think of Claude Code as...

A brilliant junior developer who:

Never gets tired
Knows every programming language
Can research documentation instantly
Follows your instructions precisely
Asks clarifying questions when needed

Installing Claude Code

Step 1: Check Prerequisites

# Check Node.js version (need 18+)
node --version

# Check npm is installed
npm --version

If Node.js isn't installed, visit nodejs.org and install the LTS version.

Step 2: Install Claude Code

# Install globally via npm
npm install -g @anthropic-ai/claude-code

# Verify installation
claude --version

Step 3: Authenticate

# Login to Claude Code
claude login

# This opens your browser
# Sign in with your Anthropic account
# Return to terminal when complete

You'll see:

✓ Successfully authenticated
Ready to start coding with Claude!

Step 4: First Contact

# Start Claude in any directory
claude

# You'll see the Claude prompt
⚡

Try a simple interaction:

⚡ Hello Claude! Can you tell me what you can do?

Core Claude Code Concepts

How Claude Sees Your Project

When you run claude in a directory, Claude can:

Read all files in the current directory and subdirectories
See file structure and organization
Understand code relationships
Access documentation files

The Conversation Model

Claude Code conversations are:

Contextual: Claude remembers the entire conversation
Iterative: You can refine and adjust
Interactive: Claude asks for clarification
Persistent: Context maintained throughout session

Safety and Permissions

By default, Claude asks permission before:

Creating new files
Modifying existing files
Running commands
Installing packages

You can approve actions individually or use flags for automation.

Creating Your First AI-Generated Website

The Magic Moment

Let's create a complete website with a single prompt:

# Create a new directory
mkdir my-ai-website
cd my-ai-website

# Start Claude
claude

Now give Claude a detailed prompt:

⚡ Create a personal portfolio website for a photographer named Sarah Chen. 
Include:
- A modern, minimalist design with a dark theme
- Homepage with hero image and brief bio
- Gallery page with a grid of photos (use placeholder images)
- About page with longer bio and contact information
- Contact page with a form
- Responsive design that works on mobile
- Simple CSS animations for smooth transitions

Use vanilla HTML, CSS, and JavaScript - no frameworks needed.

Watch Claude Work

Claude will:

Ask clarifying questions if needed
Create file structure
Write HTML pages
Style with CSS
Add JavaScript interactions
Use semantic HTML
Implement responsive design

You'll see output like:

I'll create a modern portfolio website for Sarah Chen. Let me start by 
setting up the file structure...

Creating index.html...
Creating gallery.html...
Creating about.html...
Creating contact.html...
Creating css/styles.css...
Creating js/main.js...

Exploring the Generated Code

After Claude finishes:

# See what was created
ls -la

# Open in your default browser
open index.html  # Mac
start index.html # Windows

# Or use Claude to show structure

Ask Claude to explain:

⚡ Can you show me the file structure you created and explain the organization?

Understanding Claude's Capabilities

File Operations

Claude can:

Create new files and directories
Read existing files
Modify files with precision
Delete files (with permission)
Move and rename files

Example:

⚡ Add a testimonials section to the homepage with 3 client reviews

Code Understanding

Claude can:

Explain code functionality
Find bugs and issues
Suggest improvements
Refactor for better practices
Add comments and documentation

Example:

⚡ Can you explain how the mobile menu JavaScript works?

Project Enhancement

Claude can:

Add new features
Improve performance
Enhance accessibility
Optimize images
Add SEO improvements

Example:

⚡ Make the website more accessible by adding proper ARIA labels and improving color contrast

Essential Claude Commands

Slash Commands

Claude supports special commands that start with /:

/help          # Show available commands
/clear         # Clear conversation history
/undo          # Undo last action
/model         # Switch Claude model
/quit          # Exit Claude

Planning Mode

For complex tasks, use planning mode:

Press Shift+Tab twice
Claude will plan without executing
Review the plan
Approve execution

Interrupting Claude

If Claude is doing something unexpected:

Press Esc to interrupt
Ask Claude to explain or undo
Refine your instructions

Hands-On Exercises

Exercise 1: Generate a Business Website

Create a website for a coffee shop:

⚡ Create a website for "Brew Haven" coffee shop with:
- Homepage with hero, menu preview, and hours
- Full menu page with coffee and food items
- Location page with embedded map
- Modern, warm design with coffee colors
- Mobile-friendly navigation

Exercise 2: Add Interactive Features

Enhance the coffee shop site:

⚡ Add these interactive features:
- Smooth scroll navigation
- Image gallery with lightbox effect
- Newsletter signup form with validation
- Loading animation

Exercise 3: Create a Different Project

Try something completely different:

⚡ Create a simple todo list application with:
- Add, edit, delete tasks
- Mark tasks as complete
- Filter by status
- Save to localStorage
- Clean, modern UI

Working with Claude Code

Best Practices

Be Specific: Detailed prompts get better results
Iterate: Refine and improve incrementally
Ask Questions: Claude can explain decisions
Review Code: Always check generated code
Learn from Claude: Ask about best practices

Effective Prompts

Good Prompt:

Create a responsive navigation menu with:
- Hamburger menu on mobile
- Smooth transitions
- Accessible keyboard navigation
- Active page highlighting

Less Effective:

Make a menu

Understanding Context

Claude maintains context throughout your session:

Previous requests
File changes made
Project structure
Your preferences

This means you can build iteratively:

⚡ Now add a dark mode toggle to the navigation
⚡ Make the dark mode preference persist in localStorage
⚡ Add a smooth transition between modes

Common Questions

"Can Claude Code deploy my site?"

Yes! Claude can run deployment commands:

⚡ Can you help me deploy this to Netlify?

"What if Claude makes a mistake?"

Simply tell Claude:

⚡ That's not quite right. The menu should slide in from the right, not the left.

Or undo:

⚡ /undo
⚡ Let's try a different approach for the menu

"Can I use Claude with existing projects?"

Absolutely! Navigate to any project and run claude:

⚡ Can you help me understand this codebase and suggest improvements?

Checkpoint Task

Your Mission

Successfully set up Claude Code and create your first AI-generated website:

Install Claude Code
- Verify Node.js 18+ installed
- Install Claude globally
- Complete authentication

Generate Personal Website Create a personal website with Claude:

Create a personal portfolio website for [your name] with:
- Professional design
- Homepage with introduction
- Projects/work page
- Skills section
- Contact information
- Responsive design

Explore and Enhance
- Open the site in your browser
- Ask Claude to explain the code structure
- Add one new feature (your choice)
- Have Claude optimize for performance
Test Claude's Capabilities Try these commands:
- Ask Claude to add comments to the CSS
- Have Claude create a README.md
- Request accessibility improvements

Success Criteria

✅ Claude Code installed and authenticated
✅ Complete website generated from prompt
✅ Site opens and displays correctly
✅ Successfully added enhancement
✅ Understand how to interact with Claude

Pro Tips

Speed Up Development

Skip individual approvals:

claude --allow-writes

For automation:

claude --dangerously-skip-permissions

(Use with caution!)

Custom Commands

Create .claude/commands/deploy.md:

Deploy the current project to Netlify:
1. Run build command if needed
2. Deploy using Netlify CLI
3. Show the deployment URL

Use with: ⚡ /deploy

Research Mode

Claude can research before building:

⚡ Research modern portfolio design trends, then create a cutting-edge photographer portfolio

Next Steps

You've learned to harness AI for web development! Module 2 will show you:

Using Claude to understand Git
AI-assisted version control
Intelligent commit messages
Git workflows with Claude's help

Preparation for Module 2

Keep your generated website ready
Think about what changes you'd like to track
Prepare to learn Git the AI way

Ready to version control with AI? Module 2 awaits!

Claude Code Terminal Basics and Setup

Prerequisites

Next Steps

Your Progress