Skip to content
Learn Netverks

Track

utility-css

Utility CSS

Utility-first CSS with original tu- classes—concepts that transfer to Tailwind and similar tools.

Mode
iframe_html
Practice
HTML preview sandbox
Lessons
32 units
Start lesson 1 → Introduction to Utility CSS

Before you start

Utility-first CSS with original tu- classes: spacing scales, layout primitives, responsive prefixes, and hybrid components.

Utility workflows speed prototyping and keep design tokens consistent without inventing class names per element.

Product UIs, internal tools, and teams that want rapid layout iteration without a heavy component library.

Iframe HTML lessons, enrichment challenges, interview prep, 96 MCQs, and curated question overrides.

After core CSS (especially flexbox, grid, and mobile-first); complements component-based frameworks.

Lesson order

Sequential — follow top to bottom

32 lessons are live in this track. Start from step 01 for the smoothest path.

  1. 01 intro Introduction to Utility CSS

    beginner

    Open →
  2. 02 what-is-utility-css What is utility-first CSS?

    beginner

    Open →
  3. 03 utility-vs-component Utilities vs component CSS

    beginner

    Open →
  4. 04 playground-workflow Playground workflow

    beginner

    Open →
  5. 05 spacing-scale Spacing scale

    beginner

    Open →
  6. 06 margin-padding Margin and padding utilities

    beginner

    Open →
  7. 07 display-utilities Display utilities

    beginner

    Open →
  8. 08 width-height Width and height

    beginner

    Open →
  9. 09 typography-utilities Typography utilities

    beginner

    Open →
  10. 10 color-surfaces Color and surfaces

    intermediate

    Open →
  11. 11 flex-intro Flex utilities intro

    beginner

    Open →
  12. 12 flex-direction-wrap Direction and wrap

    intermediate

    Open →
  13. 13 align-justify Align and justify

    intermediate

    Open →
  14. 14 flex-gap Gap utilities

    beginner

    Open →
  15. 15 flex-patterns Common flex patterns

    intermediate

    Open →
  16. 16 grid-intro Grid utilities intro

    intermediate

    Open →
  17. 17 grid-columns-rows Columns and rows

    intermediate

    Open →
  18. 18 grid-gap-placement Gap and placement

    intermediate

    Open →
  19. 19 responsive-grid Responsive grid patterns

    intermediate

    Open →
  20. 20 mobile-first Mobile-first utilities

    intermediate

    Open →
  21. 21 breakpoint-prefixes Breakpoint prefixes

    intermediate

    Open →
  22. 22 hide-show Hide and show utilities

    intermediate

    Open →
  23. 23 stack-to-row Stack to row

    intermediate

    Open →
  24. 24 fluid-containers Fluid containers

    intermediate

    Open →
  25. 25 hybrid-components Hybrid: components + utilities

    advanced

    Open →
  26. 26 state-variants State variants

    advanced

    Open →
  27. 27 dark-surfaces Dark surface tokens

    advanced

    Open →
  28. 28 a11y-utilities Accessibility utilities

    advanced

    Open →
  29. 29 capstone-pricing Capstone: pricing layout

    advanced

    Open →
  30. 30 interview-essentials Interview essentials

    advanced

    Open →
  31. 31 production-checklist Production checklist

    advanced

    Open →
  32. 32 summary Track summary

    beginner

    Open →