First project step by step

What you'll build

In this tutorial, you'll create not one but two projects: first an ultra-simple page (5 minutes), then a complete website with modern design. Let's start with the easiest one.

First project: your introduction page (5 min)

This first project is intentionally very simple. No framework, no configuration, just an HTML file you can open directly in your browser.

Goal: create a web page that says "Hello, my name is [your name]" with a blue background and white text.

Step 1: Create a folder and launch Claude Code

Step 2: Ask for your page

Type this request, replacing "John" with your name:

> Create an HTML page with a single file (index.html).
> The page should say "Hello, my name is John" centered on the screen.
> Blue background (#1e40af), white text, large readable font.
> No external dependencies, everything in a single file.

Claude Code will create the index.html file. Type y to accept.

Step 3: View the result in your browser

The simplest way: drag the index.html file from your folder directly into your browser (Chrome, Firefox, Safari). Your page displays instantly!

Or via the terminal:

# On macOS
open index.html

# On Linux
xdg-open index.html

# On Windows
start index.html

Second project: a complete website with modern design

Ready for something more ambitious? Let's build a complete portfolio with navigation, sections, and animations.

Step 1: Set the stage

Create a new folder for your project and launch Claude Code inside it.

Claude Code will initialize and scan the (currently empty) folder. You're ready to talk to it.

Step 2: Describe what you want

The quality of the result depends directly on the quality of your request. Here's a good prompt to start:

> Build me a modern HTML/CSS web page with:
> - A header with a text logo "My Portfolio" and navigation
> - A hero section with a catchy title, description, and CTA button
> - A "My Projects" section with 3 cards of fictional projects
> - A footer with social media links
> - Design: dark background (#0f172a), cyan accents (#06b6d4), modern typography
> - Responsive (mobile, tablet, desktop)
> - Subtle CSS hover animations on the cards
> - Everything in a single index.html file with embedded CSS

Step 3: Watch Claude Code work

After sending your prompt, Claude Code will:

1. Analyze your request and formulate a plan
2. Show you what it plans to do before doing it
3. Ask for your approval to create the file

Type y (or press Enter) to accept. Claude Code will generate the complete file.

Step 4: View the result

Open the file in your browser:

# On macOS
open index.html

# On Linux
xdg-open index.html

# On Windows (WSL)
explorer.exe index.html

# Or simply: drag the file into your browser

You should see a complete web page with the design you requested.

Step 5: Iterate and refine

This is where Claude Code truly shines. Instead of editing the code by hand, simply ask for the changes you want:

> Add a progressive fade-in animation on each section
> as you scroll down

Claude Code will modify the existing file to add this feature. You can chain as many requests as needed:

> Change the accent color from cyan to purple (#8b5cf6)
> and add a subtle gradient on the header

> Add a contact form with name, email, and message fields.
> Style it to be consistent with the rest of the design.

> Make the site accessible: add aria attributes,
> check color contrasts, and make sure everything
> is keyboard-navigable

Going further: a Next.js project

Ready for something more ambitious? Ask Claude Code to create a complete project with a framework.

Claude Code will:

• Initialize the project (npx create-next-app)
• Configure TypeScript and Tailwind
• Create the necessary React components
• Structure the files correctly
• Wire everything together so the project works right away

Best practices for your first projects

Useful commands to know

During your Claude Code session, you can use these special commands:

Next steps

Congratulations, you've built your first project with Claude Code! You now master the basics: launching Claude Code, writing requests, iterating on results.

To go further, explore the advanced features that will transform your daily workflow:

• MCPs: Connect Claude Code to Gmail, GitHub, Slack, and dozens of other tools
• Skills: Create reusable workflows to automate your tasks
• Advanced Prompting: Master the art of communicating with AI for optimal results