Intermediate everything in Frontend Dev, page 29
animation-fill-mode: Hold Styles Before and After Animation
The animation-fill-mode property prevents the jarring "snap" back to an element's original state after a CSS animation. Use forwards to hold the final state or backwards to apply the start state during a delay.
CSS Cubic-Bezier: The Art of Animation Pacing
A cubic-bezier function defines an animation's speed curve, controlling its acceleration and deceleration. It's used in CSS to make UI motion feel natural. The footgun is mistaking presets: ease accelerates more sharply than the symmetrical ease-in-out.
CSS Keyframe Animations: Multi-Step Motion Control
Think of CSS keyframes as a flipbook for your UI. You define styles at specific moments, and the browser animates between them. It's for multi-stage sequences, like loading spinners, where simple transitions fall short.
CSS object-fit: Control How Images Fill a Box
object-fit tells an image how to behave inside a container with a different aspect ratio, preventing distortion. Use it for responsive hero images or product grids. The default is fill, which stretches the image; you almost always want cover or contain.
srcset and sizes: Responsive Images in HTML
Give the browser a menu of images with srcset and tell it how much screen space the image will take with sizes. The browser then picks the most efficient option for the user's device. The footgun is forgetting sizes, which makes the browser assume 100vw.
The <picture> Element: Art Direction for Images
The <picture> element provides art-direction for images, letting the browser pick the best source file. It's used to serve different images for various screen sizes, resolutions, or formats, improving performance and user experience.
Viewport Units: Sizing Against the Browser Window
Viewport units (vw/vh) size elements relative to the browser window, not their parent container. 1vw is 1% of the viewport's width. Use them for full-screen hero sections or typography that scales with the browser. A common footgun: 100vw causes overflow.
Relative CSS Units: rem vs. em
Relative CSS units like rem and em tie element sizes to font size for scalable UIs. rem is relative to the root font size, providing consistency. em is relative to the parent, causing sizes to compound. The footgun is accidentally nesting em units.
CSS aspect-ratio: Maintain Shape in Responsive Layouts
The aspect-ratio property sets a box's width-to-height ratio, making it maintain its shape as its container resizes. It's ideal for responsive video embeds or uniform grid items. The footgun: it has no effect if both width and height are fixed values.
CSS minmax(): Flexible Sizing for Grid Tracks
The minmax() function gives a grid track a minimum and maximum size, like a rubber band that stretches but won't snap. Use it in CSS Grid to create columns that grow with the viewport but never shrink below a readable width.
CSS Logical Properties: Layout That Speaks Every Language
Think 'start/end' not 'left/right'. CSS Logical Properties adapt your layout to the user's writing direction, from English to Arabic. Use padding-inline-start instead of padding-left for robust, internationalized sites.
CSS Grid-Template-Areas: Draw Your Layout in CSS
CSS grid-template-areas lets you visually "draw" your layout by naming cells in a string matrix. It's ideal for defining page structures like headers and sidebars. The biggest footgun: named areas must form a perfect rectangle, or the layout breaks.
CSS Grid: Placing Items on the Grid
Think of CSS Grid as a coordinate system for your layout. You can explicitly place items using line numbers or named areas, or let the browser auto-place them. This is key for page scaffolds and galleries. Footgun: Grid lines are numbered from 1, not 0.
Stacking Multiple Backgrounds in CSS
Think of CSS backgrounds as a stack of transparent sheets where the first image listed is on top. This lets you layer logos over gradients or combine patterns without extra HTML. The footgun: the first image in the code is the frontmost on screen.
CSS text-shadow: Adding Depth and Legibility to Text
The text-shadow property adds depth to text, like casting a shadow from a light source. Use it for subtle emphasis, letterpress effects, or to make text readable on busy backgrounds. The footgun: not setting a color, as browser defaults vary widely.
CSS box-shadow: Creating Depth and Elevation
box-shadow fakes depth by casting a shadow from an element's frame. It's used to elevate UI like cards and modals or create inner shadows for pressed states. The footgun: omitting the color causes it to inherit the parent's text color, not black.
CSS Gradients: Dynamic Images from Code
Think of CSS gradients as dynamic images generated by the browser, creating color transitions without a separate file. Use them for backgrounds and buttons. The default direction is top-to-bottom, but a 0deg angle is counterintuitively bottom-to-top.
@font-face: Ship Custom Fonts with Your CSS
@font-face lets you use fonts not installed on a user's machine by telling the browser where to download them. It's how you get custom brand fonts on a website, but be wary of the performance hit from downloading large font files.
CSS Margin Collapsing: The Largest Margin Wins
Instead of adding up, vertical margins on adjacent block elements 'collapse' into one, taking the size of the largest margin. This explains why two paragraphs with margin: 1rem don't have 2rem of space between them. The footgun is assuming it's a bug.
CSS Positioning: Taking Elements Out of Normal Flow
CSS position lets you override the default document flow. Think of it as telling an element to ignore its neighbors and listen to top/left coordinates instead. Use it for overlays, modals, and sticky headers.
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