30 min / beginner / 6 steps
Ship a Landing Page in 30 Minutes
Go from empty folder to a live website on the internet. No coding experience required.
You don't need to know HTML. You don't need to know CSS. You don't need a framework. You just need Claude Code and an idea. In 30 minutes, you'll have a real website live on the internet. Let's build it.
follow along in
You need: A Claude account. Open claude.ai in a browser, or the Claude desktop app.
step 01 / 06
Create a new folder
Start fresh. Create a brand new folder for your project. This is going to be your portfolio site.
PromptPaste into ClaudeI want to build a personal portfolio landing page. What information do you need from me?what you should see
Create a new foldermy-projectShareDescribe a task or ask a question+Accept editsstep 02 / 06
Start Claude Code
Just type claude. That's it. You're now in a conversation with an AI that can create files, run commands, and build things.
PromptPaste into ClaudeMy name is Alex Rivera. I'm a UX designer. I want a dark portfolio with a hero, projects grid (3 cards), and a contact section. Minimal and clean.what you should see
Start Claude Codemy-projectShareDescribe a task or ask a question+Accept editsstep 03 / 06
Describe what you want
Here's the fun part. Just tell Claude what you want in plain English. Be specific about sections and style. Claude will figure out the code.
PromptPaste into ClaudeCreate a beautiful landing page for a personal portfolio with: - Dark mode by default - Hero section with my name and a tagline - About me section with a brief bio - Projects grid showing 3 placeholder projects - Contact form with email and message fields - Responsive design that works on mobile - Modern, clean aesthetic with subtle animationswhat you should see
Describe what you wantmy-projectShareDescribe a task or ask a question+Accept editsstep 04 / 06
Watch Claude create the files
Claude will create an HTML file, a CSS file, and maybe a small JavaScript file. You'll see each file being created in real time. Don't worry about understanding the code, you can always ask Claude to explain any part.
what you should see
Watch Claude create the filesmy-projectShareDescribe a task or ask a question+Accept editsstep 05 / 06
Open it in your browser
Time for the big reveal. Open the HTML file directly in your browser, or use a quick local server for the full experience.
PromptPaste into ClaudeHow do I preview the files you just gave me?what you should see
Open it in your browsermy-projectShareDescribe a task or ask a question+Accept editsstep 06 / 06
Deploy to Vercel (optional)
Want it on the real internet with a real URL? One command. Vercel will give you a free .vercel.app domain instantly.
PromptPaste into ClaudeI'm happy with how it looks. How do I put it on the internet?what you should see
Deploy to Vercel (optional)my-projectShareDescribe a task or ask a question+Accept edits
Tell someone what you built
Just finished "Ship a Landing Page in 30 Minutes" on Claude Code Guide. Took about 30 min, and it's free: https://claudecodeguide.dev/tutorials/ship-a-landing-page
New guides, when they ship
One email, roughly weekly. CLAUDE.md templates, workflows I actually use, and the cut-for-length stuff that does not make the public guides. One-click unsubscribe.
Or read Product Field Notes, the Substack