Build Your First Portfolio Website with Claude Code

Last updated: July 2026

In this guide you will build a website with Claude Code from an empty folder to a live URL, even if you have never written a line of code. By the end you will have a clean, fast one-page portfolio that shows off your projects, running on the public web, that you can update by just telling Claude what to change. One of my students is doing exactly this right now, building a site to show the Python and machine learning projects we have worked through together.

What you need before starting

• A paid Claude plan with Claude Code installed
• A folder on your computer for the project
• A few real things to show: projects, writing, anything you have made
• About two hours, and no prior web experience required

Step 1: Make the project and give Claude its context

Create an empty folder and a CLAUDE.md so Claude knows what you are building before it writes anything.

mkdir my-portfolio
cd my-portfolio

Then create a CLAUDE.md file with a few lines of context. This is the single highest-leverage thing you can do, and it is worth understanding what a CLAUDE.md file is before you start:

# Project
A personal portfolio website. One page, fast, clean, mobile-friendly.

# Stack
Plain HTML and CSS only. No frameworks. A beginner should be able to read it.

# Voice
Professional and warm. Short sentences. No buzzwords.

Checkpoint: Your folder contains a CLAUDE.md file, and nothing else yet.

Step 2: Tell Claude Code what to build

Open Claude Code in the folder and describe the site in plain language. Be specific about structure, not style:

Build a one-page portfolio website as a single index.html plus a style.css.
Three sections: a short intro at the top, a Projects grid in the middle, and
a contact link at the bottom. Make it responsive and fast. No frameworks.

Claude Code will create the files and explain what it made.

Checkpoint: Your folder now has index.html and style.css, and Claude has told you what each section does.

Step 3: Put your real projects in

A template with placeholder text is not a portfolio. Hand Claude the real content and let it slot it in:

In the Projects section, replace the placeholders with these four projects.
For each: a title, one sentence on what it does, and a link.
1. Sales dashboard, a Python tool that charts monthly sales, [link]
2. ...

Replace the list with your own. The more specific and real your content, the less generic the result looks.

Checkpoint: The Projects section shows your actual work, not the placeholder text.

Step 4: See it on your own machine

Before you put it online, look at it locally. From inside the folder:

python -m http.server 8000

Open http://localhost:8000 in your browser. If you do not have Python, ask Claude Code for the one-line alternative for your setup.

Checkpoint: Your portfolio loads in the browser and looks right on both a wide window and a narrow one.

Step 5: Put it on the public web for free

The simplest no-tools route: go to Netlify Drop and drag your project folder onto the page. It uploads and hands you a live URL in seconds. If you prefer the command line, Claude Code can walk you through deploying with Vercel instead:

npx vercel

Follow the prompts to log in and deploy. Either way, you end with a real URL you can send to anyone.

Checkpoint: Your site is live at a public URL, and it loads for someone who is not on your computer.

Step 6: Point your own domain at it (optional)

A custom domain makes it yours. Buy one from any registrar, then in your host's dashboard add the domain and follow the DNS steps it gives you. Ask Claude Code to explain any step that is unfamiliar, in plain language, before you click.

Checkpoint: Visiting your custom domain shows your portfolio.

Where this breaks

You ask for too much at once. The fastest way to a broken first build is "make it look like a startup landing page with animations and a blog and dark mode." Get one clean page live first, then add. Scope creep is the number one thing I watch stall beginners.

The deploy step fails on a config detail. Free hosts occasionally need a setting (a build command, a folder to publish). When the error appears, paste it straight back to Claude Code and ask what it means. The error message is almost always the answer.

Your images are huge. A 12-megabyte photo will make the page crawl. Ask Claude Code to resize images before you deploy, or use smaller ones to begin with.

It looks generic. That is a content problem, not a code one. Real project descriptions, a real photo, and a sentence in your own voice fix it faster than any amount of styling.

What to build next

Once the site is live, the natural next step is giving it something to show. Adding a small project you built yourself, like a first RAG app, turns a portfolio into proof. And if you want to go beyond a static page later, the Claude Code tutorial covers the more capable builds.

If you want to build this with someone watching your screen and unblocking you the moment something breaks, that is exactly what my sessions are. Book a free Discovery Call and bring the projects you want to show off.

These tutorials come from the actual curriculum I teach 1-on-1. Every step here I have run myself before publishing it.