How the web works - 2 - Front End Course In Arabic

Overview

This is an Arabic front-end course lesson (part 2) explaining how the web works: the browser ↔ server interaction, URL components, networking basics, HTTP requests/responses, and how browsers render pages. The instructor uses Facebook and Chrome DevTools as live examples and a real-life mail analogy to illustrate IP/port and addressing.

---

Key technological concepts

Browser vs. Server

• Browser: client side — what the user uses to request and display pages.
• Server: computer that stores website files and responds to requests.

URL / URI components

• Protocol/scheme (http / https): rules for sending/receiving data; https = encrypted/secure.
• Domain: human-readable name that maps to an IP address via DNS.
• Path (e.g., /profile): specifies the resource on the server.
• Port number: gateway number combined with IP to reach the service.

DNS (Domain Name System)

• Converts human words (domain names) into numeric IP addresses and ports so the client can contact the server.

TCP connection

• Underlies HTTP: establishes and stabilizes the connection before HTTP exchanges occur.

HTTP request structure (what the browser sends)

• Start line: request target (path) and HTTP version.
• Headers: e.g., Host, User-Agent (browser + version), Accept-Language, etc.
• Body: data sent by the user (e.g., login form fields) when applicable.

HTTP response structure (what the server returns)

• Status code and message (examples: 200 OK, 404 Not Found).
• Headers: metadata including content type, date, etc.
• Body: the resource content (commonly HTML for pages).

Content type and rendering

• Server returns HTML (text); the browser treats it as the document to render.
• You can inspect HTML with “View Page Source” or DevTools to see how the page was built.

---

Practical / demo items shown

• Using Google Chrome DevTools Network tab:
  • Viewing remote address (IP + port) for facebook.com.
  • Inspecting Request Headers and Response Headers.
  • Viewing the returned HTML content (response body) and page source.

---

Status codes and examples

• 200 = OK (resource retrieved successfully).
• 404 = Not Found (requested page doesn’t exist).
• Note: status codes vary depending on the operation.

---

Course roadmap / next topics promised

Upcoming video(s) will cover:

1. Front-end vs Back-end in more detail.
2. Back-end responsibilities: servers, databases, file systems.
3. Languages and skills to learn for front-end and back-end development, and how to start building websites/apps.

---

Teaching aids / analogies

Mail analogy: address = IP, apartment/gateway = port; DNS = phonebook converting names to numbers.

---

Main speakers / sources

• Arabic course instructor (unnamed) demonstrating concepts using:
  • Google Chrome (DevTools)
  • Facebook (example domain)
• Lesson title: Front End Course In Arabic — “How the web works - 2”