The World Wide Web (WWW) operates on a distributed computing architecture known as the Client-Server Model. It partitions workloads between service requestors (Clients) and service providers (Servers):
curl or Postman). The client is responsible for rendering user interfaces and executing client-side scripts.Physical Transmission: When you click a link, your computer's Network Interface Card (NIC) serializes the data into packets transmitted across your local Wi-Fi/Ethernet router $\rightarrow$ Internet Service Provider (ISP) $\rightarrow$ Tier-1 Internet Backbones (undersea transoceanic fiber-optic cables) $\rightarrow$ Cloud Edge Datacenter hosting the target server.
• HTTP (Port 80): An application-layer, stateless protocol designed in 1989 by Tim Berners-Lee to transmit hypermedia documents. The vulnerability: HTTP transmits data over the wire in plain text. Anyone on the same public Wi-Fi network running a packet analyzer (like Wireshark) can read passwords, session cookies, and credit card numbers (a Man-in-the-Middle or MitM attack).
• HTTPS (Port 443): HTTP secured by TLS (Transport Layer Security) (historically SSL). Every byte transmitted is mathematically encrypted using a hybrid cipher system combining asymmetric public-key cryptography (RSA/ECC) during the initial handshake and symmetric AES cryptography for high-speed session streaming.
| Feature | HTTP (Standard) | HTTPS (Secure) |
|---|---|---|
| Default Port | Port 80 | Port 443 |
| Security & Encryption | None (Plain-text clear packets) | TLS 1.3 End-to-End Cryptographic Encryption |
| Digital Certificate | Not Required | Requires SSL/TLS Certificate signed by a CA (Certificate Authority) |
| SEO & Trust | Flagged as "Not Secure" by browsers; penalized by Google | Displays secure padlock icon; optimal search engine indexing |
A URL specifies the unique network address and protocol required to retrieve a web asset:
https://www.devascentacademy.me:443/courses/web-dev?track=frontend&id=101#lesson-summary
https://): Dictates the communication rule (HTTP, HTTPS, FTP, WebSocket).www. / api.): Specific host partition within the domain.devascentacademy.me): Human-readable server alias mapped to an IP address.:443): Virtual communication gateway on the server (often omitted as 80/443 are defaults)./courses/web-dev): The hierarchical resource location on the web server.?track=frontend&id=101): Key-value pairs used for search filtering and state passing.#lesson-summary): Client-side bookmark pointing directly to a specific HTML element ID.| Status Code Class | Category Name | Classic Industry Examples |
|---|---|---|
| 1xx | Informational | 101 Switching Protocols (Upgrading connection to WebSockets) |
| 2xx | Success | 200 OK (Successful fetch), 201 Created (Resource saved), 204 No Content |
| 3xx | Redirection | 301 Moved Permanently, 302 Found (Temporary), 304 Not Modified (Cache valid) |
| 4xx | Client Error | 400 Bad Request, 401 Unauthorized, 403 Forbidden, 404 Not Found |
| 5xx | Server Error | 500 Internal Server Error (Unhandled backend crash), 502 Bad Gateway, 503 Unavailable |
Computers do not communicate via names like google.com; they communicate using numerical IP (Internet Protocol) Addresses (e.g., IPv4: 142.250.190.46 or IPv6: 2607:f8b0:4005:808::200e).
DNS acts as the global, decentralized "phonebook" of the internet, resolving human-readable domain names into machine-routable IP addresses in milliseconds.
| DNS Record Type | Function | Typical Example |
|---|---|---|
| A Record | Maps a domain name directly to a 32-bit IPv4 address. | devascentacademy.me ➔ 76.76.21.21 |
| AAAA Record | Maps a domain name to a 128-bit IPv6 address. | devascentacademy.me ➔ 2606:4700::6810 |
| CNAME Record | Canonical Name: Aliases one domain name to another domain. | blog.domain.com ➔ domain.hashnode.network |
| MX Record | Mail Exchange: Directs email traffic to the company mail servers. | domain.com ➔ aspmx.l.google.com |
When the browser receives raw HTML bytes across the network stream, its Rendering Engine (e.g., Blink in Chrome, Gecko in Firefox, WebKit in Safari) executes a multi-stage compilation pipeline known as the Critical Rendering Path (CRP):
<head> and elements with display: none).Modern web engineering requires two indispensable developer interfaces: a production-grade code editor (Visual Studio Code) and browser runtime diagnostic instruments (Chrome/Firefox Developer Tools).
{
"editor.fontSize": 14,
"editor.fontFamily": "'Fira Code', 'Inter', monospace",
"editor.fontLigatures": true,
"editor.tabSize": 2,
"editor.wordWrap": "on",
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"liveServer.settings.donotShowInfoMsg": true,
"emmet.includeLanguages": {
"javascript": "javascriptreact"
}
}| DevTools Panel | Shortcut (Win / Mac) | Primary Engineering Use Case |
|---|---|---|
| Elements Panel | Ctrl+Shift+C / Cmd+Opt+C |
Live DOM element inspection, CSS box-model padding/margin debugging, live style tweaking. |
| Console Panel | Ctrl+Shift+J / Cmd+Opt+J |
JavaScript execution runtime, reading error stack traces, logging objects via console.table(). |
| Network Panel | F12 ➔ Network tab |
Inspecting HTTP status codes (200, 404), latency waterfalls, request/response headers, bandwidth throttling (Fast/Slow 3G). |
| Application Panel | F12 ➔ Application tab |
Inspecting client-side storage: localStorage, sessionStorage, and HTTP Cookies. |
• Git: A free, open-source Distributed Version Control System (DVCS) installed locally on your machine. It tracks granular line-by-line snapshots of your project history, enabling branching, merging, and time-travel rollbacks.
• GitHub: A cloud hosting platform for Git repositories. It provides collaboration mechanisms like Pull Requests (PRs), Issue Trackers, Code Reviews, and CI/CD Automation (GitHub Actions).
# Step 1: Initialize Git in your current web project directory
git init
# Step 2: Configure your global developer identity (one-time setup)
git config --global user.name "Shivan Kumar"
git config --global user.email "shivan@devascent.me"
# Step 3: Check current repository status (shows modified/untracked files)
git status
# Step 4: Stage files to the Index
git add index.html style.css app.js # Or: git add . (stages everything)
# Step 5: Commit staged snapshot with an atomic, descriptive message
git commit -m "feat: initialize landing page layout and modern navbar"
# Step 6: Rename local default branch to main
git branch -M main
# Step 7: Link local repository to your remote GitHub repository
git remote add origin https://github.com/shivan632/devascent-web.git
# Step 8: Push your commits to GitHub
git push -u origin mainThis hands-on web application allows students to live-test the concepts learned in this unit: executing real asynchronous HTTP requests via the browser's fetch() API, inspecting response headers, simulating latency, and exploring the rendered DOM elements dynamically.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DevAscent HTTP Inspector</title>
<style>
body { font-family: sans-serif; background: #0f172a; color: #f8fafc; padding: 24px; }
.card { background: #1e293b; padding: 20px; border-radius: 10px; max-width: 600px; margin: 0 auto; }
button { background: #f97316; color: white; border: none; padding: 10px 16px; border-radius: 6px; cursor: pointer; font-weight: bold; }
button:hover { background: #ea580c; }
pre { background: #090d16; padding: 12px; border-radius: 6px; color: #34d399; font-size: 12px; overflow-x: auto; }
</style>
</head>
<body>
<div class="card">
<h2>🌐 Live HTTP Request Inspector</h2>
<p>Click below to execute an HTTP GET request and inspect the response headers.</p>
<button onclick="fetchNetworkData()">Send HTTP Request</button>
<h4>Network Output:</h4>
<pre id="network-display">Awaiting request trigger...</pre>
</div>
<script>
async function fetchNetworkData() {
const display = document.getElementById('network-display');
display.textContent = 'Initiating TCP Handshake & HTTP GET...';
try {
const startTime = performance.now();
const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
const duration = (performance.now() - startTime).toFixed(2);
const payload = await response.json();
display.textContent =
`HTTP Status: ` + response.status + ` ` + response.statusText + `\n` +
`Round-Trip Time: ` + duration + ` ms\n` +
`Content-Type: ` + response.headers.get('content-type') + `\n\n` +
`Payload Body:\n` + JSON.stringify(payload, null, 2);
} catch (err) {
display.textContent = 'Network Error: ' + err.message;
}
}
</script>
</body>
</html>google.com) into numerical IP addresses (e.g., 142.250.190.46) that network routers require to direct packets across the internet.
404 Not Found is a Client Error indicating the server could not locate the requested resource URI. 500 Internal Server Error is a Server Error indicating that the web server crashed or encountered an unhandled exception while trying to fulfill the request.