Web Development: glossary terms

Front-end and back-end building blocks: HTML, CSS, JavaScript frameworks, rendering models and the tooling around them.

Glossary · Web DevelopmentAJAX (Asynchronous JavaScript and XML)AJAX is a technique where a page requests data from a server in the background with JavaScript and updates part of the page without a full reload.Glossary · Web DevelopmentAngularAngular is a TypeScript-based web application framework from Google that provides components, routing, forms and dependency injection in one package.Glossary · Web DevelopmentARIA (Accessible Rich Internet Applications)ARIA is a set of HTML attributes that add roles and states to elements so assistive technologies like screen readers can understand custom interface widgets.Glossary · Web DevelopmentBack End (Back-End Development)Back end is the server-side part of a website or app that handles data, business logic, authentication and the responses your browser receives.Glossary · Web DevelopmentBootstrapBootstrap is a widely used front-end framework of prebuilt CSS components, a grid system and optional JavaScript for building responsive sites quickly.Glossary · Web DevelopmentBundler (Module Bundler)A bundler is a build tool that combines many JavaScript modules and assets into a small number of optimized files for the browser.Glossary · Web DevelopmentCanvas ElementThe HTML canvas element provides a bitmap drawing surface that JavaScript can paint on with 2D or WebGL APIs for charts, games and image processing.Glossary · Web DevelopmentChrome DevToolsChrome DevTools is the set of debugging and profiling tools built into Chrome for inspecting HTML, CSS, JavaScript, network requests and performance.Glossary · Web DevelopmentClient-Side RoutingClient-side routing is when JavaScript in the browser changes the visible page and URL without a full reload, using the History API to switch views.Glossary · Web DevelopmentCMS (Content Management System)A CMS is software that lets people create, edit and publish website content through an admin interface without writing code for every change.Glossary · Web DevelopmentComponentA component is a self-contained, reusable piece of a user interface that combines markup, styling and behavior, such as a button, card or navigation bar.Glossary · Web DevelopmentCritical CSSCritical CSS is the minimal set of styles needed to render the visible part of a page, inlined in the HTML so content appears without waiting for stylesheets.Glossary · Web DevelopmentCross-Browser CompatibilityCross-browser compatibility means a website works and looks acceptable in every browser and version its audience actually uses, despite differences.Glossary · Web DevelopmentCSS AnimationCSS animation uses @keyframes and the animation properties to change styles over time without JavaScript, from simple fades to looping motion.Glossary · Web DevelopmentCSS Box ModelThe CSS box model describes how every element is a rectangle made of content, padding, border and margin, which together determine its size and spacing.Glossary · Web DevelopmentCSS BreakpointA breakpoint is a viewport width at which a responsive layout changes, defined in CSS through media queries, such as switching from one column to three.Glossary · Web DevelopmentCSS GridCSS Grid is a two-dimensional layout system that places content into rows and columns, letting you design whole page layouts directly in CSS.Glossary · Web DevelopmentCSS ResetA CSS reset is a stylesheet that removes or normalizes the default styles browsers apply to elements, giving a consistent baseline across browsers.Glossary · Web DevelopmentCSS SelectorA CSS selector is the pattern in a stylesheet rule that picks which HTML elements the declared styles apply to, such as a tag, class, ID or attribute.Glossary · Web DevelopmentCSS SpecificityCSS specificity is the rule browsers use to decide which declaration wins when several selectors target the same element with conflicting styles.Glossary · Web DevelopmentCSS Variables (Custom Properties)CSS variables, or custom properties, are author-defined values like --brand that cascade, can be reused with var(), and can change at runtime.Glossary · Web DevelopmentDark Mode CSSDark mode CSS adapts a site's colors to the user's dark theme preference using the prefers-color-scheme media query and CSS variables.Glossary · Web DevelopmentDebounce and ThrottleDebounce delays a function until activity stops, while throttle runs it at most once per interval; both limit how often frequent events trigger work.Glossary · Web DevelopmentDOCTYPE DeclarationThe DOCTYPE declaration, written as <!DOCTYPE html>, is the first line of an HTML document and tells browsers to render it in standards mode.Glossary · Web DevelopmentDOM (Document Object Model)The DOM is the browser's in-memory tree of objects representing a web page, which JavaScript can read and change to update what the user sees.Glossary · Web DevelopmentEdge FunctionsEdge functions are small pieces of server code that run on a CDN's nodes close to the user, enabling low-latency logic before or instead of an origin request.Glossary · Web DevelopmentEvent BubblingEvent bubbling is the DOM behavior where an event fired on an element propagates upward through its ancestors, letting parents handle events from children.Glossary · Web DevelopmentFetch APIThe Fetch API is the modern browser interface for making HTTP requests from JavaScript, returning promises instead of using older callback-based XMLHttpRequest.Glossary · Web DevelopmentFlexbox (CSS Flexible Box Layout)Flexbox is a CSS layout mode that arranges items in a single row or column, distributing space and alignment automatically as the container size changes.Glossary · Web DevelopmentForm ValidationForm validation checks that user-entered data is complete and correctly formatted, in the browser for quick feedback and on the server for security.Glossary · Web DevelopmentFront End (Front-End Development)Front end is everything in a website that runs in the visitor's browser: the HTML structure, CSS styling and JavaScript behavior users see and click.Glossary · Web DevelopmentFull StackFull stack describes a developer or application that spans every layer of a web product: the browser front end, the server back end and the database.Glossary · Web DevelopmentHeadless CMSA headless CMS stores and manages content but has no built-in page output, delivering it through an API so any website or app can display it.Glossary · Web DevelopmentHot Reload (Hot Module Replacement)Hot reload is a development feature that updates changed code in the running browser instantly, often without a full refresh or losing the page state.Glossary · Web DevelopmentHTML AttributeAn HTML attribute is a name-value pair inside an element's start tag that configures the element, such as href on a link or alt on an image.Glossary · Web DevelopmentHTML ElementAn HTML element is a building block of a web page made of a start tag, optional content and an end tag, such as a paragraph, link or heading.Glossary · Web DevelopmentHTML5HTML5 is the modern version of the HTML standard, adding semantic elements, native audio and video, canvas, form controls and APIs for rich web apps.Glossary · Web DevelopmentHydrationHydration is the step where client-side JavaScript attaches event handlers and state to HTML that the server already rendered, making the page interactive.Glossary · Web DevelopmentIncremental Static Regeneration (ISR)Incremental static regeneration rebuilds individual static pages in the background after deployment, so content updates without a full site rebuild.Glossary · Web DevelopmentIndexedDBIndexedDB is a browser database API that stores large amounts of structured data on the user's device, accessible asynchronously and usable offline.Glossary · Web DevelopmentInfinite ScrollInfinite scroll is a pattern that loads more content automatically as the user nears the bottom of a list, removing traditional page numbers.Glossary · Web DevelopmentJamstackJamstack is a web architecture that serves prebuilt pages from a CDN and adds dynamic features through JavaScript and APIs instead of a traditional server.Glossary · Web DevelopmentJavaScript FrameworkA JavaScript framework is a prebuilt toolkit that gives structure to building web interfaces, handling things like components, state and updating the DOM.Glossary · Web DevelopmentJSXJSX is a syntax extension for JavaScript that lets you write HTML-like markup inside code, compiled into function calls by tools like Babel.Glossary · Web DevelopmentLazy LoadingLazy loading delays loading images, scripts or other resources until they are needed, often just before scrolling into view, to speed up first load.Glossary · Web DevelopmentLocal StorageLocal storage is a browser feature that saves small key-value strings on the user's device, persisting across page reloads and browser restarts until cleared.Glossary · Web DevelopmentMedia QueryA media query is a CSS condition, such as a minimum screen width or a dark color scheme preference, that applies a block of styles only when it is true.Glossary · Web DevelopmentMeta Viewport TagThe meta viewport tag tells mobile browsers how wide to make the layout viewport and what initial zoom to use, and is required for responsive pages.Glossary · Web DevelopmentMinificationMinification removes whitespace, comments and unnecessary characters from HTML, CSS or JavaScript to shrink file size without changing behavior.Glossary · Web DevelopmentMobile-First DesignMobile-first design is an approach where you build and style the small-screen experience first, then enhance it for larger screens with min-width media queries.Glossary · Web DevelopmentNext.jsNext.js is a React framework that adds file-based routing, server rendering, static generation and API endpoints on top of React.Glossary · Web DevelopmentNode.jsNode.js is a JavaScript runtime that executes JavaScript outside the browser, commonly used to build web servers, APIs and front-end build tools.Glossary · Web Developmentnpm (Node Package Manager)npm is the default package manager for Node.js and the largest public registry of JavaScript packages, used to install and manage project dependencies.Glossary · Web DevelopmentOpen Graph TagsOpen Graph tags are meta tags in a page's head that tell social networks and chat apps which title, description and image to show in link previews.Glossary · Web DevelopmentPluginA plugin is an add-on module that extends a host application, such as a CMS or browser, with new features without changing its core code.Glossary · Web DevelopmentPolyfillA polyfill is code that adds a modern web feature to browsers that do not support it natively, so scripts can use the same API everywhere.Glossary · Web DevelopmentProgressive EnhancementProgressive enhancement is a design approach that starts with working HTML content for everyone, then layers CSS and JavaScript on top for capable browsers.Glossary · Web DevelopmentPseudo-classA CSS pseudo-class is a keyword added to a selector, like :hover or :nth-child(), that matches an element based on its state or position.Glossary · Web DevelopmentReactReact is an open-source JavaScript library for building user interfaces from reusable components that update efficiently when data changes.Glossary · Web DevelopmentReduxRedux is a JavaScript library that keeps application state in one central store, updated only by dispatching actions handled by pure reducer functions.Glossary · Web Developmentrem vs pxIn CSS, px is a fixed unit while rem scales with the root font size, so rem-based sizing respects user font preferences and zoom settings.Glossary · Web DevelopmentResponsive ImagesResponsive images are images delivered in multiple sizes or formats so the browser picks the best file for the screen width, density and format support.Glossary · Web DevelopmentSass and SCSSSass is a CSS preprocessor that adds variables, nesting, mixins and functions; SCSS is its CSS-compatible syntax, compiled to plain CSS.Glossary · Web DevelopmentSemantic HTMLSemantic HTML means choosing elements for their meaning, such as nav, main and button, so browsers, assistive tools and search engines understand a page.Glossary · Web DevelopmentServer-Side Rendering (SSR)Server-side rendering generates a page's HTML on the server for each request, so the browser receives ready-to-display content before any JavaScript runs.Glossary · Web DevelopmentService WorkerA service worker is a script that runs in the background of a browser, intercepting network requests to enable offline support, caching and push notifications.Glossary · Web DevelopmentSession StorageSession storage is a browser API that stores key-value strings for the lifetime of a single tab, clearing them when that tab or window closes.Glossary · Web DevelopmentSingle-Page Application (SPA)A single-page application loads one HTML page and then updates content with JavaScript, fetching data in the background instead of reloading each page.Glossary · Web DevelopmentSkeleton ScreenA skeleton screen is a placeholder wireframe of grey shapes shown while content loads, giving users a sense of progress instead of a blank page.Glossary · Web DevelopmentSource MapA source map is a file that maps minified or compiled JavaScript or CSS back to the original source, so developer tools can show readable code and line numbers.Glossary · Web DevelopmentState ManagementState management is how an application stores, updates and shares data that changes over time, such as user input, fetched results and UI status.Glossary · Web DevelopmentStatic Site Generator (SSG)A static site generator builds a website into plain HTML, CSS and JavaScript files ahead of time, so servers only need to deliver files.Glossary · Web DevelopmentSvelteSvelte is a front-end framework that compiles components into small, direct JavaScript at build time instead of shipping a runtime library.Glossary · Web DevelopmentTailwind CSSTailwind CSS is a utility-first CSS framework where you style elements by combining small single-purpose classes directly in your HTML.Glossary · Web DevelopmentTranspilerA transpiler converts source code from one language or version into another at a similar level, such as modern JavaScript or TypeScript into older JavaScript.Glossary · Web DevelopmentTree ShakingTree shaking is a build optimization that removes unused exports from JavaScript modules so only the code you actually import ships to the browser.Glossary · Web DevelopmentVendor PrefixA vendor prefix is a browser-specific marker, like -webkit- or -moz-, added to a CSS property while a feature is experimental and not yet standardized.Glossary · Web DevelopmentViewport UnitsViewport units such as vw, vh, dvh and vmin are CSS lengths relative to the browser window size, used for full-screen sections and fluid typography.Glossary · Web DevelopmentVirtual DOMThe virtual DOM is an in-memory representation of the UI that a framework compares with its previous version to apply only the necessary real DOM changes.Glossary · Web DevelopmentViteVite is a front-end build tool that serves source files as native ES modules in development and bundles them with Rollup for production.Glossary · Web DevelopmentVue.jsVue is a progressive JavaScript framework for building web interfaces, known for its approachable template syntax and reactive data binding.Glossary · Web DevelopmentWeb App ManifestA web app manifest is a JSON file that tells browsers a site's name, icons, colors and display mode so it can be installed like an app.Glossary · Web DevelopmentWeb ComponentsWeb components are a set of browser standards for creating reusable custom HTML elements with encapsulated markup, styles and behavior, without a framework.Glossary · Web DevelopmentWeb FontsWeb fonts are font files that a browser downloads from a server or CDN so a page can use typefaces that are not installed on the visitor's device.Glossary · Web DevelopmentWeb Push NotificationsWeb push notifications are messages a site can deliver to a user's device through the browser, even when the page is closed, after the user gives permission.Glossary · Web DevelopmentWeb WorkersWeb Workers run JavaScript in background threads separate from the main thread, so heavy computation does not freeze the page's user interface.Glossary · Web DevelopmentWebAssembly (Wasm)WebAssembly is a compact binary instruction format that lets code from languages like Rust, C++ and Go run in the browser at near-native speed.Glossary · Web DevelopmentWebGLWebGL is a JavaScript API for rendering hardware-accelerated 2D and 3D graphics in a browser canvas using the GPU, based on OpenGL ES.Glossary · Web Developmentwebpackwebpack is a JavaScript module bundler that follows imports from an entry file and combines code and assets into optimized files for the browser.Glossary · Web DevelopmentWebSocketWebSocket is a protocol that opens a persistent two-way connection between browser and server, allowing instant messages without repeated HTTP requests.Glossary · Web DevelopmentWordPressWordPress is an open-source content management system, written in PHP with a MySQL-compatible database, that powers a large share of websites.Glossary · Web Developmentz-indexz-index is a CSS property that controls the stacking order of positioned elements along the z-axis, deciding which overlaps which.