28 docs tagged with "css"

Master the Block-Element-Modifier (BEM) methodology—eliminating specificity conflicts, maintaining modular CSS components, and writing self-documenting code.

Explore major CSS architectures—OOCSS, SMACSS, ITCSS, and modern Utility-First CSS paradigms (Tailwind CSS architecture).

Master component-driven responsive design with CSS Container Queries (@container)—container types, query units, inline sizing, and adaptive UI components.

Master CSS Custom Properties (Variables)—declaration scoping, cascading inheritance, fallback values, JavaScript manipulation, and theme switching patterns.

Master the 2D CSS Grid layout engine—grid containers, track sizing with fr units, explicit vs implicit grids, auto-fill/fit, and grid template areas.

Learn about CSS selectors and how to style text effectively.

Deep dive into CSS display types (block, inline, inline-block, none) and positioning schemes (static, relative, absolute, fixed, sticky) with z-index stacking contexts.

Master the 1D Flexible Box Layout algorithm—main vs. cross axes, flex container flexibilities, alignment logic, and real-world responsive design patterns.

This course is designed to help you master modern CSS techniques and concepts, from foundational selectors to advanced layout systems and responsive design.

Master Native CSS Nesting and Sass/SCSS preprocessor architecture—mixins, control directives, modules, and modern nesting syntax.

Test your mastery of modern CSS with a comprehensive capstone assessment covering layout engines, modern state selectors, responsive design strategies, and design system architecture.

Learn the precise anatomical breakdown of a CSS rule set including selectors, properties, values, declarations, and declaration blocks.

Test your mastery of Advanced CSS Architecture with hands-on challenges covering BEM, Native CSS Nesting, and Utility-First layout design.

Test your mastery of Modern CSS with hands-on challenges covering CSS Custom Properties, Responsive Design, CSS Animations, and Container Queries.

Validate your understanding of CSS foundations with three real-world tasks. Each challenge isolates core concepts from Module 1: rule syntax, specificity math, source order resolution, and explicit inheritance.

Hands-on CSS tasks and debugging challenges to master modern selectors, typography optimization, fluid clamping, and pseudo-class state management.

Build a production-ready, modular CSS component library featuring design tokens, dark mode variants, interactive UI patterns, and accessibility primitives.

Learn target states with pseudo-classes and generate non-DOM visual nodes using pseudo-elements for clean, maintainable UI patterns.

Take this quiz to test your understanding of the concepts covered in this module. Each question is designed to reinforce your learning and help you apply what you've learned about CSS foundations, including the cascade, specificity, and inheritance.

Master fluid responsive layouts using fluid typography, viewport units, flexible images, and modern CSS Media Queries with Range Syntax.

Build a complex, multi-pane analytics dashboard using CSS Grid layouts, auto-fit/minmax strategies, sidebar toggles, data visualization cards, and CSS custom property theme tokens.

Build a production-ready, mobile-first responsive landing page integrating modern CSS Grid, Flexbox, fluid typography, and dynamic CSS custom properties.

Explore the three fundamental mechanisms that govern how CSS rules are applied: The Cascade, Specificity, and Inheritance. Learn how to resolve conflicts between competing styles and ensure predictable rendering.

Master the foundation of all CSS layouts—content, padding, border, margin, box-sizing mechanisms, and margin collapsing behavior.

Master modern CSS motion design—hardware-accelerated 2D/3D transforms, fluid transitions, timing functions, and multi-stage @keyframes animations.

Learn the two primary types of CSS rules: Style Rules and At-Rules. Understand how they differ in syntax, purpose, and behavior within a stylesheet.

Master CSS typography fundamentals, font-face declarations, web font performance optimization, vertical rhythm, and modern variable fonts.

Understand what CSS is, how browsers process stylesheets, and the step-by-step rendering pipeline from DOM to pixels.