Junior Web Developer cheat sheet

The document begins with , which triggers standards mode; omitting it triggers quirks mode in browsers.

takes a lang attribute (e.g., lang="en"); screen readers and translation tools use it to select pronunciation rules.

holds metadata: (required, used for tab and search result titles), <meta charset="utf-8">, and <meta name="viewport">.

Content-sectioning elements:

, , , , , , ; should appear once per page and exclude repeated site chrome.

Heading levels

– express document outline; skipping levels (h2 to h4) breaks the outline even though browsers still render them.

is self-contained and syndicatable; groups thematically related content and normally needs its own heading.

Void elements have no closing tag and no children: area, base, br, col, embed, hr, img, input, link, meta, source, track, wbr.

Valid nesting rules:

cannot contain block-level elements (

,

,

); may not nest inside another ;
• must be a child of
  ,
  , or .

Character references: < > & " for reserved characters; numeric forms © (decimal) and © (hex) are equivalent.

Box model: rendered width = content + padding-left/right + border-left/right; box-sizing: border-box makes the declared width include padding and border.

Normal flow stacks block boxes vertically and places inline boxes on a line; position: static is the default and ignores top/right/bottom/left and z-index.

position: relative offsets from its normal spot and keeps space reserved; absolute positions against the nearest positioned ancestor; fixed positions against the viewport; sticky toggles between relative and fixed at a scroll threshold.

Flexbox: flex-direction sets the main axis; justify-content aligns along it, align-items across it; flex: 1 expands to flex-grow 1, flex-shrink 1, flex-basis 0.

Grid: grid-template-columns: repeat(3, 1fr) makes three equal tracks; fr distributes free space after fixed tracks and gaps are excluded from track sizing.

Specificity is compared as (inline, id, class/attribute/pseudo-class, type/pseudo-element); ties are broken by source order, and !important overrides normal declarations.

Media queries: @media (min-width: 768px) applies at 768px and above; mobile-first styles use min-width and layer larger-screen rules on top of base styles.

Viewport meta makes CSS pixels match device-independent pixels so media queries fire as expected.

Relative units: em is relative to the element's own font-size (or parent's, when set on font-size), rem to the root font-size, vw/vh to 1% of viewport width/height.

let and const are block-scoped and hoisted but stay in the temporal dead zone until initialized; var is function-scoped and hoisted as undefined.

Primitive types: string, number, bigint, boolean, undefined, symbol, null; everything else is an object, and typeof null returns "object".

== coerces types before comparing (0 == "" is true); === compares type and value, so use === except for the deliberate null == undefined check.

Falsy values are exactly false, 0, -0, 0n, "", null, undefined, NaN; every object and non-empty string is truthy.

Functions are first-class values; arrow functions inherit this lexically, while regular functions get this from the call site (undefined in strict mode when called bare).

Array methods: map and filter return new arrays, forEach returns undefined, reduce collapses to an accumulator, and sort mutates and compares as strings by default.

A Promise is pending, fulfilled, or rejected; .then callbacks run as microtasks after the current synchronous code, before timers queued with setTimeout.

try/catch/finally: catch receives the thrown value, and finally runs whether or not an error was thrown or returned.

JSON.parse converts a string to a value and throws SyntaxError on invalid input; JSON.stringify drops undefined properties and throws on circular references.

document.querySelector returns the first matching element or null; querySelectorAll returns a static NodeList, while getElementsByClassName returns a live HTMLCollection.

textContent reads and writes raw text; innerHTML parses a string as HTML and is an injection risk with untrusted input; insertAdjacentHTML avoids replacing existing children.

Creating nodes: document.createElement, then element.append or parent.insertBefore; removing uses element.remove() or parent.removeChild(node).

classList.add/remove/toggle/contains edits classes without string surgery on className; element.dataset maps data-* attributes to camelCase properties.

addEventListener(type, handler, options) supports multiple handlers; options include once (auto-remove after firing) and capture (listen during the capture phase).

Event flow is capture (window to target), target, then bubble (target to window); stopPropagation halts further phases and preventDefault cancels the default browser action.

event.target is the element that dispatched the event; event.currentTarget is the element whose listener is running, which makes event delegation on a parent container work.

DOM updates are batched: reading layout properties such as offsetHeight forces a synchronous reflow, so batch reads before writes to avoid layout thrashing.

DOMContentLoaded fires after HTML is parsed; the load event waits for images and stylesheets; scripts with defer run after parsing in order, async scripts run whenever downloaded.

WCAG conformance levels are A, AA, and AAA; AA is the common legal baseline and includes 4.5:1 contrast for normal text and 3:1 for large text (18pt or 14pt bold).

Non-text content needs a text alternative: alt text on , aria-label on icon buttons, and alt="" for purely decorative images so screen readers skip them.

Every form control needs a programmatic label: matching the input id, a wrapping , aria-labelledby, or aria-label; placeholder text is not a label.

Keyboard operability requires a visible focus indicator, logical tab order (tabindex="0" adds to order, tabindex="-1" makes programmatically focusable only), and no keyboard traps.

Native elements carry built-in roles and keyboard behavior: is focusable and activates on Enter and Space; a clickable needs role, tabindex, and key handlers.

ARIA rule one: prefer native HTML semantics; add ARIA only when no element conveys the required role, state, or property, and never override native semantics incorrectly.

ARIA states and properties include aria-expanded, aria-hidden (removes from the accessibility tree but not the visual page), aria-live (polite or assertive), and aria-current.

Landmarks (

, , , ) and headings let screen reader users jump between regions; link text should make sense out of context.

WCAG principles are Perceivable, Operable, Understandable, Robust; success criteria are testable statements such as 1.1.1 Non-text Content and 2.4.7 Focus Visible.

HTTP is a stateless request/response protocol: request line (method, path, version), headers, blank line, optional body; responses carry a status code and reason phrase.

Status classes: 1xx informational, 2xx success (200 OK, 201 Created, 204 No Content), 3xx redirection (301 permanent, 302/307 temporary, 304 Not Modified), 4xx client error (400, 401, 403, 404, 422), 5xx server error (500, 502, 503).

Safe methods (GET, HEAD, OPTIONS) do not change server state; idempotent methods (GET, HEAD, PUT, DELETE, OPTIONS) produce the same result when repeated; POST is neither.

GET parameters travel in the query string and are visible in logs and history; POST sends data in the body, and multipart/form-data is required for file uploads.

A form's method attribute selects GET or POST and action sets the target URL; the enctype attribute chooses application/x-www-form-urlencoded or multipart/form-data.

fetch returns a Promise resolving to a Response even for 404 or 500; check response.ok or response.status before parsing, and response.json() also returns a Promise.

Cookies are set with Set-Cookie and sent back via the Cookie header; HttpOnly blocks JavaScript access, Secure limits to HTTPS, and SameSite controls cross-site sending.

CORS is enforced by browsers: a cross-origin response must carry Access-Control-Allow-Origin; simple requests skip preflight, while PUT, custom headers, or JSON content type trigger an OPTIONS preflight.

Cache headers: Cache-Control: no-store disables caching, max-age sets freshness lifetime, and ETag/If-None-Match enables conditional requests answered with 304.

Git's three areas are the working tree, the staging area (index), and the repository; git add stages, git commit records a snapshot, and git status shows the difference.

A commit is identified by a SHA-1/SHA-256 hash of its content, parent, author, and message, so rewriting history changes every descendant hash.

Branches are movable pointers to commits; HEAD points to the current branch, and git switch -c creates and checks out a branch in one step.

Merge creates a merge commit joining two histories; rebase replays commits onto a new base, producing linear history but new hashes, so never rebase shared branches.

git fetch downloads objects without moving the local branch; git pull is fetch plus merge (or rebase when configured); git push uploads and updates the remote ref.

git reset --soft moves HEAD only, --mixed (default) also unstages, --hard also discards working-tree changes; git revert creates a new commit that undoes a prior one.

.gitignore lists untracked patterns to skip; already-tracked files stay tracked until removed with git rm --cached.

package.json records dependencies and scripts; ^1.2.3 allows minor and patch updates, ~1.2.3 allows patch only, and a lockfile pins exact resolved versions.

npm install adds to node_modules and updates the lockfile; npm ci installs strictly from the lockfile and is the reproducible choice in CI.

XSS injects script into pages; escape output contextually, prefer textContent over innerHTML, and use a Content-Security-Policy to restrict script sources.

Stored XSS persists in the database, reflected XSS bounces off a request parameter, and DOM-based XSS arises in client code that writes untrusted data into sinks such as innerHTML.

CSRF makes a logged-in browser send an unwanted state-changing request; defenses are SameSite cookies, per-request anti-CSRF tokens, and checking Origin or Referer.

SQL injection occurs when input is concatenated into queries; parameterized statements or prepared statements separate code from data and are the primary defense.

HTTPS with TLS protects data in transit; HSTS (Strict-Transport-Security) forces future requests over HTTPS and blocks protocol downgrade.

Passwords are stored as salted hashes with a slow algorithm such as bcrypt, scrypt, or Argon2; plain MD5 or SHA-1 is unsuitable for password storage.

The Same-Origin Policy compares scheme, host, and port; cross-origin reads are blocked by default, while forms and image loads can still send cross-origin requests.

Content-Security-Policy, X-Content-Type-Options: nosniff, and X-Frame-Options or frame-ancestors are response headers that reduce injection and clickjacking risk.

Never embed secrets in client-side code: anything shipped to the browser, including API keys in JavaScript bundles, is readable by users.

Test pyramid: many fast unit tests, fewer integration tests, and a small number of slow end-to-end tests that exercise the real UI.

A unit test isolates one function or module and asserts on outputs; a test double (stub, mock, spy, fake) replaces a dependency to control its behavior.

Assertion libraries and runners: Jest/Vitest provide describe, it/test, expect, and hooks beforeAll, beforeEach, afterEach, afterAll.

Arrange-Act-Assert structures a test; a good test fails for one clear reason and does not depend on execution order or shared mutable state.

Debugging in DevTools: breakpoints pause execution, the Scope pane shows local and closure variables, and the Call Stack pane lets you inspect each frame.

console methods: log, warn, error, and table for tabular data; console.assert logs only when the assertion is falsy; debugger; statement pauses when DevTools is open.

Network panel shows status, headers, payload, and timing per request; filter by Fetch/XHR and check the response body to confirm API behavior.

Common error types: TypeError (operation on undefined/null), ReferenceError (undeclared identifier), SyntaxError (parse failure), RangeError (invalid length or recursion limit).

Reproduce first, then isolate by narrowing inputs or bisecting commits; read the full stack trace top-down from the throw site to the caller.