All articles

Tagged: CSS

9 min read

CSS Transitions & Animations: Motion That Feels Right

A complete, practical guide to CSS motion — transitions and their four parts, what's animatable and what isn't, transform and why it's the performant property, easing and cubic-bezier, keyframe animations and all the animation-* properties, performance (compositor vs main thread), prefers-reduced-motion, plus common mistakes and hands-on exercises with solutions.

CSSAnimationsTransitionsFrontend
8 min read

CSS Typography & Web Fonts: Text That's a Pleasure to Read

A complete, practical guide to styling text on the web — the font stack and system fonts, @font-face and web fonts, font-display and loading performance, variable fonts, sizing with rem and fluid clamp(), line-height and measure, letter-spacing, text wrapping and truncation, text-wrap balance/pretty, vertical rhythm, accessibility, common mistakes, and hands-on exercises with solutions.

CSSTypographyWeb FontsFrontend
10 min read

Responsive Design & Media Queries: Building Interfaces That Fit Every Screen

A complete, practical guide to responsive design — the viewport meta tag, mobile-first media queries, min/max-width and ranges, breakpoints that follow content, fluid type with clamp(), responsive images, prefers-* feature queries, and container queries — with hands-on exercises.

CSSResponsiveMedia QueriesFrontend
10 min read

CSS Selectors, Specificity & the Cascade: Why Your Styles Win or Lose

The foundation under all of CSS — every selector type and combinator, pseudo-classes and pseudo-elements, how specificity is actually calculated, the cascade's full resolution order, inheritance, the inherit/initial/unset/revert keywords, escaping !important, and hands-on exercises with solutions.

CSSSelectorsSpecificityCascadeFrontend
11 min read

CSS Grid: Everything You Need to Lay Things Out in Two Dimensions

A complete, visual guide to CSS Grid — the grid container, tracks, fr units, repeat() and minmax(), template areas, line-based and area placement, auto-fit vs auto-fill, gap, alignment, implicit grids, and hands-on exercises with solutions.

CSSGridLayoutFrontend
8 min read

CSS Color & Gradients: From Hex to oklch and Beyond

A complete, practical guide to color on the web — hex, rgb and hsl, the modern oklch space, alpha and transparency, currentColor, color-mix, linear/radial/conic gradients, color stops and hard stops, multiple backgrounds and background-clip, dark mode with prefers-color-scheme, contrast and accessibility, common mistakes, and hands-on exercises with solutions.

CSSColorGradientsFrontend
8 min read

CSS Positioning & Stacking: static, relative, absolute, fixed, sticky, and z-index

A complete, practical guide to CSS positioning — the position values and how each one moves an element, the offset properties, containing blocks, sticky positioning, z-index and stacking contexts (and why z-index sometimes does nothing), plus common mistakes and hands-on exercises with solutions.

CSSPositioningLayoutFrontend
17 min read

Flexbox: Everything You Need to Lay Things Out in One Dimension

A complete, visual guide to CSS Flexbox — the two axes, flex-direction, wrapping, justify-content, align-items, gap, grow/shrink/basis, the flex shorthand, auto margins, the min-width:0 gotcha, RTL behaviour, and hands-on exercises with solutions.

CSSFlexboxLayoutFrontend
10 min read

The CSS Box Model: Everything That Actually Matters

A complete, visual guide to the CSS box model — content, padding, border, margin, box-sizing, margin collapsing, logical properties, and the gotchas that bite in real layouts.

CSSBox ModelLayoutFrontend
10 min read

Modern CSS: The Features That Changed How We Write Styles

A tour of the modern CSS features now shipping in browsers — container queries, :has(), nesting, cascade layers, subgrid, custom properties, color-mix() and modern color, logical properties, clamp(), aspect-ratio, scroll-driven animations, view transitions, and :is()/:where() — with hands-on exercises.

CSSModern CSSFrontend