Get Started with Claude Code

Build a personal portfolio website by directing an AI coding agent.

Introduction

30 Second Summary

What if you could build a real website just by describing what you want in plain English? AI coding agents make this possible by turning your instructions into working code.

In this project, you will use Claude Code to build a personal portfolio website entirely through natural language prompts. You will not write a single line of code yourself.

What You'll Build

A single-page personal portfolio website with an About Me section, a Projects section, and a Contact Me section, all generated by Claude Code in your terminal.

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

  • A working personal portfolio website built entirely by an AI coding agent.
  • A CLAUDE.md project memory file that persists context across sessions.
  • Hands-on experience with Claude Code's key commands including /init, /model, /usage, /context, /config, and /memory.
  • Secret Mission: Add real project descriptions and customize your design through multi-step iteration with Claude Code.

Are there any prerequisites?

No prior coding experience is needed. This project includes full setup instructions for every tool. You will need a Claude Pro subscription ($20/mo) or Anthropic API credits ($5-10) to authenticate Claude Code.

Install Claude Code

Claude Code is an AI coding agent that lives in your terminal. Instead of switching between a chat window and your editor, you give it instructions right where you write code.

In this step, you'll install Claude Code on your machine and set up the authentication it needs to connect to Claude's AI models.

In this step, get ready to:
  • Install Claude Code on your machine.
  • Verify the installation works.
  • Set up your Claude account for authentication.
Install Claude Code on your machine

Claude Code installs as a command-line tool. You have two options: the native installer (recommended) or Homebrew.

  • Press Cmd+Space to open Spotlight Search.
  • Type Terminal and press Enter to open it.

Choose one of the two installation methods below.

Native Install (Recommended)

  • Install Claude Code by running this command:
curl -fsSL https://claude.ai/install.sh | bash

What does this command do?

This downloads the Claude Code installer from Anthropic's servers and runs it. The -fsSL flags tell curl to follow redirects silently and fail cleanly on errors.

Native installations automatically update in the background. You'll always have the latest version without running any upgrade commands.

Seeing a Setup notes warning about PATH?

If the installer shows a warning about PATH, your shell doesn't know where to find the claude binary yet. Fix it by running:

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

This adds the installation directory to your shell's search path permanently.

help me fix a PATH issue after installing Claude Code

Homebrew

  • Install Claude Code via Homebrew by running:
brew install --cask claude-code

What does this command do?

This installs the claude-code cask from Homebrew. It tracks the stable release channel, which is about a week behind the latest version.

Homebrew installations do not auto-update. Run brew upgrade claude-code periodically to get updates.

Homebrew not installed?

If you see a "command not found" error for brew, switch to the Native Install tab instead. The native installer has no prerequisites.

help me install Claude Code without Homebrew

Verify your installation
  • Confirm Claude Code installed correctly by running:
claude --version

✔️ I see a version number

Claude Code is installed and ready to go. The exact version number doesn't matter for this project.

ⓧ Command not found

If you see zsh: command not found: claude, the installation directory isn't in your shell's search path.

  • Fix your PATH by running:
echo 'export PATH="$HOME/.local/bin:$PATH"' >> ~/.zshrc
source ~/.zshrc
  • Try the version check again:
claude --version

You should now see a version number printed in your terminal.

help me troubleshoot Claude Code installation

Set up your Claude account

Claude Code needs an account to connect to Claude's AI models. You have two options: a Claude subscription (simplest) or pre-paid API credits.

Claude Pro or Max Subscription

  • Go to claude.ai in your browser.
  • Sign up for a new account, or log in if you already have one.
  • Click Upgrade and select Pro ($20/mo) or Max ($100/mo).
  • Enter your payment details to activate the subscription.

Which plan should I choose?

Your subscription gives you a monthly token allowance that covers Claude Code usage. Pro is plenty for this project.

Anthropic API Credits

  • Go to console.anthropic.com in your browser.
  • Sign in or create a new account.
  • Select Buy Credits and add $5-10 to your account.
  • Click API Keys in the left sidebar.
  • Click Create Key.
  • Name it something memorable (e.g., "claude-code") and click Create.
  • Copy the key and save it somewhere safe. You will not be able to see it again after closing this page.

Keep your API key private

Your API key is like a password. Do not share it publicly, paste it into websites, or commit it to version control. You'll use it in the next step to connect Claude Code to your account.

Claude Code is installed and your account is ready. Next up, you'll create your project folder and launch Claude Code for the first time.

Set Up Your Project and Authenticate

Claude Code is installed and ready to go. Before you can start prompting it to build your portfolio, you need a workspace and an authenticated connection.

Your code editor's integrated terminal is where you'll interact with Claude Code for the entire project. Let's get both set up.

In this step, get ready to:
  • Open your code editor with an integrated terminal.
  • Create your project folder on your Desktop.
  • Start Claude Code and authenticate for the first time.
Open your code editor

You'll use your code editor's integrated terminal to run all Claude Code commands. If you already have Cursor or VS Code installed, you're ready to go.

✔️ I have Cursor or VS Code

  • Press Cmd+Space to open Spotlight Search.
  • Type Cursor or Visual Studio Code and press Enter to open it.
  • Open the integrated terminal by pressing Ctrl+` (the backtick key, above Tab on your keyboard).

You should see a terminal panel appear at the bottom of your editor window.

ⓧ I need to install Cursor

  • Download Cursor from cursor.com/downloads.
  • Select the macOS installer for your chip (Apple Silicon or Intel).
  • Open the downloaded .dmg file.
  • Drag Cursor to your Applications folder.
  • Launch Cursor from your Applications folder.

Seeing a security warning?

Since Cursor is an app downloaded from the internet, macOS may ask you to confirm. Click Open to proceed.

  • Once Cursor opens, press Ctrl+` (the backtick key, above Tab) to open the integrated terminal.

You should see a terminal panel appear at the bottom of your editor window.

Create your project folder

Claude Code needs a dedicated folder to work in. You'll create one on your Desktop so it's easy to find later.

  • Move to your Desktop by running this command:
cd ~/Desktop
  • Create your project folder and move into it by running this command:
mkdir my-portfolio && cd my-portfolio
  • Confirm you're in the right place by running:
pwd

You should see /Users/your-username/Desktop/my-portfolio in the output.

Seeing 'No such file or directory'?

Make sure you ran cd ~/Desktop first. If the mkdir command fails, the my-portfolio folder may already exist from a previous attempt. Delete it with rm -rf ~/Desktop/my-portfolio and try again.

Still stuck? Help me troubleshoot my project folder creation.

Start Claude Code and authenticate

Now that your workspace is ready, you'll launch Claude Code inside it. The authentication flow depends on whether you set up a Claude subscription or API credits in the previous step.

Claude Pro or Max Subscription

  • Start Claude Code by running:
claude

Claude Code will ask if you trust the files in this folder. Select Yes, proceed since this is a dedicated project folder you just created.

  • Select Use Claude.ai account (OAuth) when prompted.
  • A browser window opens automatically. Log in with the same email you used for your subscription.
  • Click Allow to authorize Claude Code.

Your terminal confirms the connection. You should see Claude Code's prompt waiting for input.

Anthropic 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 (replace your-api-key-here with the API key you saved earlier, keeping the quotes):
export ANTHROPIC_API_KEY='your-api-key-here'
  • Start Claude Code by running:
claude

Claude Code will ask if you trust the files in this folder. Select Yes, proceed since this is a dedicated project folder you just created.

Claude Code detects your API key and connects automatically. You should see Claude Code's prompt waiting for input.

Not seeing Claude Code's prompt?

If you see an authentication error, make sure your Claude subscription is active at claude.ai or that your API key is correct. For API users, check that you included the quotes around your key in the export command.

If Claude Code does not start at all, verify your installation by running claude --version in a new terminal tab.

Help me troubleshoot my Claude Code authentication.

  • Type /help and press Enter to explore the available commands.
  • Use your arrow keys to browse through the list of commands.
  • Press Esc to close the help menu.

What can you do with these commands?

You'll use several of these commands in the next step, including /init for project memory, /model for choosing your AI model, and /config for settings. For now, just get familiar with what's available.

Your workspace is set up and Claude Code is listening. Next up, you'll configure project memory and explore the settings that shape how Claude Code works.

Set Up Project Memory and Configure Settings

Claude Code is running and authenticated. The problem is that it has no idea what you're building.

Every time you start a new session, Claude Code starts from scratch unless you give it a memory file. A CLAUDE.md file acts as your project's persistent memory, telling Claude Code what you're building and which tools you're using. In this step, you'll create that memory file and configure Claude Code's key settings.

In this step, get ready to:
  • Create a CLAUDE.md project memory file using /init.
  • Choose your model with /model.
  • Explore /config for permission modes and check your context window with /context.
Create a CLAUDE.md project memory file

Claude Code reads a CLAUDE.md file at the start of every session. Anything you put in this file (project goals, conventions, preferences) persists across sessions. Without it, Claude Code starts fresh every time you open it.

  • Type /init and press Enter.

What does /init do?

Claude Code analyzes your project folder and generates a starting CLAUDE.md file. It looks for existing code to understand build commands, test instructions, and project conventions.

Since your folder is empty, the generated file will be minimal. You'll tell Claude Code what the project is about next.

Your folder is empty, so Claude Code needs you to describe the project. Tell Claude Code what you're building by typing the following message and pressing Enter:

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

What does this message do?

This tells Claude Code to edit the CLAUDE.md file and add your project description. Claude Code treats your messages as instructions. It figures out which files to edit based on what you ask.

  • Claude Code will ask for permission to edit the file. Accept the change by pressing y or Enter.
  • Open CLAUDE.md in your code editor's sidebar to review what Claude Code wrote.

You should see your project description included in the file alongside any boilerplate Claude Code added.

Don't see CLAUDE.md in your editor?

Make sure you accepted the file change when Claude Code asked for permission. If you declined it, type the same message again and accept this time.

If the file still doesn't appear in the sidebar, click the refresh icon in your editor's file explorer panel. The file lives in the my-portfolio folder at the top level.

Help me troubleshoot why CLAUDE.md isn't appearing in my editor after running /init

Choose your model

Claude Code can use different models depending on your task. For this project, Sonnet is a good balance of speed and capability.

  • Type /model and press Enter to see the available models.
  • Select sonnet from the list.
  • Press Esc to close the model selector.

Why Sonnet?

Sonnet is fast and capable enough for building a portfolio site. Opus is more powerful but slower and uses more tokens. Your model selection persists across restarts, so you only need to set this once.

Explore settings and check your context window

Claude Code has a few settings that control how it behaves. Let's review the most important ones so you know what's available.

  • Type /config and press Enter.

You'll see several settings. Here are the ones to notice:

  • Permission mode: Default (asks before every file edit), Auto-accept edits (applies changes without asking), or Plan mode (read-only analysis). Keep it on Default for now so you can review every change Claude Code makes.
  • Extended thinking is enabled by default. This helps Claude Code reason through complex tasks but uses more tokens. You can lower the effort level later with /effort if you want to save tokens on simpler tasks.
  • Press Esc to close the config menu.

Switch permission modes faster

During a session, press Shift+Tab to cycle through permission modes without opening /config. This is handy when you trust Claude Code's changes and want to speed things up temporarily.

Now check how much of your context window is in use.

  • Type /context and press Enter.

This shows how much of the context window you've used so far and what's taking up space. Right now it should be nearly empty since you've only created one small file.

What is a context window?

The context window is the total amount of text Claude Code can "see" at once during a conversation. It includes your messages, Claude Code's responses, and any files it reads.

As your session grows longer, the context fills up. The /context command helps you monitor this so you know when to start a fresh session.

Your project memory is set and Claude Code knows what you're building. Next up, you'll put it to work and build your portfolio website.

Build Your Portfolio

Your project memory is set up and Claude Code knows exactly what you're building. It's read your CLAUDE.md and understands this is a plain HTML and CSS portfolio site.

Now it's time to see Claude Code in action. You'll give it a single prompt, watch it generate your entire portfolio website, and then refine the result through conversation.

In this step, get ready to:
  • Prompt Claude Code to generate a complete portfolio website.
  • Preview the result in your browser and check token usage.
  • Personalize your design by iterating with follow-up prompts.
Prompt Claude Code to build your portfolio

Claude Code works by reading your natural language prompts and translating them into code. Your CLAUDE.md gives it the context it needs to make good decisions about file structure and styling.

  • Type the following message into Claude Code and press Enter:
Build me a single-page personal portfolio website with an About Me section, a Projects section, and a Contact Me section.

What happens next?

Claude Code reads your prompt, plans the file structure, and starts generating code. It creates two files: index.html for the page structure and styles.css for the design.

Before writing each file, Claude Code asks for your permission. This is because you left the permission mode on Default in the previous step.

  • Accept each file change when Claude Code asks for permission.
  • Watch the files appear in your code editor's sidebar in real-time.

You should see index.html and styles.css appear in your editor's file explorer.

Files not appearing in your editor?

  • Make sure you accepted the file changes when Claude Code asked for permission. If you rejected by accident, re-type the same prompt and accept this time.
  • Check that your code editor has the my-portfolio folder open as the workspace. If you opened a different folder, close it and open my-portfolio from your Desktop.

Ask for help: Claude Code asked for permission but I accidentally rejected it. How do I get it to regenerate the files?

Preview your site and check token usage

Your portfolio files exist on disk now. Time to see how they look in a browser.

  • Open a new terminal in your code editor by clicking the + button in the terminal panel.
  • Preview your portfolio in the browser by running this command:
open index.html

Your default browser opens with the portfolio page. Scroll through and confirm you see three sections: About Me, Projects, and Contact Me.

Seeing a blank page or file not found?

  • Make sure you're in the my-portfolio folder. Run ls and check that index.html is listed.
  • If index.html isn't listed, switch back to your Claude Code terminal and re-type the prompt.

Ask for help: I ran open index.html but I see a blank page or an error. What should I check?

Now check how many tokens Claude Code used to build your portfolio.

  • Switch back to your Claude Code terminal (the first terminal tab).
  • Check your session usage by typing this command and pressing Enter:
/usage

What does /usage show?

The /usage command shows your session's token usage statistics. You'll see how many input and output tokens Claude Code consumed, a cost estimate, and the session duration.

Extended thinking is enabled by default, which improves quality but uses more tokens. If you want to save tokens on simpler tasks later, you can lower the effort level with /effort.

Personalize your portfolio

Your portfolio has placeholder content right now. Claude Code remembers the full conversation, so you can send follow-up prompts to make changes without repeating the original request.

  • Try at least one of the following personalization prompts. Type it into Claude Code and press Enter:
Update the About Me section with: My name is [[YOURNAME="your name"]]. I am a [[YOURROLE="your role or title"]].
  • Accept the file change when Claude Code asks for permission.
  • Switch to your browser and refresh the page to see the update.

You can keep iterating. Here are two more prompts to try:

Add a link to my LinkedIn page in the Contact Me section with [[LINKEDIN_URL="your LinkedIn URL"]]
Update the color scheme to use a dark theme

How does iteration work?

Each prompt builds on the previous conversation. Claude Code remembers what files it already created and modifies them in place.

You don't need to re-describe the whole project each time. Just say what you want changed and Claude Code figures out which files to update.

  • Refresh your browser after each change to see the updates.
  • Keep experimenting until you're happy with the result.

Changes not showing in the browser?

  • Make sure you accepted the file change in Claude Code. If you see the permission prompt, select yes to apply it.
  • Hard-refresh your browser with Cmd+Shift+R to clear the cache.
  • Check that you're viewing the same index.html file. If you opened it from a different location, close the tab and run open index.html again from your my-portfolio terminal.

Ask for help: I accepted the changes in Claude Code but my browser still shows the old version. How do I fix this?

Your portfolio is built, personalized, and previewed. In the Secret Mission, you'll push Claude Code further with multi-step prompts and teach it your preferences through auto memory.

Secret mission

Multi-Step Iteration and Real Content

Your portfolio looks great, but the Projects section still has placeholder content. In this secret mission, you will add real project descriptions and push Claude Code further with multi-step prompts. You will also explore auto memory to teach Claude Code your personal style preferences.

Clean Up Your Resources

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 running, pause them to come back later, or delete them entirely.

Resources you used:

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

Keep everything running

No action needed. Choose this if you are still actively building your portfolio or plan to continue right away.

  • Your project folder stays on your Desktop.
  • Reopen anytime by navigating to the folder and running claude.
  • Claude Code reads your CLAUDE.md and auto memory to pick up where you left off.

Pause - I'll come back to this later

Exit your Claude Code session to free up your terminal. Your project files stay on your Desktop for when you return.

  • Press Ctrl+C or type exit to close your Claude Code session.
  • When you are ready to come back, open your terminal, navigate to ~/Desktop/my-portfolio, and run claude.

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 the project folder by running:
rm -rf ~/Desktop/my-portfolio
  • To uninstall Claude Code entirely (not recommended, it is useful for any project), run:
rm -f ~/.local/bin/claude && rm -rf ~/.local/share/claude

Nice Work!

Nice Work!

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

You've learned how to:

  • Build a portfolio website entirely through natural language prompts to Claude Code, reviewing and accepting file changes in real time.
  • Create a CLAUDE.md project memory file with /init to give Claude Code persistent context across sessions.
  • Navigate and configure Claude Code with commands like /model, /usage, /context, and /memory to manage your session and token budget.
  • Iterate with multi-step prompts and use auto memory to teach Claude Code your preferences.

Ready to quiz yourself?