Build Your Website
in 30 Minutes
No coding, no experience needed — just follow the steps
You'll walk away with a real website you can share with anyone
What Will You Build?
30 Minutes
A personal website with your name, bio, experience, and contact info
Actually Live
With a real URL you can share with friends or put on LinkedIn
Your site will include
- Your name and a one-liner intro
- About me (background, bio)
- Experience or portfolio (work, projects, interests)
- Contact information
Step 1: Gather Your Materials
Prepare a file about yourself — Claude will use it to build your site
Resume / CV
PDF or Word, either works
LinkedIn Profile
Screenshot or save as PDF
Quick Notes
Even a few lines about yourself is fine
Use whatever you have — no need to prepare anything special. Claude will organize it for you
Step 2: Open the "Black Window"
Claude Code runs in something called a "terminal" — it's just a text window where you type, nothing scary
Mac
Press Cmd + Space
Type Terminal
Hit Enter to open
Windows
Press the Windows key
Type PowerShell
Hit Enter to open
You'll see a dark (or light) window with a blinking cursor. Paste this line and hit Enter:
# Create a folder on your Desktop and go into it (copy-paste this whole line)
mkdir ~/Desktop/my-website && cd ~/Desktop/my-website
This is where you'll chat with Claude Code from now on — like a text chat, just by typing
Step 3: Drop Your Files + Launch Claude
Put your resume/bio file into the folder
Open your Desktop, find the my-website folder, drag your file in
Go back to the black window and type this to start Claude
claude
The screen switches to Claude's chat mode — from here you just talk to it in plain English
Step 4: Your First Message — Let Claude Know You
You> There's my resume in this folder. Read it,
then build me a clean, good-looking personal website
with an about section, experience, and contact info.
Make it a single HTML file.
Claude reads your file, understands your background, and generates a website tailored to you
Don't have a resume? Just type it out:
You> Build me a personal website. My name is [name],
I'm a [job title], I specialize in [your skills].
Make it a clean, good-looking HTML file.
Step 5: Open Your Website!
Claude will create an index.html file. Open it:
Claude> Done! I've created index.html with your info.
You> Open the file for me
Claude> [opens index.html in your browser]
Your website appears!
It's only on your computer for now — we'll put it online shortly
From your resume to a full website — roughly 1-2 minutes. That's the power of Claude Code
Step 6: Customize — Just Say What You Want
Not happy with something? Just describe the change
You> The colors are too bright, switch to a dark background
Claude> [switches to dark theme]
You> Font is too small, and I want it to feel more designed
Claude> [adjusts typography + adds design elements]
You> The bio section sounds too formal, make it more casual
Claude> [rewrites the tone]
You can ask for
- "Add my photo"
- "Make it look like Apple's website"
- "Add a portfolio section"
Subjective feedback works too
- "Something feels off"
- "It's too boring"
- "Can it look cooler?"
Step 7: Add More Content
Got the basics down? Add more sections
Portfolio
You> Add a portfolio section with 3-4
projects I've worked on, with images
Testimonials
You> Add a testimonials section with
two quotes from colleagues
Timeline
You> Turn my experience into a timeline,
most recent first
Blog
You> Add a blog page where I can
write learning notes
Add one section at a time. Make sure you like it before moving on
Step 8: Make Sure It Looks Good on Mobile
You> Make sure the site looks good on mobile too —
no broken layouts or tiny text
How to preview the mobile view on your computer:
Open your website in the browser
That's the index.html file
Press F12 (or Cmd+Option+I)
This opens "Developer Tools" — don't worry, we're just looking
Click the phone icon in the top-left
The page shrinks to phone size — check if anything looks broken
Looks broken? Take a screenshot and send it to Claude — it'll fix it
Step 9: Push Your Code to GitHub
Before going live, save your website code to GitHub (a free code repository)
You> Push this project to GitHub for me.
Create a new repo called my-website
Claude> Sure, I'll handle that:
[initializes git, creates repo, pushes code]
Done! Your code is at:
github.com/yourusername/my-website
github.com
Step 10: Go Live! Put It on the Internet
Use Vercel (free) to put your site online
Sign up for Vercel
Go to vercel.com and log in with your GitHub account (free)
Create a new project
Click Add New... → Project
Select your GitHub repo
Find my-website in the list, click Import
Hit Deploy!
Leave all settings as default, just click Deploy. Wait about 30 seconds...
Want to update your site later? Edit files, push to GitHub, and Vercel auto-redeploys
Your Website Is Live!
Your URL
https://my-website-xxx.vercel.app
Anyone in the world can visit this URL and see your site
Add to LinkedIn
Put the URL in your personal website field
Share with friends
"Check it out — I built this myself!"
Put on your resume
Make a strong impression on interviewers
Need to update later? Edit files, push to GitHub, Vercel auto-redeploys
Want Your Own Domain Name?
Optional next step — make your URL more professional
Buy a domain
Try Namecheap or Cloudflare — about $10-15/year
Connect it in Vercel
Go to Vercel dashboard → Settings → Domains → add your domain
What's Next?
You've proven you can build a website. Here's what else you can try...
Add a blog
"Add a blog page where I can write articles"
Build a photo gallery
"Make a photo gallery that opens images fullscreen"
Automate data tasks
"Write a script to organize my Excel data every day"
Build for someone else
"Make a simple website for my friend's coffee shop"
You've learned the most important skill: getting AI to build things using natural language. From here, anything is possible
30 minutes ago you had nothing.
Now you have a website the whole world can see.
Lines of code (by you)
Time spent
Brand new website
Hands-On: Build Your Website in 30 Minutes — End
Use arrow keys to navigate