How the Web Works

Duration: 25 min

The web is built on a simple client-server model. When you visit a website, your browser sends a request to a server, which responds with data. Understanding this fundamental cycle is essential to web development.

The Client-Server Model

The web operates on a request-response architecture. Your browser (the client) sends HTTP requests to web servers, which process the request and send back responses. This happens every time you load a page, click a link, or submit a form.

Client (Browser) → HTTP Request → Server
Server → HTTP Response → Client (Browser)

DNS: Finding the Server

Before your browser can connect to a server, it needs to find its IP address. This is where DNS (Domain Name System) comes in. DNS translates human-readable domain names like google.com into IP addresses like 142.251.41.14.

1. Browser: "What's the IP for google.com?"
2. DNS Server: "It's 142.251.41.14"
3. Browser connects to 142.251.41.14

URLs: The Web Address

A URL (Uniform Resource Locator) is the address of a resource on the web. It has several parts:

https://www.example.com:8080/path/to/page?query=value#section
│      │   │              │    │              │            │
│      │   │              │    │              │            └─ Fragment (anchor)
│      │   │              │    │              └─ Query string
│      │   │              │    └─ Path
│      │   │              └─ Port
│      │   └─ Subdomain
│      └─ Protocol
└─ Scheme

• Protocol: https:// (secure) or http:// (insecure)
• Domain: example.com
• Path: /path/to/page
• Query: ?query=value
• Fragment: #section

HTTP: The Protocol

HTTP (HyperText Transfer Protocol) is the language browsers and servers use to communicate. Common HTTP methods include:

• GET: Retrieve data from the server
• POST: Send data to the server
• PUT: Update existing data
• DELETE: Remove data

Each request includes headers (metadata) and optionally a body (data).

GET /api/users HTTP/1.1
Host: api.example.com
User-Agent: Mozilla/5.0
Accept: application/json

The Request-Response Cycle

Here's what happens when you visit a website:

1. DNS Lookup: Browser resolves domain to IP address
2. TCP Connection: Browser establishes connection to server
3. HTTP Request: Browser sends request for the resource
4. Server Processing: Server processes the request
5. HTTP Response: Server sends back HTML, CSS, JavaScript, images
6. Rendering: Browser parses and renders the content
7. Resource Loading: Browser loads additional resources (images, scripts, stylesheets)

Status Codes

HTTP responses include status codes that indicate the result:

• 2xx: Success (200 OK, 201 Created)
• 3xx: Redirection (301 Moved Permanently, 304 Not Modified)
• 4xx: Client Error (404 Not Found, 403 Forbidden)
• 5xx: Server Error (500 Internal Server Error)

Browsers: The Interpreter

Your browser is a sophisticated application that:

1. Parses HTML into a DOM tree
2. Loads CSS and applies styles
3. Executes JavaScript to add interactivity
4. Renders the final page to your screen
5. Handles Events like clicks and form submissions

Different browsers (Chrome, Firefox, Safari) may render pages slightly differently, which is why testing across browsers is important.

Caching: Speed Optimization

Browsers cache resources locally to avoid re-downloading them. When you revisit a site, the browser checks if cached resources are still valid before requesting them again from the server.

First visit: Download all resources
Second visit: Use cached resources (if not expired)