0: How The Web Actually Works

What a browser does

You type learn.html.auraea.fyi and hit enter. Here's the 3-step dance:

You
Browser

— request →

Server
just files

Request: Browser asks server "give me /index.html".
HTML arrives: Server sends text file with tags.
Render: Browser paints pixels from that text. That's a webpage.

No magic. View source on this page. It's just the HTML you're reading.

# what the server sends (simplified)
HTTP/1.1 200 OK
Content-Type: text/html

<!DOCTYPE html>
<h1>hello</h1>

Files vs. Servers vs. Domains

Word	What it is	Analogy
File	`index.html` on disk	A recipe card
Server	Computer that hands out files 24/7	A library that never closes
Domain	Human-readable address to an IP	Library's street address

When you drag index.html into your browser, there's no server. What you're doing is you're opening the file directly (file:///...). That's fine for learning. Deploying just means "put that file on a server so others can request it."

Why it matters: Every path bug in Module 02 comes from confusing "file on my laptop" vs. "file on the server".

Inspect Element, your superpower

Right-click anything on this page and hit Inspect. You get DevTools.

This headline

Try changing me in DevTools.

        <div>
  <strong>This headline</strong>
  <p>Try changing me…</p>
</div>
      

How to open DevTools:
  macOS:  Cmd + Option + I  or  Cmd + Option + C (inspect)
  Win/Linux: Ctrl + Shift + I  or  F12
  Or: right-click → Inspect

Try it now: Inspect the headline above, double-click the text, type "I hacked this", screenshot and congratulations, you're a hacker (this is literally how every frontend dev starts).

Editor + live preview

You need two things:

Editor: VS Code, Zed, Sublime, literally anything that edits .html as text. (I personally use VS Code)
Live preview: VS Code extension "Live Server". click "Go Live", and page auto-reloads on save.

your-first-site/
  index.html      # the page
  style.css       # later
  images/
    cat.jpg

Gotcha: If you double-click index.html it opens as file://. Watch out! links starting with / will break. Use Live Server (or python -m http.server) to get a real http://localhost root.

Exercise: screenshot hack (5 min):

Open any website you like.
Inspect Element and change its headline to something absurd.
Screenshot and send to a friend. Caption: "look what they published".

Bonus: view source on this page. Find where this exercise lives in the HTML. That's your first "reading code" rep.

HomeCourse map Next1: Your First HTML Tag