Build a Landing Page with Claude Code

Build a personal landing page by directing an AI coding agent in your terminal.

Introduction

30 Second Summary

Imagine building a professional-looking personal website without writing a single line of code yourself. Instead, you just describe what you want in plain English, and an AI coding assistant builds it for you in real time.

In this project, you will use Claude Code to build a personal landing page entirely through conversation. You'll learn how to direct an AI coding agent, iterate on its output, and set up project memory so it remembers your preferences.

What You'll Build

A personal landing page built by talking to Claude Code in your terminal, plus a project memory file that teaches Claude your conventions.

By the end of this project, you'll have:

  • Claude Code installed and authenticated on your Windows machine.
  • A working HTML/CSS personal landing page you can open in your browser.
  • A CLAUDE.md file that gives Claude persistent memory about your project preferences.
  • Secret Mission: Add a dark mode toggle with smooth animations to your page.

Are there any prerequisites?

You'll need a Windows computer and basic familiarity with using PowerShell (opening it and typing commands). No coding experience is required.

You'll also need a Claude Pro subscription ($20/month), which is required for Claude Code access. You'll set this up in Step 1.

Set Up Claude Code on Windows

Claude Code is an AI coding assistant that lives in your terminal. Instead of writing code yourself, you type natural language prompts and Claude Code builds, edits, and reviews files for you.

Before you can start building your landing page, you need Claude Code installed and authenticated on your machine. This step gets your environment ready.

In this step, get ready to:
  • Sign up for Claude Pro and activate your subscription.
  • Install Claude Code on Windows using PowerShell.
  • Log in and authenticate so Claude Code can access your account.
Sign up for Claude Pro

Claude Code requires a paid Anthropic plan. The minimum plan that includes Claude Code access is Claude Pro, which costs $20/month.

  • Open your browser and go to claude.ai.
  • Click Sign Up and create an account using your email or a Google/Apple login.
  • Once signed in, click Upgrade to Pro or navigate to your subscription settings.
  • Follow the payment flow to activate your Pro subscription ($20/month billed monthly).

Why do I need Claude Pro?

The free Claude.ai plan does not include Claude Code access. You need a Pro, Max, Team, or Enterprise account to use Claude Code. Pro is the most affordable option at $20/month.

Install Claude Code

Claude Code is installed through a single PowerShell command. The installer downloads the Claude Code binary and adds it to your system path so you can run it from any terminal window.

  • Press the Windows key to open your search bar.
  • Type PowerShell and press Enter to open it.
  • Install Claude Code by running this command:
irm https://claude.ai/install.ps1 | iex

Wait for the installation to complete. You should see a success message when it finishes.

  • Verify the installation worked by running:
claude --version

✔️ I see a version number

Claude Code is installed and ready to go. Move on to the next substep to log in.

ⓧ Command not found or error

The install may not have completed properly. Try these fixes:

  • Close PowerShell completely and reopen it. This refreshes your system path so it can find the newly installed binary.
  • Run the install command again: irm https://claude.ai/install.ps1 | iex.
  • Make sure you are running PowerShell as a regular user (not as Administrator). Right-click PowerShell and choose Run as Administrator only if the regular install fails.

After trying these fixes, run claude --version again to confirm it works.

Log in to Claude Code

The first time you run Claude Code, it needs to connect to your Anthropic account. This happens through a browser-based login flow.

  • Start Claude Code by running:
claude

What happens next?

Claude Code will automatically open your browser to an Anthropic login page. If the browser does not open automatically, you will see a URL in your terminal that you can copy and paste into your browser manually.

  • In your browser, log in with the same account you used to sign up for Claude Pro.
  • Approve the authentication request when prompted.
  • Switch back to your PowerShell window. You should see the Claude Code interactive prompt, which displays the model name and your working directory.

Browser didn't open?

If nothing happens in your browser, look for a URL printed in your terminal. Copy and paste it into your browser to complete the login manually.

Make sure you are logging in with the same account that has an active Pro subscription. The free plan will not work with Claude Code.

Help me troubleshoot my Claude Code login

Once you see the Claude Code prompt, you are authenticated and ready to go. Type exit or press Ctrl+D to close the session for now.

Your environment is ready. Next up, you'll start your first Claude Code session and explore what it can do.

Start Your First Claude Code Session

Claude Code is installed and ready to go. Now it's time to put it to work on a real project.

You'll create a dedicated folder for your landing page, start a Claude Code session inside it, and explore what Claude Code can do. Think of this as your first real conversation with your AI coding partner.

In this step, get ready to:
  • Create a project folder and launch Claude Code inside it.
  • Discover key commands for navigating a Claude Code session.
  • Test that Claude Code can read your project's filesystem.
Create a project folder and start Claude Code

Every Claude Code session is tied to a project folder. Claude Code reads the files inside that folder to understand your project. You'll create a fresh folder for your landing page and launch Claude Code inside it.

  • Move to your Desktop by running this command in PowerShell:
cd ~/Desktop
  • Create your project folder and move into it by running these commands:
mkdir my-landing-page
cd my-landing-page
  • Confirm the folder was created by running:
ls

You should see an empty directory. This confirms you're inside your new my-landing-page folder.

  • Start a Claude Code session by running:
claude

You'll see the Claude Code prompt appear with the version number, model name, and your working directory displayed above it. This is the interactive session where you'll type your prompts.

Claude Code not starting?

Make sure you're connected to the internet. Claude Code needs a network connection to communicate with the AI model.

If you see an authentication error, your login session from the previous step may have expired. Exit with Ctrl+C and run claude again to re-authenticate.

help me troubleshoot why Claude Code won't start in PowerShell

Explore the basics

Now that you're inside a Claude Code session, take a moment to discover what's available. Claude Code has built-in commands (starting with /) and also understands natural language.

  • Type /help and press Enter to see all available commands.
  • Type this natural language prompt and press Enter:
what can you do?

Claude Code responds with an overview of its capabilities. It can create files, edit code, run commands, and much more.

Key commands to remember

  • /clear resets your conversation history, giving you a fresh start.
  • /help shows all available slash commands.
  • Escape interrupts Claude Code if it's in the middle of a long response.
  • Ctrl+D or typing exit quits your Claude Code session and returns you to PowerShell.
Ask Claude Code to describe your empty project

Claude Code doesn't just answer questions from memory. It reads the actual files on your computer to give grounded, accurate responses. Let's prove this by asking it about the current folder.

  • Type this prompt and press Enter:
Look at this project directory and tell me what's here.

Claude Code reads your filesystem and reports that the folder is empty. This is the correct answer since you haven't created any files yet.

Why does this matter?

This proves Claude Code is grounded in your real project files. Everything it does from here on out is based on what actually exists in your folder, not a generic guess.

When you ask Claude Code to build your landing page in the next step, it will create real files in this directory that you can open and edit.

Your Claude Code session is running and you've seen how it reads your real project files. Next up, you'll put Claude Code to work and build your entire landing page through conversation.

Build Your Landing Page

Your project folder is ready and Claude Code is waiting for instructions. Now for the exciting part: building a real web page entirely through conversation.

You'll describe the page you want in plain English. Claude Code reads your prompt, generates the HTML and CSS files, and saves them to your project folder.

In this step, get ready to:
  • Ask Claude Code to create a personal landing page with a hero section, skills, and links.
  • Open the generated page in your browser to see the result.
  • Iterate on the design with follow-up prompts to refine colors, sizing, and animations.
Prompt Claude Code to create your page

The more specific your prompt, the better Claude Code's output. A detailed description with structure, layout, and content details produces a page that's close to what you want on the first try.

  • In your Claude Code session, type this prompt and press Enter:
Create a personal landing page for me. I want:
- A clean, modern design with a gradient background
- My name as a big heading (use "Alex Chen" as placeholder)
- A short bio paragraph
- A skills section with 4-5 items displayed as tags/badges
- Links to GitHub and LinkedIn (use # as placeholder URLs)
- Make it responsive so it looks good on mobile too
- Put the HTML in index.html and the CSS in style.css

What does this prompt do?

You're giving Claude Code a full specification for your page. Each bullet point describes a feature you want, and the last two bullets tell Claude Code exactly which files to create.

Claude Code reads your entire project folder (which is empty right now) and generates everything from scratch. It handles the HTML structure, CSS styling, and responsive design all in one go.

  • Claude Code will show you what it plans to create and ask for permission. Approve the file creation when prompted.
  • Wait for Claude Code to finish generating both files. You'll see it display the code it wrote in your terminal.

What is the permission prompt?

Claude Code confirms before creating or editing files. It shows a summary of what it wants to do, then waits for you to approve. This keeps you in control of what changes are made to your project.

Claude Code asked a question instead of creating files?

Sometimes Claude Code asks clarifying questions before starting. Answer its question (or just say "go ahead with your best judgment") and it will proceed with file creation.

If Claude Code seems stuck, type /clear to reset the conversation and try your prompt again.

help me get Claude Code to create my landing page files

Open your page in the browser

Claude Code created the files, but you need to open them in a browser to see the actual page. HTML files display as web pages when opened in a browser like Chrome, Edge, or Firefox.

  • Ask Claude Code to open the page for you by typing this prompt:
Open index.html in my default browser
  • If that doesn't work, open File Explorer on Windows, navigate to your my-landing-page folder on the Desktop, and double-click index.html.

You should see your landing page with a dark gradient background, your name as a large heading, a bio paragraph, skill tags, and footer links.

Seeing a blank page or raw code?

If the page is blank, check that Claude Code actually created both index.html and style.css in your my-landing-page folder. You can verify by typing ls as a prompt in Claude Code, or checking File Explorer.

If you see raw HTML code instead of a styled page, make sure you opened the file in a web browser (Chrome, Edge, or Firefox) and not in a text editor like Notepad.

help me get my landing page to display correctly in the browser

Iterate on the design

Your page is working, but it might not look exactly how you want yet. This is the core Claude Code workflow: prompt, review the result, then refine with follow-up prompts.

  • Ask Claude Code to adjust the color scheme by typing:
Change the gradient to use blue and purple tones
  • Refresh your browser to see the color change.
  • Next, ask Claude Code to improve the heading:
Make the name heading larger and add a subtle text shadow
  • Refresh your browser again to see the updated heading.
  • Finally, ask Claude Code to add some motion:
Add a smooth fade-in animation when the page loads
  • Refresh your browser one more time. The page should now fade in smoothly instead of appearing all at once.

Why iterate instead of writing one perfect prompt?

Breaking your requests into small, focused prompts gives you more control. You can see each change in isolation and decide whether to keep it or ask for something different.

This is how professionals use AI coding tools. Small prompts with frequent reviews produce better results than one giant request.

After these three iterations, your page should have a blue-purple gradient background, a large gradient-colored heading, and a smooth fade-in animation.

Changes not showing up after refresh?

Make sure Claude Code finished making the edit before you refresh. Look for Claude Code's confirmation that it updated the file.

If the page looks the same, try a hard refresh: press Ctrl+Shift+R to bypass the browser cache.

help me see my Claude Code design changes in the browser

✔️ Awesome, I've got everything!

Great work. Make sure both index.html and style.css are saved in your my-landing-page folder.

ⓧ I'd like to double check the full code

Your index.html should look similar to this (your output from Claude Code may vary slightly, and that's fine):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alex Chen - Personal Landing Page</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <main class="container">
        <header class="hero">
            <h1 class="name">Alex Chen</h1>
            <p class="bio">A curious developer exploring the world of technology. Passionate about building tools that make people's lives easier and learning something new every day.</p>
        </header>

        <section class="skills" aria-label="Skills">
            <h2>Skills</h2>
            <div class="skill-tags">
                <span class="tag">Problem Solving</span>
                <span class="tag">Python</span>
                <span class="tag">Web Development</span>
                <span class="tag">Data Analysis</span>
                <span class="tag">AI Tools</span>
            </div>
        </section>

        <footer class="links">
            <a href="#" aria-label="GitHub Profile">GitHub</a>
            <a href="#" aria-label="LinkedIn Profile">LinkedIn</a>
        </footer>
    </main>
</body>
</html>

Your style.css should look similar to this:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;
    min-height: 100vh;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    color: #e0e0e0;
    line-height: 1.6;
    padding: 2rem;
    animation: fadeIn 0.8s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 0;
}

.hero {
    text-align: center;
    margin-bottom: 3rem;
}

.name {
    font-size: 3.5rem;
    font-weight: 700;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
    margin-bottom: 1rem;
}

.bio {
    font-size: 1.2rem;
    color: #b0b0b0;
    max-width: 600px;
    margin: 0 auto;
}

h2 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: #ffffff;
}

.skills {
    margin-bottom: 3rem;
}

.skill-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.tag {
    background: rgba(102, 126, 234, 0.15);
    border: 1px solid rgba(102, 126, 234, 0.3);
    color: #667eea;
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    font-size: 0.9rem;
    font-weight: 500;
}

.links {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: center;
    gap: 2rem;
}

.links a {
    color: #667eea;
    text-decoration: none;
    font-weight: 500;
    font-size: 1rem;
    transition: color 0.2s ease;
}

.links a:hover {
    color: #764ba2;
}

@media (max-width: 600px) {
    .name { font-size: 2.5rem; }
    .bio { font-size: 1rem; }
    body { padding: 1rem; }
}

Why might my code look different?

Claude Code generates code based on your conversation, so exact class names, colors, or structure may differ. As long as your page has a gradient background, a large heading, skill tags, and footer links, you're on track.

Your landing page is looking great. Next up, you'll give Claude Code persistent memory about your project so it remembers your preferences across sessions.

Set Up Project Memory with CLAUDE.md

Every time you start a new Claude Code session, it begins fresh. It doesn't remember what you discussed last time or what conventions your project follows.

CLAUDE.md fixes this. It's a special file that Claude Code reads automatically at the start of every session, giving it persistent memory about your project's rules and preferences.

In this step, get ready to:
  • Create a CLAUDE.md file with your project rules.
  • Verify Claude Code reads CLAUDE.md on startup.
  • Add a new feature that follows your CLAUDE.md rules.
Create a CLAUDE.md file

CLAUDE.md is a markdown file that sits in your project folder. Claude Code loads it into context at the start of every session, so any rules you write there are always active.

  • In your Claude Code session, type this prompt to create the file:
Create a CLAUDE.md file for this project. Include these rules:
- This is a personal landing page project
- Always use the existing style.css file for styles (never inline CSS)
- Keep the design minimal and modern
- Use semantic HTML elements
- The color scheme is blue and purple gradients
  • When Claude Code asks for permission to create the file, approve it.

What is CLAUDE.md?

Think of CLAUDE.md as a set of standing instructions for Claude Code. Without it, you'd have to repeat your preferences every single session.

With it, Claude Code starts every conversation already knowing your project's conventions. Target under 200 lines per file so Claude can follow every rule reliably.

Claude Code creates the CLAUDE.md file in your project folder. You now have persistent project memory set up.

Claude Code didn't create the file?

Make sure you approved the permission request when Claude Code asked to write the file. If you accidentally denied it, type the same prompt again and approve this time.

Help me create a CLAUDE.md file in my project

Test that project memory works

The real test is whether Claude Code remembers your rules in a brand new session. Let's exit and come back to prove it works.

  • Exit your current Claude Code session by typing:
exit
  • You can also press Ctrl+D to exit. Either method works.
  • Start a new session in the same folder by running:
claude
  • Now ask Claude Code what it knows about your project:
What do you know about this project?

Claude Code should reference the rules from your CLAUDE.md file AND describe your existing HTML and CSS files. This proves it reads both your memory file and your actual project files at the start of every session.

Claude Code doesn't mention your rules?

Make sure you're running claude from inside the my-landing-page folder. Claude Code only loads CLAUDE.md files from your current directory.

Help me troubleshoot CLAUDE.md not loading

Add a new feature using project memory

Now let's put your CLAUDE.md to work. You'll ask Claude Code to add a new section, and it should automatically follow your rules without you reminding it.

  • Ask Claude Code to add a Projects section by typing this prompt:
Add a "Projects" section below the skills section with 3 placeholder project cards. Each card should have a title, short description, and a "View Project" link.
  • Approve any file-edit permissions when Claude Code asks.

What should I watch for?

Pay attention to where Claude Code puts the styles. Because your CLAUDE.md says "always use the existing style.css file for styles (never inline CSS)", Claude Code should add all new CSS to style.css instead of putting style attributes directly in the HTML.

It should also stick to your blue and purple gradient color scheme. This is project memory in action.

  • Refresh your browser to see the new Projects section on your page.
  • You should see three project cards (Weather Dashboard, Task Tracker, Recipe Finder) displayed in a grid below your skills. Each card has a title, description, and a purple "View Project" link.

How do I verify CLAUDE.md is working?

Open index.html in Notepad and look for any style="..." attributes on the new project card elements. You shouldn't find any. All styles should be in style.css instead.

Don't see project cards in your browser?

Make sure you refreshed the page after Claude Code finished editing. If the cards appear but look unstyled, check that Claude Code edited style.css in addition to index.html. You can ask Claude Code: "Did you add styles for the project cards to style.css?"

Help me fix my project cards display

✔️ Awesome, I've got everything!

Great. Double check you have three files in your my-landing-page folder: index.html, style.css, and CLAUDE.md.

ⓧ I'd like to double check the full code

Since Claude Code generates the code for you, your output may look slightly different. That's expected. Here's a reference version to compare against.

CLAUDE.md should look something like:

# Project: Personal Landing Page

## Rules
- This is a personal landing page project
- Always use the existing style.css file for styles (never inline CSS)
- Keep the design minimal and modern
- Use semantic HTML elements
- The color scheme is blue and purple gradients

index.html should now include a Projects section between the skills and footer:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alex Chen - Personal Landing Page</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <main class="container">
        <header class="hero">
            <h1 class="name">Alex Chen</h1>
            <p class="bio">A curious developer exploring the world of technology. Passionate about building tools that make people's lives easier and learning something new every day.</p>
        </header>

        <section class="skills" aria-label="Skills">
            <h2>Skills</h2>
            <div class="skill-tags">
                <span class="tag">Problem Solving</span>
                <span class="tag">Python</span>
                <span class="tag">Web Development</span>
                <span class="tag">Data Analysis</span>
                <span class="tag">AI Tools</span>
            </div>
        </section>

        <section class="projects" aria-label="Projects">
            <h2>Projects</h2>
            <div class="project-cards">
                <article class="project-card">
                    <h3>Weather Dashboard</h3>
                    <p>A clean dashboard that displays real-time weather data for multiple cities with visual charts.</p>
                    <a href="#" class="project-link">View Project</a>
                </article>
                <article class="project-card">
                    <h3>Task Tracker</h3>
                    <p>A minimal task management app with drag-and-drop organization and progress tracking.</p>
                    <a href="#" class="project-link">View Project</a>
                </article>
                <article class="project-card">
                    <h3>Recipe Finder</h3>
                    <p>Search and save recipes based on ingredients you have on hand. Includes meal planning features.</p>
                    <a href="#" class="project-link">View Project</a>
                </article>
            </div>
        </section>

        <footer class="links">
            <a href="#" aria-label="GitHub Profile">GitHub</a>
            <a href="#" aria-label="LinkedIn Profile">LinkedIn</a>
        </footer>
    </main>
</body>
</html>

style.css should include project card styles:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;
    min-height: 100vh;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    color: #e0e0e0;
    line-height: 1.6;
    padding: 2rem;
    animation: fadeIn 0.8s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 0;
}

.hero {
    text-align: center;
    margin-bottom: 3rem;
}

.name {
    font-size: 3.5rem;
    font-weight: 700;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
    margin-bottom: 1rem;
}

.bio {
    font-size: 1.2rem;
    color: #b0b0b0;
    max-width: 600px;
    margin: 0 auto;
}

h2 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: #ffffff;
}

.skills {
    margin-bottom: 3rem;
}

.skill-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.tag {
    background: rgba(102, 126, 234, 0.15);
    border: 1px solid rgba(102, 126, 234, 0.3);
    color: #667eea;
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    font-size: 0.9rem;
    font-weight: 500;
}

.projects {
    margin-bottom: 3rem;
}

.project-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
}

.project-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    padding: 1.5rem;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.project-card:hover {
    transform: translateY(-4px);
    border-color: rgba(102, 126, 234, 0.4);
}

.project-card h3 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    color: #ffffff;
}

.project-card p {
    font-size: 0.9rem;
    color: #a0a0a0;
    margin-bottom: 1rem;
}

.project-link {
    color: #667eea;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
}

.project-link:hover {
    text-decoration: underline;
}

.links {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: center;
    gap: 2rem;
}

.links a {
    color: #667eea;
    text-decoration: none;
    font-weight: 500;
    font-size: 1rem;
    transition: color 0.2s ease;
}

.links a:hover {
    color: #764ba2;
}

@media (max-width: 600px) {
    .name { font-size: 2.5rem; }
    .bio { font-size: 1rem; }
    body { padding: 1rem; }
    .project-cards { grid-template-columns: 1fr; }
}

Your project now has persistent memory. Every future Claude Code session in this folder starts with full knowledge of your project's rules. Next up, you'll use Claude Code to review, fix, and polish your landing page.

Fix and Refine with Claude Code

Your landing page is live and looking good. Professional developers don't stop at the first working version, though. They review, refine, and polish.

In this step, you'll use Claude Code as a second pair of eyes to catch accessibility gaps and responsive design issues. You'll also learn how to resume a session so you never lose your conversation context.

In this step, get ready to:
  • Have Claude Code review and fix accessibility issues on your page.
  • Resume a previous Claude Code session with the -c flag.
  • Personalize your page with your own details.
Ask Claude Code to review your page

One of Claude Code's strengths is analyzing existing code for problems you might not notice. It can check for accessibility gaps, responsive layout issues, and overall code quality in one pass.

  • In your Claude Code session, type this prompt and press Enter:
Review my landing page for any issues - accessibility, responsive design, or things that could be improved. Then fix what you find.
  • Claude Code will ask for permission to edit your files. Approve the changes.

What does Claude Code check for?

Claude Code reads your actual index.html and style.css files, then identifies concrete issues. Common fixes it might apply include adding aria-label attributes for screen readers, improving color contrast ratios, and tightening mobile layout breakpoints.

This is different from asking a generic AI for advice. Claude Code is grounded in your real files, so every suggestion maps to a specific line in your project.

  • Refresh your browser after Claude Code finishes its edits.
  • Your page should still look the same visually, but the underlying code is now more accessible and robust.

Page looks broken after the review?

If Claude Code changed something that broke your layout, tell it directly: "That last change broke my layout. Undo it and try a different approach." Claude Code can revert its own edits.

If you want to start fresh, type /clear to reset the conversation context and try a more targeted prompt like "Only fix accessibility issues, don't change the visual design."

Why did Claude Code break my page layout?

Resume a previous conversation

Sometimes you need to step away and come back later. Claude Code lets you pick up exactly where you left off with a single flag.

  • Exit your current Claude Code session by typing:
exit
  • You'll be back at your regular PowerShell prompt. Now restart Claude Code and continue where you left off by running:
claude -c

What does the -c flag do?

The -c flag tells Claude Code to continue your most recent conversation in the current directory. Without it, you'd start a brand new session with no memory of what you just discussed.

  • Test that it remembers your context by typing:
What did we work on last time?
  • Claude Code should recall that it reviewed your page for accessibility and responsive issues. This confirms the session continuity is working.

Claude Code doesn't remember the previous session?

Make sure you're in the my-landing-page folder when you run claude -c. Session history is tied to the directory. If you ran it from a different folder, Claude Code won't find the previous conversation.

Why can't Claude Code find my previous conversation?

Make a final personalization pass

Your page currently uses placeholder content. You can ask Claude Code to swap in your real information, or keep the placeholders if you prefer.

  • Type a personalization prompt with your details. Here's an example to adapt:
Update the page with these details:
- Name: [Your Name]
- Bio: [A sentence about yourself]
- Skills: [List your interests or skills]

Keep the placeholders if you prefer

You don't have to use your real name or details. Keeping "Alex Chen" as the placeholder is perfectly fine. The skill here is learning to direct Claude Code, not building a public profile.

  • Refresh your browser to see your personalized landing page.
  • You should see your name (or the placeholder) as the large gradient heading, your bio underneath, and your skills displayed as tags.

The prompt, review, refine workflow

Throughout this project, you've been following the same pattern: tell Claude Code what you want, review the output, then ask for adjustments. This loop is the core Claude Code workflow you'll use on every future project.

✔️ Awesome, I've got everything!

Great. Double check that your files are saved and your page looks polished in the browser.

ⓧ I'd like to double check the full code

Since Claude Code generated your code through conversation, your files might look slightly different from the reference below. That's expected. Use this as a comparison to make sure the key structures are in place.

Here's what index.html should look like:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alex Chen - Personal Landing Page</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <main class="container">
        <header class="hero">
            <h1 class="name">Alex Chen</h1>
            <p class="bio">A curious developer exploring the world of technology. Passionate about building tools that make people's lives easier and learning something new every day.</p>
        </header>

        <section class="skills" aria-label="Skills">
            <h2>Skills</h2>
            <div class="skill-tags">
                <span class="tag">Problem Solving</span>
                <span class="tag">Python</span>
                <span class="tag">Web Development</span>
                <span class="tag">Data Analysis</span>
                <span class="tag">AI Tools</span>
            </div>
        </section>

        <section class="projects" aria-label="Projects">
            <h2>Projects</h2>
            <div class="project-cards">
                <article class="project-card">
                    <h3>Weather Dashboard</h3>
                    <p>A clean dashboard that displays real-time weather data for multiple cities with visual charts.</p>
                    <a href="#" class="project-link">View Project</a>
                </article>
                <article class="project-card">
                    <h3>Task Tracker</h3>
                    <p>A minimal task management app with drag-and-drop organization and progress tracking.</p>
                    <a href="#" class="project-link">View Project</a>
                </article>
                <article class="project-card">
                    <h3>Recipe Finder</h3>
                    <p>Search and save recipes based on ingredients you have on hand. Includes meal planning features.</p>
                    <a href="#" class="project-link">View Project</a>
                </article>
            </div>
        </section>

        <footer class="links">
            <a href="#" aria-label="GitHub Profile">GitHub</a>
            <a href="#" aria-label="LinkedIn Profile">LinkedIn</a>
        </footer>
    </main>
</body>
</html>

Here's what style.css should look like:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;
    min-height: 100vh;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    color: #e0e0e0;
    line-height: 1.6;
    padding: 2rem;
    animation: fadeIn 0.8s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 0;
}

.hero {
    text-align: center;
    margin-bottom: 3rem;
}

.name {
    font-size: 3.5rem;
    font-weight: 700;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
    margin-bottom: 1rem;
}

.bio {
    font-size: 1.2rem;
    color: #b0b0b0;
    max-width: 600px;
    margin: 0 auto;
}

h2 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: #ffffff;
}

.skills {
    margin-bottom: 3rem;
}

.skill-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.tag {
    background: rgba(102, 126, 234, 0.15);
    border: 1px solid rgba(102, 126, 234, 0.3);
    color: #667eea;
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    font-size: 0.9rem;
    font-weight: 500;
}

.projects {
    margin-bottom: 3rem;
}

.project-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
}

.project-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    padding: 1.5rem;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.project-card:hover {
    transform: translateY(-4px);
    border-color: rgba(102, 126, 234, 0.4);
}

.project-card h3 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    color: #ffffff;
}

.project-card p {
    font-size: 0.9rem;
    color: #a0a0a0;
    margin-bottom: 1rem;
}

.project-link {
    color: #667eea;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
}

.project-link:hover {
    text-decoration: underline;
}

.links {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: center;
    gap: 2rem;
}

.links a {
    color: #667eea;
    text-decoration: none;
    font-weight: 500;
    font-size: 1rem;
    transition: color 0.2s ease;
}

.links a:hover {
    color: #764ba2;
}

@media (max-width: 600px) {
    .name {
        font-size: 2.5rem;
    }

    .bio {
        font-size: 1rem;
    }

    body {
        padding: 1rem;
    }

    .project-cards {
        grid-template-columns: 1fr;
    }
}

Secret mission

Add Dark Mode

Your landing page looks great, but what about visitors who prefer a darker screen? Challenge yourself to add a dark mode toggle with smooth animations, localStorage persistence, and system preference detection.

Clean Up Your Resources

Clean Up Your Resources

This project runs locally on your machine with no cloud resources. Your only ongoing cost is the Claude Pro subscription ($20/month) that powers Claude Code.

Cost warning

Your Claude Pro subscription costs $20/month and renews automatically. If you no longer need Claude Code access, cancel your subscription to avoid future charges.

Resources you used:

  • The my-landing-page folder on your Desktop (contains index.html, style.css, theme.js, and CLAUDE.md).
  • Claude Code CLI installed on your machine.
  • Claude Pro subscription ($20/month).

Keep everything running

No action needed. Choose this if you plan to keep using Claude Code for other projects.

  • Your my-landing-page folder stays on your Desktop. You can open index.html anytime to view your page.
  • Claude Code stays installed and ready for your next project.
  • Your Claude Pro subscription continues at $20/month, giving you access to Claude Code and Claude's Pro features.

Pause - I'll come back to this later

If you want to take a break but come back to Claude Code later, you can cancel your subscription and re-subscribe when you are ready.

  • Your project files stay on your Desktop. No action needed there.
  • Claude Code stays installed on your machine. It will not work without an active subscription, but it will be ready when you re-subscribe.
  • To pause your subscription, go to claude.ai in your browser.
  • Click your initials in the lower left corner, then select Settings.
  • Navigate to Billing and click Cancel.
  • Your access continues until the end of your current billing period.

Delete - I don't want to use this again

Remove all project files, uninstall Claude Code, and cancel your subscription.

  • Delete your project folder by running this in PowerShell:
Remove-Item -Path "$HOME\Desktop\my-landing-page" -Recurse -Force
  • Uninstall Claude Code by running these commands in PowerShell:
# Remove the Claude Code binary and version files
Remove-Item -Path "$env:USERPROFILE\.local\bin\claude.exe" -Force
Remove-Item -Path "$env:USERPROFILE\.local\share\claude" -Recurse -Force

# Remove Claude Code settings and session history
Remove-Item -Path "$env:USERPROFILE\.claude" -Recurse -Force
Remove-Item -Path "$env:USERPROFILE\.claude.json" -Force
  • Cancel your Claude Pro subscription:
  • Go to claude.ai in your browser.
  • Click your initials in the lower left corner, then select Settings.
  • Navigate to Billing and click Cancel.
  • Cancel at least 24 hours before your next billing date to avoid being charged for the next period.

Nice Work!

Nice Work!

You just built a complete personal landing page without writing a single line of code by hand. Everything was created through natural language conversation with Claude Code.

You've learned how to:

  • Built a multi-file web project (HTML, CSS, and project memory) entirely through natural language prompts in your terminal.
  • Mastered the core Claude Code workflow of prompt, review, and refine to iteratively improve your landing page.
  • Configured CLAUDE.md for persistent project memory so Claude Code remembers your conventions and preferences across sessions.
  • Added a dark mode toggle with smooth CSS transitions, localStorage persistence, and system preference detection.

Ready to quiz yourself?