CHAPTER 1

How the Web Actually Works

DNS, HTTP, browsers, and servers: the fundamentals every developer needs to understand.

4 min read Last updated: 2026-03-01

Before we can talk about any framework or tool, you need to understand the fundamental architecture of every web application. Every single web app ever built, from Google to a personal blog to a billion-dollar banking platform, has three layers. No exceptions.

LayerWhat It DoesWhere It Runs
FrontendEverything the user sees and interacts with: buttons, forms, pages, images, animations, textIn the user’s browser (Chrome, Safari, Firefox, Edge)
BackendThe hidden logic: processes requests, enforces business rules, handles security, authenticates users, talks to the databaseOn a server (a computer in a data center)
DatabaseStores all persistent data: user accounts, posts, products, orders, settings, files, logsOn a server (often the same one, sometimes a managed service)

The Restaurant Analogy

Think of a web app like a restaurant. The frontend is the dining room: the menu, the tables, the decor, the plates, the lighting, everything the customer sees and touches. The backend is the kitchen: the chef who receives orders, checks them, prepares food according to recipes, and sends it back out. The database is the pantry and recipe book: where all the ingredients and knowledge are stored permanently.

When a customer (the user) looks at the menu (the frontend) and places an order (clicks a button or submits a form), the waiter (an HTTP request sent over the internet) carries that order to the kitchen (the backend). The chef looks up the recipe, checks the pantry (the database) for ingredients, prepares the dish, and the waiter carries it back to the dining room (the response appears on screen).

Every single tool in this book fits into one of these three layers or helps connect them. When you feel lost later in the book, come back to this analogy. Ask yourself: is this tool a dining room thing (frontend), a kitchen thing (backend), or a pantry thing (database)?

The Three Languages of the Web

Every browser on earth, whether it is Chrome on a laptop, Safari on an iPhone, or Firefox on a desktop, understands exactly three languages. No more, no less:

LanguageJobReal-World Analogy
HTMLDefines the structure and content of the page: headings, paragraphs, buttons, forms, images, links, listsThe blueprint of a building: where walls, doors, and windows go
CSSDefines how everything looks: colors, fonts, spacing, layout, shadows, animations, responsivenessInterior design: paint colors, furniture arrangement, lighting choices
JavaScriptDefines how things behave: what happens on click, how data moves, how the page updates without reloadingThe electrical and plumbing systems: what makes things actually work and respond

💡 The Critical Insight

Every single tool in this book eventually produces HTML, CSS, and JavaScript. React produces HTML and JavaScript. Tailwind produces CSS. TypeScript compiles to JavaScript. Next.js produces all three. These tools do not replace the three languages; they are better, faster, more organized ways to write them. The browser never sees React or Tailwind. It only sees the HTML, CSS, and JavaScript they generate.

Client vs. Server

In web development, you will constantly hear the words “client” and “server.” These are fundamental concepts that underpin everything:

  • Client (Frontend): The user’s device and browser. Code that runs here executes on the user’s computer or phone. The user can see it, inspect it, and even modify it. Never trust client-side code for security.

  • Server (Backend): A computer in a data center, owned by you or a cloud provider. Code that runs here is hidden from users. It handles sensitive operations: checking passwords, charging credit cards, accessing databases.

When you “deploy” a web app, you are making the backend code run on a server and the frontend code available for browsers to download. They communicate over the internet using HTTP requests (the browser asks for something) and HTTP responses (the server sends it back). This request-response cycle is the heartbeat of every web application.

Additional Learning Resources