Intermediate

CSS Keyframe Animations

Define multi-step animations with @keyframes and the animation property for looping, sequenced visual effects.

CSS Animation Control

Master animation-timing-function, animation-delay, animation-direction, fill-mode, play-state, and the animation shorthand.

Advanced Selectors

CSS Attribute Selectors

Target elements by their HTML attributes and attribute values using [attr], [attr="val"], [attr^=], [attr$=], and [attr*=].

CSS Combinator Selectors

Select elements by their DOM relationship using descendant, child (>), adjacent sibling (+), and general sibling (~) combinators.

CSS :is(), :not(), and :has()

Write concise, powerful selectors using the functional pseudo-classes :is(), :not(), :where(), and the CSS parent selector :has().

Responsive Design

CSS Media Queries

Apply CSS conditionally based on screen width, device capabilities, and user preferences using @media rules.

CSS clamp() and Responsive Units

Create fluid, responsive layouts without media queries using clamp(), min(), max(), and viewport units vw, vh, dvh.

Advanced Layout

CSS Grid Template Areas

Design named grid layouts visually using grid-template-areas and grid-area for readable, maintainable page structures.

CSS Grid Auto-fit, Auto-fill & minmax()

Create fully responsive grids without media queries using repeat(auto-fit, minmax()), auto-fill, and the grid auto-placement algorithm.

CSS Flexbox Advanced

Master flex-grow, flex-shrink, flex-basis, the flex shorthand, order, align-self, and flex-flow for precise flex item control.

CSS Functions

CSS calc() and Math Functions

Mix units and compute values dynamically with calc(), min(), max(), clamp(), round(), and other CSS math functions.

Visual Effects

CSS Filters

Apply visual effects like blur, brightness, contrast, grayscale, and drop-shadow to elements and backgrounds using filter and backdrop-filter.

CSS Blend Modes

Blend elements and background layers together using mix-blend-mode and background-blend-mode for creative photo effects and text overlays.

CSS clip-path

Clip elements to custom shapes circles, polygons, and ellipses using clip-path for creative section dividers and image masks.

Modern CSS

CSS Scroll Snap

Create controlled, polished scrolling experiences that snap to specific positions using scroll-snap-type and scroll-snap-align.

CSS object-fit and object-position

Control how images and videos fill their containers using object-fit (cover, contain, fill) and object-position for alignment.

CSS aspect-ratio

Enforce width-to-height ratios for responsive media containers and UI elements using the modern aspect-ratio property.

CSS Logical Properties

Write writing-mode-aware CSS using logical properties like margin-inline, padding-block, and border-inline-start instead of physical directions.

CSS Nesting

Write cleaner, less repetitive CSS by nesting child rules inside parent rules natively, with no preprocessor required.

CSS Variables

CSS Custom Properties Advanced

Build theming systems, component tokens, and JavaScript-driven animations using cascading custom properties, fallbacks, and @property.