Week 1: Understanding the Web & HTTP Basics
1. 🌐 Introduction to the Web: Client-Server Model
What is the Web?
The World Wide Web (WWW) is a system of interlinked hypertext documents accessed via
the Internet. Users view web pages using web browsers (clients), which interact with
servers to retrieve and display content.
Client-Server Model
- Client: A device or application (e.g., browser) that initiates requests.
- Server: A machine or application that listens for requests and responds with data.
Basic Communication Flow:
1. A user enters a URL (e.g., https://example.com).
2. The browser (client) sends a DNS request to resolve the domain to an IP address.
3. The browser sends an HTTP request to the resolved IP address.
4. The server processes the request and sends an HTTP response back (e.g., HTML content).
5. The browser renders the page.
Examples:
- Browsing Facebook: Client → Request for profile page → Server sends HTML/CSS/JS
- Filling a form: Client → POST request → Server processes and returns success/failure
Protocols Involved:
- DNS (Domain Name System)
- TCP/IP (Transmission Control Protocol / Internet Protocol)
- HTTP/HTTPS (HyperText Transfer Protocol)
Key Concepts:
- Statelessness: Each HTTP request is independent.
- Port 80: Default for HTTP
- Port 443: Default for HTTPS
📺 Recommended Video: How the Web Works in 10 Minutes – Tech With Tim
https://www.youtube.com/watch?v=J8hzJxb0rpc
2. 📡 Basics of HTTP & HTTPS
What is HTTP?
HTTP (HyperText Transfer Protocol) is the foundation of data communication for the web.
It defines how clients and servers communicate.
HTTP Request Structure:
- Request Line: GET /index.html HTTP/1.1
- Headers: Key-value pairs like User-Agent, Accept, etc.
- Body: Data sent with POST or PUT requests
HTTP Response Structure:
- Status Line: HTTP/1.1 200 OK
- Headers: Metadata (Content-Type, Set-Cookie, etc.)
- Body: The requested resource (e.g., HTML)
Common HTTP Methods:
GET – Retrieve data
POST – Submit data
PUT – Update data
DELETE – Remove data
PATCH – Partially update data
HTTP Status Codes:
200 – OK (Success)
301 – Moved Permanently
400 – Bad Request
401 – Unauthorized
403 – Forbidden
404 – Not Found
500 – Internal Server Error
HTTPS (HTTP Secure):
- Uses SSL/TLS encryption
- Ensures confidentiality, integrity, and authenticity
- Certificates issued by trusted Certificate Authorities (CAs)
📺 Recommended Video: HTTP Explained – NetworkChuck
https://www.youtube.com/watch?v=iYM2zFP3Zn0
3. Understanding Web Technologies (HTML, CSS, JavaScript)
HTML (HyperText Markup Language):
- Provides structure to a web page
- Elements: <html>, <head>, <body>, <h1>–<h6>, <p>, <form>, <input>, etc.
Example:
<form action="/submit" method="post">
<input type="text" name="username" />
<input type="password" name="password" />
<button type="submit">Login</button>
</form>
CSS (Cascading Style Sheets):
- Used for styling web pages
- Selectors target HTML elements
- Properties include color, font-size, margin, padding, etc.
Example:
body {
font-family: Arial;
background-color: #f4f4f4;
}
form {
padding: 20px;
border: 1px solid #ccc;
}
JavaScript:
- Adds interactivity and logic
- Used for DOM manipulation, event handling, form validation
Example:
document.querySelector("form").addEventListener("submit", function(e) {
let username = document.querySelector("input[name='username']").value;
if (username === "") {
alert("Username is required!");
e.preventDefault();
}
});
📺 Recommended Video: HTML + CSS + JS Full Course – SuperSimpleDev
https://www.youtube.com/watch?v=zJSY8tbf_ys
4. Hands-on: Inspecting Network Traffic with DevTools
Why Learn DevTools?
- Helps you understand how browsers communicate with servers
- Essential for debugging requests, errors, and headers
How to Use:
1. Open DevTools (Right-click → Inspect → Network tab)
2. Reload the page
3. Observe requests:
- Method (GET/POST)
- Status (200, 404, etc.)
- Size (how much data is transferred)
- Time (how long request takes)
Analyzing a Request:
- Click a request → View:
- Headers: Request & response headers
- Payload: Data sent in POST
- Preview: HTML/CSS/JSON response
- Timing: Breakdown of request lifecycle
Use Cases:
- Check if a login form is secure
- See if data is sent in plain text
- Debug API requests in web apps
📺 Recommended Video: Inspect HTTP Requests with Chrome DevTools – Google Chrome
Developers
https://www.youtube.com/watch?v=e1gAyQuIFQo
✅ Summary
In Week 1, learners should:
- Grasp how the web works (client-server model)
- Understand HTTP(S) and key methods/status codes
- Build foundational knowledge of HTML, CSS, and JavaScript
- Begin using browser DevTools to inspect real network traffic
