Adventure 8
Adventure 8
Adventure 8
Adventure 8
"You all use YouTube, TikTok, Instagram every day. But have you ever wondered what they're actually MADE of? Today we're going to open them up. Every computer has this tool — it's called DevTools. Free with every browser."
Adventure 8
"Look — it's a tree. At the top is html. Two branches: head (invisible metadata) and body (what you see). Going down: every section, every button, every image — they're all nodes on this tree."
<html> → <body> → <header> → <h1> → text<h1> text in Elements, does the page change?" → try it live — yes!Adventure 8
Adventure 8
Adventure 8
"See? I clicked the button, the page changed, the tree in Elements changed. But the text in View Source — didn't move."
<p>Click the button below to load...</p>.quote-card → the <p> content changedAdventure 8
View Source (Ctrl+U) | Elements (F12) | ||
Shows | Original HTML the server sent | Current DOM tree | |
Set when | The page first loads | Live — updates with every JS change | |
Does it change? | Never | Yes, in real time | |
Shortcut | Ctrl+U | F12 |
Adventure 8
Adventure 8
Step | Change what | Where | What you see | |
1 | <h1> text → "I'm [your name]" | Elements, double-click | Heading changed | |
2 | .card background → red | Elements → Styles | Card turns red | |
3 | Console: document.body.style.zoom = 0.5 | Console tab | Page shrinks to half | |
4 | Refresh (F5) | — | All changes vanish |
"Refresh — and everything's gone. Because DevTools changed the in-memory DOM tree, not the source files on the server. Next block we'll go look at where those source files actually live."
Adventure 8
What you see on screen (browser paints it)
▲
│ browser paints
│
DOM tree (in memory)
▲
│ browser reads + builds
│
HTML + CSS + JS (text files)
▲
│ fetched via URL
│
(the server)
<h1> node, one styled element, any JavaScript (inside <script>). Raise your hand when done!Adventure 8
Adventure 8
Adventure 8
"Last block we saw the surface — HTML/CSS/JS in the browser building the page. But think about this: the specimen has a 'Quote of the Day' button. Click it, a sentence appears — where did that sentence come from? It's not in the HTML, right?"
Adventure 8
"The moment I clicked the button, the browser sent a letter out to that machine asking 'give me a quote'. The machine sent a letter back with a quote inside. The browser opened the letter and put the quote on the page. That two-way exchange? That's an HTTP request."
Adventure 8
Adventure 8
?c=i?c=aAdventure 8
{
"quote": "The only way to do great work is to love what you do.",
"author": "Steve Jobs"
}Adventure 8
{...JSON...}"Adventure 8
"Every time you see a new video card pop up on YouTube — that's the browser asking the YouTube server: give me more videos. Server sends back JSON. Browser turns it into cards. Our specimen asks once. YouTube asks dozens of times per second. Same thing, just at scale."
Adventure 8
Adventure 8
"YouTube serves you a video — the full chain runs: frontend (browser) asks backend (YouTube's server): give me 10 videos. Backend asks the database: which 10 are trending? Database returns the list → backend packages it as JSON → frontend draws cards."
"Your AI-built site is frontend-only — your AI deployed it to CF Pages (a static server). No backend, no database. So it can only show fixed content."
Adventure 8
Adventure 8
"Your AI-built site is static. But like the specimen, you can use fetch to call someone else's API and make it 'feel' dynamic. To build a real site with user logins and saved data, you need your own backend — that's further down the road."
Adventure 8
"Your site = static. YouTube = dynamic + static mixed. The difference is whether the backend is on."
Adventure 8
Adventure 8
Adventure 8
"Mess something up? Don't panic. History's still there. Go back any time."
Adventure 8
"Every time you change something, commit it — snap a photo, write a note. All snapshots line up on a timeline = your history."
Adventure 8
Your computer → Git → GitHub → Cloudflare Pages → CDN → User's browser
"What your AI Agent did was this whole chain: write code, push to GitHub, set up a CF Pages project, bind a domain, configure DNS. It did all of that for you. Now we're going to do it ourselves."
Adventure 8
Adventure 8
ai.ethanxi.com)Adventure 8
"Build log = a programmer's best friend. We're about to generate one of these ourselves."
Adventure 8
Adventure 8
Teacher runs the full flow on the projector — without explaining anything. Just to plant the "this is doable" feeling before students try it themselves.
"That's it. That's what you're all going to do right now."
Adventure 8
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hello — I'm Sam</title>
</head>
<body>
<h1>Hello, World — I'm Sam</h1>
<p>This is the first website I deployed myself.</p>
</body>
</html>
Adventure 8
my-first-site · Set to Public · don't tick "Add a README"index.html — then paste in the code from Step 1Adventure 8
my-first-site → SaveAdventure 8
https://my-first-site-xxx.pages.dev"Right now the CF server is: pulling your code → seeing only one index.html, nothing to build → uploading the file to global CDN. Once that green check appears, your website is live worldwide."
Adventure 8
<h1> text — add an emoji, change the message, make it yoursAdventure 8
"You used GitHub as a trigger — push once, CF Pages auto-runs a deploy. That's 'auto-deploy': you don't manually upload files anymore — the act of saving IS the deployment."
<img src="..."> — CF Pages auto-deploys it.index.htmlmainAdventure 8
Your source code (HTML/CSS/JS)
↓ git commit + push
GitHub
↓ webhook fires
Cloudflare Pages (build)
↓ uploads artifacts
Global CDN
↓ HTTP + JSON
User's browser
↓ parse → DOM tree → paint
What the user sees
Adventure 8
"You just did a real, full deploy — empty repo to a live URL anyone in the world can visit. Every step done by you. Next time you want to build a website? You don't need an AI. You can do it yourself."
Adventure 8
"That's empowerment — you've gone from 'press the button and hope' to 'I get this'."
Adventure 8
my-first-site you built today into your own personal homepage — your name, hobbies, colors, and an imageAdventure 8
API | The "menu" of questions a backend will answer | |
Build | Compile source code into shippable files | |
CDN | Globally distributed delivery hubs; users fetch from the nearest one | |
Client | = frontend | |
Commit | One save in Git | |
Console | DevTools tab for running JS / seeing errors | |
CSS | The file that decides how the page looks | |
Database | Where the backend stores stuff long-term | |
Deploy | Put website files on a public server | |
DevTools | The browser's built-in inside-the-machine panel | |
DNS | Domain → IP phone book | |
DOM | The page tree the browser builds in memory | |
Domain | The human-readable part of a URL | |
Elements panel | DevTools tab for viewing the DOM tree | |
Fetch | The standard JS method for making HTTP requests | |
Frontend | The part running in your browser | |
Git | Version control tool that saves project history | |
GitHub | The website where you upload Git repos | |
History | The timeline of all your Git saves | |
Hosting | Renting server space to hold your site | |
HTML | The file that decides what content the page has | |
HTTP | The rules browser and server use to talk | |
HTTPS | Encrypted HTTP | |
IP address | A machine's actual numerical address on the internet | |
JS / JavaScript | The file that decides how the page behaves | |
JSON | The data format frontend and backend exchange | |
Network panel | DevTools tab for seeing every request the page sends | |
Node | One piece on the DOM tree | |
Push | Upload your local saves to GitHub | |
Repository (repo) | All the files in a project + every historical version | |
Request | One "ask" sent by the frontend | |
Response | One "reply" sent by the backend | |
Server | A computer that stays on all the time, waiting for questions | |
Server-side | = backend | |
Static site | Server hands you pre-existing files | |
Dynamic site | Server computes a fresh answer every time | |
View Source | The original HTML the server sent (never changes) |
Adventure 8