⛰ Phase 1 — Foundations · Week 1

How the Internet Actually Works

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

Forget everything intimidating you've heard about web development. By the end of this week you'll have written real code, pushed it to GitHub, and understand exactly what happens when someone visits a website.

Lesson 1 of 4

🌐 What Happens When You Type a URL

Every website visit triggers an invisible sequence of events in under a second. Let's slow it down.

📡 The URL Journey — keyboard to screen
⌨️
You type a URL
e.g. wvgov.org
→
📖
DNS Lookup
Finds the address
→
🖥
Server
Sends files back
→
🧱
Browser Builds
Reads HTML/CSS/JS
→
👀
You See It
The webpage!
1

A URL is just an address for a file

Like a street address, but for data living on a computer somewhere in the world.

2

DNS translates the name to a number

Computers use IP addresses like 142.250.80.46. DNS is a massive phone book that translates google.com to that number instantly.

3

A server sends back three types of files

HTML (structure), CSS (style), JavaScript (behavior). Your browser reads all three and draws the page you see.

🏔 WV Real-World Example — Small Business

When a customer in Beckley searches 'pizza near me', that search hits Google's DNS, resolves to a server, and returns HTML. If your WV pizzeria's site loads fast and is built right, you show up. This curriculum teaches you how to build that site.

Lesson 2 of 4

📄 HTML: The Skeleton of Every Page

HTML labels text so the browser knows what each piece is — heading, paragraph, image, link. Every website on earth is built on it.

🦴 HTML Structure — nested boxes
📄 <html>The whole page
🧠 <head>Invisible info — title, fonts
🖼 <body>Everything the user sees
📌 <h1>Big heading
📝 <p>Paragraph
🔗 <a>Clickable link
index.html
<!DOCTYPE html>
<html>
  <head>
    <title>My WV Page</title>
  </head>
  <body>
    <h1>Hello from West Virginia!</h1>
    <p>Built with code, right here in the Mountain State.</p>
  </body>
</html>
Try It Now

Your first HTML file in VS Code

  1. Open VS Code → open your montani-vibe-projects folder
  2. Create a new folder called week1, then a file called index.html
  3. Copy the code above, change the text to something about you
  4. Right-click the file → Open with Live Server
  5. Switch to GitHub Desktop → write a commit message → commit → push
Lesson 3 of 4

🔍 DevTools: Peek Inside Any Website

Every browser has a built-in tool that lets you see the HTML and CSS behind any website. Right-click → Inspect, or press F12. This is how developers learn — by looking at things that already exist.

🤖
Claude + DevTools combo

See something cool on a WV business site? Open DevTools, copy the HTML, paste into Claude and ask "Explain what this does." Instant free lesson from any site.

Elements
Console
Network
<body>
  <h1 class="hero">Hello from WV</h1> ◄ hover to highlight on page
Lesson 4 of 4

🤖 Claude as Your Co-Pilot

The vibe developer workflow: describe what you want → Claude writes the code → you review, test, and direct. You don't memorize syntax. You describe outcomes.

Write me a simple HTML "about me" page. Include: - A heading with my name: [YOUR NAME] - A short bio: [2 sentences about you] - An unordered list of 3 hobbies - Where I'm from in West Virginia: [your town/county] Add a comment above each section explaining what it does. I'm a beginner.

GitHub — Do This Now

🐙 Make Your First Commit

You wrote your first HTML file. Before anything else — save it to GitHub. This is the habit that defines professional developers. Start it today.

1

Make sure your file is in the montani-vibe-projects folder

Save index.html inside a week1/ subfolder inside your repo folder.

2

Open GitHub Desktop — your file appears under Changes

GitHub Desktop watches your folder constantly. New or modified files appear automatically in green or yellow.

3

Write a commit message and click "Commit to main"

Try: "Add Week 1 about me page HTML". Click Commit. This takes a permanent snapshot.

4

Click "Push origin"

Your file is now live at github.com/yourname/montani-vibe-projects. That's your first public code.

🏔
Your public profile starts now

Every commit you push fills in a square on your GitHub activity graph. By Week 12 that graph tells a story — a West Virginian who showed up and built things, week after week. That story is worth more than a résumé.

🏗 Week 1 Project

Your First Webpage — About You

Build This

A personal "About Me" page — and push it to GitHub

  • A heading with your name
  • A bio paragraph mentioning where in WV you're from
  • A list of things you like or care about
  • One link to something you love
  • Committed to GitHub with a descriptive message

Build me a complete, valid HTML "About Me" page for someone from [your town], West Virginia. Name: [YOUR NAME] · Bio: [YOUR BIO] · Hobbies: [3 things] Add HTML comments above each section. I'm a beginner learning to code.

Week 1 Done!

Mark it complete and keep your momentum going.

Week 2 →