CSS

1

Flexbox basics

6 lessons · 30 min

1. 1 What is a flex container? Learn the flexible container with display: flex. 5 min
2. 2 Flex-direction Learn the main axis direction with flex-direction. 5 min
3. 3 Justify-content Learn main axis alignment with justify-content. 5 min
4. 4 Align-items Learn cross axis alignment with align-items. 5 min
5. 5 Flex-wrap Learn item wrapping with flex-wrap. 5 min
6. 6 Summary - Horizontal menu Build a horizontal menu and toolbar with flexbox. 5 min

2

Advanced flexbox

6 lessons · 30 min

1. 1 Flex-grow Learn item growth with flex-grow. 5 min
2. 2 Flex shorthand Write grow, shrink and basis in one line with the flex shorthand. 5 min
3. 3 Order Learn the visual order of items with order. 5 min
4. 4 Align-self Learn single item alignment with align-self. 5 min
5. 5 Gap Learn the gap between flex items with gap. 5 min
6. 6 Summary - Card grid Build a responsive card grid with flexbox. 5 min

3

Pseudo-classes

6 lessons · 30 min

1. 1 :hover and :focus Learn :hover and :focus pseudo-classes. 5 min
2. 2 :nth-child Learn sibling selection with :nth-child. 5 min
3. 3 :not and :is Learn :not and :is pseudo-classes. 5 min
4. 4 :first-child and :last-child Learn :first-child and :last-child pseudo-classes. 5 min
5. 5 :checked and :disabled Learn :checked and :disabled pseudo-classes. 5 min
6. 6 Summary - Interactive list Build an interactive list interface with pseudo-classes. 5 min

4

Pseudo-elements

6 lessons · 30 min

1. 1 ::before and ::after Learn ::before and ::after pseudo-elements. 5 min
2. 2 Content property Learn pseudo-element content with the content property. 5 min
3. 3 ::first-letter and ::first-line Learn ::first-letter and ::first-line pseudo-elements. 5 min
4. 4 ::selection Learn text selection styles with ::selection. 5 min
5. 5 ::placeholder Learn input hint styles with ::placeholder. 5 min
6. 6 Summary - Decorative heading Build decorative heading ornaments with pseudo-elements. 5 min

5

Advanced selectors

4 lessons · 20 min

1. 1 Sibling combinators (+ and ~) Learn + adjacent sibling and ~ general sibling combinators. 5 min
2. 2 Attribute selector patterns Learn [attr^=], [attr$=], [attr*=] patterns. 5 min
3. 3 :where and :has Learn :where and :has pseudo-classes. 5 min
4. 4 Summary - Breadcrumb menu Build a breadcrumb menu with advanced selectors. 5 min

6

Project: Landing pageProject

5 lessons · 25 min

1. 1 Project: Landing page Overview of the 5-lesson project: a product landing page. 4 min
2. 2 Hero section Build the hero section layout with flexbox. 5 min
3. 3 Feature list Build a feature list grid with flexbox. 5 min
4. 4 Pricing cards Build the pricing cards layout with flexbox. 5 min
5. 5 Project final - Landing page Combine all parts and finalize the landing page. 6 min

7

Grid basics

6 lessons · 30 min

1. 1 What is a grid container? Learn the grid container with display: grid. 5 min
2. 2 Grid-template-columns Learn the column structure with grid-template-columns. 5 min
3. 3 Grid-template-rows Learn the row structure with grid-template-rows. 5 min
4. 4 Grid gap Learn the gap between grid cells with gap. 5 min
5. 5 Repeat function Learn repeated column/row definitions with repeat(). 5 min
6. 6 Summary - Photo gallery Build a photo gallery grid with CSS grid. 5 min

8

Advanced grid

6 lessons · 30 min

1. 1 Grid-column Learn item placement across columns with grid-column. 5 min
2. 2 Grid-row Learn item placement across rows with grid-row. 5 min
3. 3 Grid-template-areas Learn named regions with grid-template-areas. 5 min
4. 4 Grid-area Place items into regions with grid-area. 5 min
5. 5 Minmax function Learn flexible column/row sizes with minmax(). 5 min
6. 6 Summary - Magazine layout Build a magazine layout with grid-template-areas. 5 min

9

Responsive design basics

6 lessons · 30 min

1. 1 Viewport meta Learn the relationship between the HTML viewport meta and CSS. 5 min
2. 2 Media query basics Learn the @media rule and screen width conditions. 5 min
3. 3 Breakpoints Learn common breakpoint values and selection criteria. 5 min
4. 4 Responsive typography Learn responsive typography with clamp() and vw units. 5 min
5. 5 Responsive images Make images responsive with max-width: 100%. 5 min
6. 6 Summary - Responsive card Build a responsive card layout with media queries. 5 min

10

Responsive layout

6 lessons · 30 min

1. 1 Mobile-first approach Learn the mobile-first CSS writing method. 5 min
2. 2 Responsive grid layout Build a responsive grid with auto-fit and minmax. 5 min
3. 3 Responsive flex layout Build a responsive flex layout with flex-wrap. 5 min
4. 4 Hiding and showing Learn to hide elements responsively with display: none. 5 min
5. 5 Print styles Learn print styles with @media print. 5 min
6. 6 Summary - Multi-column page Build a responsive multi-column page layout. 5 min

11

Transitions

6 lessons · 30 min

1. 1 What is a transition? Learn the basics of the transition property. 5 min
2. 2 Transition-property Learn which property transitions with transition-property. 5 min
3. 3 Transition-duration Learn the transition duration with transition-duration. 5 min
4. 4 Timing function Learn the transition curve with transition-timing-function. 5 min
5. 5 Transition-delay Learn the transition delay with transition-delay. 5 min
6. 6 Summary - Hover effects Build hover-effect buttons with transition properties. 5 min

12

Transforms

6 lessons · 30 min

1. 1 What is a transform? Learn the basics of the transform property. 5 min
2. 2 Translate Learn to move elements with translate(). 5 min
3. 3 Rotate Learn to rotate elements with rotate(). 5 min
4. 4 Scale Learn to scale elements with scale(). 5 min
5. 5 Skew Learn to skew elements with skew(). 5 min
6. 6 Summary - Interactive card Build an interactive hover card with transform. 5 min

13

CSS variables

6 lessons · 30 min

1. 1 What are CSS variables? Learn the custom property (--name) concept. 5 min
2. 2 Defining variables Learn to define variables on :root and elements. 5 min
3. 3 Var() function Learn to use variables with var(). 5 min
4. 4 Variable fallback Learn to use fallback values in var(). 5 min
5. 5 Theme switching Learn to switch themes with variables. 5 min
6. 6 Summary - Design system Build a small design system with variables. 5 min

14

Form styling

6 lessons · 30 min

1. 1 Input styles Learn to style the input element. 5 min
2. 2 Label and placeholder Learn label and ::placeholder styles. 5 min
3. 3 Focus states Learn focus styles with :focus and :focus-visible. 5 min
4. 4 Button styles Learn to style the button element. 5 min
5. 5 Checkbox and radio Learn checkbox and radio styles. 5 min
6. 6 Summary - Registration form Build a registration form with form styles. 5 min

15

Table styling

6 lessons · 30 min

1. 1 Table skeleton Learn basic styles for table, tr, td. 5 min
2. 2 Border-collapse Merge cell borders with border-collapse. 5 min
3. 3 Header cells Learn special styles for th. 5 min
4. 4 Zebra stripes Learn zebra-striped tables with :nth-child(even). 5 min
5. 5 Hover row Learn row hover effect with :hover. 5 min
6. 6 Summary - Data table Build a professional data table with table styles. 5 min

16

SVG styling

6 lessons · 30 min

1. 1 What is SVG? Learn how SVG is styled with CSS. 5 min
2. 2 Fill and stroke Learn fill and stroke properties. 5 min
3. 3 SVG hover effects Add hover effects to SVG elements. 5 min
4. 4 CurrentColor Pass text color to SVG with currentColor. 5 min
5. 5 SVG icons Learn an icon system with SVG. 5 min
6. 6 Summary - Icon set Build an icon set with SVG. 5 min

17

Intermediate finalFinal

5 lessons · 31 min

1. 1 Challenge - Flexbox gallery Build a responsive photo gallery with flexbox. 6 min
2. 2 Challenge - Grid magazine Build a magazine layout with grid-template-areas. 6 min
3. 3 Challenge - Responsive navbar Build a mobile-first responsive navbar. 6 min
4. 4 Challenge - Form and table Build a registration interface with form and table styles. 6 min
5. 5 Challenge - Intermediate capstone Build a homepage combining all intermediate topics. 7 min

1

Animations

6 lessons · 30 min

1. 1 What are keyframes? Learn the @keyframes rule and animation basics. 5 min
2. 2 Animation-name and duration Learn animation-name and animation-duration properties. 5 min
3. 3 Animation timing function Learn the animation curve with animation-timing-function. 5 min
4. 4 Animation iteration Learn the repeat count with animation-iteration-count. 5 min
5. 5 Animation direction and fill-mode Learn animation-direction and animation-fill-mode properties. 5 min
6. 6 Summary - Loader animation Build a spinning loader with animation properties. 5 min

2

Gradients

6 lessons · 30 min

1. 1 Linear gradient Learn linear gradients with linear-gradient(). 5 min
2. 2 Radial gradient Learn circular gradients with radial-gradient(). 5 min
3. 3 Conic gradient Learn angular gradients with conic-gradient(). 5 min
4. 4 Color stops Learn color stop positioning. 5 min
5. 5 Layered gradients Learn to layer multiple gradients. 5 min
6. 6 Summary - Button variations Build button variations with gradients. 5 min

3

Filters and blend

6 lessons · 30 min

1. 1 Filter property Learn filter: blur, brightness, contrast functions. 5 min
2. 2 Grayscale and sepia Learn grayscale() and sepia() filters. 5 min
3. 3 Hue-rotate and saturate Learn hue-rotate() and saturate() filters. 5 min
4. 4 Drop-shadow Learn Alpine shadow with drop-shadow(). 5 min
5. 5 Mix-blend-mode Learn blend modes with mix-blend-mode. 5 min
6. 6 Summary - Image effects Build an image effects gallery with filters and blend modes. 5 min

4

Modern layout

6 lessons · 30 min

1. 1 Subgrid Learn nested grid inheritance with subgrid. 5 min
2. 2 Container queries Learn the @container rule. 5 min
3. 3 Aspect-ratio Learn aspect ratio with aspect-ratio. 5 min
4. 4 Object-fit Learn image fitting methods with object-fit. 5 min
5. 5 Gap multi-column Learn multi-column layout with column-count and column-gap. 5 min
6. 6 Summary - Modern card grid Build a card grid with modern layout properties. 5 min

5

Writing modes and logical properties

6 lessons · 30 min

1. 1 Writing-mode Learn text direction with writing-mode. 5 min
2. 2 Logical properties Learn logical properties like margin-inline, padding-block. 5 min
3. 3 Inset property Learn positioning with inset. 5 min
4. 4 Block and inline Learn block and inline axis concepts. 5 min
5. 5 Direction and unicode-bidi Learn direction and unicode-bidi properties. 5 min
6. 6 Summary - Multi-direction card Build a multi-directional card with logical properties. 5 min

6

Accessible CSS

6 lessons · 30 min

1. 1 Sr-only technique Learn the visually hidden technique for screen readers. 5 min
2. 2 Focus-visible Learn accessible focus styles with :focus-visible. 5 min
3. 3 Prefers color scheme Learn dark theme with @media (prefers-color-scheme). 5 min
4. 4 Prefers reduced motion Learn motion reduction with @media (prefers-reduced-motion). 5 min
5. 5 Prefers contrast Learn high contrast with @media (prefers-contrast). 5 min
6. 6 Summary - Accessible theme Build a fully accessible theme with accessibility rules. 5 min

7

Print and paged media

6 lessons · 30 min

1. 1 @page rule Learn page size with the @page rule. 5 min
2. 2 Page break Learn break-before, break-after, break-inside properties. 5 min
3. 3 Print media Learn print styles with @media print. 5 min
4. 4 Print color adjust Learn print color with print-color-adjust. 5 min
5. 5 Page number Learn to add page numbers with CSS. 5 min
6. 6 Summary - Printable report Build a printable report page with print styles. 5 min

8

Project: Dashboard UIProject

5 lessons · 25 min

1. 1 Project: Dashboard UI Overview of the 5-lesson project: a dashboard interface. 4 min
2. 2 Sidebar and header Build the sidebar and header layout with grid. 5 min
3. 3 KPI cards Build a KPI cards grid with flexbox. 5 min
4. 4 Data table Build a data table with table styles. 5 min
5. 5 Project final - Dashboard Combine all parts and finalize the dashboard. 6 min

9

Advanced finalFinal

5 lessons · 31 min

1. 1 Challenge - Animated hero Build a hero section with animations and gradients. 6 min
2. 2 Challenge - Pseudo-element card Build a decorative card with pseudo-elements. 6 min
3. 3 Challenge - Advanced selectors Build a complex list interface with advanced selectors. 6 min
4. 4 Challenge - Modern layout Build a modern layout with subgrid and container queries. 6 min
5. 5 Challenge - Advanced capstone Build a portfolio page combining all advanced topics. 7 min

1

CSS architecture

6 lessons · 35 min

1. 1 BEM methodology Learn the Block, Element, Modifier naming methodology. 6 min
2. 2 CSS organization Learn methods to organize large CSS files. 6 min
3. 3 Specificity management Learn specificity calculation and management. 6 min
4. 4 Cascade layers Learn layered cascading with the @layer rule. 6 min
5. 5 Modular CSS Learn modular CSS writing methods. 6 min
6. 6 Summary - Component library Build a component library skeleton with BEM and cascade layers. 5 min

2

CSS performance

6 lessons · 35 min

1. 1 What is CSS performance? Learn factors that affect CSS render performance. 6 min
2. 2 Selector performance Learn selector performance and optimization. 6 min
3. 3 Layout and paint Learn layout and paint cost. 6 min
4. 4 Will-change Learn to give performance hints with will-change. 6 min
5. 5 Contain Learn render isolation with contain. 6 min
6. 6 Summary - Fast card list Build a fast card list with performance techniques. 5 min

3

CSS Houdini

6 lessons · 35 min

1. 1 What is Houdini? Learn about CSS Houdini projects. 6 min
2. 2 Paint API Learn custom drawing with the CSS Paint API. 6 min
3. 3 Layout API Learn custom layouts with the CSS Layout API. 6 min
4. 4 Properties and values API Learn variable registration with the CSS Properties and Values API. 6 min
5. 5 Typed OM Learn type-safe values with CSS Typed OM. 6 min
6. 6 Summary - Custom background pattern Build a custom background pattern with Houdini. 5 min

4

Advanced container queries

6 lessons · 35 min

1. 1 Container-type in depth Learn container-type: inline-size and size values. 6 min
2. 2 Container-name Learn named containers with container-name. 6 min
3. 3 Container query units Learn cqw, cqh, cqi, cqb units. 6 min
4. 4 Container style Learn container styles with the style() function. 6 min
5. 5 Container components Build reusable components with container queries. 6 min
6. 6 Summary - Responsive widget system Build a responsive widget system with container queries. 5 min

5

View transitions

6 lessons · 35 min

1. 1 What are view transitions? Learn page transitions with the View Transitions API. 6 min
2. 2 ::view-transition Learn the ::view-transition pseudo-element. 6 min
3. 3 View-transition-name Learn named transitions with view-transition-name. 6 min
4. 4 Transition animations Learn custom animations for view transitions. 6 min
5. 5 Cross-document transitions Learn multi-page transitions. 6 min
6. 6 Summary - Transitional gallery Build a transitional gallery with view transitions. 5 min

6

Scroll-driven animations

6 lessons · 35 min

1. 1 Scroll-driven animations Learn scroll-based animation with animation-timeline: scroll(). 6 min
2. 2 Scroll function Learn the scroll() function. 6 min
3. 3 View function Learn visibility-based animation with the view() function. 6 min
4. 4 Timeline attachment Learn the time range with animation-range. 6 min
5. 5 Scroll-snap Learn scroll-snap-type and scroll-snap-align properties. 6 min
6. 6 Summary - Scroll story Build a scroll-driven story with scroll-based animations. 5 min

7

Anchor positioning

6 lessons · 35 min

1. 1 What is anchor positioning? Learn CSS anchor positioning basics. 6 min
2. 2 Anchor-name Learn anchor naming with anchor-name. 6 min
3. 3 Position-anchor Learn to bind to an anchor with position-anchor. 6 min
4. 4 Anchor() function Learn positioning with the anchor() function. 6 min
5. 5 Position-try Learn collision resolution with position-try. 6 min
6. 6 Summary - Dropdown panel Build a dropdown panel with anchor positioning. 5 min

8

CSS nesting

6 lessons · 35 min

1. 1 What is CSS nesting? Learn the native CSS nesting syntax. 6 min
2. 2 & nesting selector Learn the & nesting selector. 6 min
3. 3 Nested media Learn to use nesting inside @media. 6 min
4. 4 Nested pseudo Learn nested pseudo-classes like &:hover. 6 min
5. 5 Nested compound Learn compound selectors like &.class. 6 min
6. 6 Summary - Component style Build component styles with nesting. 5 min

9

Expert finalFinal

5 lessons · 36 min

1. 1 Challenge - BEM architecture Build a large component architecture with BEM and cascade layers. 7 min
2. 2 Challenge - Container system Build a reusable widget system with container queries. 7 min
3. 3 Challenge - View transitions Build a page-transition app with view transitions. 7 min
4. 4 Challenge - Anchor panel Build a smart dropdown with anchor positioning. 7 min
5. 5 Challenge - Expert capstone Build a design system combining all expert topics. 8 min