A
| Term | Definition |
| ARIA | Accessible Rich Internet Applications, a set of roles and attributes describing UI semantics to assistive technology. The first rule of ARIA is not to use it: a native element carries the semantics already and carries the keyboard behaviour too. |
| Accessibility | Building interfaces usable by people with disabilities, covering keyboard operation, screen reader semantics, contrast and motion. Cheap when designed in and expensive when retrofitted, which is the whole argument for doing it early. |
| Alt Text | The text alternative on an image, read aloud when the image cannot be seen. Decorative images take an empty alt attribute, not a missing one, so screen readers skip them instead of announcing a filename. |
| Arrow Function | A compact JavaScript function expression that inherits this from its enclosing scope. That inherited this is the reason arrow functions work as callbacks where ordinary functions need binding. |
| Async / Await | Syntax for writing promise-based code in a sequential style. await only pauses the surrounding async function, not the page, and errors need a try/catch or they become unhandled rejections. |
| Attribute | A name-value pair on an HTML element in the markup. Distinct from a DOM property: changing value as a property does not change the valueattribute in the source. |
B
| Term | Definition |
| BEM | Block Element Modifier, a CSS naming convention writing classes as block__element–modifier. Keeps specificity flat and makes the relationship between markup and styles readable without tooling. |
| Babel | A JavaScript compiler that rewrites modern syntax into a form older browsers understand. Less necessary than it was, since browser support now moves quickly. |
| Box Model | The rule that every element is a content box wrapped in padding, border and margin. box-sizing: border-box makes width include padding and border, which is why nearly every stylesheet sets it globally. |
| Breakpoint | The viewport width at which a layout changes. Choose them where the design breaks, not at device names, which date immediately. |
| Bubbling | The phase in which a DOM event travels from the target up through its ancestors. What makes event delegation possible. |
| Bundler | A tool that resolves imports and produces optimised output files, such as Vite, webpack or Rollup. |
C
| Term | Definition |
| CDN | Content Delivery Network, geographically distributed servers caching assets near users. Cuts latency for static files, and does nothing for a slow origin response on dynamic pages. |
| CLS | Cumulative Layout Shift, the Core Web Vital measuring unexpected movement of visible content. Usually caused by images without dimensions, injected banners, or late-loading fonts. |
| CORS | Cross-Origin Resource Sharing, the browser mechanism controlling which origins may read a response. The error appears in the browser and the fix is always on the server, which is why it confuses people for so long. |
| CSS | Cascading Style Sheets, the language describing presentation. |
| CSS Grid | A two-dimensional layout system for laying out rows and columns together. The correct tool for page-level structure, where flexbox is the tool for a single axis. |
| CSS Variable | A custom property such as –brand-colour, resolved at runtime and inheriting through the cascade. Unlike a preprocessor variable it can be changed live by media queries, themes or JavaScript. |
| Cache | Stored copies of responses reused instead of refetching. Cache-busting through file hashes is what lets assets be cached aggressively and still update on deploy. |
| Callback | A function passed to be called later. Nesting them deeply is what promises and async/await exist to avoid. |
| Cascade | The rules deciding which declaration wins when several apply, weighing origin, layer, specificity and source order. Understanding it removes most of the temptation to reach for !important. |
| Client-Side Rendering | Sending a near-empty HTML document and building the page in the browser with JavaScript. Fast for subsequent navigation, slow for the first view, and dependent on JavaScript succeeding. |
| Closure | A function that retains access to the variables of the scope it was defined in, after that scope has returned. The mechanism behind private state, and the cause of stale-value bugs in loops and effects. |
| Code Splitting | Breaking a bundle so only the code needed for the current view is loaded. The most reliable single fix for a heavy JavaScript payload. |
| Component | A self-contained, reusable unit of markup, style and behaviour. The organising idea of every modern framework. |
| Container Query | A query that responds to the size of an element’s container rather than the viewport. What media queries should have been for component-level design, and now widely supported. |
| Content Security Policy | An HTTP header restricting which sources of script, style and other resources the browser will execute. The strongest mitigation for cross-site scripting, and it breaks inline scripts, which is usually the point. |
| Critical CSS | The minimal styles needed to render what is visible first, inlined so the page can paint before the full stylesheet arrives. |
| Custom Element | A developer-defined HTML element registered with the browser, part of the Web Components set. |
D
| Term | Definition |
| DOM | Document Object Model, the browser’s live tree representation of the document, which scripts read and modify. The DOM is not the HTML source: it is what the source became after parsing and scripting. |
| Debouncing | Delaying a function until activity has stopped for a set interval. The right tool for search-as-you-type; throttling is the tool for scroll. |
| Declaration | A single CSS property and value pair. |
| Destructuring | Syntax for unpacking values from arrays or objects into variables. |
| DevTools | The browser’s built-in inspection suite for DOM, styles, network, performance and console. Learning the performance and network panels properly is worth more than any front-end library. |
| Display | The CSS property setting an element’s outer and inner layout behaviour, such as block, inline, flex or grid. |
| Doctype | The declaration at the top of an HTML document that keeps the browser in standards mode. Omitting it triggers quirks mode and a cascade of layout surprises. |
E
| Term | Definition |
| ECMAScript | The standard JavaScript implements, revised annually. |
| ES Module | The standard JavaScript module format using import and export, supported natively by browsers. |
| Event | A signal the browser dispatches when something happens, such as a click, input or load. |
| Event Delegation | Attaching one listener to a common ancestor and identifying the target when the event bubbles up. Handles dynamically added elements without rebinding and keeps listener counts small. |
| Event Loop | The mechanism cycling between the call stack, the microtask queue and the task queue. It explains why a long synchronous function freezes the interface and why promise callbacks run before timeouts. |
| Event Listener | A function registered to run when a given event fires on an element. Remove listeners when components unmount, or they hold references and leak memory. |
F
| Term | Definition |
| FCP | First Contentful Paint, the moment the browser first renders any content. |
| FOUC | Flash of Unstyled Content, the brief appearance of unstyled markup before CSS applies. Usually caused by stylesheets loaded late or by client-side theming applied after paint. |
| Fetch API | The promise-based browser interface for HTTP requests. It does not reject on 4xx or 5xx responses, so check response.ok explicitly. |
| Flexbox | A one-dimensional layout system distributing space along a single axis. Right for toolbars, cards and anything in a row or column; grid is right for two-dimensional structure. |
| Focus | The element currently receiving keyboard input. Never remove focus outlines without replacing them, since that makes keyboard navigation impossible to follow. |
| Font Display | The CSS descriptor controlling what the browser shows while a web font loads. swap avoids invisible text at the cost of a visible font change. |
| Framework | A structured system such as React, Vue or Svelte that provides the architecture your code fits into, rather than a library you call. |
G
| Term | Definition |
| Graceful Degradation | Building the full experience, then ensuring it remains usable where features are missing. The inverse of progressive enhancement, which starts from the baseline instead. |
H
| Term | Definition |
| HTML | HyperText Markup Language, the structure and semantics of a document. |
| HTTP | The protocol carrying web requests and responses. Status codes, caching headers and compression are front-end concerns as much as back-end ones. |
| Higher-Order Function | A function that takes or returns another function, such as map, filter or reduce. |
| Hoisting | JavaScript’s behaviour of processing declarations before execution, so varand function declarations exist before their line. let and const are hoisted too, but unusable until initialised, which is the temporal dead zone. |
| Hook | In React, a function such as useState or useEffect giving a function component state and lifecycle behaviour. Only callable at the top level of a component, which is what the rules of hooks enforce. |
| Hydration | Attaching JavaScript behaviour to server-rendered HTML in the browser. The page looks ready before it is interactive, which is exactly the gap Interaction to Next Paint measures. |
I
| Term | Definition |
| INP | Interaction to Next Paint, the Core Web Vital measuring responsiveness to user input across the visit. It replaced First Input Delay and is far harder to pass, because it counts every interaction, not just the first. |
| Iframe | An embedded nested browsing context. Isolated from the parent by origin rules, which is both its security value and its integration difficulty. |
| Immutability | Treating values as unchangeable and producing new ones instead of mutating. What lets frameworks detect change by reference comparison rather than deep inspection. |
| Inheritance | In CSS, the passing of certain property values from parent to child, such as colour and font. Layout properties do not inherit, which is why every element needs its own box rules. |
| Intersection Observer | A browser API reporting when an element enters or leaves the viewport. The efficient way to implement lazy loading and scroll-triggered behaviour without scroll listeners. |
J
| Term | Definition |
| JSON | JavaScript Object Notation, the standard data interchange format. It is a text format, not JavaScript: no comments, no trailing commas, and keys must be double-quoted. |
| JSX | The XML-like syntax used in React, compiled to function calls. It is not HTML, which is why attributes are className and htmlFor. |
| JavaScript | The browser’s programming language, single-threaded with an event loop, dynamically typed and prototype-based. |
K
| Term | Definition |
| Key | The stable identifier given to items in a rendered list so a framework can match elements across renders. Using an array index as a key causes state to attach to the wrong item as soon as the list reorders. |
| Keyframes | The CSS at-rule defining the stages of an animation. |
L
| Term | Definition |
| LCP | Largest Contentful Paint, the Core Web Vital measuring when the main content appears. Usually a hero image or heading, and usually fixed by preloading that resource and cutting what blocks it. |
| Lazy Loading | Deferring the loading of resources until they are needed, most simply through loading=”lazy” on images below the fold. Applying it to the hero image makes LCP worse, which is a common own goal. |
| Lighthouse | The auditing tool that scores performance, accessibility, best practice and SEO in a lab environment. Lab scores are a diagnostic; field data from real users is the truth. |
| Linting | Static analysis flagging errors and style violations, usually ESLint with Stylelint. Cheapest possible defect prevention when it runs in CI rather than only locally. |
| Local Storage | Synchronous key-value browser storage that persists across sessions. Synchronous access blocks the main thread, and everything stored is readable by any script on the origin, so no secrets. |
| Logical Properties | CSS properties expressed in flow-relative terms such as margin-inline-startrather than margin-left. They keep layouts correct when the writing direction changes. |
M
| Term | Definition |
| Media Query | A CSS rule applying styles conditionally on viewport, device or user preference, including prefers-reduced-motion and prefers-color-scheme. |
| Memoisation | Caching a computation so repeated calls with the same input are free. In frameworks, applied through useMemo and equivalents, and easy to over-apply until the bookkeeping costs more than the work saved. |
| Minification | Removing whitespace, comments and long names from output files to reduce transfer size. |
| Mobile First | Writing base styles for small screens and layering larger layouts through min-width queries. Produces simpler CSS, because adding capability is easier than removing it. |
| Module | A file with its own scope that explicitly exports and imports what it shares. |
N
| Term | Definition |
| Node.js | A JavaScript runtime outside the browser, used for tooling, build steps and servers. |
| Nesting | Writing rules inside other rules, long available in Sass and now native CSS. Nest shallowly: deep nesting produces long, brittle, high-specificity selectors. |
| npm | The Node package registry and its command line client. |
O
| Term | Definition |
| Optimistic UI | Updating the interface immediately as though an action succeeded, then reconciling when the server responds. Feels much faster, and requires a real plan for the failure case. |
| Optional Chaining | The ?. operator, returning undefined rather than throwing when an intermediate value is null or undefined. |
| Overflow | The CSS property controlling what happens when content exceeds its box. Wide content such as tables and code blocks should scroll inside its own container so the page body never scrolls sideways. |
P
| Term | Definition |
| PWA | Progressive Web App, a site using a service worker and manifest to be installable and work offline. |
| Package Manager | The tool resolving and installing dependencies, such as npm, pnpm or yarn. Commit the lockfile, or builds are not reproducible. |
| Polyfill | Code providing a missing browser feature so newer syntax or APIs work in older environments. |
| Position | The CSS property setting how an element is placed: static, relative, absolute, fixed or sticky. Sticky needs a threshold such as top and an ancestor that does not clip overflow, which is why it silently fails so often. |
| Preload | A resource hint telling the browser to fetch something needed soon at high priority. Overusing it removes the benefit, since everything cannot be highest priority. |
| Progressive Enhancement | Starting from working HTML and layering CSS and JavaScript on top. Yields a page that still functions when the enhancement layer fails. |
| Promise | An object representing a future value, settling as fulfilled or rejected. |
| Prop | Data passed from a parent component into a child. Read-only inside the child, which is what makes data flow traceable. |
| Pseudo-class | A selector for a state, such as :hover, :focus-visible or :nth-child(). :focus-visible is the one to style, since it appears for keyboard users without adding rings on mouse clicks. |
| Pseudo-element | A selector for a generated or sub part of an element, such as ::before or ::placeholder. Content added this way is decorative and unreliable for screen readers. |
| Pure Function | A function whose output depends only on its input and which causes no side effects. Trivially testable and safely cacheable. |
Q
| Term | Definition |
| Query Selector | The DOM method retrieving elements by CSS selector, querySelector for the first match and querySelectorAll for a static list of all matches. |
R
| Term | Definition |
| REST | An HTTP API style organised around resources and standard verbs. |
| React | A component-based UI library using a virtual DOM and one-way data flow. |
| Reconciliation | The process of comparing a new render against the previous one and applying only the differences to the DOM. |
| Reflow | Recalculation of layout geometry after a change, followed by repaint. Reading a layout property immediately after writing one forces a synchronous reflow, and doing that in a loop is the classic cause of jank. |
| Rem and Em | Font-relative CSS units, rem against the root font size and em against the element’s own. Use rem for consistent spacing, since nested em values compound. |
| Responsive Design | Building one layout that adapts across viewport sizes, through fluid units, flexible grids and media or container queries. |
| Routing | Mapping URLs to views. In a single-page application it is handled in the browser, which means history, scroll position and focus management all become your responsibility. |
S
| Term | Definition |
| SPA | See Single Page Application. |
| SSG | See Static Site Generation. |
| SSR | See Server-Side Rendering. |
| SVG | Scalable Vector Graphics, an XML vector format that scales without loss and can be styled and animated with CSS when inlined. |
| Sass / SCSS | A CSS preprocessor adding variables, nesting, mixins and functions. Less essential than it was, now that custom properties and native nesting exist. |
| Semantic HTML | Using elements for their meaning rather than their appearance, such as button, nav and main. It supplies accessibility and keyboard behaviour for free, which a styled div never does. |
| Server-Side Rendering | Generating HTML on the server for each request. Fast first paint and good for crawlers, at the cost of server work and a hydration step. |
| Service Worker | A script running separately from the page, able to intercept network requests and serve cached responses. Enables offline behaviour, and a stale service worker can pin users to an old build, so plan the update path. |
| Session Storage | Per-tab browser storage cleared when the tab closes. |
| Shadow DOM | An encapsulated DOM subtree whose styles and structure do not leak in or out. The isolation mechanism of web components. |
| Single Page Application | An application that loads once and swaps views client-side without full page loads. |
| Specificity | The weight of a selector, counted as ids, then classes and attributes, then elements. Keeping selectors flat, as BEM does, avoids the escalation that ends in !important. |
| Spread Operator | The … syntax expanding an iterable or object into another. Copies are shallow, so nested objects remain shared references. |
| State | Data that changes over time and drives what is rendered. Most front-end complexity is state that lives in more places than it should. |
| Static Site Generation | Building HTML at deploy time rather than per request. The fastest and cheapest option for content that does not change per user. |
T
| Term | Definition |
| TTFB | Time To First Byte, the delay before the first byte of the response arrives. A server and network measure, and the ceiling every paint metric sits under. |
| Template Literal | A backtick string supporting interpolation and line breaks. Interpolating user input into HTML this way is a direct route to cross-site scripting. |
| Ternary | The condition ? a : b conditional expression. Readable when short, and unreadable when nested. |
| Throttling | Limiting a function to run at most once per interval. Right for scroll and resize handlers; debouncing is right for typing. |
| Transform | The CSS property translating, scaling or rotating an element. Animate transform and opacity rather than layout properties, since only these two can be handled by the compositor without reflow. |
| Transition | CSS interpolation between two states over a duration. Always respect prefers-reduced-motion. |
| Transpiler | A tool converting source in one language or syntax level into another, such as TypeScript to JavaScript. |
| Tree Shaking | Removing exported code that is never imported. Only works with static ES module imports, which is why dynamic requires defeat it. |
| TypeScript | JavaScript with static types, checked at build time and erased at runtime. Types do not validate data arriving at runtime, so API responses still need checking. |
U
| Term | Definition |
| Utility Class | A single-purpose class such as .mt-4, the basis of frameworks like Tailwind. Fast to compose and it moves design decisions into markup, which is the trade people argue about. |
V
| Term | Definition |
| Vanilla JavaScript | JavaScript with no framework or library. |
| Vendor Prefix | A browser-specific property prefix such as -webkit-. Largely historical, and old prefixed code left in a stylesheet now causes more confusion than compatibility. |
| Viewport | The visible area of the page. The meta viewport tag is required for responsive behaviour on mobile, and disabling zoom in it is an accessibility failure. |
| Virtual DOM | An in-memory representation of the UI, diffed against the previous version to compute the minimal set of real DOM updates. |
| Vite | A build tool serving native ES modules in development for near-instant startup and bundling for production. |
W
| Term | Definition |
| WCAG | Web Content Accessibility Guidelines, the standard accessibility criteria, commonly targeted at level AA. |
| Web Component | A reusable custom element built on custom elements, shadow DOM and templates, usable in any framework or none. |
| Web Vitals | Google’s user-centred performance metrics: LCP for loading, INP for responsiveness and CLS for visual stability. |
| WebSocket | A persistent two-way connection between browser and server, for live updates without polling. |
| Webpack | A long-established bundler with a large plugin ecosystem, increasingly replaced by Vite for new projects. |
X
| Term | Definition |
| XHR | XMLHttpRequest, the original browser API for HTTP requests, superseded by fetch. |
| XSS | Cross-Site Scripting, injecting script into a page that other users load. Prevented by escaping output, avoiding innerHTML with untrusted data, and a strict Content Security Policy. |
Z
| Term | Definition |
| z-index | The CSS property setting stacking order among positioned elements. It only compares within a stacking context, which is why a high value sometimes still sits behind something with a lower one. |
[…] Glossary: front-end development […]