How the Web Works

⏱️ Reading time: 15 min 📋 Prerequisites: None - This is the first article

Introduction

Before diving into HTML, CSS, and JavaScript, it's essential to understand the foundation: how does the web actually work? This article covers the client-server model, domains, DNS, HTTP/HTTPS, and the complete request/response cycle.

What You'll Learn

The difference between the Internet and the Web
Client-Server architecture
How domain names and DNS work
HTTP methods and status codes
HTTPS and TLS encryption
How browsers render web pages

Internet vs Web

People often use "Internet" and "Web" interchangeably, but they're different:

Internet: The physical network of connected computers and cables worldwide.

Web: A service that runs on the Internet, consisting of interconnected documents and resources accessed via browsers.

Analogy: The Internet is like the road system, while the Web is like the shops and buildings you can visit using those roads.

Client-Server Model

The web operates on a client-server architecture:

┌─────────────┐                              ┌─────────────┐
│   CLIENT    │                              │   SERVER    │
│  (Browser)  │────── HTTP Request ─────────▶│  (Website)  │
│             │                              │             │
│             │◀───── HTTP Response ─────────│             │
└─────────────┘                              └─────────────┘

How It Works

Client (your browser) sends an HTTP request
Server receives and processes the request
Server sends back an HTTP response
Client renders the response for the user

Example: Loading fernan.dev

Your Browser (Client)          GitHub Pages (Server)
       │                                │
       │── GET / HTTP/1.1 ────────────▶│
       │   Host: fernan.dev             │
       │                                │
       │◀── HTTP/1.1 200 OK ───────────│
       │   Content-Type: text/html      │
       │   <!DOCTYPE html>...           │
       │                                │
   Renders page                         │

Domain Names & DNS

Every server has an IP address (like 185.199.108.153), but humans prefer memorable names like fernan.dev. DNS (Domain Name System) translates domain names to IP addresses.

DNS Resolution Process

┌──────────┐    ┌──────────┐    ┌──────────┐    ┌──────────┐
│  Browser │    │   DNS    │    │    TLD   │    │ Authority│
│          │    │ Resolver │    │  Server  │    │  Server  │
└────┬─────┘    └────┬─────┘    └────┬─────┘    └────┬─────┘
     │               │               │               │
     │ Type: fernan.dev              │               │
     │──────────────▶│               │               │
     │               │ Type: .dev    │               │
     │               │──────────────▶│               │
     │               │               │ Type: fernan  │
     │               │               │──────────────▶│
     │               │               │               │
     │               │◀──────────────│ 185.199.108.x │
     │◀──────────────│ 185.199.108.x │               │
     │ 185.199.108.x │               │               │

DNS Record Types

Record Type	Purpose	Example
`A`	Maps domain to IPv4 address	`fernan.dev → 185.199.108.153`
`AAAA`	Maps domain to IPv6 address	`fernan.dev → 2606:50c0:8000::153`
`CNAME`	Alias for another domain	`www.fernan.dev → fernan.dev`
`MX`	Mail server records	`fernan.dev → mail.fernan.dev`

HTTP: Hypertext Transfer Protocol

HTTP is the protocol clients and servers use to communicate. It defines how requests and responses are structured.

HTTP Request Structure

GET /articles/how-web-works/ HTTP/1.1
Host: fernan.dev
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X...)
Accept: text/html,application/xhtml+xml
Accept-Language: en-US,en;q=0.9
Connection: keep-alive

HTTP Response Structure

HTTP/1.1 200 OK
Date: Sun, 01 Mar 2026 12:00:00 GMT
Content-Type: text/html; charset=utf-8
Content-Length: 15234
Cache-Control: public, max-age=3600
Server: GitHub.com

<!DOCTYPE html>
<html lang="en">
...

Common HTTP Methods

Method	Purpose	Example
`GET`	Retrieve a resource	Load a web page
`POST`	Submit data to server	Submit a form
`PUT`	Update a resource	Update user profile
`DELETE`	Delete a resource	Delete a post

HTTP Status Codes

Code	Meaning	When You See It
`200 OK`	Success	Page loads normally
`301 Moved`	Permanent redirect	HTTP → HTTPS redirect
`404 Not Found`	Resource not found	Broken link or typo in URL
`500 Server Error`	Server-side error	Server crashed or bug

HTTPS & TLS Encryption

HTTPS is HTTP over TLS (Transport Layer Security). It encrypts data between client and server, preventing eavesdropping and tampering.

HTTP vs HTTPS

HTTP (Insecure):
Client ──▶ "password=secret123" ──▶ Server
         ▲ Anyone can read this ▲

HTTPS (Secure):
Client ──▶ 🔒 ENCRYPTED DATA 🔒 ──▶ Server
         ▲ Only server can decrypt ▲

TLS Handshake (Simplified)

Client                          Server
  │                              │
  │── ClientHello ──────────────▶│
  │   (supported ciphers)        │
  │                              │
  │◀──── ServerHello ────────────│
  │   (chosen cipher + cert)     │
  │                              │
  │── Verify Certificate ───────▶│
  │                              │
  │◀──── Encrypted Session ──────│
  │   (secure communication)     │

Why HTTPS Matters

Encryption: Data can't be read by intermediaries
Integrity: Data can't be modified in transit
Authentication: You're talking to the real server
SEO: Google ranks HTTPS sites higher
Trust: Browsers show padlock icon

Browser Rendering Pipeline

When a browser receives an HTML response, it goes through several steps to render the page:

┌─────────────┐
│    HTML     │
└──────┬──────┘
       │
       ▼
┌─────────────┐
│  DOM Tree   │ (Document Object Model)
└──────┬──────┘
       │
       ▼
┌─────────────┐
│    CSSOM    │ (CSS Object Model)
└──────┬──────┘
       │
       ▼
┌─────────────┐
│ Render Tree │ (DOM + CSSOM combined)
└──────┬──────┘
       │
       ▼
┌─────────────┐
│   Layout    │ (Calculate positions)
└──────┬──────┘
       │
       ▼
┌─────────────┐
│   Paint     │ (Fill pixels)
└──────┬──────┘
       │
       ▼
┌─────────────┐
│  Composite  │ (Combine layers)
└──────┬──────┘
       │
       ▼
┌─────────────┐
│   DISPLAY   │
└─────────────┘

Step-by-Step

Parse HTML → Build DOM tree
Parse CSS → Build CSSOM tree
Combine → Create Render tree
Layout → Calculate positions and sizes
Paint → Fill in pixels
Composite → Combine layers for display

Testing HTTP Requests

You can test HTTP requests using curl from your terminal:

# Basic GET request
curl -I https://fernan.dev/

# Response:
HTTP/2 200 
content-type: text/html; charset=utf-8
content-length: 15234
server: GitHub.com

# Get full response with headers
curl -v https://fernan.dev/

# POST request with JSON
curl -X POST https://api.example.com/data \
  -H "Content-Type: application/json" \
  -d '{"name":"test"}'

Key Takeaways

The Internet is the network; the Web is a service on it
Clients (browsers) request resources from servers
DNS translates domain names to IP addresses
HTTP defines how clients and servers communicate
HTTPS encrypts data using TLS for security
Browsers render pages through: DOM → CSSOM → Render → Layout → Paint → Composite

FAQ

What's the difference between HTTP and HTTPS?

HTTPS is HTTP over TLS encryption. HTTPS encrypts all data between client and server, while HTTP sends data in plain text that can be intercepted.

How long does DNS resolution take?

Typically 20-120ms for the first request. Subsequent requests are cached, making them nearly instant.

What port does HTTP use?

HTTP uses port 80 by default. HTTPS uses port 443.

Why do I need to understand this as a FrontEnd developer?

Understanding the web foundation helps you debug issues, optimize performance, implement security best practices, and communicate effectively with backend developers.

Next Steps

Now that you understand how the web works, you're ready to learn how to create web content. Continue with:

→ HTML Fundamentals