Advanced everything in Frontend Dev, page 16
CSS Container Queries: Style Components, Not Just Pages
Container queries let components respond to their own size, not the viewport's. Use them for cards or sidebars that must adapt to different layouts. The footgun: you must first declare a parent as a "containment context" with container-type for it to work.
CSS Subgrid: Aligning Nested Grids
CSS Subgrid lets a nested grid borrow its parent's column or row tracks, solving the classic problem of aligning items inside components. This ensures elements within multiple cards, for example, line up perfectly.
CSS Grid: auto-fit vs. auto-fill
Create responsive grids without media queries. auto-fill creates as many columns as fit, leaving empty ones. auto-fit collapses empty columns, letting content stretch to fill the space. The footgun is using auto-fill when you want items to grow.
backdrop-filter: Styling What's Behind an Element
Think of backdrop-filter as frosted glass for your UI. It applies graphical effects like blur to the content *behind* an element. It's ideal for overlays like modals or navigation bars to improve legibility.
CSS clip-path: Break Out of the Box
Use clip-path to create non-rectangular layouts by defining a visible region, like a cookie cutter for your elements. It's perfect for complex UI shapes like chevrons or circles without extra image files. The footgun: complex shapes have tricky syntax.
CSS Blend Modes: Photoshop Effects in the Browser
Think Photoshop layer effects, but in CSS. Blend modes define how overlapping element colors interact—multiplying or screening them for rich effects. Use them for text knockouts on images or complex background textures.
CSS Filter: Photoshop-like Effects in the Browser
The filter property brings Photoshop-like graphical effects directly into CSS. Use it for image adjustments like blur() or contrast(), or for complex shadows with drop-shadow(). The order of chained filters matters, as they are applied sequentially.
Variable Fonts: One File, Infinite Styles
Variable fonts pack an entire typeface's variations—from thin to bold, condensed to wide—into a single file. This avoids multiple HTTP requests for different font weights, giving you a continuous range of styles with CSS.
CSS Containing Block: The Box That Defines Your Box
An element's size and position are calculated relative to its containing block, not always its direct parent. This determines how percentage widths are resolved and provides the reference for position: absolute.
Block Formatting Context: Taming Floats and Margins
A Block Formatting Context (BFC) is a mini-layout sandbox on your page, isolating its contents. Use it to contain child floats that would otherwise overflow their parent, or to stop adjacent elements from collapsing their margins.
CSS Stacking Contexts: The Z-Axis Explained
A CSS stacking context is like a self-contained group of layers. Elements inside only compete for z-index with siblings in that same group. They're created by properties like position with z-index, opacity, or transform.
CSS Pseudo-elements: Styling Parts of an Element
Pseudo-elements style parts of an element not in the DOM, like a paragraph's first line or selected text. Use ::before/::after for decorative content or ::selection to style user highlights.
Server Components, explained without the jargon
React Server Components render on the server and send the client a description of the result, not JavaScript. That means no bundle cost for server rendered parts and direct database access, with client components handling only the interactive pieces.
React interview cheatsheet: hooks rules in 60 seconds
The rules of hooks exist because React identifies each hook by call order, not by name. Call hooks only at the top level of a component or custom hook, never inside a loop, condition, or nested function, or state attaches to the wrong hook.
We are hiring for this. Every open role lists the topics its interview covers, so you can prepare for the real thing rather than guessing.
See open roles