Build a complete personal landing page from a single conversation. No templates, no tutorials.
Before you build anything, you need two things: a clean folder and a clear idea.
Open your terminal and run:
mkdir my-site
cd my-siteThis creates an empty folder called my-site and moves you inside it. Claude Code works best when it starts with a clean slate. No leftover files, no conflicting code, no confusion about what already exists.
claudeYou are now inside Claude Code, pointed at an empty folder. It knows there is nothing here yet. That is exactly what you want. When you ask it to build something, it will start from scratch with no assumptions.
Before you type a single prompt, spend two minutes thinking about what you want on your personal landing page. The better your input, the better the output.
You need:
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. Even in a notes app on your phone. Having your info ready means you can give Claude Code one clear prompt instead of feeding it pieces.
You have an empty folder, Claude Code is running, and you know what you want on the page. Time to build.
Type something like this, replacing the details with your own:
Build me a personal landing page. Use plain HTML and CSS, no frameworks.
- Name: Alex Chen
- Bio: Computer science student at UT Austin. I like building things and hiking.
- Links: github.com/alexchen, linkedin.com/in/alexchen, alex@example.com
- Style: Dark background, clean and modern, with a subtle blue accent color
Make it responsive so it looks good on phones too.Press Enter.
Claude Code reads the empty folder, confirms there is nothing here yet, and starts building. You will see it think through the approach, then start creating files.
It will ask permission before each file:
Claude wants to create file: index.html
Allow? [y/n]Type y and press Enter. It will ask again for each file it creates. You might see two or three permission prompts: one for the HTML, one for the CSS, maybe one for a small JavaScript file.
Say yes to each one. You can always delete these files later. They are just files on your computer.
You described an outcome in plain English. You did not:
<div> isClaude Code made every technical decision: file structure, HTML elements, CSS properties, responsive breakpoints. It chose those things because you told it what you wanted, not how to build it.
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, interrupt it:
Stop. Use plain HTML and CSS only, no frameworks or build tools.Claude Code will adjust. This is normal. Part of working with AI is steering it when it makes a choice you do not agree with.
Claude Code created files. Now look at them.
The simplest way: ask Claude Code.
Open the page in my browserIt will run a command like open index.html (Mac) or start index.html (Windows) to launch the file in your default browser.
If that does not work, open your file explorer, navigate to the my-site folder, and double-click index.html. Your browser will open it.
You should see your landing page. Your name, your bio, your links, styled the way you described. It is a real web page running in your browser.
Exit Claude Code for a moment (/exit) and list the files:
lsYou will likely see:
index.html: The structure of your page. All the text, links, and layout.styles.css: The visual design. Colors, fonts, spacing, responsiveness.Maybe a third file if Claude Code added a small script for interactivity. That is it. Two or three files. No build step, no package manager, no configuration.
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.
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.
The first draft is done. Now make it better.
Open Claude Code again in your my-site folder (if you exited earlier):
cd my-site
claudeClaude Code remembers the project. It will read the files it created and understand the current state.
Try prompts like these:
Make the background darker and add more space between sectionsAdd a photo placeholder at the top, a circle with my initials inside itThe 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 textEach 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.
This is the core workflow for everything you will build with Claude Code:
This loop works for a landing page. It works for a full application. It works for things you have not imagined yet. The only skill you need is the ability to look at something and say what you want different.
You now have a personal landing page that you built from a conversation. No tutorials. No templates. No prior coding experience required. The files are on your computer, they work in any browser, and you can keep refining them whenever you want.
The page lives on your machine for now. In the final lesson of this course, you will put it on the internet with a real URL that anyone can visit. But that comes later. For now, what matters is this: you described something, and it exists.
In the next lesson, you will learn how Claude Code reads, creates, and edits files. Understanding this makes you dramatically more effective at directing it, because you will know what it can see and how it thinks about your project.