CSS Trainer

The mental model everything else depends on. Rule syntax and the three ways a stylesheet reaches a document, the basic selector set, then the part most engineers never learn properly — how the cascade, specificity, inheritance and source order combine to decide which declaration actually applies.

Topics: What CSS is and why the presentation layer is separated · CSS syntax — selectors, declarations and comments · Element, id, class, universal and grouping selectors · External, internal and inline CSS, and when each is defensible · Specificity, the cascade and source order · Inheritance and the initial, inherit, unset and revert keywords · Reading computed styles in DevTools

• Assignments: (1) Predict the winning rule for ten conflicting declarations, then verify each in DevTools; (2) Remove every important flag from a stylesheet without changing the rendered result
• Capstone: Debug and document a real specificity conflict end to end, explaining why the losing rule lost

The visual primitives, taught with the value systems behind them. Colour names against RGB, RGBA, HEX, HSL and HSLA, transparency and opacity, the full background shorthand including position, repeat, attachment, size, origin and clip, and borders through to rounded corners and border images.

Topics: Colour names, colour values, RGB, RGBA, HEX, HSL and HSLA · Text, background, border colour and opacity or transparency · background-image, background-repeat, background-position, background-attachment · background-size, multiple backgrounds and full-size hero images · background-origin and background-clip · Border style, width, colour, individual sides and shorthand · Rounded corners with border-radius, per-corner control · border-image and slice values

• Assignments: (1) Build a hero section with a full-bleed background that holds at every viewport; (2) Recreate a card component using only border and background properties
• Capstone: Produce a colour and surface token set expressed entirely in HSL, with documented contrast ratios

Where mysterious layout arithmetic comes from. Height and width and their limits, the box model in full, margins including collapse and the auto value, padding and its effect on element width, outline as a non-layout box, and box-sizing — the single declaration that removes most of the confusion.

Topics: Height and width values, min-width and max-width · The box model — content, padding, border and margin · Margin individual sides, shorthand, auto and inherit · Margin collapse and why it surprises people · Padding, shorthand and padding's effect on element width · Outline, outline-width, colour, shorthand and outline-offset · box-sizing, with and without border-box · Using width, max-width and margin auto together

• Assignments: (1) Fix a layout that overflows because padding was added to a fixed width; (2) Demonstrate three cases of margin collapse and the correct way to prevent each
• Capstone: Build a content column that is centred, capped and stable from 320 to 2560 pixels

Everything that makes text readable. Colour, alignment, direction, decoration and transformation, the full spacing set from letter-spacing to white-space, text shadow, then font families, web-safe stacks and fallbacks, @font-face and web font formats, and the icon approaches teams actually use.

Topics: Text colour, alignment, direction, vertical alignment and decoration · Text transformation, indentation, letter spacing, line height, word spacing, white-space · text-shadow, text-overflow, word-wrap, word-break and writing-mode · font-family, web-safe fonts, font fallbacks and font pairing · font-style, font-size, font shorthand and responsive typography · The @font-face rule, font formats and using bold text correctly · Icon approaches — icon fonts, SVG icons and icon libraries · Font loading strategy and the effect on layout shift

• Assignments: (1) Build a typographic scale with fluid sizing and correct line heights; (2) Load a web font without causing a visible layout shift, and measure it
• Capstone: Deliver a typography layer with self-hosted fonts, a fallback stack and a measured loading strategy

Classic layout, which is still what most existing codebases are made of and still what breaks. Display values and their consequences, the five position values and the containing blocks they resolve against, overflow behaviour, float and clear with the clearfix problem, inline-block, and the alignment techniques teams reach for.

Topics: The display property and overriding the default display value · Position — static, relative, fixed, absolute and sticky · Containing blocks, stacking contexts and z-index · Overflow — visible, hidden, scroll, auto, overflow-x and overflow-y · Float, clear and the clearfix · inline-block and its use for navigation · Horizontal and vertical centring — padding, line-height, position with transform, Flexbox · Positioning text over an image

• Assignments: (1) Reproduce a sticky header and sidebar without JavaScript; (2) Fix a z-index problem caused by an unnoticed stacking context
• Capstone: Rebuild a float-based legacy layout and document what each hack was working around

Modern layout, taught as two algorithms rather than a property cheat sheet. The flex container and flex items in full, then Grid for two-dimensional layout, then the multi-column module for text flow — with a clear rule for choosing between them instead of defaulting to whichever is more familiar.

Topics: The Flexbox layout module and the flex container · flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content · Flex items — order, flex-grow, flex-shrink, flex-basis, flex, align-self · Perfect centring and responsive Flexbox patterns · CSS Grid — tracks, areas, gaps, implicit and explicit grids · Grid placement, auto-fit, auto-fill and minmax · Choosing Flexbox versus Grid for a given problem · Multi-column — column-count, column-gap, column-rule, column-span, column-width

• Assignments: (1) Build the same page section twice, once in Flexbox and once in Grid, and justify which you would ship; (2) Build a responsive image gallery with Flexbox and again with Grid
• Capstone: Deliver a full page layout in Grid with Flexbox components, responsive without a framework

How to target precisely instead of adding classes and wrapper elements. Combinators, the attribute selector family in full, pseudo-classes including state and structural selectors, and pseudo-elements — plus the specificity cost of each, which is where selector choices come back to bite.

Topics: Combinators — descendant, child, adjacent sibling and general sibling · Pseudo-classes and the anchor pseudo-class set · Structural and state pseudo-classes · Pseudo-elements, ::first-line, ::before and ::after · Attribute selectors — exact, whitespace, prefix, suffix and substring matching · Specificity cost of each selector type · Selectors used by test automation and why they break

• Assignments: (1) Style a component using only attribute and structural selectors, adding no classes; (2) Rewrite five over-specific selectors so they score lower without changing behaviour
• Capstone: Produce a selector policy for a codebase, including which patterns are banned and why

The interface patterns every application needs, built from the primitives rather than pulled from a framework. Navigation, dropdowns, buttons, pagination and breadcrumbs, tooltips, cards, image treatments, form styling, tables and lists — each with its states, keyboard behaviour and responsive form.

Topics: Navigation bars — vertical, horizontal, fixed, sticky, active states · Dropdowns and menu alignment · Buttons — colours, sizes, rounded, hover, shadow, disabled, groups, animated · Pagination and breadcrumbs, sizing and alignment · Tooltips — positioning on four sides, arrows and fade-in animation · Cards, image galleries, sprites and object-fit · Styling forms — inputs, focus states, textareas, selects, buttons, responsive forms · Styling tables and lists, and CSS counters

• Assignments: (1) Build an accessible dropdown navigation that works with the keyboard alone; (2) Style a form so every state — focus, invalid, disabled, filled — is visually distinct
• Capstone: Deliver a small component library with documented states and no framework dependency

Motion and depth without a performance penalty. Linear and radial gradients, text and box shadows, 2D and 3D transforms, transitions and keyframe animations in full — and the compositor rules that separate an animation running at sixty frames per second from one that thrashes layout.

Topics: Linear gradients — direction, angles, multiple stops, transparency, repeating · Radial gradients — shape, size keywords, spaced stops, repeating · text-shadow, multiple shadows and box-shadow · 2D transforms — translate, rotate, scale, skew, matrix · 3D transforms — rotateX, rotateY, rotateZ and perspective · Transitions — property, duration, delay and timing function · Animations — keyframes, name, duration, delay, iteration count, direction, fill-mode · Image filters, hover overlays and flip effects · Which properties are cheap to animate, and why

• Assignments: (1) Convert a JavaScript-driven animation to CSS and compare frame rates; (2) Build a hover treatment set for a gallery that animates only transform and opacity
• Capstone: Produce an animated interface section that holds 60fps on a mid-range device, proven in DevTools

One stylesheet, every screen. What responsive design actually means, the viewport and its meta pairing, media query syntax and types from CSS2 through to modern feature queries, then responsive images, flexible galleries and menus, orientation handling, and a mobile-first authoring order that reduces override churn.

Topics: What responsive web design is, and what the viewport is · Media query syntax, media types and the CSS3 media query set · Media queries for menus, columns, font size and hiding elements · Min-width to max-width ranges and orientation · Mobile-first authoring versus desktop-first overrides · Flexible images, responsive galleries and responsive websites · Responsive images in markup — srcset, sizes and picture · Container queries and where they replace breakpoints

• Assignments: (1) Convert a desktop-first stylesheet to mobile-first and measure the reduction in overrides; (2) Make a data-heavy table usable at 360 pixels without losing information
• Capstone: Deliver a site that is usable and readable from 320 pixels to ultra-wide, with no horizontal overflow

The part that decides whether the stylesheet is still maintainable in two years. Custom properties for theming, architecture and naming conventions, preprocessors and PostCSS, then delivery: bundling and splitting, critical CSS, unused-rule removal, minification, fingerprinting, stylelint and a size budget enforced by CI.

Topics: Custom properties and the var function, global and local overriding · Custom properties in media queries and changed from JavaScript · Architecture — BEM, utility-first, layering and component boundaries · Preprocessors and PostCSS with autoprefixer · Bundling, code splitting and critical CSS · Removing unused CSS safely · Minification, source maps, fingerprinting and cache headers · stylelint, size budgets and visual regression testing in CI · Browser support strategy, feature queries and progressive enhancement

• Assignments: (1) Introduce a custom-property theme layer with a runtime dark-mode switch; (2) Add stylelint and a CSS size budget to a pipeline so a regression fails the build
• Capstone: Take a monolithic stylesheet, split and budget it, and deliver a measured improvement in first paint