Frontend terms
Building interfaces that humans actually enjoy using
Frontend development sits at the intersection of design, performance, and user psychology. This category covers browser rendering, component architecture, state management, accessibility, web APIs, and the frameworks and build tools that modern frontend teams rely on. What users see and interact with is ultimately what your software is — these terms help you build it well.
More on Frontend
History
Frontend development emerged in the 1990s as web browsers became capable of rendering HTML beyond simple text documents, with CSS (1996) and JavaScript (1995) enabling styling and interactivity. Early practice focused on cross-browser compatibility and server-side rendering, but shifted dramatically with the rise of AJAX (mid-2000s) and single-page applications (SPAs), moving application logic to the client. The introduction of modern frameworks—jQuery, Angular, React, and Vue—standardized component-based architecture and state management, while DevTools and build systems (Webpack, npm) professionalized the discipline. Today's frontend encompasses responsive design, performance optimization (Core Web Vitals), accessibility (WCAG), and progressive enhancement, reflecting evolution from document presentation to sophisticated interactive systems that run across diverse devices and network conditions.
Key concepts
- Semantic HTML
- CSS Cascade
- Specificity & Inheritance
- CSS Flexbox & Grid
- HTML Forms — Validation & Accessibility
- Responsive Images
- Web Accessibility (WCAG & ARIA)
- Script Loading (defer
- async
- type=module)
- Core Web Vitals & Page Performance
Best references
-
MDN Web Docs — Frontend Development Gold-standard reference for HTML, CSS, JavaScript APIs, and web standards. Covers every term in this category with accurate, maintained documentation and practical examples.
-
W3C CSS Working Group Specifications Authoritative source for CSS specs including Grid, Flexbox, Container Queries, @layer, and custom properties. Essential for understanding official CSS standards.
-
WHATWG HTML Standard Living standard for HTML, including semantic elements, forms, meta tags, and the native dialog element. The definitive reference for modern HTML features.
-
Web.dev by Google Curated guides on Core Web Vitals, performance optimization, accessibility (WCAG/ARIA), progressive enhancement, and modern frontend best practices.
-
WebAIM — Web Accessibility In Mind Practical accessibility education covering ARIA roles, WCAG compliance, semantic HTML, and form validation. Trusted resource for accessible frontend design.
-
Can I Use — Browser Compatibility Tables Authoritative database of browser support for CSS, HTML, JavaScript APIs, and Web Components. Essential for checking feature compatibility across targets.
✦ Latest in Frontend
Typed relationships here
Edges touching a Frontend term.
- Web Components Applies ARIA Roles & Attributes 5d
- Web Components Leverages CSS Custom Properties (Variables) 6d
- Web Storage, IndexedDB & Cookies Specializes Browser Storage APIs Jun 13
- HTTP/2 Server Push & Early Hints Alternative to Preload, Prefetch & Preconnect Jun 13
- Input Validation vs Output Encoding Often seen in HTML Forms — Validation & Accessibility Jun 10
ARIA semantics reach accessible forms by means of aria-live regions, which announce validation errors and status changes dynamically to screen readers.
Canonical URL (rel=canonical)
A <link rel='canonical'> tag that tells search engines which URL is the authoritative version of a page — preventing duplicate content from splitting ranking signals across multiple URLs.
3mo ago
Frontend intermediate
CSS Cascade Layers (@layer)
1
CSS @layer lets you explicitly define the order in which style groups are applied in the cascade — styles in a later layer always win over earlier ones regardless of specificity, eliminating specificity wars in large codebases.
3mo ago
Frontend intermediate
CSS Grid Template Areas
1
A CSS Grid feature that lets you name regions of a grid and assign elements to them by name, making complex layouts readable and maintainable without calculating column/row numbers.
3mo ago
Frontend beginner
CSS :has() Selector
CSS :has() is a parent selector — .card:has(.badge) matches a .card that contains a .badge — enabling styles that depend on children or siblings, which previously required JavaScript.
3mo ago
Frontend intermediate
CSS Nesting (Native)
Native CSS nesting lets you write nested selectors directly in CSS without a preprocessor — &:hover inside .card applies to .card:hover — available in all modern browsers since 2023 without any build step.
3mo ago
Frontend beginner
CSS Logical Properties
CSS4
CSS properties that map to physical directions based on writing mode — margin-inline instead of margin-left/right, padding-block instead of padding-top/bottom — enabling RTL support automatically.
3mo ago
Frontend intermediate
CSS Subgrid
CSS4
Subgrid (grid-template-columns: subgrid) allows a nested grid element to participate in its parent's grid tracks — aligning children across the parent's columns without duplicating track definitions.
3mo ago
Frontend intermediate
Core Web Vitals
ES2015
1
Google's set of performance metrics — LCP, INP, and CLS — that measure loading speed, interactivity, and visual stability, used as a direct search ranking signal.
3mo ago
Frontend intermediate
Core Web Vitals & Page Performance
2
Google's Core Web Vitals — LCP, INP, CLS — measure real user experience and directly influence search ranking.
3mo ago
Frontend intermediate
Critical Rendering Path
1
The sequence of steps the browser takes to convert HTML, CSS, and JavaScript into pixels on screen — optimising it reduces Time to First Paint and LCP.
3mo ago
Frontend advanced
CSS Animations & Transitions
CSS3 CSS transitions animate property changes smoothly; keyframe animations define multi-step sequences — both should use GPU-composited properties (transform, opacity) for smooth 60fps.
3mo ago
Frontend intermediate
CSS Cascade, Specificity & Inheritance
CSS3
1
How browsers decide which CSS rule wins — cascade layers, origin, specificity score, and source order all play a role.
3mo ago
Frontend intermediate
CSS Container Queries
CSS4
A CSS feature that lets elements adapt their styles based on their parent container's size rather than the viewport — enabling truly reusable responsive components.
3mo ago
Frontend intermediate
CSS Custom Properties (Variables)
CSS3
1
Native CSS variables — --primary-color: #4f9cff — that cascade, inherit, and can be updated at runtime via JavaScript.
3mo ago
Frontend beginner
CSS Flexbox & Grid
CSS3
Flexbox handles one-dimensional layouts (row or column); Grid handles two-dimensional layouts — together they replace float and table hacks.
3mo ago
Frontend intermediate
CSS Specificity
CSS3
The algorithm browsers use to determine which CSS rule wins when multiple rules target the same element — calculated as a three-part score (ID, class, element).
3mo ago
Frontend intermediate