Scribd
Upload
2 views

Web Week1 Notes

Week 1 focuses on understanding the web and HTTP basics, including the client-server model and the communication flow between browsers and servers. It covers HTTP/HTTPS protocols, request/response structures, common methods, and status codes, along with an introduction to web technologies like HTML, CSS, and JavaScript. Additionally, learners are encouraged to use browser DevTools for inspecting network traffic and debugging requests.

Uploaded by

juniorjacksonkairani
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views

Web Week1 Notes

Week 1 focuses on understanding the web and HTTP basics, including the client-server model and the communication flow between browsers and servers. It covers HTTP/HTTPS protocols, request/response structures, common methods, and status codes, along with an introduction to web technologies like HTML, CSS, and JavaScript. Additionally, learners are encouraged to use browser DevTools for inspecting network traffic and debugging requests.

Uploaded by

juniorjacksonkairani
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

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

You might also like