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.

  1. 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.

    Prompt
    I want to build a personal portfolio landing page. What information do you need from me?

    what you should see

  2. step 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.

    Prompt
    My 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

  3. step 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.

    Prompt
    Create 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 animations

    what you should see

  4. step 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

  5. step 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.

    Prompt
    How do I preview the files you just gave me?

    what you should see

  6. step 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.

    Prompt
    I'm happy with how it looks. How do I put it on the internet?

    what you should see

end of this trackPick another trackgo deeperLearn which Claude interface is right for you

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