Interactive Diagram: Click on any component or arrow in the diagram below to see its detailed annotation and explanation.
CLIENT SIDE NETWORK / DNS WEB SERVER APPLICATION & DATABASE 🌐 Browser (User types URL) HTML/CSS/JS rendering DNS Lookup 🔍 DNS Resolver (Domain → IP Address) Returns IP to browser IP Returned HTTP GET Request 🖥️ Web Server (Apache / Nginx) Routes HTTP request Forwards ⚙️ App Server (PHP / Node.js) Processes business logic SQL Query 🗄️ Database (MySQL / MongoDB) Stores & retrieves data Result Set HTML Built HTTP 200 Response ⚙️ App Server Generates HTML response Sets HTTP headers 🗄️ Database Returns rows/JSON to App Server 🖥️ Web Server Sends HTTP response back to client 🖼️ Browser Rendering Parses HTML → DOM Applies CSS → CSSOM Response received 1 2 3 4 5 6
Browser (Client) DNS Resolver Web Server App Server Database Browser Rendering — Solid = Request   - - Dashed = Response

Click any component or arrow in the diagram to see its explanation here.

Step-by-Step Summary
1Browser — The user types a URL (e.g., www.igcgolf.com). The browser needs to find the IP address for this domain name.
2DNS Lookup — The browser sends a DNS query. The DNS resolver translates the domain name to an IP address (e.g., 192.168.1.10) and returns it to the browser.
3HTTP Request — The browser opens a TCP connection to the server IP and sends an HTTP GET request with headers (Host, User-Agent, Accept, etc.).
4Web Server — Apache or Nginx receives the request, determines the correct handler (static file, PHP script, or proxy), and forwards it to the application server.
5App Server + Database — PHP/Node.js processes business logic, queries the MySQL/MongoDB database, retrieves data, and generates an HTML response.
6HTTP Response & Rendering — The server sends an HTTP 200 response with the HTML content. The browser parses HTML into the DOM, applies CSS (CSSOM), executes JavaScript, and paints the final page.