How the Internet & Web Work

The Internet is a global network of networks — billions of devices connected by cables, fibre, Wi-Fi and cell towers, all speaking common protocols (agreed rules). The World Wide Web, invented by Tim Berners-Lee in 1989, is one service that runs on top of the Internet: web pages linked together and fetched with HTTP. Email, video calls and online games are other services on the same Internet.

#Clients and servers

• A client requests something — your browser or a mobile app.
• A server is a computer that waits for requests and responds — with a web page, an image, or data.

#Addresses: IP and DNS

Every device on the Internet has an IP address:

• IPv4: four numbers 0–255, e.g. 142.250.193.78 (about 4.3 billion addresses — not enough).
• IPv6: eight groups of hex, e.g. 2404:6800:4007:81a::200e.

Humans prefer names. The Domain Name System (DNS) is the Internet's phone book: it translates a name such as www.example.com into an IP address, asking a hierarchy of DNS servers (root → .com → example.com) and caching the answer.

#Packets, TCP and routing

Data travels in small packets. Each packet carries the source and destination IP addresses and is forwarded hop by hop by routers. Packets of one message may take different routes.

• IP delivers packets on a best-effort basis.
• TCP sits on top: it numbers packets, re-sends lost ones and reassembles them in order — a reliable stream. (UDP skips that for speed — video calls, games.)

#What happens when you visit a website

#HTTP: requests and responses

HTTP (HyperText Transfer Protocol) is a simple text conversation:

GET /courses/c HTTP/1.1
Host: example.com
User-Agent: Mozilla/5.0
Accept: text/html

HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
Content-Length: 1532

<!doctype html>
<html> ... </html>

HTTPS is HTTP inside an encrypted TLS connection, so nobody between you and the server can read or alter the traffic — that is what the padlock in the address bar means.

#URLs

https://shop.example.com:443/search?q=keyboard&page=2#reviews

const url = new URL("https://shop.example.com:443/search?q=keyboard&page=2#reviews");
console.log(url.protocol, url.hostname, url.pathname);
console.log("q =", url.searchParams.get("q"), "| page =", url.searchParams.get("page"));
console.log("fragment:", url.hash);

https: shop.example.com /search
q = keyboard | page = 2
fragment: #reviews

#Front end and back end

A full-stack developer works on both.