IWT Web Technologies Flashcards

💡 Intuition: The backbone protocol of the World Wide Web (stateless, application-layer).

📐 Core Rule: 1. Browser checks cache $\to$ DNS lookup resolves domain name to IP address. 2. TCP 3-way handshake established (`SYN`, `SYN-ACK`, `ACK`) on Port 80/443. 3. Browser sends HTTP Request (`GET / HTTP/1.1` with headers). 4. Server processes request and returns HTTP Response (status code, headers, HTML body). 5. Browser parses DOM $\to$ CSSOM $\to$ Render Tree $\to$ Paint.

🎯 Exam Cue: HTTP is stateless; state is preserved using Cookies, Session Storage, or JWT tokens.

💡 Intuition: 3-digit codes returned by server indicating request outcome.

📐 Core Rule: - 2xx (Success): `200 OK`, `201 Created` (POST successful). - 3xx (Redirection): `301 Moved Permanently` (SEO friendly), `302 Found` (temporary). - 4xx (Client Error): `400 Bad Request`, `401 Unauthorized` (no auth credentials), `403 Forbidden` (authenticated but denied), `404 Not Found`. - 5xx (Server Error): `500 Internal Server Error`, `502 Bad Gateway`, `503 Service Unavailable`.

🎯 Exam Cue: 401 vs 403: 401 is "Who are you?", 403 is "I know who you are, but you don't have permission".

💡 Intuition: Semantic tags clearly describe their meaning and purpose to browser, screen readers, and search engine crawlers (SEO).

📐 Core Rule: Structure: `<header>`, `<nav>`, `<main>`, `<article>`, `<section>`, `<aside>`, `<footer>`. Content: `<figure>`, `<figcaption>`, `<time>`, `<mark>`. Non-semantic tags (`<div>`, `<span>`) carry zero contextual meaning.

🎯 Exam Cue: An `<article>` is self-contained and independently syndicatable; a `<section>` groups thematically related content.

💡 Intuition: Governs the space calculations of every rectangular element on a page.

📐 Core Rule: Layers from inside out: Content $\to$ Padding $\to$ Border $\to$ Margin. - `content-box` (default): `width` sets content only! Adding 20px padding + 2px border makes actual rendered width $= \text{width} + 44\text{px}$! - `border-box`: `width` includes padding and border. Element never expands beyond specified `width`.

🎯 Exam Cue: Formula for `content-box` total width: $\text{Width} + 2 \times (\text{Padding} + \text{Border} + \text{Margin})$.

💡 Intuition: Controls element layout flow on the screen.

📐 Core Rule: 1. `block` (`div`, `p`, `h1`): Starts on new line, occupies 100% width of parent. Respects width, height, margins, padding on all 4 sides. 2. `inline` (`span`, `a`, `strong`): Flows inline with text. Ignores width & height. Vertical margins do NOT push surrounding lines away. 3. `inline-block` (`button`, `input`): Flows inline like text, BUT respects width, height, and all 4-side margins/padding.

🎯 Exam Cue: To center a block element: `margin: 0 auto; width: ...;`. To center inline text: `text-align: center;`.

💡 Intuition: 1-dimensional layout model providing automatic space distribution.

📐 Core Rule: Axis direction: Dictated by `flex-direction`. If `row` (default): Main axis is horizontal, Cross axis is vertical. If `column`: Main axis is vertical, Cross axis is horizontal! Alignment properties: - `justify-content`: Aligns items along the Main Axis. - `align-items`: Aligns items along the Cross Axis.

🎯 Exam Cue: The perfect center trick: `display: flex; justify-content: center; align-items: center;`.

💡 Intuition: 2-dimensional layout model handling both rows and columns simultaneously.

📐 Core Rule: - `1fr`: Represents one fraction of available free space in grid container. - `repeat(3, 1fr)` creates 3 equal-width flexible columns. - `gap: 20px`: Sets gutters between grid cells without adding outer margins. - Responsive auto-fill: `grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));`.

🎯 Exam Cue: Flexbox is best for 1D (either row OR column); Grid is best for 2D (rows AND columns together).

💡 Intuition: Alters normal document flow positioning.

📐 Core Rule: - `static` (default): Normal document flow; `top/left` properties ignored. - `relative`: Normal flow; offset relative to its own original position. - `absolute`: Removed from flow; positioned relative to nearest ancestor with `position != static`. - `fixed`: Removed from flow; anchored relative to the browser viewport. - `sticky`: Hybrid; behaves as relative until scroll threshold is reached, then sticks like fixed.

🎯 Exam Cue: To anchor an absolute badge inside a card: Parent must have `position: relative`.

💡 Intuition: Ensures websites adapt smoothly across smartphones, tablets, and desktops.

📐 Core Rule: 3 Pillars: Fluid grid layouts (%, `fr`), Flexible media (`max-width: 100%`), and Media Queries. Mandatory viewport meta tag: `<meta name="viewport" content="width=device-width, initial-scale=1.0">`. Mobile-first syntax: Base CSS for mobile, desktop overrides via `@media (min-width: 768px) { ... }`.

🎯 Exam Cue: If `<meta name="viewport">` is omitted, mobile browsers render page at default 980px desktop width and zoom out, breaking responsiveness.

💡 Intuition: Browser-native constraint validation improves UX and prevents bad submissions.

📐 Core Rule: - `required`: Field cannot be submitted empty. - `type="email"` / `type="url"`: Enforces RFC email format / valid URL protocol. - `pattern="[A-Za-z]{3}"`: Enforces custom Regular Expression matching. - `min`, `max`, `step`: Constrains numeric inputs. - `maxlength`, `minlength`: Constrains character lengths.

🎯 Exam Cue: Client-side validation is purely for user convenience; servers must always re-validate data.

💡 Intuition: Determines how form data is serialized into HTTP request payload.

📐 Core Rule: - `application/x-www-form-urlencoded` (default): Data converted to key-value query string with URL encoding. Efficient for text-only forms. - `multipart/form-data`: Data split into boundary-delimited MIME parts. MANDATORY when uploading files (`<input type="file">`).

🎯 Exam Cue: If a form contains file upload, omitting `enctype="multipart/form-data"` causes only the file name (not its contents) to be submitted!

💡 Intuition: Mechanisms to store state on user's device.

📐 Core Rule: - Cookies: 4 KB capacity. Sent automatically in every HTTP request header. Used for session IDs and auth tokens. - `localStorage`: ~5 MB capacity. Never sent to server. Persists indefinitely until cleared. - `sessionStorage`: ~5 MB capacity. Scoped to single browser tab. Cleared immediately when tab is closed.

🎯 Exam Cue: `localStorage.setItem('key', JSON.stringify(data))` stores data as strings only.

💡 Intuition: Interface allowing JavaScript to inspect and alter document structure, styles, and events.

📐 Core Rule: - `getElementById(id)`: Returns single matching `Element` (fastest). - `querySelector(selector)`: Returns first matching `Element` using any valid CSS selector (`.class`, `#id`, `[attr]`). - `querySelectorAll(selector)`: Returns a static `NodeList` containing all matches.

🎯 Exam Cue: A `NodeList` is not a true Array, but supports `.forEach()`. Convert to array via `Array.from()` or `[...nodeList]`.

💡 Intuition: How user actions (clicks, keypresses) propagate through nested HTML elements.

📐 Core Rule: 1. Capture Phase: Event travels down from `window` $\to$ `document` $\to$ target element. 2. Target Phase: Event triggers on element clicked. 3. Bubble Phase (default): Event bubbles back up to ancestors. Event Delegation: Attaching a single event listener to a common parent (using `e.target`) rather than hundreds of listeners on child items.

🎯 Exam Cue: Stop propagation: `e.stopPropagation()`. Prevent default action: `e.preventDefault()`.

💡 Intuition: Resolves styling conflicts when multiple rules target the same element.

📐 Core Rule: Specificity metric: `(Inline, ID, Class/Attribute/Pseudo-class, Element/Pseudo-element)`. - `!important`: Overrides normal cascade. - Inline style (`style="..."`): `(1, 0, 0, 0)` = 1000 weight. - ID selector (`#header`): `(0, 1, 0, 0)` = 100 weight. - Class / Attribute / Pseudo-class (`.btn`, `[type]`, `:hover`): `(0, 0, 1, 0)` = 10 weight. - Element / Pseudo-element (`div`, `p`, `::before`): `(0, 0, 0, 1)` = 1 weight.

🎯 Exam Cue: 10 classes cannot beat 1 ID!

💡 Intuition: Responsive container-row-column layout system based on a 12-column division.

📐 Core Rule: Total columns in any row must equal 12 (e.g. `col-md-8` + `col-md-4` = 12). Breakpoints: - `xs`: $< 576\text{px}$ (default, no prefix `col-12`) - `sm`: $\ge 576\text{px}$ - `md`: $\ge 768\text{px}$ (tablets) - `lg`: $\ge 992\text{px}$ (desktops) - `xl`: $\ge 1200\text{px}$ - `xxl`: $\ge 1400\text{px}$

🎯 Exam Cue: If column total exceeds 12, extra columns wrap onto a new line.