Ask Knox

This is the capstone. You have installed Claude Code, run your first session, built a web page, understood context, learned the commands, and practiced debugging. Now you build something real — a portfolio page, from a blank folder to a live deployed URL — using every skill from this track.

No shortcuts. The full workflow. By the end of this lesson, you have shipped something.

Why a Portfolio Page

A portfolio page is the right first full project for three reasons.

It is personally meaningful. The content is about you. You are motivated to make it look good. That motivation makes you iterate harder, which makes you learn faster.

It is immediately sharable. You can send the URL to anyone. Employers, collaborators, friends. Real stakes create real investment.

It is achievable in one session. A portfolio page is complex enough to teach real skills but simple enough to complete start-to-finish in a few hours. You get the satisfaction of shipping without getting stuck for days.

Start today. Iterate later.

Phase 1: Plan (10 Minutes)

Before Claude touches a file, you need a plan. The plan lives in CLAUDE.md.

Create your project directory:

mkdir my-portfolio
cd my-portfolio
claude

In the Claude session, describe your project and ask it to create the CLAUDE.md:

I'm building a personal portfolio website. Here's the plan:

Name: [Your Name]
Role: [Your role or aspiration: "Full-Stack Developer", "Software Engineering Student", etc.]
Tech stack: Plain HTML, CSS, and vanilla JavaScript. No frameworks. Static files only.
Sections needed:
  1. Navigation (sticky, with links to each section)
  2. Hero (name, role, tagline, and a "Contact Me" CTA button)
  3. About (2-3 paragraphs about me)
  4. Projects (3 project cards with title, description, tech stack, and a link)
  5. Skills (a grid of technology icons/names)
  6. Contact (a simple form with name, email, message)
  7. Footer (copyright, social links)

Design: Dark theme. Background #0d1117, accent color #10B981 (emerald green), text white.
Font: Inter from Google Fonts.

Create a CLAUDE.md file with this context so you remember it throughout our session.

Claude creates CLAUDE.md. Read it. Edit any details that are wrong or missing. This file is your project's standing orders.

Phase 2: Initialize Git (5 Minutes)

Before any code is written, set up version control:

git init
git branch -m main

Then create a feature branch for this build:

git checkout -b feature/initial-build

Phase 3: Build Section by Section (30 Minutes)

Do not ask Claude to build the entire portfolio in one prompt. Build section by section. Review each section before moving on. This gives you tighter feedback loops and avoids building on a flawed foundation.

Start with the skeleton:

Create index.html with the basic HTML structure: DOCTYPE, head section importing Inter font from Google Fonts and linking style.css, and an empty body with placeholder div elements for each of these sections: nav, hero, about, projects, skills, contact, and footer.

Also create style.css with CSS reset, CSS custom properties for our colors and fonts (--color-bg: #0d1117, --color-accent: #10B981, --color-text: #ffffff, --color-muted: #94a3b8), and base body styles.

Preview the skeleton (it will be mostly empty) — just verify the structure is correct.

Build the navigation:

Build the navigation in index.html and style.css:
- Logo/name on the left (my name in emerald green)
- Nav links on the right: About, Projects, Skills, Contact
- Sticky positioning so it stays at top when scrolling
- Mobile: hamburger menu icon that toggles the nav links
- Add the JavaScript for the hamburger toggle in script.js

Preview. Check mobile by resizing the browser. Iterate if anything looks off.

Build the hero:

Build the hero section:
- Full viewport height (100vh)
- My name as the main headline (large, 56-64px)
- Role subtitle below in muted color
- A 1-2 sentence tagline about what I do
- "Contact Me" button in emerald green that scrolls to the contact section
- Subtle background: very faint grid pattern using CSS

Build the projects section:

Build the projects section with three project cards:
Project 1: "Weather Dashboard" — A web app that shows current weather for any city using the OpenWeather API. Tech: HTML, CSS, JavaScript.
Project 2: "Task Manager" — A to-do list with local storage persistence. Tech: HTML, CSS, JavaScript.
Project 3: "Portfolio Website" — This site! Built with Claude Code. Tech: HTML, CSS, JavaScript.

Each card should have: title, description, tech stack tags, and a "View Project" button (which links to # for now).

Continue this pattern for About, Skills, and Contact sections.

Phase 4: Iterate and Polish (20 Minutes)

Once all sections exist, do a full review pass. Open the page in your browser and look critically:

Does the navigation work smoothly?
Does the hero feel impressive or generic?
Are the project cards readable and well-spaced?
Does the page work on mobile? (Resize the browser to 375px width)
Is there visual hierarchy? Does your eye know where to look?

Every issue you notice becomes an iteration prompt:

The project cards have too much padding and the tech stack tags are hard to read.
Reduce card padding to 20px, make the tech stack tags use a darker background (#1e2a3a) with monospace font at 11px.

The hero section feels flat. Add a subtle animated gradient pulse behind the hero text — slow, using the accent color at 10% opacity.

The contact form submit button is not visually distinct. Make it full width, emerald green background with white text, 16px font, and add a hover state that darkens slightly.

Phase 5: Commit to Git (5 Minutes)

Your build is looking good. Commit the initial version:

git add .
git commit -m "feat: initial portfolio build — all sections complete"

Or ask Claude to do it:

Stage all files and commit with a descriptive message about the initial portfolio build.

Now merge to main:

git checkout main
git merge feature/initial-build

Phase 6: Deploy (10 Minutes)

Getting your portfolio live takes minutes with modern static hosting.

Option A: Vercel (recommended)

Push your repo to GitHub: gh repo create my-portfolio --public --push
Go to vercel.com and import your GitHub repository
Vercel detects a static site automatically. Click Deploy.
Your site is live at your-name.vercel.app in under 60 seconds.

Option B: Netlify

Go to netlify.com and drag your project folder into the deploy area
Netlify generates a URL immediately. No GitHub required.

Option C: GitHub Pages

Push to GitHub: gh repo create my-portfolio --public --push
Go to repo Settings → Pages → Source: Deploy from main branch
Live at your-username.github.io/my-portfolio

What You Have Just Learned

Step back and audit what this track has covered through this final project:

Technical skills:

HTML structure and semantic elements
CSS layout (flexbox, grid), custom properties, responsive design
JavaScript DOM manipulation, event listeners, form handling
Git version control (init, branch, add, commit, merge)
Deployment to a live URL

Claude Code workflow skills:

Starting a session and navigating to a project directory
Writing CLAUDE.md before writing code
Building iteratively section by section
Giving specific, effective task prompts
Reading and understanding tool calls
Using /clear and /compact to manage context
Debugging with the error → paste → diagnose → fix → test loop

Mental models:

The difference between a question and a task
How context windows work and why specificity matters
What the agent loop does on each tool call
Why CLAUDE.md is your most powerful productivity tool

The strength here is the workflow. The outside events — which AI model is best, which framework is trending — will shift constantly. The workflow you have built in this track does not.

Where to Go Next

This track is titled "Getting Started." You have started. Here is the continuation path:

Build more projects. The fastest way to develop fluency with Claude Code is to ship more things. A weather app, a budget tracker, a simple game. Each project reveals new patterns and new debugging challenges.

Learn to read the code Claude writes. Every session, spend five minutes reading one function Claude created and making sure you understand it. Over time, you develop real programming intuition alongside your Claude Code fluency.

Explore the other tracks. The AI Academy's Foundations and Infrastructure tracks cover the deeper architecture of AI systems — persistent agents, model routing, memory layers. These patterns apply to Claude Code at scale.

Build your own CLAUDE.md library. For each project type you work on (web apps, scripts, APIs), build a CLAUDE.md template that captures your conventions. Reuse it to start new projects faster.

Lesson 47 Drill

Your drill is the project itself. Finish the portfolio page if you have not already. Deploy it. Send the URL to one person — a friend, a family member, a potential employer. The external pressure of sharing makes you iterate harder on the final mile.

If you already have a deployed portfolio, use Claude Code to add one feature you have been avoiding: dark/light mode toggle, an animated typing effect in the hero, a contact form that actually sends email via a service like Formspree. Pick the thing that felt too hard before. Build it now.

Bottom Line

Your first full project follows six phases: plan with CLAUDE.md, initialize git on a feature branch, build section by section with focused prompts, iterate and polish with critical review, commit to git, and deploy to a live URL. The workflow you practiced in this track — specific prompts, context management, iterative building, debugging loops, and version control — is not beginner training to graduate from. It is the workflow. Professional developers using Claude Code use the same loop. You now use it too.

This is not the end of learning. It is the beginning of building.

Your First Full Project — Build a Portfolio Page