Lesson 4
From zero to a live personal website
← → arrow keys to navigate
By the end of this lesson, you'll have built and published your own website, using AI.
A short introduction about who you are, what you do, and what you're passionate about.
Email, LinkedIn, and a contact form so people can reach you.
No coding knowledge required. Just English and an AI tool.
Mac, Windows, or Linux. Anything works.
To install tools and deploy your site
That's it. Seriously.
Everything we use today is free. No credit card needed.
A one-time setup that takes about 10 minutes
The terminal is a text interface to your computer. Instead of clicking icons, you type commands.
Open Spotlight (Cmd + Space), type 'Terminal', hit Enter
Search for 'PowerShell' in the Start menu, open it
It looks like a hacker movie, but it's just a different way to talk to your computer. You'll type simple commands, nothing scary.
Claude Code needs Node.js to run. Think of it like installing an app that other apps depend on.
Node.js is free, safe, and used by millions of developers worldwide. It's the foundation that Claude Code runs on.
Open your terminal and type this command:
npm install -g @anthropic-ai/claude-code
npm: the package manager that came with Node.jsinstall: add a new tool-g: install it globally (available everywhere)@anthropic-ai/claude-code: the tool itselfPress Enter and wait about 30 seconds. You'll see some text scroll by. That's normal.
In your terminal, type:
claude
This launches Claude Code. The first time, it will ask you to authenticate.
Sign in with your Claude.ai account (if you have a Max subscription)
Use an API key from console.anthropic.com (pay per use)
Either option works. Claude.ai Max gives you unlimited usage. API keys charge per message.
Every project needs its own folder. Let's create one:
mkdir my-website && cd my-website
mkdir my-website
Make a new folder called 'my-website'
cd my-website
Go into that folder
Think of it like creating a new folder on your desktop, then opening it. Same thing, just typed.
Now that you're in your project folder, type:
claude
You'll see Claude Code's welcome screen with a prompt waiting for your input.
You're ready to build. Everything from here on is just typing in English.
Creating your personal website with AI
Type this into Claude Code:
Create a personal website for me. Include a hero section with my name [Your Name], an about section, and a contact section. Make it modern and clean with a light color scheme.
This is all it takes. Claude will plan, write HTML, CSS, and JavaScript, and create the files for you.
index.html (structure), styles.css (design), maybe script.js (interactivity)
Claude asks permission before creating files. You approve each step.
Open the index.html file in your browser to see your website.
open index.html
start index.html
Look at the result. What do you like? What would you change? That's your next prompt.
This is the iterative workflow: build, review, refine. No need to get it perfect on the first try.
Tell Claude what to change using plain English:
Change the color scheme to blue and white
Make the heading text bigger and bolder
Add a photo placeholder in the about section
Each change takes seconds. No need to learn CSS or HTML. Just describe what you want.
Now let's add more substance:
Add a section for my work experience with 3 cards showing different roles
Add a footer with my email address and a link to my LinkedIn profile
Notice how you're building the site feature by feature, just by describing each piece.
Want your site to do things? Just ask:
Add a contact form with name, email, and message fields
Make the navigation smooth-scroll to each section
Add a dark mode toggle button
You're writing JavaScript without knowing JavaScript. Claude translates your intent into code.
One prompt makes your site work on every device:
Make sure the website looks good on phones and tablets too. The navigation should collapse into a hamburger menu on small screens.
Desktop-only layout that breaks on phones
Responsive design that adapts to any screen size
This is called 'responsive design', and Claude handles all the complexity for you.
Type /init in Claude Code to create a CLAUDE.md file: a memory file for your project.
/init
Think of it as writing a note to your future self (and to Claude). It makes every future session smarter.
From a blank folder to a complete website:
All from English instructions. No code written by hand.
Don't lose what you've built
You've built something. Don't lose it. Version control is like save points in a video game.
Tell Claude to set up version control:
Initialize a git repository and make the first commit with the message "Initial website"
git = version control system (tracks changes)repository = a project tracked by gitcommit = a save point with a descriptionClaude runs the git commands for you. You just describe what you want.
GitHub is like Google Drive for code. Your project is stored online, safely.
GitHub is free for personal projects. Your code is backed up and accessible from anywhere.
With git, you can always go back:
Undo the last commit
Show me the git history
What changed since yesterday?
This is why developers love version control. Experiment boldly. You can always go back.
Putting your website on the internet
Right now, your website lives on your computer. Deploying means putting it on the internet.
It's like the difference between a document on your desktop and a Google Doc shared with a link.
Built into GitHub. Free. Simple. Perfect for personal sites.
RecommendedDrag-and-drop deploy. Free tier. Automatic HTTPS.
Modern platform. Free for personal projects. Fast global CDN.
All three are free for personal websites. GitHub Pages is the simplest if you already have a GitHub account.
Tell Claude to deploy your site:
Deploy this website to GitHub Pages
Claude will:
In about 2 minutes, your site will be live at https://yourusername.github.io/my-website
Want yourname.com instead of a GitHub URL? You can add a custom domain.
This is optional. The free GitHub Pages URL works perfectly fine.
You built and deployed a personal website. No coding knowledge needed. Just English and AI.
Share the link with friends and family. You built this.
Your website was just the beginning
Share your thoughts with a blog powered by AI-generated layouts
Showcase your work with a visual gallery and project descriptions
Landing page, services, pricing, and contact form
Build a simple calculator, converter, or productivity tool
A focused one-pager for a product, event, or idea
Organize knowledge into a clean, searchable reference
All achievable with the same workflow you learned today.
This works for any project:
Begin with the basics. Get something working. Then add features one at a time.
You never need to read or write code. Just describe what you want and review what you get.
Lesson 4
Now go build something