How the Web Works

This is the first module for new learners. Before writing code, you should understand what happens when you open a website.

Learning Goals

• Understand the roles of client, server, and database
• Read and interpret a URL
• Learn DNS lookup basics
• Understand HTTP methods and status codes
• Know why HTTPS matters

Concepts in Order

1. Client and Server
   • Browser is the client
   • Web app/API is the server
2. URL Anatomy
   • https://example.com:443/path?x=1#section
3. DNS Resolution
   • Domain name → IP address
4. HTTP Request/Response
   • Request headers, body, response body, status
5. HTTPS + TLS
   • Encryption, integrity, trust
6. Caching and CDN Basics
   • Faster loading and reduced server load

Quick Exercise

Open browser DevTools (Network tab), refresh a site, and identify:

• Request method (GET, POST)
• Status code (200, 301, 404)
• Response size and timing

Next Module

👉 Continue to HTML5 Fundamentals

Common Mistakes

• Skipping fundamentals like DNS/HTTP and jumping straight into frameworks
• Confusing browser-side behavior with server-side processing
• Ignoring response codes and headers while debugging requests

Try It Yourself

• Re-open DevTools Network tab and inspect one full request lifecycle.
• Record method, status code, size, and timing for 3 different requests.

Key Takeaways

• Modern web apps follow a predictable request/response lifecycle you can debug.
• DNS, HTTP/HTTPS, and caching are core foundations for all web development.
• DevTools gives direct visibility into how browsers and servers communicate.