03 / Browser & HTTP

Follow a request from URL to page.

Understand DNS, HTTPS, requests, responses, status codes and the browser tools that reveal each step.

How a browser requests a page

  1. The browser parses the URL into scheme, host, port, path and query.
  2. DNS resolves the hostname to a network address.
  3. HTTPS establishes an encrypted, authenticated connection.
  4. The browser sends an HTTP request.
  5. The server returns a status, headers and a body.
  6. The browser parses HTML and requests linked CSS, JavaScript, fonts and images.

Requests and responses

GET /roadmap.html HTTP/2
Host: hafizrich.com
Accept: text/html

HTTP/2 200 OK
Content-Type: text/html; charset=utf-8
Cache-Control: public, max-age=300

Headers carry metadata. The body carries the representation: HTML, JSON, an image or another media type.

Status codes describe outcomes

RangeMeaningExamples
2xxSuccessful200 OK, 201 Created
3xxRedirect or cache301 Moved, 304 Not Modified
4xxRequest-side problem400 Bad Request, 404 Not Found
5xxServer-side failure500 Internal Server Error

Browser DevTools

Use Elements for DOM and CSS, Console for JavaScript output, Network for requests and timing, Sources for breakpoints, and Accessibility inspection for names and roles.

Debug systematically: reproduce, observe, isolate, form a hypothesis, change one variable, and verify.

Basic web security

Treat all input as untrusted. Use HTTPS, escape output, validate on the server, keep secrets out of browser code, avoid injecting untrusted HTML and update dependencies deliberately.

Next: development tooling

See where npm and Vite fit after browser fundamentals.

npm & Vite →