Advanced everything in Frontend Dev, page 16
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