HTML How the Web Works

When you type a URL and hit Enter, eight things happen in under a second:

1. You type https://codekilla.com.
2. DNS lookup — your computer asks "what IP is codekilla.com?" and gets back 203.0.113.42.
3. TCP + TLS handshake — a secure connection opens to that IP on port 443.
4. HTTP request — your browser sends GET / HTTP/1.1.
5. Server responds with HTML text + status 200 OK.
6. Parser builds the DOM — the browser reads the HTML top-to-bottom.
7. Sub-resources fetch — CSS, JS, images, fonts each trigger their own request.
8. Render — paint the screen, run JS, fire DOMContentLoaded then load events.

[Browser] --GET--> [DNS] --IP--> [Server (HTML/CSS/JS)] --200--> [Browser]

Step 1. Open Chrome DevTools (F12) → Network tab. Step 2. Visit any site (e.g. https://example.com). Step 3. Inspect the very first row:

• Method: GET
• Status: 200
• Type: document
• Initiator: navigation
• Time: ~50–500 ms

The HTML doc is always the first request. Everything else (CSS, JS, images) is triggered by parsing it.

The browser only speaks HTTP(S). A Python or Java backend listens on a port and responds with HTML strings.

• Static page — HTML files sit on the server unchanged. Cheap, fast (CDN-cached). Examples: docs, blogs.
• Dynamic page — server runs code per request, builds HTML on the fly. Examples: Twitter feed, dashboards.

• Confusing "deploy" with "publish" — deploy = upload to server; publish = make it reachable on the internet.
• Thinking JS runs on the server by default — in the browser it's client-side. Node.js gives you JS on the server.
• Forgetting HTTPS — http:// is plain text; use https:// for everything in production.

1. Trace a request — Open DevTools → Network → reload example.com and screenshot the waterfall. Hint: the first row is the document.
2. Find your IP — Run ping codekilla.com in a terminal. The IP shown is what DNS resolved. Hint: requires internet.
3. Status hunting — Visit a non-existent page (example.com/foo) and read the status code. Hint: 404.

💡 Think Like a Programmer: Every web app, no matter how complex, is just HTTP requests + HTML responses. Once that clicks, debugging gets infinitely easier.