Style a clear lesson card
Use selectors, declarations and external CSS to turn semantic HTML into a polished learning card.
Build: a reusable card with typography, spacing, color and a clear call to action
Start chapter
Platform under construction
CSS course
CSS is where structure becomes design.
This course is being built as a practical CSS learning path: selectors, cascade, box model, layout, responsive design, components, animation, architecture and production CSS.
:root {
--space-4: 1rem;
--brand: #62d5ff;
}
.lesson-card {
display: grid;
gap: var(--space-4);
padding: clamp(1rem, 3vw, 2rem);
}
@media (max-width: 720px) {
.lesson-card {
grid-template-columns: 1fr;
}
}
Course structure
All CSS chapters are online and ready to study.
Each page has its own URL, metadata, previous/next navigation and a full lesson structure. The CSS module is live now and will keep expanding with deeper labs, diagrams and project work.
Chapter projects
Every chapter moves toward something you can build.
CSS sticks when you turn concepts into interface decisions. These chapter projects give the route a practical backbone: learn the model, test it in the lab, then apply it to a real UI problem.
Debug a cascade conflict
Trace which rule wins, reduce specificity pressure and move repeated values into custom properties.
Build: a controlled component variant system without random overrides
Start chapterCreate resilient pricing blocks
Use sizing, padding, borders, overflow and display choices to keep cards stable with real content.
Build: three pricing cards that survive long text and narrow screens
Start chapterDesign a visual style system
Turn fonts, scale, color, backgrounds, gradients, shadows and radius into reusable design choices.
Build: a small visual language with tokens for text, surfaces, accents and depth
Start chapterBuild a responsive dashboard section
Choose normal flow, flexbox, grid, positioning and spacing systems for the right layout job.
Build: a dashboard band with header, cards, action row, sticky note and clean spacing
Start chapterMake a component adapt anywhere
Use mobile-first CSS, media queries, container queries, fluid layout and touch targets without device guessing.
Build: a card grid that adapts by content width, not by random device names
Start chapterShip a mini UI kit
Style buttons, cards, navigation, forms, tables, modals, badges and states as one coherent system.
Build: an accessible component set with hover, focus, disabled, loading and error states
Start chapterAdd purposeful motion
Use transitions, transforms, keyframes, focus states and reduced motion without creating visual noise.
Build: a small interaction pass for buttons, navigation and feedback messages
Start chapterOrganize CSS for growth
Split files, name classes, define tokens, use utilities intentionally and debug with a repeatable workflow.
Build: a maintainable CSS folder structure for a growing project
Start chapterRun a release checklist
Check accessibility, performance, browser support, feature queries, print CSS, minification and deployment risk.
Build: a practical release checklist you can reuse before shipping client work
Start chapterTooling and cheat sheets
Use the same checks a production CSS review uses.
The course now includes practical audit resources: decision trees, checklists and tooling routes. These are intentionally short enough to use during real work, not just to read once.
Cascade decision tree
A compact order of questions for origin, importance, layers, specificity and source order.
Open resourceFlexbox or Grid
A practical choice sheet for normal flow, flexbox, grid and positioning.
Open resourceResponsive CSS checklist
Fluid layout, content-driven breakpoints, touch targets, images, zoom and stress tests.
Open resourceAccessibility CSS checklist
Focus visibility, contrast, reduced motion, hit areas, zoom and status indicators.
Open resourceCSS release checklist
The final pre-deploy list for support, performance, print, minification and regressions.
Open resourceReal production cases
Connect the lesson to work that actually ships.
CSS becomes valuable when it controls real brand experience: premium first screens, lesson layouts, local SEO pages, responsive navigation, contact flows and maintainable design systems.
Full Stack Masterclass case
How this course platform is structured for crawlable lessons, internal links, analytics and long-term content growth.
Read the caseCSS Basics
Start with the language and the browser workflow.
The first chapter explains what CSS is, how rules are written, how CSS connects to HTML and how DevTools helps you inspect the result.
CSS Introduction
Learn what CSS does, where it fits in the browser and why visual quality is part of frontend engineering.
Open lessonCSS Syntax
Learn selectors, declarations, properties, values, braces, semicolons and the browser error model.
Open lessonCSS Comments
Learn CSS comment syntax, when comments help, when they become noise and how to use them in larger stylesheets.
Open lessonConnecting CSS to HTML
Learn inline, internal and external CSS, the link element, file paths, loading order and caching.
Open lessonCSS Selectors
Learn type, class, id, attribute, combinator and pseudo-class selectors with practical strategy.
Open lessonCSS DevTools
Learn how to inspect CSS, test declarations, debug layout, read computed styles and use responsive tools.
Open lessonCascade & Control
Learn why one rule wins and another disappears.
This is the mental model chapter. Specificity, inheritance, source order and layers decide which declaration controls the final pixels.
The Cascade
Learn the complete decision order: origin, importance, layers, specificity, scope, source order and inheritance.
Open lessonSpecificity
Learn class, ID, type, attribute and pseudo-class specificity with practical debugging rules.
Open lessonInheritance
Learn which CSS properties inherit, which do not and how inherited values affect typography and components.
Open lessonSource Order
Learn when order matters, how later rules override earlier ones and how to organize stylesheets so order stays predictable.
Open lesson!important
Learn what !important does, why it is risky and where it can be acceptable in controlled CSS systems.
Open lessonCascade Layers
Learn @layer, layer order, reset/base/component/utility architecture and how layers reduce selector fights.
Open lessonCSS Variables
Learn --custom-properties, var(), fallback values, inheritance, theming and when variables make CSS more maintainable.
Open lessonBox Model
Make spacing and sizing predictable.
Every element is a box. This chapter makes content, padding, border, margin, dimensions and overflow feel logical instead of random.
Box Model
Learn the four layers of every element box and how they affect real spacing, sizing and debugging.
Open lessonBox Sizing
Learn content-box, border-box and the reset that makes component sizing more predictable.
Open lessonWidth & Height
Learn how to size components without trapping content or breaking responsive layouts.
Open lessonMargin
Learn margin, margin collapse, auto margins and logical spacing without creating random gaps.
Open lessonPadding
Learn how padding affects buttons, cards, forms, touch targets and responsive component comfort.
Open lessonBorder
Learn border width, style, color, radius context and why borders are not the same as outlines.
Open lessonOverflow
Learn overflow visible, hidden, auto, scroll and clip with real layout and accessibility consequences.
Open lessonDisplay
Learn block, inline, inline-block, flex, grid and display none as the start of layout thinking.
Open lessonTypography & Visual Style
Turn readable text into a visual system.
CSS is not only layout. It is also reading quality, contrast, visual hierarchy, rhythm and the feeling of a professional interface.
Fonts
Learn font families, fallback stacks, web font loading, readability and why typography starts before font-size.
Open lessonFont Size
Learn rem, em, px, clamp(), responsive type scales and why font size should be a system.
Open lessonLine Height
Learn unitless line-height, paragraph rhythm, heading tightness and readable long-form text.
Open lessonText Alignment
Learn left, center, right and logical alignment with practical rules for readability and interface design.
Open lessonColors
Learn color values, contrast, semantic tokens, foreground/background pairs and state colors.
Open lessonBackgrounds
Learn background color, image, repeat, size, position, layers and readable foreground control.
Open lessonGradients
Learn linear, radial and conic gradients with stops, angles, overlays and subtle production use.
Open lessonShadows
Learn box-shadow, text-shadow, elevation systems, soft depth and when shadows become visual noise.
Open lessonBorder Radius
Learn consistent radius systems, pills, cards, images, overflow clipping and shape language.
Open lessonLayout
Build real page structures without fighting the browser.
Flexbox, grid, positioning and spacing systems are where CSS becomes serious frontend engineering.
Normal Flow
Learn block flow, inline flow, document order, intrinsic layout and why good CSS starts by respecting the browser.
Open lessonFlexbox
Learn flex containers, main axis, cross axis, flex growth, wrapping and when flexbox is better than grid.
Open lessonFlex Alignment
Learn main-axis alignment, cross-axis alignment, gap, auto margins and common button/nav alignment patterns.
Open lessonCSS Grid
Learn grid containers, tracks, gap, fr units, repeat(), minmax() and auto-fit responsive grids.
Open lessonGrid Placement
Learn grid-column, grid-row, span, named areas and safe placement patterns for real layouts.
Open lessonPositioning
Learn static, relative, absolute, fixed and how containing blocks decide where positioned elements land.
Open lessonZ-index
Learn stacking contexts, positioned elements, z-index scales and why higher numbers do not always win.
Open lessonSticky Elements
Learn position sticky, offsets, scroll containers, sticky sidebars and common failure causes.
Open lessonSpacing Systems
Learn spacing tokens, vertical rhythm, gap, section spacing and how consistent spacing makes interfaces feel premium.
Open lessonResponsive CSS
Make designs survive real screen sizes.
Responsive design starts with flexible thinking, not hundreds of breakpoints. This chapter builds that habit.
Mobile-first CSS
Learn progressive layout, base styles, min-width media queries, content priority and why mobile-first keeps CSS cleaner.
Open lessonMedia Queries
Learn min-width, max-width, range syntax, motion preferences, hover capability and practical media query discipline.
Open lessonContainer Queries
Learn container-type, named containers, @container rules and why component-level responsiveness is a serious upgrade.
Open lessonFluid Layouts
Learn flexible widths, clamp(), min(), max(), minmax(), auto-fit and why fluid CSS reduces breakpoint pressure.
Open lessonResponsive Images
Learn max-width, aspect-ratio, object-fit, srcset, sizes, picture and art direction for real responsive media.
Open lessonBreakpoints
Learn content-driven breakpoints, named tokens, common ranges, testing widths and avoiding breakpoint clutter.
Open lessonTouch Targets
Learn minimum target sizes, spacing, hover alternatives, pointer queries and mobile-friendly controls.
Open lessonComponents
Create reusable interface pieces.
Buttons, cards, navigation and forms need reusable styling rules, states and predictable naming.
Buttons
Learn button anatomy, variants, sizing, focus-visible, disabled states, icon buttons and why buttons need real interaction states.
Open lessonCards
Learn card anatomy, media framing, content rhythm, actions, hover states, equal height traps and responsive card grids.
Open lessonNavigation
Learn nav structure, active states, responsive navigation, focus states, spacing, dropdown caution and touch-friendly menus.
Open lessonForm Styling
Learn labels, input sizing, focus, error states, help text, disabled controls and why forms need calm CSS.
Open lessonTable Styling
Learn table hierarchy, headers, alignment, numeric columns, responsive overflow and when not to use a table.
Open lessonModals
Learn overlay structure, dialog sizing, focus states, close buttons, scroll behavior and mobile-safe modal layout.
Open lessonBadges & Alerts
Learn status colors, labels, icon support, contrast, alert hierarchy and when badges should be subtle versus urgent.
Open lessonComponent States
Learn state planning, pseudo-classes, data attributes, aria states, loading states and why unfinished states make UI feel cheap.
Open lessonAnimation & Interaction
Add motion without losing control.
Good motion makes a site feel alive. Bad motion makes it noisy, slow or inaccessible.
Transitions
Learn what can transition, how duration and easing change the feel, why transition: all is risky and how to keep motion responsive.
Open lessonTransforms
Learn translate, scale, rotate, transform-origin, visual-only movement and why transforms are usually better than animating top or left.
Open lessonKeyframes
Learn @keyframes, animation-name, duration, timing-function, iteration-count, fill-mode and when keyframes are better than transitions.
Open lessonHover & Focus
Learn :hover, :focus, :focus-visible, active states, pointer differences and why hover cannot be the only way to reveal important UI.
Open lessonReduced Motion
Learn prefers-reduced-motion, when to remove animation, when to simplify it and how to keep meaning without movement.
Open lessonMicro-interactions
Learn how to design small interaction details with purpose, timing, states, accessibility and production restraint.
Open lessonCSS Architecture
Keep stylesheets understandable as projects grow.
A stylesheet must be searchable, scalable and team-friendly. This chapter is about avoiding CSS chaos.
CSS File Structure
Learn how to organize base CSS, tokens, layout, components, utilities and page-specific exceptions without creating a maze.
Open lessonNaming Classes
Learn semantic class naming, BEM-style structure, state names, component prefixes and why visual names become technical debt.
Open lessonUtility Classes
Learn when utilities help, when they hurt, how to keep them limited and how they differ from component classes.
Open lessonDesign Tokens
Learn token naming, custom properties, semantic tokens, component tokens and why hard-coded values make redesigns expensive.
Open lessonComponent CSS
Learn component boundaries, local selectors, state classes, variants, composition and how to prevent components from knowing too much.
Open lessonSplitting CSS
Learn when to split CSS, how to avoid huge files, what belongs in shared bundles and why too many files can also hurt.
Open lessonDebugging CSS
Learn a professional CSS debugging workflow for cascade problems, layout overflow, missing styles, specificity fights and responsive breakage.
Open lessonProduction CSS
Prepare CSS for real production work.
Production CSS needs accessibility, performance, browser support checks and release discipline.
CSS Accessibility
Learn focus visibility, contrast, readable text, motion preferences, hit targets, visually hidden content and CSS choices that can break accessibility.
Open lessonCSS Performance
Learn render cost, selector scope, unused CSS, layout thrashing, heavy shadows, animations, critical CSS and why performance is also design quality.
Open lessonBrowser Support
Learn support strategy, progressive enhancement, fallbacks, testing real browsers, feature queries and why perfect sameness is not the goal.
Open lesson@supports
Learn feature queries, safe enhancement, not conditions, and/or logic, fallback placement and real examples with grid, container queries and modern selectors.
Open lessonPrint CSS
Learn @media print, hiding navigation, showing URLs, controlling page breaks, simplifying colors and making printed pages useful.
Open lessonMinification
Learn minification, compression, source maps, cache busting, build pipelines and why humans should not maintain minified CSS by hand.
Open lessonCSS Release Checklist
Learn a practical pre-release CSS checklist for responsive layouts, accessibility, performance, browser support, content stress tests and deployment sanity.
Open lesson