Website Creation · Lesson 5 of 7
Building a Portfolio Site with Claude
Step-by-step: from blank page to a real portfolio you can show clients.
After This Lesson, You Will Be Able To
Use Claude to generate the full HTML/CSS for a portfolio site, customize it, and understand how to iterate with AI when the output isn't right.
Why Claude for Portfolio Building
The key is specificity. The more detail you give about your brand, your work, and your style preferences, the better the output. Vague prompts get generic portfolios.
What to Prepare Before Prompting
Your name and what you do
One sentence. 'I'm a Filipino freelance graphic designer specializing in brand identity for small businesses.'
3–5 portfolio pieces with descriptions
Title, what you did, tools used, and the result. Even rough bullet points work.
Your contact method
Email, Upwork link, or Calendly — whatever you want people to use.
Color/style preference
Dark or light? Minimal or bold? One accent color? Give Claude a reference if you have one.
The Portfolio Build Workflow
Step 1: Generate the full site
Give Claude your prepared info and ask for a complete single-page HTML portfolio with inline CSS. Ask for responsive design.
Step 2: Copy the code into a file
Save it as index.html. Open it in your browser to preview. Check layout, colors, and content.
Step 3: Iterate with specific requests
Don't like the font? Say so. Hero too tall? Ask Claude to adjust the padding. Be specific about what to change.
Step 4: Deploy
Drag the file onto Netlify Drop or upload to Vercel. You get a live URL in seconds — free.
Exercise
~10 minutes · ChatGPT or Claude
Prompt to use
Build me a single-page HTML portfolio website with inline CSS. I'm [your name], a [your profession]. My style preference: [dark/light, minimal/bold, accent color]. My portfolio pieces are: [list 3-5 projects with brief descriptions]. My contact info is [your preferred contact]. Make it mobile-responsive, include a nav, hero section, portfolio grid, and contact section. Clean, professional, no external dependencies.
After building this, what's one thing you would do differently on your next project? How did knowing what you wanted before prompting affect the quality of Claude's output?
Key Takeaways
Claude can generate a complete portfolio in one prompt — if you give it enough specific detail.
Iteration is the skill. Don't expect perfection on the first pass. Work with Claude to refine.
Deploying on Netlify or Vercel takes less than 5 minutes and costs nothing for a basic site.
A live portfolio URL is worth more than a perfect offline one. Ship first, improve after.
Add one real project to your portfolio tonight.
Don't wait until you have 10 pieces. Add the one project you're most proud of right now. A real live portfolio with 1 piece beats a perfect imaginary one with 10.
Next Lesson
SEO Basics Built Into Your Site from Day One
Website Creation · Lesson 6 of 7 · 10 min