Your first project

This is the one you came for. You’re going to make a project folder, start your assistant inside it, and build a small web page just by describing it. No code typing. You talking, it building.

Make a home for this project

Open PowerShell. Go to the Projects folder you made last module, then create and enter a fresh folder for this project:

PS> cd ~\Projects
PS> mkdir about-me
PS> cd about-me

Run pwd to confirm you’re inside about-me. This empty folder is your project A single folder that holds everything for one thing you're building. One project, one folder. — everything for this build will live here, and nowhere else.

Open it in VS Code — your workshop from here on

Now let’s bring in VS Code, the workbench you installed in Module 2. From inside the about-me folder, this command opens that folder in VS Code:

PS> code .

VS Code opens with your about-me folder loaded. On the left is the file explorer — your project’s files (empty for now) shown as a list you can click. This one window is where you’ll do everything from here: see your files on the left, talk to your assistant at the bottom, and soon preview your page. No more juggling separate windows.

The first time VS Code opens

If this is your very first time opening VS Code, it greets you with a Welcome screen and a few one-time questions. Here’s how to breeze through them:

• It may ask you to sign in (and mention something called GitHub Copilot). You can click “Continue without signing in” — you don’t need an account here, and this keeps things simple. (Copilot is a different paid assistant; we’re using Claude Code instead, so you can skip it.)
• It might ask about a color theme — pick whichever looks nice and move on.
• Click past any “Get Started” walkthrough; you can always reopen it later.

⤢ click to enlarge

⤢ click to enlarge

⤢ click to enlarge

⤢ click to enlarge

Start your assistant — right inside VS Code

VS Code has a terminal built into it, so you don’t need a separate PowerShell window anymore. Open it from the top menu: Terminal → New Terminal. A panel opens along the bottom of the window.

⤢ click to enlarge

In that built-in terminal, launch Claude Code by typing its name:

PS> claude

⤢ click to enlarge

The terminal turns into a conversation. There’s a prompt waiting for you to type a message, just like a chat app — except this assistant can create and edit the files in this folder for you, and you’ll watch them appear in the file explorer on the left as it works.

How to talk to it

Talking to an AI assistant is a skill, and it’s mostly common sense. A few principles that make a huge difference:

• Say what you want in plain English. You don’t need special words. “Make me a simple personal web page” is a perfectly good instruction.
• Be specific about the details you care about. Colors, words, layout. Vague in, vague out.
• Work in small steps. Ask for one thing, look at the result, then ask for the next change. This is far easier than describing everything at once.
• It’s a conversation, not a vending machine. If the result isn’t right, just say what’s off and ask for a fix. Going back and forth is the normal way to work.

Build your first thing

Let’s make a simple personal page. Type a message like this to your assistant (copy it as a starting point, then change the details to be about you):

Make a simple, good-looking personal web page about me.
My name is [your name] and I like hiking, cooking, and
true-crime podcasts. I want a friendly intro paragraph and
a list of three hobbies. Keep it to a single page and
explain what you are doing as you go.

⤢ click to enlarge

⤢ click to enlarge

Press Enter and watch. The assistant will tell you its plan, then start creating files. When it wants to create or change a file, it asks for your approval first — you’ll see a prompt to allow it. Read the one-line summary, and if it matches what you asked for, approve it.

⤢ click to enlarge

Look at what it made

This is where the single-window setup pays off. As the assistant worked, real files appeared in the file explorer on the left of VS Code. You can click any of them to peek at what got built in the middle of the window (you don’t need to understand the code — just seeing your project take shape is the point).

⤢ click to enlarge

How do you actually see the page? The good news: you don’t have to figure that out alone. When Claude finishes, it tells you what it built and how to view it — usually with an exact command to type. In this example, Claude created a file called index.html and said to type ! start index.html, which opens the page in your web browser.

⤢ click to enlarge

So go ahead and run whatever command Claude gives you. In this case:

PS> ! start index.html

And if Claude didn’t spell it out, or you’re not sure, just ask — this is the habit you’ll use forever:

How do I view this page in my browser?

⤢ click to enlarge

Don’t worry about running the page in a browser yet — that’s exactly what Module 6 covers. For now, the win is this: you described something and an assistant built it. Sit with that for a second. That’s the whole skill, and you just did it.

Making it look good (this is the real skill)

Here’s something nobody tells beginners: the first thing Claude builds is usually plain. Black text, white background, nothing fancy. That’s not a failure — it’s a starting point. The magic is in what you ask for next, and the secret is this:

You don’t need to know what good design is. You need to ask Claude to figure it out for you.

Claude knows a huge amount about modern, professional-looking websites — colours, spacing, fonts, layouts, and the popular tools designers use. You just have to invite it to use that knowledge instead of giving you the bare minimum. Compare:

• 🙅 “Make me a page about myself.” → you get something basic.
• 🙌 “Make me a page about myself, and make it look modern and professional — like a polished personal website in 2026. Choose a tasteful colour palette, nice fonts, and good spacing.”

That second version gives Claude permission to make real design choices. Try prompts like these — they work astonishingly well:

This looks pretty plain. Research how modern, professional
personal websites look in 2026, then redesign this page to
match — nice fonts, a tasteful colour scheme, good spacing,
and a polished layout. Explain the choices you make.

A few more you can keep in your back pocket:

• Ask it to teach you the options: “What are some popular ways to make a website look modern? Explain them simply, then suggest the best fit for a personal page.”
• Borrow a vibe you like: “I like clean, minimal sites with lots of whitespace and a single accent colour. Redesign mine in that style.”
• Let it pick the tools: “Is there a styling framework that would make this look professional with less effort? Set it up if so, and explain what you added.”
• Show, don’t tell: find a site whose look you love, screenshot it (see the tip above about sharing images), drag it in, and say “make mine feel like this.”
• Iterate on feel: “Make it feel warmer and friendlier,” or “make it look more serious and corporate.” Plain-English vibes are valid instructions.

Keep going (optional)

While you’re here, try a few follow-up messages to feel the rhythm of iterating:

• “Change the background to a warm cream color.”
• “Add a section with my three favorite places.”
• “Make the heading bigger and centered.”
• “Make the whole thing look more modern and polished.”

Each time, it edits the files and asks for approval. That back-and-forth — ask, look, adjust — is building software. Next module: making sure this work can never be lost.