← Back to lessons

Your First Project

Build a complete personal landing page from a single conversation. No templates, no tutorials.

Day 1 · 25 min

01

Set Up Your Workspace

Before you build anything, you need a clean workspace and a clear idea.

The only terminal command you need to know

After installation, you will only ever type two things in your terminal:

  1. cd folder-name changes which folder you are in. Think of it as opening a folder on your desktop. cd my-site means “go into the my-site folder.”
  2. claude starts Claude Code.

Everything else, you will say in plain English to Claude Code. It runs the commands for you.

Start Claude Code

Open your terminal and type:

claude

You are now inside Claude Code. From here on, you talk to it in natural language.

Create your project

Type this to Claude Code:

Create a new folder called my-site and set it up as my workspace. I want to build a personal website in it.

Claude Code will create the folder and prepare it for your project.

Decide what goes on your page

Before you ask Claude Code to build, spend two minutes thinking about what you want on your personal landing page:

  • Your name (or the name you go by online)
  • A one-line bio (“Software engineer in Denver” or “Design student who loves dogs”)
  • 2-4 links (GitHub, LinkedIn, Twitter, your email, whatever matters to you)
  • A color preference (optional, but “dark background with blue accents” gets you further than “make it look nice”)

You do not need a design mockup. You do not need wireframes. You do not need to know what HTML is. You just need to know what you want the page to say about you.

Write your details down before continuing. Having your info ready means you can give Claude Code one clear prompt instead of feeding it pieces.

02

Build It

You have a workspace, Claude Code is running, and you know what you want on the page. Time to build.

The prompt

Tell Claude Code what you want, using your own information:

Build me a personal landing page in the my-site folder. Use plain HTML and CSS, no frameworks.

- Name: [YOUR NAME HERE]
- Bio: [ONE SENTENCE ABOUT YOU]
- Links: [YOUR ACTUAL LINKS]
- Style: Dark background, clean and modern, with a subtle blue accent color

Make it responsive so it looks good on phones too.

Do not copy this prompt with the placeholder text. Use your real name, your real bio, your real links. This is your website.

What happens next

Claude Code starts building. You will see it think through the approach, then start creating files. It will show you each file it wants to create and ask for your approval. You might see two or three of these: one for the HTML, one for the CSS, maybe one for a small JavaScript file.

Approve each one. You can always delete these files later. They are just files on your computer.

What you just did

You described an outcome in plain English. You did not:

  • Pick a template from a gallery
  • Follow a 45-minute YouTube tutorial
  • Copy code from Stack Overflow
  • Learn what a <div> is

Claude Code made every technical decision. It chose those things because you told it what you wanted, not how to build it.

If Claude Code picks a framework

Sometimes Claude Code will reach for React, Astro, or another framework. For a single landing page, that is overkill. If it starts installing packages or creating a project scaffold, press Escape to interrupt it, then say:

Use plain HTML and CSS only. No frameworks, no build tools, no package managers.

Claude Code will start over with the simpler approach.

03

See What You Built

Claude Code created files. Now look at them.

Open it in your browser

Tell Claude Code:

Open the website in my browser so I can see it

Claude Code will run the right command for your operating system. Your browser will open with your landing page: your name, your bio, your links, styled the way you described.

If it does not open automatically, ask:

Where is the index.html file? Give me the full path so I can open it manually.

Then find that file in your file manager (Finder on Mac, File Explorer on Windows) and double-click it.

Understand what was created

Ask Claude Code:

What files did you create and what does each one do?

You will likely hear about:

  • index.html: The structure of your page. All the text, links, and layout.
  • styles.css (or style.css): The visual design. Colors, fonts, spacing, responsiveness.

Maybe a third file if Claude Code added interactivity. That is it. Two or three files.

These files are yours. They live on your computer. You can email them to someone, put them on a USB drive, or open them on any computer with a browser. There is no account, no subscription, no hosting service involved yet.

What if it does not look right?

Maybe the colors are off. Maybe the layout is cramped. Maybe your name is misspelled. That is fine. You are about to learn how to fix all of that in the next phase.

The first version is never the final version. Even professional developers build, look, adjust, build again. The difference is that your adjustment cycle takes seconds, not hours.

04

Make It Yours

The first draft is done. Now make it better.

If you closed Claude Code, reopen it. In your terminal:

cd my-site
claude

Claude Code will read the files from your project and understand the current state.

Iterate with conversation

Tell Claude Code what to change:

Make the background darker and add more space between sections
Add a photo placeholder at the top. A circle with my initials inside it.
The links should be buttons instead of plain text. Make them subtle, not loud.
Add a footer that says "Built with Claude Code" in small gray text

Each time, Claude Code reads your existing files, makes precise edits, and asks permission. You approve, refresh your browser, and see the result. If you do not like it, tell Claude Code what to change. If you do like it, move on.

The feedback loop

This is the core workflow for everything you will build with Claude Code:

  1. Describe what you want
  2. Approve the changes
  3. Look at the result
  4. Describe what to adjust
  5. Repeat until it is right

The only skill you need is the ability to look at something and say what you want different.

What you built

You now have a personal landing page that you built from a conversation. You will keep working on this project throughout the course. In the next lesson, you will learn how Claude Code works with your files, which makes you much more effective at directing it. And in the final lesson, you will deploy this site to the internet with a real URL.