Junior Web Developer flashcards

34 cards. Read the term and the definition here. The deck at the top of this page is optional.

DOCTYPE purpose

The <!DOCTYPE html> declaration must be the first line of an HTML document. It tells the browser to use standards mode rather than quirks mode, which changes box model and layout behavior.

main element rule

The <main> element marks the dominant content of the document. It should appear only once per page and must exclude repeated content such as site navigation, headers, and footers.

Void elements

Void elements cannot have children or closing tags. Examples include img, br, hr, input, meta, link, and source. Writing a closing tag for them is invalid HTML.

Box-sizing border-box

With box-sizing set to border-box, the declared width includes padding and border, so the content area shrinks instead of the element growing. It simplifies layout math considerably.

Absolute positioning containing block

An absolutely positioned element is placed relative to its nearest positioned ancestor, meaning an ancestor with position other than static. Without one, it positions against the initial containing block.

Flex justify vs align

justify-content distributes items along the main axis set by flex-direction. align-items aligns items along the cross axis, which is perpendicular to the main axis.

Mobile-first media queries

Mobile-first CSS writes base styles for small screens, then adds @media (min-width: ...) blocks for larger viewports. Each breakpoint layers on top of previous styles rather than overriding them.

CSS specificity order

Specificity compares four components in order: inline styles, IDs, classes/attributes/pseudo-classes, and element types/pseudo-elements. Higher components win; equal specificity falls back to source order.

Temporal dead zone

Variables declared with let and const are hoisted but uninitialized until their declaration executes. Accessing them before that point throws a ReferenceError, a period called the temporal dead zone.

Strict equality operator

The === operator compares both type and value without coercion, so 0 === "0" is false. The == operator coerces operands first, which produces surprising results such as 0 == "".

Falsy values list

JavaScript has exactly these falsy values: false, 0, -0, 0n, the empty string, null, undefined, and NaN. Every object, array, and non-empty string is truthy.

Arrow function this

Arrow functions do not create their own this binding. They inherit this lexically from the surrounding scope, which makes them unsuitable as object methods that need the caller's context.

Promise microtask order

Promise callbacks run as microtasks after the current synchronous code finishes but before the next task. Timers scheduled with setTimeout run in a later task, after pending microtasks.

querySelectorAll vs live collection

document.querySelectorAll returns a static NodeList that does not update when the DOM changes. Methods like getElementsByClassName return live HTMLCollections that reflect later mutations automatically.

Event bubbling

After the target phase, events bubble upward from the target through ancestors to the document. Listening on a parent container and checking event.target enables event delegation.

target vs currentTarget

event.target is the element that originally dispatched the event. event.currentTarget is the element whose listener is currently executing, which differs during bubbling through ancestors.

defer vs async scripts

A defer script executes after HTML parsing completes, in document order. An async script executes as soon as it downloads, so order is not guaranteed. Neither blocks parsing.

WCAG AA contrast ratio

WCAG level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text, defined as 18pt or 14pt bold. Level AAA raises normal text to 7:1.

Decorative image alt

Images that convey no information should use an empty alt attribute, alt="". This removes them from the accessibility tree so screen readers skip them instead of announcing a filename.

ARIA first rule

Prefer native HTML elements with built-in semantics over ARIA roles. Only add ARIA when no native element conveys the needed role, state, or property, and never misuse it.

aria-hidden effect

Setting aria-hidden="true" removes an element and its descendants from the accessibility tree while leaving it visible on screen. It does not hide content visually or prevent keyboard focus.

Idempotent HTTP methods

GET, HEAD, PUT, DELETE, and OPTIONS are idempotent: repeating an identical request yields the same server state. POST is not idempotent, so retries can create duplicate resources.

fetch and HTTP errors

The fetch function resolves its promise even when the server returns 404 or 500. Code must check response.ok or response.status and handle error statuses explicitly.

CORS preflight trigger

A cross-origin request needs an OPTIONS preflight when it uses methods beyond GET, HEAD, or POST, sends custom headers, or uses a content type like application/json.

Cookie HttpOnly and Secure

HttpOnly prevents JavaScript from reading a cookie, reducing XSS impact. Secure restricts the cookie to HTTPS connections. SameSite separately controls whether cross-site requests include it.

Git staging area

The staging area, or index, holds changes selected with git add that will go into the next commit. The working tree holds edits, and the repository stores committed snapshots.

Rebase versus merge

Merge joins histories with a merge commit and preserves existing hashes. Rebase replays commits onto a new base, creating new hashes and linear history, so avoid rebasing shared branches.

Semver caret and tilde

In package.json, ^1.2.3 allows updates to any 1.x version, including minor releases. ~1.2.3 allows only patch updates such as 1.2.9. A lockfile pins exact versions.

XSS defense basics

Cross-site scripting occurs when untrusted input reaches the page as executable markup. Defenses include contextual output escaping, using textContent instead of innerHTML, and a restrictive Content-Security-Policy.

CSRF defense SameSite

Cross-site request forgery tricks a logged-in browser into sending state-changing requests. Defenses include SameSite cookies, unpredictable anti-CSRF tokens, and validating the Origin header.

SQL injection parameterization

SQL injection happens when user input is concatenated into query strings. Parameterized or prepared statements send code and data separately, so input is never parsed as SQL syntax.

Same-origin definition

Two URLs share an origin only if their scheme, host, and port all match. The Same-Origin Policy blocks cross-origin reads by default but still permits form submissions and image loads.

Test pyramid

The test pyramid recommends many fast unit tests, fewer integration tests, and a small number of slow end-to-end tests. This balance keeps feedback quick while still verifying real user flows.

Arrange-Act-Assert pattern

A test is structured in three phases: arrange the inputs and dependencies, act by invoking the code under test, then assert the expected outcome. This keeps tests readable and focused.