| Term | Description |
|---|---|
| Asset Optimization | Techniques such as bundling, minification, and compression applied to assets (CSS, JavaScript, images) to reduce load times. |
| Build Process | Automated sequence of tasks (e.g., compilation, bundling, optimization) that prepares source files for deployment. |
| CDN | Content Delivery Network; distributed servers that deliver static assets to users from a location geographically closer to them. |
| CSS | Cascading Style Sheets; stylesheet language used to describe the presentation of HTML documents. |
| Deployment | Process of publishing static files to a web server or hosting platform so they can be accessed by users. |
| DOM | Document Object Model; programming interface representing the page structure as a tree of objects for script manipulation. |
| HTML | HyperText Markup Language; standard markup language for defining the structure of web content. |
| HTTP | HyperText Transfer Protocol; application protocol used for transmitting static files (HTML, CSS, JS) over the web. |
| JavaScript | Client-side scripting language used to create interactive behavior on otherwise static pages. |
| Minification | Removal of unnecessary characters (whitespace, comments) from code to reduce file size without changing functionality. |
| Responsive Design | Approach to ensure web pages render well on a variety of devices and screen sizes using fluid layouts and media queries. |
| SEO | Search Engine Optimization; practices to improve the visibility of static pages in search engine results. |
| Sitemap | XML or HTML file listing all pages of a site to help users and search engines navigate and index content. |
| Static Site Generator | Tool that generates a full static HTML website from templates and content sources (e.g., Markdown). |
| Version Control | System (e.g., Git) for tracking changes to source files and coordinating collaboration on static assets. |
| W3C Web Components | Set of W3C standards (Custom Elements, Shadow DOM, HTML Templates, ES Modules) for creating encapsulated, reusable UI components in web pages. |
| Web Accessibility | Practices (ARIA roles, semantic markup) ensuring static content is usable by people with disabilities. |
| Term | Description |
|---|---|
| Custom Elements | API for defining and using new HTML tags, extending standard elements with custom behavior. |
| Declarative Shadow DOM | Syntax (<template shadowroot="open">…</template>) allowing Shadow DOM trees to be defined directly in HTML. |
| ES Modules | JavaScript module system using import and export to encapsulate and share code between files. |
| External Dependencies | References to external resources (such as CSS styles, custom properties, or light-DOM values) that a component’s Shadow DOM consumes or inherits from the host document. |
| HTML Imports | Legacy mechanism for including HTML documents in other documents via <link rel="import"> (now deprecated). |
| HTML Templates | <template> element that holds inert DOM fragments which can be cloned and stamped into the document at runtime. |
| Shadow DOM | Encapsulation mechanism that isolates an element’s internal DOM and styles from the main document DOM. |
| Slots | Placeholders in Shadow DOM (<slot>) where light-DOM children are projected into a component’s shadow tree. |
| Term | Description |
|---|---|
| Border Box | box-sizing: border-box mode where width and height include content, padding, and border. |
| Box Model | CSS model defining block element structure as nested layers: content → padding → border → margin (outermost). |
| Flow Model | Default CSS layout rule: block elements stack vertically; inline elements flow horizontally. |
| Margin Collapse | CSS behavior where adjacent block element margins combine into the larger margin rather than summing. |
| Page Model | HTML document structure: <!DOCTYPE> → <html> → <head> and <body>. |
| Positioned Element | Element removed from normal flow using position: absolute, fixed, sticky, or float. |
| Semantic Elements | HTML elements such as <article>, <nav>, <section> that convey meaning about their content. |
| Term | Description |
|---|---|
| Cascade | CSS rule resolution order: importance → origin → specificity → source order. |
| CSS Reset | Stylesheet that removes or normalizes browser default styles for consistent cross-browser rendering. |
| Custom Properties | CSS variables defined with --name: value and referenced with var(--name). |
| Flexbox | CSS layout module using display: flex for one-dimensional flexible alignment and distribution of items. |
| Grid Layout | CSS layout module using display: grid for two-dimensional layouts with named rows, columns, and template areas. |
| Inheritance | CSS mechanism where properties such as font-size and color propagate from parent to child elements unless overridden. |
| @keyframes | CSS at-rule defining animation frames using percentage steps or from/to keywords. |
| Media Query | CSS conditional rule applying styles based on viewport or device characteristics such as width, orientation, or color scheme. |
| Pseudo-class | CSS selector keyword such as :hover, :focus, :nth-child() targeting an element in a specific state. |
| Pseudo-element | CSS selector keyword such as ::before, ::after styling a part of an element or inserting generated content. |
| Specificity | CSS weight system determining which rule wins when multiple selectors target the same element; IDs outrank classes, classes outrank elements. |
| Transition | CSS mechanism that smoothly animates a property change over a specified duration using transition-property and transition-duration. |
| Term | Description |
|---|---|
| Event Bubbling | Propagation phase where a fired event rises from the target element up through ancestor elements to the document root. |
| Event Capturing | Propagation phase where an event descends from the document root down to the target element before bubbling begins. |
| Event Delegation | Pattern attaching a single listener to a parent element to handle events from many child elements via bubbling. |
| Event Loop | JavaScript runtime mechanism managing the call stack, event queue, and microtask queue to process asynchronous callbacks. |
| Getter / Setter | Property accessors in JavaScript classes that intercept reads (get) and writes (set) to a named property. |
| Prototype Model | JavaScript inheritance mechanism where objects delegate property lookup to a linked prototype chain. |
| Term | Description |
|---|---|
| Computed Style | Final CSS property values applied to an element after cascade resolution, retrieved via window.getComputedStyle(). |
| Document Fragment | Lightweight DOM container used to batch DOM insertions without triggering repeated renders. |
| MutationObserver | DOM API that watches for changes to the DOM tree (child additions, attribute mutations, subtree changes) and runs callbacks. |
| Node Traversal | Navigation through the DOM tree using properties such as parentNode, childNodes, nextSibling. |
| Term | Description |
|---|---|
| :host | CSS pseudo-class for styling the custom element host from within its own shadow DOM. |
| ::slotted() | CSS pseudo-element for styling light DOM content that has been projected into a shadow DOM slot. |
| attributeChangedCallback | Custom element lifecycle hook invoked when a watched attribute is added, removed, or changed. |
| connectedCallback | Custom element lifecycle hook invoked each time the element is inserted into the DOM. |
| disconnectedCallback | Custom element lifecycle hook invoked when the element is removed from the DOM. |
| Form-associated Custom Element | Custom element that participates in form submission and validation by calling attachInternals(). |
| Light DOM | User-authored content placed inside a custom element's tags, projected into the shadow tree via <slot>. |
| observedAttributes | Static getter on a custom element class listing which attributes should trigger attributeChangedCallback. |