F1 — How the Web & Computers Actually Work
Track 1: Foundations · The mental model everything hangs on
You can't direct what you can't picture. This lesson gives you the map of how web apps work — so the rest of coding has somewhere to live in your head.
🍽️ The restaurant analogy
A web app is a restaurant:
- Frontend = the dining room. What customers see and touch — menus, tables, the décor. (In code: HTML, CSS, JavaScript running in the browser.)
- Backend = the kitchen. Where the real work happens, out of sight — cooking, inventory, the recipes. (In code: a server, your business logic.)
- Database = the pantry + the order book. Where ingredients and records are stored. (In code: where data lives between visits.)
A customer never walks into the kitchen. They make a request ("I'd like the pasta"), the kitchen does the work, and sends back a response (the dish). That's the whole web.
🌐 What happens when you visit a URL
- You type an address and hit enter — your browser (the client) sends a request across the internet.
- A server somewhere receives it, does any needed work (maybe asks the database for data).
- The server sends back a response — usually HTML/CSS/JS.
- Your browser renders that into the page you see.
Every app you've ever used is a variation of this loop: request → work → response → render.
🧠 Why this matters for building
When you know which part is which, you know where problems live. Page looks wrong? Frontend. Data's incorrect or insecure? Backend/database. This map is what lets you (and the AI you direct) fix the right thing.
🛠️ Your mission
In your own words (a comment in the group is perfect), explain how a web app works using the request → response loop. Teaching it back is how you'll know it stuck.
✅ You're done when…
- You can explain frontend vs. backend vs. database
- You can describe what happens between typing a URL and seeing a page
- You can guess which layer a given problem probably lives in
➡️ Next: F2 — HTML & CSS: Structure and Style. Build It Right, Or Don't Build It At All. 🏛️