CSS Mastery

What you'll learn

• Selector SpringsHow CSS attaches to a page, selectors and combinators, specificity and inheritance.
• Box CanyonThe box model, box-sizing, margins, display and overflow.
• Color CoastColor formats, units, fonts, text styling, backgrounds and shadows.
• Flexbox FjordOne-dimensional layout: axes, alignment, wrapping, flexible sizes and everyday patterns.
• Grid GlacierTwo-dimensional layout: tracks and fr, line placement, named areas, auto-fit and alignment.
• Stacking SummitPositioning, z-index and stacking contexts, pseudo-elements and interactive states.
• Breakpoint BluffsFluid layouts, media queries, clamp(), responsive images and pages that reflow.
• Motion MesaTransitions, transforms, keyframe animations, custom properties, modern CSS and the boss page.

Course outline

8 units and 41 lessons. Each lesson has a short read with examples you run, a quiz, and coding problems tested in your browser; most have a step-through visualizer.

1. 1

   Unit 1:Selector Springs

   How CSS attaches to a page, selectors and combinators, specificity and inheritance.

   Free
   1. 1
      How CSS Attaches to a Page Rules, selectors and declarations, the three places CSS can live, and what the browser does with mistakes.
      2 problems
   2. 2
      Type, Class, ID and Attribute Selectors Pick elements by tag, class, id and attributes, combine them, and group selectors that share declarations.
      2 problems
   3. 3
      Combinators and Pseudo-classes Select by relationship (inside, directly inside, right after) and by position (first, last, every other one, not this).
      2 problems
   4. 4
      Specificity and the Cascade When rules disagree: how the browser scores selectors, why order matters, and why !important is a last resort.
      2 problems
   5. 5
      Inheritance and Default Values Which properties flow down to children, how inherit, initial and unset work, and the handy currentColor.
      2 problems
2. 2

   Unit 2:Box Canyon

   The box model, box-sizing, margins, display and overflow.

   Free
   1. 1
      The Box Model Every element is a box: content, padding, border and margin, and the shorthands that set them.
      2 problems
   2. 2
      box-sizing, Width and Height Why a 300px box can end up 350px wide, the border-box fix, and min and max sizes.
      2 problems
   3. 3
      Margins, Collapsing and Centering How vertical margins merge, how to space a stack of elements, and centering a block with auto margins.
      2 problems
   4. 4
      Display: Block, Inline and Inline-block How boxes flow: blocks stack, inline boxes sit in lines, inline-block mixes both, and none removes an element.
      2 problems
   5. 5
      Overflow, Rounded Corners and Outlines What happens when content does not fit, truncating text with an ellipsis, round shapes, and focus outlines.
      2 problems
3. 3

   Unit 3:Color Coast

   Color formats, units, fonts, text styling, backgrounds and shadows.

   Pro
   1. 1
      Color: Names, Hex, rgb() and hsl() The ways to write a color, transparency with alpha, opacity versus alpha, and contrast you can read.
      2 problems
   2. 2
      Units: px, em, rem, % and Viewport Units Absolute and relative lengths, why rem is the safe default for type, and when em, % and vw shine.
      2 problems
   3. 3
      Fonts: Families, Weights and Styles Font stacks with fallbacks, generic families, weights, italics, the font shorthand and web fonts.
      2 problems
   4. 4
      Styling Text: Line Height, Spacing and Decoration Readable line height, letter spacing, alignment, case, underlines and controlling how text wraps.
      2 problems
   5. 5
      Backgrounds, Gradients and Shadows Background images and how to size them, linear and radial gradients, layering, and box and text shadows.
      2 problems
4. 4

   Unit 4:Flexbox Fjord

   One-dimensional layout: axes, alignment, wrapping, flexible sizes and everyday patterns.

   Pro
   1. 1
      Flexbox: Axes, Direction and Gap Turn a box into a flex container, lay its children out in a row or a column, and space them with gap.
      2 problems
   2. 2
      Flexbox Alignment justify-content along the main axis, align-items across it, align-self for one item, and centering anything.
      2 problems
   3. 3
      Wrapping Flex Lines Let items flow onto new lines with flex-wrap, space the lines, and align them with align-content.
      2 problems
   4. 4
      Flexible Sizes: grow, shrink and basis How flex items share free space: flex-basis as the starting size, flex-grow and flex-shrink as the shares, and the flex shorthand.
      2 problems
   5. 5
      Flexbox Patterns: Navbars, Media Objects and Footers Everyday layouts built with flexbox, plus order and why the visual order should match the HTML.
      2 problems
5. 5

   Unit 5:Grid Glacier

   Two-dimensional layout: tracks and fr, line placement, named areas, auto-fit and alignment.

   Pro
   1. 1
      Grid: Columns, Rows and fr Define a grid of tracks with grid-template-columns, share space with fr, and let rows appear on their own.
      2 problems
   2. 2
      Placing Items on Grid Lines Number the lines between tracks, place and stretch items with grid-column and grid-row, span, and -1.
      2 problems
   3. 3
      Named Grid Areas Draw a layout as ASCII art with grid-template-areas, place items by name, and rearrange it in one place.
      2 problems
   4. 4
      repeat(), minmax() and auto-fit Write tracks with repeat(), give them limits with minmax(), and let auto-fit choose the number of columns.
      2 problems
   5. 5
      Aligning Items in a Grid justify-items and align-items inside cells, place-items, per-item justify-self and align-self, and aligning the whole grid.
      2 problems
6. 6

   Unit 6:Stacking Summit

   Positioning, z-index and stacking contexts, pseudo-elements and interactive states.

   Pro
   1. 1
      Positioning: relative and absolute Take an element out of the normal flow, place it with offsets, and choose what it is positioned against.
      2 problems
   2. 2
      Fixed and Sticky Positioning Pin elements to the screen with fixed, make headers stick while scrolling with sticky, and avoid the common traps.
      2 problems
   3. 3
      z-index and Stacking Contexts Which box is drawn on top, how z-index works, and why z-index: 9999 sometimes still loses.
      2 problems
   4. 4
      Pseudo-elements: ::before and ::after Generate decorative boxes with ::before and ::after, style the first letter, list markers and placeholders.
      2 problems
   5. 5
      Interactive States: :hover, :focus-visible and Friends Style elements by what the user is doing or what state they are in: hover, focus, pressed, checked, disabled, required, and :has().
      2 problems
7. 7

   Unit 7:Breakpoint Bluffs

   Fluid layouts, media queries, clamp(), responsive images and pages that reflow.

   Pro
   1. 1
      Responsive Foundations The viewport meta tag, fluid widths instead of fixed ones, and why mobile-first is the easier way to build.
      2 problems
   2. 2
      Media Queries Apply CSS only when the screen matches: widths and ranges, choosing breakpoints, orientation, print and user preferences.
      2 problems
   3. 3
      Fluid Sizes with clamp(), min() and max() Sizes that scale smoothly with the screen between a minimum and a maximum, using calc(), min(), max() and clamp().
      2 problems
   4. 4
      Responsive Images and object-fit Images that fit any column, fixed shapes with aspect-ratio, cropping with object-fit, and serving the right file with srcset.
      2 problems
   5. 5
      Responsive Layouts and Container Queries Reflow a whole page with named grid areas and a couple of media queries, and meet container queries for components.
      2 problems
8. 8

   Unit 8:Motion Mesa

   Transitions, transforms, keyframe animations, custom properties, modern CSS and the boss page.

   Pro
   1. 1
      Transitions Animate between two states smoothly: which property, how long, which easing, and which properties are cheap to animate.
      2 problems
   2. 2
      Transforms: translate, scale and rotate Move, resize, rotate and skew elements without disturbing the layout, and why the order of transform functions matters.
      2 problems
   3. 3
      Keyframe Animations Define motion with @keyframes, control it with the animation properties, and respect prefers-reduced-motion.
      2 problems
   4. 4
      Custom Properties and Theming CSS variables: define, use and override them, fallbacks and calc(), and building light and dark themes.
      2 problems
   5. 5
      Modern CSS: Layers, Nesting and @supports Organise the cascade with @layer, write nested rules natively, and use new features safely with @supports.
      2 problems
   6. 6
      Boss: A Responsive Pricing Page Put the whole course to work: tokens, a responsive grid, flex cards, fluid type, motion and reduced motion in one page.
      1 problem