Get Started with Claude Code

Build a personal portfolio website using Claude Code in your terminal.

Introduction

This project has been archived

We're no longer updating this project - we recommend checking out our active projects instead!

If you've already completed this project, don't worry! Your documentation is still available for you to check out and share.

If you have any questions, leave a question in our Discord and we'll get back to you ASAP!

⚡️ 30 Second Summary

What if you could build an entire website just by having a conversation with AI?

This project is your introduction to Claude Code. You'll learn how to plan, build, and iterate with it by creating a personal portfolio website using plain HTML and CSS.

What You'll Build

A personalized single-page portfolio website with an About Me section, Projects section, and Contact Me section, built entirely through conversations with Claude Code in your terminal.

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

  • 🧠 Claude Code installed and configured on your machine, with project memory, model settings, and permission modes.
  • 🌐 A personal portfolio website with an About Me section, Projects section, and Contact Me section.
  • 💎 Secret Mission: Add real project content to your portfolio using @ folder references.

Want a complete demo of how to do this project, from start to finish? Check out our 🎬 walkthrough with Maya

Do I need to pay to do this project?

Yes. Claude Code requires one of the following:

  • A Claude Pro ($20/mo) or Max ($100/mo) subscription, OR
  • An Anthropic Console account with API credits (pay-as-you-go, ~$6/day average)

This project includes instructions on setting up an active subscription or funded Console account.

Not sure if this project is right for you? Check if it matches your goals

If you're up for a bit of a challenge, quiz yourself on the key concepts up ahead in this project.

Set Up Claude Code

Claude Code is an AI coding agent that lives in your terminal. It's different from Claude.ai (the chatbot you might have used before). Instead of just chatting, Claude Code can actually create files, run commands, and edit your code.

In this step, you'll install Claude Code, open your code editor, and see how Claude Code responds when it doesn't have any project context.

In this step, get ready to:

  • Install Claude Code.
  • Set up your Claude account or API credits.
  • Open a code editor with an integrated terminal.
  • Start Claude Code and see what happens without a project folder.

Install Claude Code

Claude Code is installed as a native binary, so it's a single command!

🍎 macOS / Linux

  • Open your terminal.
  • Copy & paste the following command:
curl -fsSL https://claude.ai/install.sh | bash
  • Press Enter.

🖼️ Windows

Claude Code on Windows requires Git Bash, which comes with Git for Windows. Let's check if you have it, then install Claude Code.

  • Open PowerShell and run:
git --version

If you see something like git version 2.x.x, you're good to go.

Already have Git?

If git --version printed a version, skip to the next step.

Install Git

  • Run the downloaded installer.
  • If you see a security warning, click Run.

Walk Through the Setup Wizard

The default settings are fine for most screens. Here's what you'll see:

  • Accept the license agreement and click Next.
  • Leave the destination as C:\Program Files\Git and click Next.
  • Leave the default components selected and click Next.
  • Leave the Start Menu folder as Git and click Next.
  • Leave the default editor setting and click Next.
  • Leave "Let Git decide" selected for the initial branch name and click Next.
  • On the "Adjusting your PATH environment" screen, make sure "Git from the command line and also from 3rd-party software" is selected. Click Next.

Why does the PATH setting matter?

This option lets you run git from PowerShell and other programs, not just Git Bash. Claude Code needs this to work correctly.

  • Leave "Use bundled OpenSSH" selected and click Next.
  • Leave the HTTPS transport backend setting and click Next.
  • Leave the terminal emulator setting and click Next.
  • Leave the default git pull behavior and click Next.
  • Leave "Git Credential Manager" selected and click Next.
  • Leave the extra options as-is and click Install.
  • Wait for the installation to finish.
  • Click Finish.
  • Verify Git Bash is installed by opening PowerShell and running:
git --version

You should see something like git version 2.x.x.

Install Claude Code

  • In the same PowerShell window, copy & paste the following command:
irm https://claude.ai/install.ps1 | iex
  • Press Enter.

What does this command do?

irm downloads the installer script and iex executes it. This installs Claude Code as a standalone program on your machine. Claude Code uses Git Bash under the hood to run commands, which is why Git for Windows is required. Read more in the official docs.

💡 Prefer WSL?

If you have Windows Subsystem for Linux (WSL) set up, you can install Claude Code inside WSL using the macOS/Linux command instead. WSL 2 also enables sandboxing for enhanced security.

  • Verify the installation by running:
claude --version

✔️ I see a version number

You should see something like claude 2.1.x. The exact version may differ. Claude Code is installed!

ⓧ Command not found

🍎 macOS / Linux

Did your installer show a Setup notes warning?

  • Run the following commands to fix it:
echo 'export PATH="$HOME/.local/bin:$PATH"' >> ~/.zshrc
source ~/.zshrc
What does this command do?

The first line adds ~/.local/bin (where Claude Code lives) to your PATH permanently by writing it to your shell config file. The second line reloads the config so the change takes effect right away.

🙋‍♀️ Using bash instead of zsh?

Replace ~/.zshrc with ~/.bashrc in the commands above. Not sure which shell you're using? Run echo $SHELL to find out.

🖼️ Windows

  • Close your PowerShell window and open a new one. The installer updates your PATH, but existing terminals won't see the change until restarted.
  • If it still doesn't work, try running the installer again:
irm https://claude.ai/install.ps1 | iex
  • Verify the installation again by running:
claude --version

Still stuck?

Get help with your error or share your error with the NextWork community!

Set Up Your Claude Account

Claude Code needs a paid account to run. You can use either a Claude subscription or Anthropic API credits.

Why does Claude Code cost money?

Claude.ai (the chatbot) and Claude Code both use tokens to process your messages. The difference is how many tokens they use. A chatbot conversation is short and lightweight. Claude Code reads your entire project, writes full files, and runs commands, so it uses significantly more tokens per session. A paid account gives you the token budget Claude Code needs to do its job.

✔️ I already have one of these

You're all set! You'll connect Claude Code to your account in the next step.

🤔 Help me decide

There are two ways to pay for Claude Code:

Which option should I choose?

If you're new to Claude, start with a Pro subscription. You get Claude Code plus the Claude.ai chatbot, all in one plan.

If you only want to try Claude Code for this project, API credits let you pay for exactly what you use.

📋 Set up a Claude subscription

Claude Code works with a Claude Pro ($20/mo) or Max ($100/mo) subscription. Here's how to set one up:

  • Click Sign Up and create an account with your email or Google account.
  • Once logged in, click Upgrade in the center of the page.
  • Select the plan of your choice.
  • Choose either monthly or yearly billing.
  • Enter your payment details.

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

🪙 Set up Anthropic API credits

Claude Code also works with pay-as-you-go API credits (~$6/day average). Here's how to set them up:

  • Go to console.anthropic.com in your browser.
  • Sign in, or create an account with your email or Google account.
  • Once logged in, select Buy credits in the center of the Claude Console.
  • Add credits to your account. $5-10 is more than enough for this project.
  • Click Add Payment Method.
  • Enter your payment details.
  • Go to API Keys in the left sidebar.
  • Click Create Key.
  • Give it a name (e.g., "claude-code").
  • Copy the key.
  • Save the key somewhere safe. You'll use it in the next step.
Free credits for new accounts

New Console accounts sometimes get $5 in free credits, enough to complete this entire project. Check your Billing page after signing up.

Open Your Code Editor

You'll need a code editor with an integrated terminal. The terminal is where Claude Code runs, and the editor is where you'll see the files it creates in real-time.

✔️ Already have an editor

  • Open your code editor (VS Code, Cursor, or any editor with an integrated terminal).

🆕 Need to install?

No worries. The NextWork team loves Cursor, so let's get you set up with our favorite editor!

🍎 macOS

  • Download the macOS installer
Not sure what to choose?

On a Mac you may need to know your chip architecture (e.g., Apple Silicon, Intel) to select the correct version.

You can find this by selecting the Apple Menu > About This Mac.

🖼️ Windows

  • Download the Windows installer.
  • Once the download is complete, open your Downloads folder.
  • Click the CursorUserSetup...exe file.
  • You might see a security warning since it's an app downloaded from the internet. This is normal!
  • Select Run to proceed.
  • The setup wizard will start.
  • Accept the license agreement.
  • Select Next.
  • Choose the destination location for the installation. The default is usually fine.
  • Select Next.
  • Choose the Start Menu folder. Again, the default is fine.
  • Select Next.
  • In the Select Additional Tasks screen, we recommend keeping the default options checked:
    • Register Cursor as an editor for supported file types
    • Add to PATH
  • Select Next.
  • You're now ready to install.
  • Select Install.

🍎 macOS

  • Once the download is complete, open your Downloads folder.
  • Click the Cursor .dmg file.
  • Then, drag the Cursor application into your Applications folder to complete the installation.
  • Open your Applications folder.
  • Click on the Cursor icon to open it.
  • You might see a security warning since it's an app downloaded from the internet. This is normal!
  • Select Open to proceed.

Nice! You've successfully installed Cursor.

🖼️ Windows

  • Once the installation is complete, ensure Launch Cursor is checked.
  • Select Finish.

Nice! You've successfully installed Cursor.

Start Claude Code for the First Time

Let's try starting Claude Code for the first time and see what happens.

  • In the integrated terminal, type:
claude
  • Press Enter.

Claude Code will ask if you trust the files in this folder.

Don't accept this! Your terminal is in your home directory right now, which means Claude Code would have access to a lot of files.

  • Select No, exit.

Why does Claude Code ask about trust?

Claude Code can read and write files in the folder you start it in, including all subfolders. Your home directory contains personal files, configurations, and more. You should only trust Claude Code in a dedicated project folder where its access is limited to just your project files. That's exactly what you'll set up next!

Claude Code is installed, but you need a dedicated project folder before you can safely start it. Next, you'll create one!

Set Up Your Work Environment

We saw that Claude Code asks for trust before it can access your files. You declined because your home directory is too broad. Now you'll create a dedicated project folder so Claude Code only has access to your project files.

In this step, get ready to:

  • Create your project folder.
  • Start Claude Code and authenticate.
  • Have your first conversation with Claude Code.

Create Your Project Folder

  • In the integrated terminal, navigate to your Desktop first:
cd ~/Desktop
  • Press Enter.
  • Now create your project folder:
mkdir my-portfolio && cd my-portfolio
  • Press Enter.

What do these commands do?

cd ~/Desktop moves you to your Desktop folder so your project is easy to find.

mkdir my-portfolio creates a new folder called my-portfolio.

cd my-portfolio moves you into that folder. This is where all your portfolio files will live.

Start Claude Code in Your Project Folder

  • Start Claude Code:
claude
  • Press Enter.

This time, Claude Code asks if you trust the files in this folder again. Now you're in my-portfolio, a dedicated project folder.

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

Claude will ask you to log in.

🔑 Claude Pro / Max subscription

  • Select Use Claude.ai account (OAuth) when prompted.

A browser window opens automatically.

  • Log in with the same email you used for your Claude subscription.
  • Click Allow to authorize Claude Code.

Your terminal will confirm the connection once you've authorized in the browser.

🪙 Anthropic API credits

  • Before running claude, you need to set your API key. In your terminal, run:
export ANTHROPIC_API_KEY='your-api-key-here'
  • Replace your-api-key-here with the API key you saved earlier (keep the quotes).
  • Press Enter.
  • Now run claude.
claude

Claude Code detects your API key and connects automatically.

Every message you send costs tokens (like credits). Don't worry, you'll check your usage later with /cost.

✔️ I'm authenticated

Yay! Let's go!

ⓧ Authentication failed

That's okay! Let's troubleshoot:

  • Make sure you have an active Claude Pro or Max subscription, or have loaded credits in your Anthropic account.
  • Check that your ANTHROPIC_API_KEY environment variable is set correctly.
  • Try running claude again and complete the browser authentication flow.
  • Check that your browser didn't block the popup.

Still stuck?

Get help with your error or share your error with the NextWork community!

Now let's see what Claude Code can do. Type the following message:

What can you help me build?
  • Press Enter.

Notice how Claude Code responds based on your actual project folder. It recognizes you're in an empty project folder and gives suggestions that are relevant to building something here. This is what makes Claude Code different from a regular chatbot like Claude.ai. Claude.ai only knows what you tell it in the chat. Claude Code knows your entire project.

  • Type /help and press Enter to explore the available commands.
  • Use your arrow keys (right, left, up and down) on your keyboard to go through all the claude commands.

What should I see?

You'll see a list of commands including /init, /cost, /context, /clear, and more.

These are the commands you'll use today to work with Claude Code.

  • When you're ready, press the Esc key to exit the Help dialog.

You've set up your workspace and had your first conversation with Claude Code. But Claude Code doesn't have persistent memory yet. If you exit and come back, it won't remember anything about your project. Next, you'll fix that and configure how Claude Code works!

Configure Claude Code

Claude Code knows your project folder, but if you exit and come back tomorrow, it starts fresh. You can also choose which AI model powers it, how deeply it thinks, and how much autonomy it has over your files.

In this step, you'll give Claude Code persistent memory and configure these settings before you start building.

In this step, get ready to:

  • Set up project memory with CLAUDE.md.
  • Configure your model, thinking mode, and permission modes.
  • Check your context window.

Set Up Your Project Memory

Claude Code has a special file called CLAUDE.md that acts as project memory. The more context you put in it, the better Claude Code performs.

  • Type /init and press Enter.
  • In the Claude Code terminal, type the following message:
Create CLAUDE.md to include this line: "This is a single-page personal portfolio website built with plain HTML and CSS. No frameworks."
  • Press Enter.
  • Accept the file change when Claude Code asks for permission.
  • Open the CLAUDE.md file in your editor and review what Claude Code wrote.

Why use CLAUDE.md?

Claude Code reads CLAUDE.md at the start of every session. If you come back tomorrow to iterate on your portfolio, it already knows what the project is about. No need to re-explain anything. What else should I put in CLAUDE.md?

Explore Claude Code Settings

Claude Code lets you choose which AI model powers your responses and how deeply it thinks through problems.

  • Type /model and press Enter to see the available models.

Which model should I use?

More powerful models cost more tokens per message. Haiku is the fastest and cheapest. Sonnet balances speed and capability. Opus is the most powerful and most expensive. Anthropic releases new models regularly, so the options may change. /model always shows what's currently available.

  • Select Haiku for this project. It's the cheapest option and more than capable for building a portfolio site.
  • Press Esc to close the model selection.

Configure Thinking Mode

  • Type /config and press Enter.

Claude Code has a thinking mode that makes it reason step-by-step before responding. This is useful for complex tasks but uses more tokens.

  • Find the thinking mode toggle and make sure it's off for now. You don't need it for this project.

When should I turn on thinking mode?

Thinking mode uses extra tokens for reasoning on every message. It helps with complex debugging or architectural decisions, but for straightforward tasks like building a portfolio, keeping it off saves tokens.

The /config menu also lets you control how much autonomy Claude Code has over your files. There are three permission modes:

  1. Default: Claude asks before every file edit. You review and approve each change.
  2. Auto-accept edits: Claude applies file changes without asking. Good for trusted iteration when you're in the flow.
  3. Plan mode: Read-only. Claude analyzes your code and plans but cannot modify any files.
  • Make sure the permission mode is set to Default before continuing.

Which mode should I start with?

Start with Default mode. It lets you review every change Claude Code makes. Once you're comfortable and trust the workflow, you can switch to Auto-accept edits to move faster. Use Plan mode when you want Claude Code to analyze without changing anything.

  • Press Esc to close the config menu.

Check Your Context Window

As you chat with Claude Code, it holds your conversation and file contents in a context window. Let's see what it looks like so far.

  • Type /context and press Enter.

How do I read this?

The output shows something like 17k/200k tokens (8%). This tells you how much of the context window you've used. The breakdown lists what's taking up space: system tools, your CLAUDE.md, and your conversation so far. As you work, the percentage grows. Don't worry about running out. Claude Code automatically compacts your conversation to free up space when needed.

You've given Claude Code persistent memory and learned how to control its behavior. Now you're ready to build!

Build Your Portfolio

You've set up your workspace, given Claude Code project memory, and configured how it works. Now it's time to put it all together and build your portfolio!

In this step, get ready to:

  • Ask Claude Code to build your portfolio.
  • Check your token usage with /cost.
  • Preview and refine your design.

Build Your Portfolio

  • Type the following message:
Build me a single-page personal portfolio website with an About Me section, a Projects section, and a Contact Me section.
  • Press Enter.
  • Accept each file change when Claude Code asks for permission to create files.
  • Look for the files appearing in your code editor in real-time: index.html and styles.css.

Let's see what Claude Code built! Preview your portfolio in the browser.

🍎 macOS

  • In the terminal, run:
open index.html

🖼️ Windows

  • In the terminal, run:
start index.html

🐧 Linux

  • In the terminal, run:
xdg-open index.html

Your portfolio website opens in the browser!

  • Scroll through the sections: About Me, Projects, and Contact Me.

Pro tip

Quick preview

You can also right-click index.html in the file tree and select Open in Browser or Reveal in Finder to open the file.

Check Your Token Usage

You've been chatting with Claude Code for a while now. Let's see how many tokens you've used.

  • Type /cost and press Enter.

What does /cost tell me?

/cost displays your current session's token usage, total cost, and duration.

If you're on a Pro or Max subscription, /cost won't show billing details since your subscription covers usage.

You can also run /context again to see how the context window has grown since you started building. How do I manage a long conversation?

Refine Your Design

Your portfolio is built, but it might not be perfect yet. That's expected! The real power of Claude Code is iteration. You can keep refining until you're happy.

Options to try: - [ ] Personalize your About Me.

Update the About Me section with the following information:
My name is [[YOURNAME="enter your name"]].
I am a [[YOUR_PROFESSION="enter your profession"]].
When I'm not [[YOUR_DAILY_WORK="describe what fills your workday, e.g. writing code"]],
you can find me [[YOUR_HOBBIES="enter your hobbies"]].
  • Add links to your LinkedIn, GitHub or other social media accounts:
Add a link to my LinkedIn page in the Contact Me section
with [[LINKEDIN="https://linkedin.com/in/yourname"]]
  • Change the color theme:
Update the color scheme to be darker
  • Refresh the browser after each change to see your updates!

Secret mission

Your portfolio looks great, but the Projects section still has placeholder content! In this secret mission, you'll add real project descriptions and let Claude Code update the Projects section for you.

Add Real Projects

Clean Up Your Resources

Clean Up Your Resources

Now that you've built your portfolio website with Claude Code, let's wrap up your session and review the resources on your machine.

Your portfolio is worth keeping!

Your portfolio website and CLAUDE.md file are portfolio-worthy work! Consider keeping them to showcase your Claude Code skills to employers.

Resources to manage:

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

Before you clean up, run /cost one final time to see your total token usage for this session.

🟢 Keep everything

Your portfolio files and Claude Code are stored locally on your machine. There are no ongoing costs and no cloud resources to worry about.

  • Exit Claude Code by pressing Ctrl+C or typing exit.
  • Your project folder and all files stay on your machine, ready for future edits.

No other action needed. Keep building!

What's next?

Your portfolio lives on your machine. Want the world to see it? Try deploying it to GitHub Pages to get a live URL. Want a guided project on deployment? Let us know in the NextWork community!

🟡 Exit Claude Code but keep files

If you're done for now but want to keep your portfolio for later:

  • Exit Claude Code by pressing Ctrl+C or typing exit.
  • Your project folder stays on your machine. You can reopen Claude Code anytime by navigating to your project folder and running claude.
  • Claude Code will read your CLAUDE.md file and pick up right where you left off.

🔴 Delete everything

If you're completely done with this project:

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

🍎 macOS / Linux

rm -rf ~/my-portfolio

🖼️ Windows

Remove-Item -Recurse -Force "$env:USERPROFILE\my-portfolio"
  • To uninstall Claude Code:
rm -f ~/.local/bin/claude && rm -rf ~/.local/share/claude

Should I uninstall Claude Code?

Claude Code is a general-purpose tool you can use for any project. We recommend keeping it installed even if you delete this project's files.

That's a wrap!

That's a wrap!

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

You've learned how to:

  • 🛠️ Install Claude Code and authenticate with your Claude subscription.
  • 📝 Create a CLAUDE.md project memory file with /init to give Claude Code persistent context.
  • ⚙️ Configure Claude Code with /model, thinking mode, and permission modes (Normal, Auto-accept edits, Plan).
  • 🔍 Use /help, /cost, /context, and /clear to navigate and manage your Claude Code session.
  • 🏗️ Build a portfolio website by prompting Claude Code and reviewing file changes.
  • 💎 Add real project content with @ folder references (Secret Mission).

Congratulations!

You now have the skills to use Claude Code for any project. Whether you are building a web app, writing scripts, or setting up infrastructure, the workflow is the same: give Claude Code context, then build.

Ready to quiz yourself? 💪

What's next?

Your portfolio lives on your machine. Want to take it further?

  • Deploy to GitHub Pages - Get a live URL for your portfolio that recruiters can actually visit.
  • Build with MCP Servers - Connect Claude Code to external tools and APIs using the Model Context Protocol.

Want a guided project on deployment? Let us know in the NextWork community!

p.s. Does it say "Still tasks to complete!" at the bottom of the screen?

This means you still have screenshots left to upload, or questions left to answer!

  1. Press Ctrl+F (Windows) or Command+F (Mac) on your keyboard.
  2. Search for the text Return to later.
  3. Jump straight to your incomplete tasks!
  4. 🙋‍♀️ Still stuck? Ask the community!