How this Utility CSS track works
- Original naming — classes use the
tu-prefix (tuto utility). We teach patterns, not any third-party framework’s class list. - Playground — each lesson ships a full HTML document: a
<style>block defines utilities, markup uses them in the live preview. - Prerequisites — comfortable with CSS cascade and HTML semantics before stacking dozens of classes.
Install on your device (macOS, Linux, Windows)
Lessons run in your browser on this site—install a modern browser and optional editor for local projects.
macOS
- Use Safari (preinstalled) or install Google Chrome / Firefox.
- Optional editor: VS Code (
brew install --cask visual-studio-code). - Open DevTools with ⌥⌘I (Chrome/Edge) or ⌥⌘C (Safari Web Inspector).
Linux
- Install Chromium or Firefox:
sudo apt update && sudo apt install -y chromium-browser firefox(Debian/Ubuntu; package names vary by distro). - Fedora:
sudo dnf install -y chromium firefox. - Optional editor: VS Code from code.visualstudio.com or
sudo snap install code --classic.
Windows
- Install Microsoft Edge or Chrome.
- Optional editor: VS Code (
winget install Microsoft.VisualStudioCode). - Open DevTools with F12 or Ctrl+Shift+I.
Verify: Open any lesson playground and click Run—output appears without installing a compiler.
Utility CSS means small, single-purpose classes—each class does one job (padding, flex centering, hide on mobile). You compose UIs by combining classes in HTML instead of writing a new selector for every tweak.
Our naming: tu-
This track uses the tu- prefix (tuto utility) so you learn the idea without memorizing another product’s cheat sheet. Patterns mirror industry practice; names are ours.
Playground
Edit the full HTML document below. The preview iframe renders your <style> plus markup together—same as shipping a static page.
When utilities shine
- Rapid layout iteration in design systems and prototypes
- Consistent spacing/type scales across teams
- Limiting one-off CSS files full of nearly identical rules
When to pause
Utilities are not a license to skip semantics, accessibility, or component boundaries. If markup becomes unreadable, extract a component class.
Interview prep
- What is utility CSS in one sentence?
Small, single-purpose classes composed in HTML to style elements without writing a new selector for every tweak.
- Why does this track use the tu- prefix?
To teach utility patterns with original naming—not to memorize a third-party framework’s class list.