Get Started with Claude Code

Build a portfolio website by prompting an AI coding agent in your terminal.

Introduction

30 Second Summary

AI chatbots are great for generating code snippets, but you still have to copy-paste everything into your project yourself. What if an AI could read your files, create new ones, and edit your project directly from the terminal?

In this project, you will install Claude Code, an AI coding agent that lives in your terminal. You will prompt it to build a personal portfolio website from scratch without writing a single line of code yourself.

What You'll Build

A single-page personal portfolio website with About Me, Projects, and Contact Me sections, created entirely by prompting Claude Code in your terminal.

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

Claude Code installed and authenticated on your machine.
A personalized portfolio website (index.html + styles.css) built entirely through prompts.
A configured CLAUDE.md project memory file that gives Claude Code persistent context about your project.
Secret Mission: Add real project descriptions and deploy-ready polish by referencing files and folders with Claude Code.

Are there any prerequisites?

None. This guide includes full setup instructions for every tool you need. You do not need any coding experience or prior accounts to get started.

Install Claude Code

Claude Code is a coding agent that runs directly in your terminal. Unlike browser-based AI chatbots, it can see, create, and edit files in your project folder.

In this step, you'll install Claude Code on your machine and set up a code editor so you can watch files appear in real-time as Claude Code generates them.

In this step, get ready to:

Install Claude Code on your machine.
Verify the installation works.
Open a code editor with an integrated terminal.

Install Claude Code

There are two ways to install Claude Code. The native installer is recommended because it auto-updates in the background.

Native Install (Recommended)

Install Claude Code by running this command in your terminal:

curl -fsSL https://claude.ai/install.sh | bash

What does this command do?

This downloads and installs Claude Code as a native binary on your machine. Native installations automatically update in the background, so you always have the latest version.

Homebrew

Install Claude Code using Homebrew by running this command:

brew install --cask claude-code

What does this command do?

This installs the claude-code cask from Homebrew's stable release channel. Homebrew installations do not auto-update.

Run brew upgrade claude-code periodically to get the latest version.

Verify the installation

Confirm Claude Code is installed by running this command:

claude --version

✔️ I see a version number

You should see something like claude 2.x.x. Claude Code is installed and ready to go.

ⓧ Command not found

If your terminal says claude is not found, your shell does not know where the binary lives. The installer placed it in ~/.local/bin but your shell's PATH does not include that folder yet.

Add the Claude Code binary location to your PATH by running these commands:

echo 'export PATH="$HOME/.local/bin:$PATH"' >> ~/.zshrc
source ~/.zshrc

What do these commands do?

The first line adds ~/.local/bin to your shell's PATH permanently by writing it into your ~/.zshrc config file. The second line reloads the config so the change takes effect immediately.

Try the version check again:

claude --version

You should now see a version number confirming the installation.

Open your code editor

You need a code editor with an integrated terminal. The terminal is where Claude Code runs. The editor is where you will see files appear as Claude Code generates them.

✔️ I already have VS Code or Cursor

Press Cmd+Space (macOS) or the Windows key (Windows) to open your search bar.
Type the name of your editor (VS Code or Cursor) and press Enter to open it.
Open the integrated terminal by pressing Cmd+` (macOS) or Ctrl+` (Windows).

You are ready for the next step.

ⓧ I need to install an editor

Cursor is a code editor built for AI-assisted development. It works like VS Code but with AI features built in.

Open your browser and go to cursor.com/downloads.
Select the macOS installer for your chip (Apple Silicon or Intel).

Which chip do I have?

Click the Apple menu in the top-left corner of your screen, then click About This Mac. If you see "Apple M1" or "Apple M2" (or higher), select Apple Silicon. If you see "Intel", select Intel.

Open your Downloads folder.
Double-click the Cursor .dmg file.
Drag the Cursor application into your Applications folder.
Press Cmd+Space to open Spotlight search.
Type Cursor and press Enter to open it.
Open the integrated terminal by pressing Cmd+` (macOS) or Ctrl+` (Windows).

Cursor won't open?

macOS may block apps from unidentified developers. If you see a security warning, go to System Settings, then Privacy & Security, and click Open Anyway next to the Cursor message.

Still stuck? Help me open Cursor on my Mac.

Claude Code is installed and your editor is ready. Next up, you'll create a project folder and connect Claude Code to your account.

Set Up Your Workspace and Authenticate

Now that Claude Code is installed, you need a workspace for it to operate in. Claude Code works within the folder you start it in, reading and writing files only inside that directory.

In this step, you will create a dedicated project folder on your Desktop, start Claude Code inside it, and connect it to your account.

In this step, get ready to:

Create a project folder on your Desktop.
Authenticate Claude Code with your account.
Explore Claude Code's capabilities and commands.

Create your project folder

Claude Code only has access to files inside the folder where you start it. You will create a dedicated folder for your portfolio project so Claude Code has a clean workspace.

Move to your Desktop by running this command:

cd ~/Desktop

Create your project folder and move into it by running these commands:

mkdir my-portfolio && cd my-portfolio

What do these commands do?

mkdir my-portfolio creates a new folder called my-portfolio on your Desktop.
cd my-portfolio moves your terminal inside that folder. Everything Claude Code does will happen in here.

Confirm you are in the right folder by running:

pwd

You should see a path ending in /my-portfolio.

Seeing "File exists" or "Permission denied"?

If the folder already exists from a previous attempt, move into it with cd ~/Desktop/my-portfolio.
If you see a permission error, make sure you ran cd ~/Desktop first. Your Desktop is a location you always have write access to.

Help me troubleshoot my project folder creation

Start Claude Code and authenticate

With your project folder ready, you will now start Claude Code inside it and connect it to your account. Choose the tab below that matches your subscription type.

Claude Pro/Max Subscription

Start Claude Code by running this command:

claude

Claude Code asks if you trust the files in this folder.

Select Yes, proceed.
Choose any text style you like.

Claude Code then prompts you to log in. A browser window opens automatically.

Log in with your Claude account email.
Click Allow to authorize Claude Code.

Your terminal confirms the connection. Claude Code is now ready to use.

Don't have a Claude subscription yet?

Go to claude.ai and click Sign Up to create an account.
Click Upgrade and select a plan. Pro ($20/mo) is plenty for this project.

Anthropic Console (API Credits)

You need to set your API key as an environment variable before starting Claude Code.

Set your API key by running this command:

export ANTHROPIC_API_KEY='your-api-key-here'

Replace your-api-key-here with your actual API key from console.anthropic.com. Keep the quotes around it.
Start Claude Code by running:

claude

Claude Code asks if you trust the files in this folder.

Select Yes, proceed.
Choose any text style you like.

Claude Code detects your ANTHROPIC_API_KEY and connects automatically. No browser login is needed.

Don't have API credits yet?

Go to console.anthropic.com and sign in or create an account.
Select Buy credits (or check if you received free credits).
Add $5-10 in credits.
Go to API Keys in the left sidebar, click Create Key, name it (e.g., "claude-code"), and copy it.

Browser didn't open or authentication failed?

If the browser window did not open automatically, check your terminal for a URL you can copy and paste into your browser.
If you see an authentication error with API credits, make sure you ran the export command in the same terminal session where you ran claude. Opening a new terminal tab resets environment variables.
If your API key is not recognized, double check it was copied completely (no extra spaces or missing characters).

Help me fix my Claude Code authentication

Explore Claude Code

Claude Code is now running interactively in your terminal. Unlike a regular chatbot, Claude Code sees your project folder and responds based on what is actually in it. Try asking it a question.

Type the following message and press Enter:

What can you help me build?

Claude Code responds with suggestions based on your actual project folder. It recognizes you are in an empty folder and gives relevant ideas. This is what sets it apart from a regular chatbot. Claude.ai only knows what you paste into it. Claude Code knows your entire project.

Type /help and press Enter to see all available commands.
Use your arrow keys to browse the list, then press Esc to exit.

What is /help?

The /help command shows a list of all available slash commands in Claude Code. These are built-in controls for managing your session, switching models, checking costs, and more. You will use several of these in the next step.

Your workspace is ready and Claude Code is connected. Next up, you will give Claude Code persistent memory and configure its settings.

Configure Claude Code

Claude Code is running, but it has no idea what you're building. Right now your project folder is empty, and every session starts from scratch.

In this step, you'll give Claude Code persistent memory about your project and configure its settings. This means Claude Code will always know what tech stack you're using, even if you close and reopen it tomorrow.

In this step, get ready to:

Set up a CLAUDE.md project memory file.
Explore model and config settings.
Check your context window usage.

Set up project memory with CLAUDE.md

Every time you start a new Claude Code session, it reads a special file called CLAUDE.md to remember your project's context. Without it, Claude Code treats your folder like a blank slate every time.

Type /init and press Enter.
Send this message to Claude Code:

Create CLAUDE.md to include this line: "This is a single-page personal portfolio website built with plain HTML and CSS. No frameworks."

What is project memory?

CLAUDE.md is a project memory file that Claude Code reads at the start of every session. It tells Claude Code what your project is, what tools it uses, and any rules to follow.

If you come back tomorrow, Claude Code already knows what this project is about. You never have to re-explain your project from scratch.

Claude Code asks for permission to create the file. Select Yes to accept the file change.
Open CLAUDE.md in your editor's sidebar to review it.

You should see your project description inside the file. The exact formatting may vary slightly, but the core content should match.

✔️ Awesome, I've got everything!

Great. Double check you've saved your file.

ⓧ I'd like to double check the full code

Your CLAUDE.md should contain content like this:

# Project Memory

This is a single-page personal portfolio website built with plain HTML and CSS. No frameworks.

Don't see CLAUDE.md in your editor?

Make sure you accepted the file change when Claude Code asked for permission. If you declined, type /init again and resend the message.

If the file exists but your editor sidebar is empty, try clicking the refresh icon in the Explorer panel or close and reopen the folder.

Why isn't my CLAUDE.md file appearing?

Explore model and config settings

Claude Code gives you control over which AI model it uses and how it behaves when editing your files.

Type /model and press Enter to see available models.
Select the cheapest option (Haiku) for this project. It is more than capable for building a portfolio site.
Press Esc to close the model selector.

Why pick Haiku?

Haiku is the fastest and cheapest model available. For straightforward tasks like generating HTML and CSS, it produces great results while using fewer tokens.

You can always switch to a more powerful model later with /model if you need complex reasoning.

Type /config and press Enter. This opens a tabbed Settings interface.
Review the permission mode setting.

What are permission modes?

Permission modes control how much autonomy Claude Code has when editing files:

Default: Claude asks before every file edit. Recommended for now so you can review each change.
Auto-accept edits: Claude applies changes without asking. Faster, but you lose the review step.
Plan mode: Read-only analysis with no file modifications. Useful for exploring a codebase without changing anything.

Confirm that permission mode is set to Default.
Press Esc to close the settings.

Check your context window

Every message you send and every file Claude Code reads uses tokens from a fixed context window. Monitoring usage helps you understand how much space you have left in a session.

Type /context and press Enter.

You should see something like "17k/200k tokens (8%)". The breakdown lists what is taking up space: system tools, your CLAUDE.md, and your conversation so far.

What happens when the context fills up?

Claude Code automatically compacts your conversation when the context window gets full. It summarizes older messages to free up space for new ones.

You can also manually trigger this by typing /compact if you want to reclaim space during a long session.

Your workspace is configured and Claude Code knows what you're building. Next up, you'll put Claude Code to work building your portfolio site.

Build Your Portfolio

Your workspace is configured and Claude Code knows what you're building thanks to your CLAUDE.md file. Time to put it to work.

In this step, you'll prompt Claude Code to generate a complete portfolio website. You won't write a single line of code yourself.

In this step, get ready to:

Generate a portfolio website with About Me, Projects, and Contact Me sections.
Preview your site in the browser.
Personalize the content with follow-up prompts.

Generate your portfolio

Claude Code builds files by reading your prompts, generating code, and then asking permission before saving anything to your project folder. You'll see each file appear in your editor the moment you approve it.

In your Claude Code session, type the following message and press Enter:

Build me a single-page personal portfolio website with an About Me section, a Projects section, and a Contact Me section.

Claude Code starts generating code. When it asks for permission to write a file, select Yes to accept each file change.
Watch your editor's sidebar. Two new files appear: index.html and styles.css.

What just happened?

Claude Code read your prompt, generated a full HTML page with CSS styling, and saved the files into your project folder. It created a navigation header, three content sections (About Me, Projects, Contact Me), and a footer.

Because permission mode is set to Default, Claude Code asked before writing each file. This gives you control over what changes land in your project.

Files didn't appear in your editor?

Make sure you selected Yes when Claude Code asked for permission to write. If you declined, resend the same prompt.
Check that your editor has the my-portfolio folder open. If you opened a different folder, the files won't be visible.
Still stuck? Help me troubleshoot why Claude Code didn't create my portfolio files.

Your output will look different from the reference code

Claude Code generates code fresh each time, so your exact HTML and CSS will differ from the reference files shown later in this step. That's completely normal. The important thing is that your site has the three sections (About Me, Projects, Contact Me), a navigation header, and working styles.

Preview your site

Your files exist on disk, but you haven't seen them rendered in a browser yet. Let's open your portfolio and confirm it looks right.

Open a new terminal tab by pressing Cmd+T (macOS) or Ctrl+Shift+` (Windows) in your editor's integrated terminal.
Open your portfolio in the browser by running this command:

open index.html

Scroll through the page. You should see a navigation bar at the top, an About Me section, a Projects section with three placeholder cards, and a Contact Me section with links.

Page looks broken or unstyled?

Check that styles.css exists in the same folder as index.html. Both files must be inside my-portfolio.
Open index.html in your editor and look for a <link rel="stylesheet" href="styles.css"> tag in the <head>. If it's missing, ask Claude Code to add it.
Still stuck? Help me fix my unstyled portfolio page.

Switch back to your Claude Code terminal tab. Check your token usage by typing /cost and pressing Enter.

What does /cost show?

The /cost command displays how many tokens your session has consumed and the estimated dollar cost so far. Generating a full portfolio page with HTML and CSS typically uses a small portion of your allowance. You can run /cost anytime to stay aware of your usage.

✔️ Awesome, my site looks great!

Nice work. Your portfolio is live in the browser and Claude Code generated everything from a single prompt.

ⓧ I'd like to double check the reference code

Your files won't match these exactly (Claude Code generates fresh code each time), but your structure should be similar. Here's a reference for comparison:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Portfolio</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <nav>
            <div class="logo">My Portfolio</div>
            <ul class="nav-links">
                <li><a href="#about">About</a></li>
                <li><a href="#projects">Projects</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>

    <section id="about" class="section">
        <h2>About Me</h2>
        <p>Hello! I'm a developer passionate about building things with technology. I love learning new tools and creating projects that solve real problems.</p>
    </section>

    <section id="projects" class="section">
        <h2>Projects</h2>
        <div class="projects-grid">
            <div class="project-card">
                <h3>Project One</h3>
                <p>A brief description of your first project and the technologies used.</p>
            </div>
            <div class="project-card">
                <h3>Project Two</h3>
                <p>A brief description of your second project and the technologies used.</p>
            </div>
            <div class="project-card">
                <h3>Project Three</h3>
                <p>A brief description of your third project and the technologies used.</p>
            </div>
        </div>
    </section>

    <section id="contact" class="section">
        <h2>Contact Me</h2>
        <p>Want to get in touch? Reach out through any of the channels below.</p>
        <div class="contact-links">
            <a href="mailto:your-email@example.com">Email</a>
            <a href="https://linkedin.com/in/your-profile" target="_blank">LinkedIn</a>
            <a href="https://github.com/your-username" target="_blank">GitHub</a>
        </div>
    </section>

    <footer>
        <p>Built with Claude Code</p>
    </footer>
</body>
</html>

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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f8f9fa;
}

header {
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 100;
}

nav {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: #2d3748;
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 2rem;
}

.nav-links a {
    text-decoration: none;
    color: #4a5568;
    font-weight: 500;
    transition: color 0.3s ease;
}

.nav-links a:hover {
    color: #3182ce;
}

.section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 4rem 2rem;
}

.section h2 {
    font-size: 2rem;
    margin-bottom: 1.5rem;
    color: #2d3748;
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 1rem;
}

.project-card {
    background-color: #fff;
    border-radius: 8px;
    padding: 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.project-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.project-card h3 {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
    color: #2d3748;
}

.project-card p {
    color: #718096;
}

.contact-links {
    display: flex;
    gap: 1.5rem;
    margin-top: 1rem;
}

.contact-links a {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background-color: #3182ce;
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 500;
    transition: background-color 0.3s ease;
}

.contact-links a:hover {
    background-color: #2c5282;
}

footer {
    text-align: center;
    padding: 2rem;
    color: #a0aec0;
    font-size: 0.875rem;
}

Personalize and refine

Your portfolio works, but it has generic placeholder content. The power of Claude Code is that refining your site is as simple as sending another message. Each follow-up prompt costs tokens, so use /cost to track your spending as you go.

Try any or all of the following prompts. Switch back to your Claude Code terminal tab and type a message to send it.

Personalize your About Me section:

Update the About Me section with the following: My name is [[YOURNAME="your name"]]. I am a [[YOURROLE="your role, e.g. student, developer, designer"]]. When I'm not [[YOURACTIVITY="an activity, e.g. coding"]], you can find me [[YOURHOBBY="a hobby, e.g. hiking"]].

Change the color scheme:

Update the color scheme to use a dark background with accent colors

Add a social link:

Add a link to my LinkedIn page in the Contact Me section with the URL [[YOURLINKEDIN="https://linkedin.com/in/your-profile"]]

Accept the file changes when Claude Code asks for permission.
Switch to your browser tab and refresh the page after each change to see the updates.
Run /cost after your last prompt to check your total token usage for the session.

Why does each prompt cost tokens?

Every message you send and every response Claude Code generates consumes tokens from your context window. Tokens are the units that large language models use to process text. Longer prompts and longer responses both increase the count.

For Claude Pro/Max subscribers, tokens are included in your monthly plan. For API credit users, each token has a small dollar cost that adds up over a session.

Changes not showing in the browser?

Make sure you refreshed the page. The browser won't update automatically for local HTML files.
Check that you accepted the file changes in Claude Code. If you see "Permission denied" or skipped the prompt, resend your message.
Try a hard refresh with Cmd+Shift+R (macOS) or Ctrl+Shift+R (Windows) to clear the browser cache.
Still stuck? Help me figure out why my portfolio changes aren't showing up.

Your portfolio is built, previewed, and personalized. Next up, you'll take on a secret mission to add real project content and deploy-ready polish.

Secret mission

Add Real Project Descriptions

Your portfolio looks great, but the Projects section still has placeholder content. In this mission, you will reference a local file to give Claude Code real project descriptions. Then you will add deploy-ready polish with a favicon, meta tags, and hover animations.

Clean Up Your Resources

This project runs entirely locally on your machine. There are no cloud resources or ongoing costs to worry about.

Decide whether to keep your resources as they are, pause your session, or delete everything entirely.

Resources you used:

Claude Code session (running in your terminal).
my-portfolio folder on your Desktop (index.html, styles.css, CLAUDE.md).
Claude Code installation on your machine.

Keep everything running

No action needed. Choose this if you are still actively building or want to keep experimenting with Claude Code.

Exit Claude Code when you are done working by pressing Ctrl+C or typing exit.
Your project folder stays on your Desktop. Reopen anytime by navigating to the folder and running claude.
Claude Code reads your CLAUDE.md and picks up where you left off.

Pause - I'll come back to this later

Exit your Claude Code session to free up your terminal. Your files remain on disk.

Press Ctrl+C or type exit to end your Claude Code session.
Your my-portfolio folder and all files inside it remain untouched on your Desktop.
To resume later, open your terminal, navigate to the folder, and run claude --continue to pick up your most recent session.

Delete - I don't want to use this again

Remove all project files and optionally uninstall Claude Code from your machine.

Exit Claude Code by pressing Ctrl+C or typing exit.
Delete your project folder by running:

rm -rf ~/Desktop/my-portfolio

To uninstall Claude Code from your machine:

Native Install

Remove the Claude Code binary and data by running:

rm -f ~/.local/bin/claude && rm -rf ~/.local/share/claude

Homebrew

Uninstall Claude Code by running:

brew uninstall claude-code

Consider keeping Claude Code

Claude Code is a general-purpose tool useful for any project. If you plan to build more things in the future, keeping it installed saves you from re-installing later.

Nice Work!

You just built a personalized portfolio website using Claude Code, an AI coding agent that lives in your terminal.

You learned how to:

Built a complete portfolio website entirely through terminal prompts, without writing a single line of code yourself.
Installed and authenticated Claude Code with your Claude subscription or API credits.
Configured project memory with CLAUDE.md so Claude Code remembers your project across sessions.
Added real project descriptions by referencing files in your project folder (Secret Mission).

Ready to quiz yourself?