⚡ Phase 2 — Build Things · Week 5

Build Your First Real Website

⏱ ~4 hours 📚 4 lessons 🛠 VS Code · Netlify · GitHub · Claude AI

Time to go live. Your portfolio site — built by you, deployed on the real internet, visible to anyone in the world including employers, clients, and collaborators anywhere.

Lesson 1 of 4

🏗 Multi-Page Site Structure

A "website" is usually more than one page. A home page, an about page, a projects page. These are just separate HTML files in the same folder, linked together with <a> tags.

📁 Folder structure for a 3-page site
📁 my-website/
├── 📄 index.html ← always the home page
├── 📄 about.html
├── 📄 projects.html
├── 📁 css/
└── style.css ← one stylesheet for all pages
└── 📁 images/
📌
index.html is special

Browsers and servers treat index.html as the default "home" file. When someone visits yoursite.com, they automatically get index.html. Always name your home page this.

Lesson 2 of 4

📱 Making It Mobile-Friendly

Over half of all web traffic is on phones. A "responsive" site adapts its layout to different screen sizes. The key tool: CSS media queries.

style.css
/* Default: desktop layout */
.cards {
  display: flex;
  gap: 24px;
}

/* On small screens (phones): stack them */
@media (max-width: 768px) {
  .cards {
    flex-direction: column;
  }
}

Make my website responsive for mobile. Here's my current HTML and CSS: [paste it]. On screens smaller than 768px: stack columns vertically, reduce font sizes, make the nav a simple list. Add the viewport meta tag if I'm missing it. Explain what each media query does.

Lesson 3 of 4

🚀 Deploy to Netlify in 5 Minutes

Netlify lets you take your local folder and put it on the real internet for free. No servers, no configuration, no credit card. Just drag and drop.

1

Go to netlify.com and log in

You created this account in Setup Day. Open it at app.netlify.com.

2

Drag your project folder onto the Netlify dashboard

At the bottom of the screen you'll see a drop zone that says "Drag and drop your site folder here." Do exactly that — drag your entire my-website/ folder there.

3

Get your live URL — instantly

Netlify gives you a URL like random-name-123.netlify.app. That's your real site on the real internet. Share it with anyone.

4

To update: drag again

Made changes? Drag the folder again and Netlify updates the live site. Takes about 10 seconds.

🎉
This is a big moment

When you see your own URL live on the internet, something clicks. You built that. It exists in the world. Everyone has a slightly different reaction — most people grin a lot.

Lesson 4 of 4

✍️ Let Claude Write Your Site Copy

The words on your site matter as much as the design. Use Claude to draft headlines, bios, project descriptions, and calls to action — then refine them in your own voice.

Write copy for my personal portfolio site. I'm a [describe yourself] who is learning web development. Write: - A punchy 1-line hero headline - A 2-sentence bio for the About page - 3 short project descriptions (I built: [list your projects so far]) - A footer tagline Keep it honest, confident, and not overly formal.

🏗 Week 5 Project

3-Page Portfolio Site — Live on the Internet

Build This

A 3-page personal site, deployed to Netlify

  • Home page (index.html) — headline, brief intro, call to action
  • About page — your story, photo, what you're learning
  • Projects page — your Week 1–4 projects with descriptions and links
  • Shared navigation bar across all pages
  • Shared CSS file (one file styles all three pages)
  • Live Netlify URL — share it!

Week 5 Done!

Mark it complete and keep your momentum going.

← Week 4Week 6 →