Understand Web Development visually

Small text fragments that maintain state between the browser and server

An HTTP Cookie is a small piece of text data that the server asks the browser to store. Whenever the browser sends a subsequent request to the same server, it automatically includes that cookie. Because the HTTP protocol itself is stateless and does not remember previous requests, without cookies the server has no way of knowing who sent each request. Cookies fill this gap, enabling state-based web experiences such as staying logged in, remembering shopping carts, and preserving user preferences. In addition to a name-value pair, a cookie carries an expiry time, the domain and path it applies to, and security attributes (HttpOnly, Secure, SameSite) that allow fine-grained control over when, where, and how it is transmitted.

The link through which the server maintains per-user state

A session is the mechanism by which a server retains the state of an individual user for a period of time. HTTP is independent request by request and does not remember context from previous requests, but sessions make continuous interaction across multiple requests possible by issuing a unique Session ID and storing the data associated with that ID on the server side. When a user logs in, the server creates a session and delivers the Session ID to the client as a cookie. On subsequent requests, when the browser sends that cookie, the server looks up the session store and restores the state for that user.

A client-side API for storing key-value data in the browser

The Web Storage API is a client-side store that allows key-value data to be stored in the browser. localStorage persists data even after the browser is closed, while sessionStorage is cleared when the tab is closed. Unlike cookies, data is not automatically transmitted to the server, and the generous capacity of 5 to 10 MB per domain makes it well suited for storing data that is only used on the client side. Data can be read and written synchronously using simple APIs such as setItem, getItem, and removeItem.

A browser security mechanism that controls requests for resources from different origins

CORS (Cross-Origin Resource Sharing) is an HTTP-header-based mechanism that controls access to resources on one origin from a page loaded from a different origin, allowing the browser to pass through a response only when the server has explicitly permitted it. An origin is the combination of protocol, host, and port; if any one of these three differs, the request is considered cross-origin.

A security policy that restricts the resources a page is allowed to load

CSP (Content Security Policy) is a security mechanism in which the server uses HTTP headers to specify the origins and types of resources a web page may load, causing the browser to block scripts, styles, images, and other content that fall outside that scope. It is one of the most powerful defenses against XSS (Cross-Site Scripting) attacks.

An interface that represents an HTML document as a programmable object tree

The DOM (Document Object Model) is the tree-structured object model that the browser creates by parsing an HTML document. Through the DOM API, JavaScript can query, add, modify, and delete elements of the document, and those changes are immediately reflected on screen. It is the foundation that transforms a web page from a static document into a dynamic application.

A self-contained token that identifies the requester without the server storing any state

JWT (JSON Web Token) is a token that contains user authentication information encoded as JSON and signed. Three parts -- Header, Payload, and Signature -- are Base64-encoded and joined by dots (.) into a single string. By verifying only the signature of this token, the server can determine who sent the request and what permissions they hold without looking up a separate session store. The token carries claims such as expiry time (exp), issuer (iss), and subject (sub), so a single token conveys both authentication and authorization information. The signing algorithm can be either HMAC (symmetric key) or RSA/ECDSA (asymmetric key); using an asymmetric key allows the issuer and the verifier to be separate. Because a JWT once issued is difficult to invalidate unilaterally from the server, the common practice is to set a short expiry time and operate a separate Refresh Token.

An authorization framework that delegates permissions to third-party apps without handing over a password

OAuth 2.0 is an authorization framework that allows users to delegate access to specific resources to a third-party application without directly sharing their password with it. When you log into another app with your Google account, or grant a CI tool access to your GitHub repositories, OAuth is the protocol working behind the scenes. It defines four roles -- Resource Owner (user), Client (third-party app), Authorization Server, and Resource Server (protected resource) -- and standardizes the flow by which authorization codes and access tokens are exchanged among them. OAuth focuses on authorization, not authentication; OpenID Connect is the layer built on top of OAuth that standardizes authentication as well.

An API design style that works with resources using HTTP methods and URIs

REST (Representational State Transfer) is an architectural style for designing APIs on top of HTTP, the foundation of the web. Each resource is identified by a unique URI, and HTTP methods such as GET, POST, PUT, and DELETE express the operation to be performed on that resource. The server follows a stateless principle, retaining no client state between requests, and responses may include links to related resources. JSON has become the de facto standard response format, and HTTP status codes distinguish success from failure. The fact that REST can be accessed from anywhere -- browsers, curl, mobile apps -- without any separate protocol or tooling is the background for its wide adoption.

An API query language through which clients precisely request the data they need

GraphQL is an API query language and runtime open-sourced by Facebook in 2015. When a client specifies the fields it needs using query syntax, the server returns a response in exactly that structure. All data requests are handled through a single endpoint (/graphql), and a schema defines the types and relationships within the API. Data retrieval is expressed with query, modification with mutation, and real-time subscriptions with subscription. Because the client controls the shape of the response, it structurally reduces both over-fetching and under-fetching.

A single-page web application that operates without page reloads

An SPA (Single Page Application) is a web application architecture that receives a single HTML file and JavaScript bundle on the first load, then handles subsequent screen transitions on the client side without any server requests. The browser manages both routing and rendering, so navigating between pages does not trigger a full page refresh; only the data needed is fetched via API and the screen is updated accordingly.

A rendering approach that sends completed HTML assembled on the server

SSR (Server-Side Rendering) is an approach in which the server queries data and generates completed HTML to send each time a user requests a page. The browser can display the received HTML immediately, so content appears quickly on the initial load, and search engines can read the completed markup directly.

A client-side database for handling structured data asynchronously inside the browser

IndexedDB is a client-side database API that lets the browser store and retrieve structured data asynchronously. Unlike Web Storage, which handles only simple strings, IndexedDB supports object-shaped records, indexed lookups, and transactions, making it suitable for offline data, large local caches, and searchable browser-side state.

A web vulnerability in which the browser executes attacker-injected script as if it were trusted code

XSS (Cross-Site Scripting) is a web vulnerability in which attacker-injected script runs in the victim's browser as if it were legitimate code from the site itself. The root cause is usually that user input or external data is inserted into HTML or the DOM unsafely. Once execution begins, it can lead to information disclosure, UI tampering, and requests sent with the victim's privileges.

An attack that abuses the browser's authenticated state to send requests the user never intended

CSRF (Cross-Site Request Forgery) is a web attack in which an attacker causes the victim's browser to send a request to a legitimate site by abusing the authentication state already stored in that browser. It is especially relevant when authentication is carried by cookies that the browser attaches automatically. From the server's perspective, a logged-in user is making the request, but that fact alone does not prove the request was actually intended by the user.

A real-time channel that keeps a connection open after HTTP and exchanges messages in both directions

WebSocket is a web communication protocol in which the browser and server establish a connection once, keep that connection open, and exchange messages in both directions. It begins with an HTTP Upgrade request, but after the switch it differs from HTTP in that it can continue sending data over the same connection instead of creating a new request each time. That makes it the protocol that fills the gap left by the request-response model in web applications where real-time state changes matter.

A browser background worker that intercepts network traffic and cache behavior even outside the page

A Service Worker is a browser-managed JavaScript worker that intercepts requests between a web page and the network, handling features such as caching, offline responses, push notifications, and background sync. It cannot access the DOM directly, but because it can react to certain events even when the page is not open, it enables browser behavior that feels much closer to a native app than ordinary page scripts do.

The process of reconnecting server-rendered HTML with client-side JavaScript so interaction comes alive

Hydration is the process of reconnecting HTML that was pre-rendered on the server with the JavaScript application in the browser so that event handlers and state updates become active. It turns markup that is already visible but still static into an interactive UI the user can actually click, type into, and navigate.

A web authentication standard that proves the user with a public-key credential instead of a password

WebAuthn is a web standard in which the browser and an authenticator cooperate to authenticate the user with a public-key credential. The server stores only the public key, while the private key stays on the user's device, so there is no need to store or transmit a password. The user verifies themselves with a security-key touch, biometrics, or a PIN, and the site checks the resulting signature to decide whether login should succeed. WebAuthn is the technical foundation behind today's passkey experience.

A browser worker that runs heavy JavaScript jobs away from the main thread

A Web Worker is a browser feature that lets JavaScript run in a separate execution context that behaves like a thread distinct from the page's main thread. It cannot access the DOM directly, but it can take heavy parsing and computation work off the main thread so rendering and user input remain smooth.

A one-way realtime stream where the server keeps an HTTP response open and pushes events

Server-Sent Events is a one-way realtime delivery model in which the browser opens a single HTTP connection with EventSource and the server pushes events into that response over time. It uses the `text/event-stream` format, and while the connection stays open the server can keep sending `data`, `event`, `id`, and `retry` fields. When information only needs to flow from server to client -- such as notifications or progress updates -- it lets the UI refresh immediately without repeated polling.

A web app with install, offline, and background capabilities

A PWA (Progressive Web App) is a web app built with web platform technologies that provides an experience closer to a platform app through installability, offline operation, background events, and standalone launch behavior. It reaches multiple devices and operating systems from a single codebase, while still falling back naturally to a normal website in environments that do not support the extra capabilities.