🌐 Foundations of Web Development

The journey of learning web development always starts with the fundamentals. In this article, we'll cover two essential areas: Internet & Web Basics and Browser APIs & Storage. Once you understand these topics clearly, your foundation in web development will become strong.

🌍 Internet & Web Basics

1. How the Internet Works The internet is a global network of computers and servers. When a user visits a website, the browser sends a request to the server, and the server sends back a response. Client vs Server Client → Usually the browser, which sends the request. Server → Processes data and sends the response back to the client.

ISP, Router, Switch
ISP (Internet Service Provider) → Provides internet connectivity.
Router → Directs network traffic between devices.
Switch → Connects devices within the same network.

1. IP Address & DNS IP Address is the unique identifier of every device on the internet. IPv4 vs IPv6 → IPv4 is a 32-bit address (e.g., 192.168.0.1), whereas IPv6 is 128-bit and supports many more addresses. DNS (Domain Name System) → Converts human-readable domain names (e.g., google.com) into IP addresses.

DNS Resolution Flow
Domain Name → DNS Lookup → IP Address → Server Response

1. HTTP & HTTPS HTTP is the communication protocol of the web. HTTP Request Structure: Method, Headers, Body Common Methods: GET, POST, PUT, DELETE, PATCH Status Codes: 1xx → Informational 2xx → Success (e.g., 200 OK) 3xx → Redirection 4xx → Client Error (e.g., 404 Not Found) 5xx → Server Error

HTTPS & SSL/TLS
HTTPS encrypts the data to protect it from man-in-the-middle attacks. SSL/TLS certificates ensure secure communication.

1. Client-Server Architecture Frontend → The part that runs in the browser (UI). Backend → Handles server-side logic and data processing. Database → Stores data.

Request Flow:
Browser → Server → Database → Back to Browser

1. Statelessness of HTTP HTTP is a stateless protocol, meaning each request is independent, and the server doesn't remember previous ones. State Management Solutions Cookies Sessions Tokens (JWT)

Session Cookies Basics
Session Cookie → Deleted when the browser closes.
Persistent Cookie → Stored until a specified expiry time.
Use Cases: User Login, Shopping Cart, User Preferences

🖥️ Browser APIs & Storage

1. DOM (Document Object Model)
   DOM is the tree structure representation of an HTML document.
   Selecting Elements → getElementById, querySelector
   Changing Content → innerHTML, textContent
   Changing Styles → element.style, classList

2. Events API
   Event Listeners → addEventListener
   Common Events → click, keyup, change, submit
   Event Bubbling & Capturing → How events propagate through parent-child elements.

3. Timers API
   setTimeout → Runs code after a set time.
   setInterval → Runs code repeatedly at specified intervals.
   clearTimeout, clearInterval → Stop timers.

4. Storage Options in Browser
   Cookies
   Session Cookies, Persistent Cookies
   Attributes: HttpOnly, Secure, SameSite, Expires, Max-Age
   localStorage
   Stores data permanently in the browser.
   Methods: setItem, getItem, removeItem, clear
   sessionStorage
   Stores data only for the duration of the tab/session.
   Same methods as localStorage.

5. Fetch API
   Use fetch() to retrieve data from a server.
   Handle promises using then / catch.
   Parse JSON data using response.json().

6. Event Loop & Asynchronous JS Basics
   Call Stack → Executes synchronous code.
   Web APIs → Handle async tasks (e.g., setTimeout, fetch).
   Callback Queue & Event Loop → Bring async tasks back to the main thread.
   Microtasks (Promises) vs Macrotasks (setTimeout) → Understanding execution order.

API (Application Programming Interface) is a set of rules and tools that allows different software applications to communicate with each other.
👉 Think of it like a waiter in a restaurant:
You (the client) order food.
The waiter (API) takes your request to the kitchen (server).
The kitchen prepares the food and gives it to the waiter.
The waiter delivers it back to you.

In the same way:
You send a request to the server through an API.
The server processes it and sends back the data (like JSON or XML).
The API makes sure you get the right data in the right format.

🔑 In short: API is a bridge between client and server that allows them to exchange data.
Let's go through all the important HTTP status codes you need to know as a software engineer.
🔹 1xx - Informational
These codes indicate that the request was received and is still being processed.
100 Continue → The server received the request headers, the client should continue sending the request body.
101 Switching Protocols → Server is switching protocols (e.g., HTTP to WebSocket).
102 Processing → Server is still processing (used with WebDAV).

🔹 2xx - Success
The request was successfully received, understood, and accepted.
200 OK → Standard response for successful requests.
201 Created → Resource was created successfully.
202 Accepted → Request accepted but not yet processed.
204 No Content → Success, but no data is returned.
206 Partial Content → Returns part of the resource (used in file downloads, video streaming).

🔹 3xx - Redirection
The client must take additional action to complete the request.
301 Moved Permanently → Resource permanently moved to a new URL.
302 Found → Resource temporarily moved.
303 See Other → Redirect to another URL (commonly used after POST).
304 Not Modified → Cached version is still valid, no need to download again.
307 Temporary Redirect → Temporary redirect, method not changed.
308 Permanent Redirect → Permanent redirect, method not changed.

🔹 4xx - Client Errors
The request has an error caused by the client.
400 Bad Request → Invalid request (syntax error, bad parameters).
401 Unauthorized → Authentication required (e.g., missing/invalid token).
403 Forbidden → Client is authenticated but not allowed.
404 Not Found → Resource not found.
405 Method Not Allowed → HTTP method not supported (e.g., using POST instead of GET).
408 Request Timeout → Server timed out waiting for the request.
409 Conflict → Conflict with current state (e.g., duplicate data).
410 Gone → Resource is permanently deleted.
413 Payload Too Large → Request body too big.
415 Unsupported Media Type → Unsupported file/content type.
429 Too Many Requests → Rate limiting (too many requests in a short time).

🔹 5xx - Server Errors
The server failed to process a valid request.
500 Internal Server Error → Generic server error.
501 Not Implemented → Server doesn't support the requested feature.
502 Bad Gateway → Invalid response from an upstream server.
503 Service Unavailable → Server is overloaded or under maintenance.
504 Gateway Timeout → Upstream server didn't respond in time.
505 HTTP Version Not Supported → Server doesn't support the HTTP version.

✅ Quick Tip for Remembering:
2xx → Success
3xx → Redirects
4xx → Client's fault
5xx → Server's fault

Conclusion
By mastering these topics, you'll build a solid foundation in web development. Learning Internet & Web Basics helps you understand how the web works, while Browser APIs & Storage teaches you how to manage data and interactions within the browser.
👉 Once you've nailed these fundamentals, diving into frameworks like React, backend with Node.js/Express, and advanced security concepts will be much easier.