How the Web Works
The web development system map -- 25 lessons connecting the Internet, browsers, DNS, servers, frontend/backend, databases, APIs, authentication, rendering models, real-time communication, and PWAs into one coherent architecture picture, with pointers to this site's deep-dive courses for every piece that already has one.
25 Lessons · 620 min · Learning Platform Editorial Team
What you need on the desk
- None strictly required -- every concept is taught through diagrams and prose
- Optionally a web browser's developer tools, to look at real requests/cookies while reading the relevant lessons
- A Node.js environment, to run the small JavaScript examples
Know this much before you start
- None -- this course assumes no prior web development experience and is the recommended starting point before HTML, CSS, JavaScript, React, Node.js, or the API Tutorial.
- This course teaches the SYSTEM MAP -- how the pieces connect -- not the syntax of any one technology. Deep syntax and hands-on tool skills live in this site's dedicated tutorials, linked from the relevant lesson.
- Helpful but not required: basic comfort using a web browser and visiting websites (which almost everyone already has).
By the end, you can
- Trace what happens, step by step, from typing a URL to a rendered page appearing on screen
- Explain the client/server and frontend/backend mental models without treating them as a rigid binary
- Distinguish domain, DNS, hosting, and CDN, and know which deep-dive course covers each in depth
- Explain cookies, sessions, authentication, and authorization as four genuinely different (if related) concepts
- Compare REST and GraphQL fairly, and CSR/SSR/SSG fairly, without declaring a universal winner
- Explain when a web app needs WebSocket/SSE instead of plain request/response, and what a PWA actually adds
- Read a real system's architecture diagram (SaaS, real-time, AI-powered, or e-commerce) and identify each major component's role