How the Web Works

🌐 What Happens When You Type a URL?

Every time you visit a website, an incredible chain of events unfolds in milliseconds. Before writing a single line of HTML or CSS, it helps to understand what's actually happening behind the scenes.

In this module, you'll learn about the key players — browsers, servers, DNS, and HTTP — and discover the three languages that make up every web page: HTML, CSS, and JavaScript.

🔗 Anatomy of a URL

A URL (Uniform Resource Locator) is the address of a resource on the web. Let's break one down:

🖥️ Client & Server Model

The web is built on a simple idea: a client (your browser) asks for something, and a server (a computer somewhere) sends it back.

🔍 DNS: The Web's Phone Book

Computers communicate using IP addresses (like 93.184.216.34). But humans prefer names like example.com. DNS (Domain Name System) is the translator between the two.

📡 HTTP: The Language of the Web

HTTP (HyperText Transfer Protocol) is the set of rules browsers and servers use to communicate. Every web page you visit involves at least one HTTP request and response.

Common HTTP Methods

📊 HTTP Status Codes

Every HTTP response includes a status code — a 3-digit number telling the browser what happened. They're grouped by their first digit:

🛠️ Chrome DevTools: Your X-Ray Vision

Chrome DevTools (and similar tools in Firefox/Safari) let you see everything happening under the hood. As a web developer, you'll use them constantly.

Key DevTools Tabs

🧩 The Web Trio: HTML, CSS & JavaScript

The server sends files to the browser — but what kind of files? Modern web pages are built with three technologies, each with its own job. Let's trace how they got here.

🏗️ What Each One Does

Think of building a house:

<h1>Welcome</h1>
<p>Hello world.</p>
<button>Click me</button>

h1 {
  color: blue;
  font-size: 36px;
}

button.addEventListener('click',
  () => alert('Hello!')
);

📋 Module Summary