Skip to content
beginnerPhase 29 · Web Foundations

How the Web Works

Understand the client-server model, DNS, HTTP, and how browsers render pages.

30m
0 problems
Topic Progress0%

What is the Web

The World Wide Web (WWW) is an information system where documents and resources are identified by URLs, interlinked by hypertext links, and accessed via the internet. It was invented by Tim Berners-Lee in 1989 at CERN.

Key Concepts

  • Web Pages: Documents written in HTML that can be displayed in a browser
  • Web Server: A computer that stores web pages and serves them to users
  • Web Browser: Software that requests and displays web pages (Chrome, Firefox, Safari)
  • Hypertext: Text containing links to other texts

How the Web Differs from the Internet

The internet is the global network of computers. The web is one service that runs on top of the internet. Other services include:

  • Email (SMTP/IMAP)
  • File Transfer (FTP)
  • Streaming (RTMP)
  • Instant Messaging

The Web's Building Blocks

World Wide Web
├── HTML (Structure)
├── CSS (Presentation)
├── JavaScript (Behavior)
├── URLs (Addressing)
└── HTTP (Communication)

Evolution of the Web

  1. Web 1.0 (1990s): Static pages, read-only
  2. Web 2.0 (2000s): Dynamic content, user-generated content, social media
  3. Web 3.0 (2010s+): APIs, single-page apps, responsive design

Client-Server Model

The client-server model is the foundational architecture of the web. It defines how two applications communicate over a network.

The Roles

  • Client: The application requesting information (your browser)
  • Server: The application providing information (web server)

Communication Flow

Client (Browser)                    Server (Web Server)
     |                                    |
     |  1. Send Request                  |
     |  (HTTP GET /index.html)           |
     |---------------------------------->|
     |                                    |
     |  2. Process Request               |
     |  (Find file, generate response)   |
     |                                    |
     |  3. Send Response                 |
     |  (HTTP 200 OK + HTML content)     |
     |<----------------------------------|
     |                                    |
     |  4. Render Page                   |
     |  (Parse HTML, CSS, JS)            |
     |                                    |

Types of Servers

  • Web Server: Serves HTML, CSS, JavaScript (Apache, Nginx)
  • Application Server: Runs application logic (Node.js, Django, Spring)
  • Database Server: Stores and retrieves data (MySQL, PostgreSQL)
  • File Server: Stores files (S3, local storage)

Stateless Communication

HTTP is stateless — each request is independent. The server doesn't remember previous requests. This is why we need cookies and sessions for login states.

Request-Response Cycle

  1. User enters URL in browser
  2. Browser resolves domain name to IP address
  3. Browser establishes TCP connection
  4. Browser sends HTTP request
  5. Server processes request
  6. Server sends HTTP response
  7. Browser renders the response

How Browsers Fetch Pages

When you type a URL and press Enter, a complex series of events occurs. Understanding this process is crucial for web developers.

Step-by-Step Process

1. URL Parsing
   https://www.example.com:443/page?id=1#section
   |____| |______________||__| |___|  |_______|
   scheme   hostname     port path   query    fragment

2. DNS Lookup
   www.example.com → 93.184.216.34

3. TCP Connection
   Three-way handshake: SYN → SYN-ACK → ACK

4. TLS Handshake (HTTPS)
   Certificate exchange and key agreement

5. HTTP Request
   GET /page?id=1 HTTP/1.1
   Host: www.example.com

6. Server Response
   HTTP/1.1 200 OK
   Content-Type: text/html
   <html>...</html>

7. Browser Rendering
   Parse HTML → Build DOM → Load CSS → Build CSSOM
   → Layout → Paint → Composite

DNS and URL Resolution

DNS (Domain Name System) translates human-readable domain names into IP addresses. Without DNS, you'd need to remember numbers like 142.250.80.46 instead of google.com.

DNS Lookup Process

Browser Cache → OS Cache → Router Cache → ISP DNS → Root DNS → TLD DNS → Authoritative DNS

DNS Record Types

Type Purpose Example
A Maps domain to IPv4 example.com → 93.184.216.34
AAAA Maps domain to IPv6 example.com → 2606:2800:220:1:...
CNAME Alias to another domain www.example.com → example.com
MX Mail server example.com → mail.example.com
TXT Text information SPF, DKIM records

Caching Layers

DNS results are cached at multiple levels:

  1. Browser cache: Stores recent lookups
  2. Operating system cache: System-level DNS cache
  3. Router cache: Local network cache
  4. ISP cache: Internet service provider cache

TTL (Time to Live)

Each DNS record has a TTL value (in seconds) that determines how long it should be cached. Lower TTL means faster updates but more DNS queries.

Practice Problems

0/3solved
Build How the Web Works Component

Create a reusable React component implementing How the Web Works. Include proper state management and accessibility.

Solution
// Production-ready component with:
// - Proper TypeScript types
// - Accessibility (ARIA)
// - Error boundaries
// - Loading states
// - Memoization where needed
How the Web Works Testing

Write unit and integration tests for How the Web Works using React Testing Library.

Solution
// Test coverage:
// 1. Rendering tests
// 2. Interaction tests
// 3. Edge case tests
// 4. Accessibility tests
How the Web Works Performance

Optimize How the Web Works for performance. Consider memoization, code splitting, and bundle size.

Solution
// Optimization techniques:
// 1. React.memo / useMemo / useCallback
// 2. Code splitting with lazy()
// 3. Virtual scrolling for lists
// 4. Image lazy loading
// 5. Bundle analysis

Quiz

1. Who invented the World Wide Web?

Question 1 options

2. What is the correct order of the client-server communication?

Question 2 options

3. What does DNS stand for?

Question 3 options

4. Which of these is NOT a service that runs on the internet?

Question 4 options

Flashcards

Question

What is the client-server model?

Click to reveal answer

Answer

An architecture where the client (browser) requests resources and the server provides them. Communication follows a request-response pattern.

Question

What is DNS?

Click to reveal answer

Answer

Domain Name System - translates human-readable domain names (google.com) into IP addresses (142.250.80.46).

Question

What happens when you type a URL in the browser?

Click to reveal answer

Answer

DNS lookup → TCP connection → TLS handshake (HTTPS) → HTTP request → Server response → Browser rendering.

Question

What is the difference between the web and the internet?

Click to reveal answer

Answer

The internet is the global network infrastructure. The web is one service that runs on the internet, using HTTP/HTTPS protocol.

Question

What is How the Web Works?

Click to reveal answer

Answer

How the Web Works is a key concept in frontend development.

Revision Notes

Key Takeaways

  • 1.The web runs on top of the internet infrastructure
  • 2.Client-server model is the foundation of web communication
  • 3.DNS translates domain names to IP addresses
  • 4.HTTP is stateless - each request is independent
  • 5.Browsers follow a complex process to render web pages

Interview Tips

  • •Be able to explain the full journey from URL to rendered page
  • •Understand the difference between the web and the internet
  • •Know what DNS does and why it's essential
  • •Explain the client-server model with real examples

Cheat Sheet

How the Web Works Cheat Sheet

Key Components:

  • Client (Browser) sends requests
  • Server processes and responds
  • HTTP is the communication protocol
  • URLs identify resources

Request-Response Cycle:

  1. User enters URL
  2. DNS resolves domain to IP
  3. TCP connection established
  4. HTTP request sent
  5. Server processes request
  6. HTTP response returned
  7. Browser renders page

DNS Record Types:

  • A: Domain → IPv4
  • AAAA: Domain → IPv6
  • CNAME: Domain alias
  • MX: Mail server
  • TXT: Text records