No coding experience needed. You describe what you want. Claude writes the code. You end up with a real, live website.
Genuinely just these three things. Nothing to install, nothing to pay for.
Follow along in Claude as you read. Each step has a prompt you can copy straight in.
Go to claude.ai, click New Chat, and paste this prompt. Replace the bits in brackets with your own details — be as specific as you like.
I want to build a personal portfolio website as a single, self-contained HTML file. I'm [your job or role] based in [your city]. My style is [describe your personality — bold, minimal, warm, quirky, etc.]. I want visitors to immediately understand who I am and what I do. Before you build anything, ask me a few questions to understand what I need.
After Claude's questions, describe the visual feel. Don't worry about technical terms — just talk the way you would to a designer. Mood, colours, vibe, references.
For the visual style: I want a dark background with one strong accent colour — maybe [pick one: burnt orange / deep teal / warm gold / dusty rose]. Big typography that feels editorial and confident. Plenty of white space. Subtle animations when you scroll. Think high-end creative studio, not a generic template. Use Google Fonts — something with personality, not Arial.
Now ask Claude to build it. Be specific: you want everything in one file, no extra setup, and you want to be able to open it directly in your browser.
Please build the homepage now as a complete, self-contained HTML file. Put all CSS and JavaScript inside the same file — no external dependencies except Google Fonts. Include: a hero section with my name and a one-line tagline, a short about section (2–3 sentences), a 3-item portfolio grid with placeholder images, and a contact section with my email address.
Open your file. Look at it. What do you love? What feels off? Now go back to Claude and tell it — but be specific. Vague feedback gets vague results.
Make it look better. The colours feel off and it doesn't really match my vibe.
The hero section looks great — keep that exactly. But the portfolio grid feels too cramped. Increase the gap between cards to 40px and add a soft shadow to each card. Also the font in the About section is too small — bump it to 18px minimum. Keep everything else identical.
Once the layout feels right, ask Claude to bring the page to life. Effects that would take a developer hours come in seconds with a single prompt.
Now add some life to the page: 1) Fade-in animations for each section as the user scrolls — use the Intersection Observer API. 2) On the portfolio cards, a smooth colour overlay on hover that reveals a "View Project" label. 3) A subtle parallax drift on the hero background. Keep everything tasteful — nothing jarring or distracting.
Replace the placeholder content with your actual details, then put it on the internet. It takes about 30 seconds with Netlify Drop — no account needed.
Here's my real content to replace all the placeholders: [paste your name, job title, bio, 3 project names and descriptions, email address]. Also please add proper meta tags for SEO and social sharing (og:title, og:description, og:image). Finally, add a small "Built with Claude" credit in the footer.
Every Vibe Coder hits these. They're not failures — they're part of the process. Here's exactly what to say.
You asked to fix the footer and Claude redesigned half the page.
Keep everything else exactly as it is. If it still happens, paste the whole current file back and say only change X, nothing else.You saved the file and opened it but nothing renders properly.
The page is blank in my browser. Please check for any unclosed tags or missing code and give me the complete corrected file.You've asked three times and it's still not right.
I do NOT want X. I do NOT want Y. I just want Z — simply and nothing else.Claude is forgetting earlier decisions and contradicting itself.
Here is my current site. This is our starting point. Continue building on this exact code.The layout falls apart on a phone screen.
Please audit every section for mobile at 375px width and fix any issues. Keep the desktop layout completely unchanged.Claude rewrote something and you liked the old version better.
Tick each one as it clicks. Your progress is saved — come back anytime.
No developer. No agency. No coding background. Just a clear idea, Claude, and a few afternoons. Here's what's possible once you know the fundamentals.
A professional-grade RV solar system sizing tool covering 12V, 24V and 48V systems — with ABYC-standard wire sizing, a solar generator finder, live system diagrams, and real 30-day weather simulation from Open-Meteo data.
A pair of Australian road trip logging apps — one for petrol/diesel vehicles, one for EV/PHEV/ICE. Log fuel stops, expenses, and charging sessions. Works fully offline. No account. No tracking. Data stays on your device.