Section 05
Hello World: Build & Deploy a Landing Page
Go from empty folder to live URL in under an hour. We'll build a real page, push it to GitHub, and deploy it on Vercel.
What you'll build
A real landing page
Hero section, features, and a call-to-action button. Built with Next.js + Tailwind CSS.
Pushed to GitHub
Your code versioned and stored in the cloud, ready for collaboration.
Live on the internet
A real public URL you can share, deployed automatically via Vercel.
I'm about to build my first web project with Next.js. Can you explain what Next.js is, how it relates to React, and why it's the go-to choice for deploying on Vercel? What are pages, components, and routing? Give me a mental model before I write any code.
👆 Copy this prompt and paste it into Claude, ChatGPT, or Gemini — it will explain everything in as much detail as you want.
Create a new Next.js project
Open your terminal, navigate to where you keep projects, and run:
npx create-next-app@latest my-landing-page
# When prompted:
# ✔ Would you like to use TypeScript? › Yes
# ✔ Would you like to use ESLint? › Yes
# ✔ Would you like to use Tailwind CSS? › Yes
# ✔ Would you like to use the src/ directory? › No
# ✔ Would you like to use App Router? › Yes
# ✔ Would you like to customize the import alias? › Nocd my-landing-page
code . # opens VSCode
npm run dev # starts local dev server at http://localhost:3000Open http://localhost:3000 in your browser. You should see the default Next.js page. That's your dev server running locally.
create-next-app scaffolds the entire project for you: folder structure, config files, everything.
.tsx and contain things like : string or interface Props. That's TypeScript, JavaScript with type annotations that catch errors before they happen. You don't need to understand it to follow this guide. Claude Code writes valid TypeScript for you.I just created a Next.js project with create-next-app. Can you walk me through what all the files and folders do? What is app/page.tsx, layout.tsx, globals.css? What is package.json? What is tailwind.config.ts? What actually happens when I run "npm run dev"?
👆 Copy this prompt and paste it into Claude, ChatGPT, or Gemini — it will explain everything in as much detail as you want.
Use Claude Code to build your landing page
In a new terminal tab (keep npm run dev running), navigate to your project and start Claude Code:
cd my-landing-page
claudeThen give Claude Code this prompt (or customize it for your own idea):
Build a landing page for a fictional product called "LaunchPad: The Fastest Way to Ship Ideas". Use the existing Next.js + Tailwind setup. The page should include: 1. A hero section with a headline, subheadline, and a "Get Started Free" button 2. A features section with 3 cards (icons + title + description) 3. A simple footer with the product name and a fake copyright Keep it clean and modern with a dark background. Use only Tailwind utility classes, no custom CSS.
Claude Code will read your project, generate the page, and write the files. Your browser at localhost:3000 will automatically refresh to show the new page.
This is the moment where AI does the heavy lifting. Watch what it does and read the files it writes. You'll learn faster by reading AI-generated code than by writing boilerplate from scratch.
Look at this Next.js page component I just generated. Can you walk me through how it works? Explain what JSX is, how Tailwind CSS classes work, what the "use client" directive does, and how Next.js renders this as a web page. I want to understand what I'm looking at. [paste the contents of app/page.tsx here]
👆 Copy this prompt and paste it into Claude, ChatGPT, or Gemini — it will explain everything in as much detail as you want.
Make it yours
Open app/page.tsx in VSCode and try changing:
- The headline text
- A Tailwind color class (e.g. change
bg-violet-600tobg-blue-600) - The button text
Save the file and watch localhost:3000 update instantly. That's Hot Module Replacement.
# Example Claude Code prompts for iteration:
"Make the hero section taller with more padding"
"Change the button to use a gradient from purple to blue"
"Add a testimonials section below the features with 2 fake quotes"
"Make the page mobile-responsive — it looks broken on small screens"Don't be afraid to break things. git is your safety net, so you can always revert to the last working state.
I'm looking at a page built with Tailwind CSS for the first time. Can you explain how Tailwind works? What are utility classes? How is this different from writing regular CSS? What are the most common Tailwind classes I'll use every day for layout, spacing, typography, and color?
👆 Copy this prompt and paste it into Claude, ChatGPT, or Gemini — it will explain everything in as much detail as you want.
Initialize Git and make your first commit
# Check what's changed
git status
git diff
# Stage all changes
git add .
# Commit with a message
git commit -m "feat: build landing page with hero, features, footer"
# Verify
git log --onelineGood commit messages follow the Conventional Commits format:type: description. Common types: feat, fix, chore.
The .gitignore file that create-next-app generates already excludes node_modules and .next.
Create a GitHub repo and push
gh repo create my-landing-page --public --source=. --remote=origin --push
# Verify it uploaded
gh repo view --web # opens your GitHub repo in the browserOr manually:
git remote add origin git@github.com:YOUR_USERNAME/my-landing-page.git
git branch -M main
git push -u origin mainMake the repo public so Vercel can access it on the free tier.
Explain the Git workflow I just followed: init, add, commit, push. What is the difference between "staging" and "committing"? What is a remote? What does "origin" mean? What is the "main" branch and why does it matter? Also explain what branching is and when I'd want to create a new branch.
👆 Copy this prompt and paste it into Claude, ChatGPT, or Gemini — it will explain everything in as much detail as you want.
Deploy to Vercel
vercel
# Follow the prompts:
# Set up and deploy? › Yes
# Which scope? › (your username)
# Link to existing project? › No
# What's your project's name? › my-landing-page
# In which directory is your code located? › ./You'll get a preview URL like my-landing-page-abc123.vercel.app. Open it. Your page is live on the internet!
vercel --prodOnce connected, every future git push will automatically redeploy your site.
The everyday deploy loop
# Make changes in VSCode (or via Claude Code)
# ...
git add .
git commit -m "fix: update hero headline"
git push
# That's it. Vercel detects the push and redeploys automatically.
# Your live site updates in ~30 seconds.Explain how Vercel works under the hood. What happens when I push code to GitHub and Vercel redeploys? What is a "build"? What are preview deployments vs. production deployments? What is a CDN and how does Vercel use one to serve my site fast globally?
👆 Copy this prompt and paste it into Claude, ChatGPT, or Gemini — it will explain everything in as much detail as you want.
Protect yourself: branches and recovery
You now know how to push code live. Here's how to make sure a bad push doesn't break your site.
Work on a branch, not main
A branch is a parallel copy of your code. Build there, then merge to main only when it's ready.
git checkout -b my-new-feature # create + switch to a new branch
# ... make changes ...
git add . && git commit -m "feat: add my feature"
git checkout main
git merge my-new-feature
git pushUndo a bad commit safely
git revert HEAD # creates a new commit that undoes the last one — safe, doesn't rewrite history
git push # Vercel redeploys with the revertPreview before promoting
Every push to a non-main branch creates a Vercel preview URL automatically. Check it before merging to main so you never ship something broken to your live site.
Environment variables & secrets
The moment your next project calls an API (an LLM, a database, an email service), you'll have API keys. Here's the rule every developer learns the hard way:
Never put API keys directly in your code or commit them to GitHub.
Public GitHub repos are scanned by bots within seconds. A leaked key can rack up thousands of dollars in charges before you notice.
Instead, use a .env.local file:
OPENAI_API_KEY=sk-...
NEXT_PUBLIC_SITE_URL=https://my-site.vercel.appNext.js reads .env.local automatically. The .gitignore that create-next-app generates already excludes it, so it stays on your machine only.
For your Vercel deployment, add the same variables in the Vercel dashboard:
Vercel Dashboard → Your Project → Settings → Environment Variables → add each key there. Vercel injects them at build time, so your deployed site gets the values without them ever touching your git repo.
What to Build Next
- •Add a contact form (use Formspree or Resend)
- •Add a second page with a blog post
- •Animate the hero section with CSS transitions
- •Fetch and display data from a public API
- •Add a dark/light mode toggle
- •Integrate Vercel Analytics
- •Add a CMS (Contentlayer, Sanity, or Notion as a backend)
- •Build an API route that calls an LLM
- •Add auth with NextAuth.js
- •Tell Claude Code: 'Add a pricing section with 3 tiers and a toggle between monthly/annual'
- •Tell Claude Code: 'Convert this to a portfolio site for a designer'
- •Tell Claude Code: 'Add SEO meta tags and generate a sitemap.xml'
I just built and deployed a simple landing page with Next.js, GitHub, and Vercel. What should I build next to level up my skills? I want to stay in this stack. Give me 5 project ideas at different difficulty levels, and for each one: what new skills I'd learn, what libraries or tools I'd need, and the key challenges I'd face.
👆 Copy this prompt and paste it into Claude, ChatGPT, or Gemini — it will explain everything in as much detail as you want.
You shipped something real.
You went from zero to a live web page using the same stack professional developers use. A code editor, an AI agent, version control, and a deployment platform. That's the whole thing.