LPI Web Dev Essentials flashcards

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

HTTP status 401 vs 403

401 Unauthorized means the request lacks valid authentication credentials and should include a WWW-Authenticate challenge. 403 Forbidden means the server understood the request but refuses to authorize it, even with valid credentials.

Idempotent HTTP methods

GET, HEAD, PUT, DELETE, and OPTIONS are idempotent: repeating the identical request produces the same server state as a single call. POST is not idempotent, so retrying it may create duplicate resources.

Same-origin policy

Browsers treat two URLs as same-origin only when scheme, host, and port all match. Cross-origin reads are restricted unless the server sends matching CORS headers such as Access-Control-Allow-Origin.

Semantic versioning ranges

In MAJOR.MINOR.PATCH, a caret range like ^1.4.2 accepts any 1.x version at or above 1.4.2, while a tilde range like ~1.4.2 accepts only 1.4.x patch updates.

Safe HTTP methods

Safe methods are declared not to change server state: GET, HEAD, OPTIONS, and TRACE. They may be cached or prefetched, so placing a state-changing action behind GET breaks caching and crawler assumptions.

Content-Type versus Accept

Content-Type on a request or response describes the media type of that message body. Accept on a request lists media types the client will accept in the response, enabling server-side content negotiation.

Void HTML elements

Void elements have no closing tag and cannot contain child content. The set includes img, input, br, hr, meta, link, source, track, wbr, area, base, col, and embed.

HTML landmark elements

header, nav, main, section, article, aside, and footer describe page structure rather than presentation. They give assistive technology and search engines navigable regions, replacing generic div wrappers.

Label association in forms

A label connects to a control either by matching its for attribute to the control id, or by wrapping the control inside the label element. Association expands the click target and supplies the accessible name.

Image alt attribute rules

Every img needs an alt attribute. Provide descriptive text for meaningful images and an empty alt="" for decorative ones so screen readers skip them instead of reading the filename.

Table scope attribute

The scope attribute on th elements takes values row, col, rowgroup, or colgroup, declaring which cells the header describes. It lets assistive technology announce the correct header when reading data cells.

data-* attributes and dataset

Attributes beginning with data- store custom values on an element, for example data-user-id="42". JavaScript reads them through element.dataset.userId, where hyphens convert to camelCase keys.

HTML document structure

A document starts with the doctype, then one html root element containing a head for metadata such as title, meta, and link, and a body for rendered content.

CSS specificity tuple

Specificity is compared as four values: inline styles, ID selectors, class/attribute/pseudo-class selectors, and element/pseudo-element selectors. Higher leftmost values win; ties resolve by source order.

box-sizing border-box

With border-box, an element's declared width includes padding and border, so the rendered outer size equals the specified value. The default content-box adds padding and border on top of width.

Absolute versus relative positioning

position: relative offsets an element from its normal spot while keeping its original space. position: absolute removes it from flow and positions it against the nearest positioned ancestor.

Flexbox main and cross axis

flex-direction sets the main axis; justify-content distributes items along it, while align-items aligns them on the perpendicular cross axis. flex-grow, flex-shrink, and flex-basis size the items.

CSS custom properties

Custom properties declared as --name are inherited by descendants and read with var(--name, fallback). They resolve at computed-value time, so JavaScript can change them at runtime for theming.

display none versus visibility hidden

display: none removes the element from layout entirely and hides it from assistive technology. visibility: hidden hides the box but preserves the space it occupies in the layout.

Mobile-first media queries

Mobile-first CSS writes base styles for narrow screens, then adds min-width media queries that enhance layout as viewport width grows, keeping overrides cumulative rather than contradictory.

let, const, and temporal dead zone

let and const are block-scoped and hoisted but uninitialized until their declaration runs; accessing them earlier throws a ReferenceError. const blocks rebinding, not mutation of object contents.

Strict versus loose equality

The === operator compares value and type without coercion, while == converts operands to a common type first. Prefer === because coercion rules produce surprising results such as "0" == false being true.

Arrow function this binding

Arrow functions have no own this, arguments, or prototype; they capture this from the enclosing lexical scope. They cannot be used as constructors and are unsuitable for object methods needing dynamic this.

JavaScript falsy values

The falsy values are false, 0, -0, 0n, the empty string, null, undefined, and NaN. Every other value, including empty arrays and objects, evaluates as truthy in conditions.

Promise.all versus allSettled

Promise.all rejects as soon as any input promise rejects, discarding other results. Promise.allSettled always resolves with an array of status objects describing each fulfilled or rejected outcome.

Microtask versus macrotask order

After each task, the event loop drains all microtasks, such as promise callbacks and queueMicrotask, before running the next macrotask like setTimeout or I/O. Microtasks therefore run first.

Event bubbling and capture

DOM events travel from window down to the target during capture, then back up during bubbling. addEventListener defaults to the bubbling phase unless capture: true is passed in its options object.

Closures in JavaScript

A closure is a function retaining access to variables from the lexical scope where it was created, even after that outer function returns. Closures enable private state and factory functions.

Node.js event loop phases

The loop cycles through timers, pending callbacks, idle/prepare, poll, check for setImmediate, and close callbacks. process.nextTick and promise microtasks drain between phases before continuing.

Node blocking the event loop

Node runs JavaScript on one thread, so synchronous CPU-heavy work or readFileSync stalls every pending request. Use asynchronous APIs, worker threads, or child processes for expensive computation.

Express middleware signature

Express middleware receives req, res, and next. Calling next passes control to the following middleware; calling next(err) skips ahead to error handlers declared with four parameters.

Node process.env configuration

process.env exposes environment variables as strings, commonly used for ports, database URLs, and secrets. Values should come from the deployment environment or a loaded .env file, never hard-coded.