How this CSS track works
- 134 lessons — reference-style topics from syntax through Grid, animations, and responsive design.
- Playground — edit CSS + HTML snippet, preview in iframe; use DevTools to inspect cascade.
- MCQs — at least one check per lesson; deepen with hands-on edits.
- Prerequisite — HTML semantics first; pair with JavaScript later for interactivity.
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.
This tutorial track teaches CSS in production order: syntax, selectors, cascade, layout, responsiveness, and accessibility checks.
How to use this track
- Read the concept quickly.
- Run the sample in playground.
- Change one property at a time and observe side effects.
- Finish with keyboard and zoom checks.
Rendered output
Start with simple selectors and spacing, then evolve to reusable components.
Production checklist
- Prefer classes over IDs for reusable styling.
- Avoid deep selector chains that break easily.
- Test at mobile and desktop widths before merge.
Important interview questions and answers
- Q: What is the minimum CSS baseline for a junior developer?
A: Syntax, selectors, box model, flex/grid basics, and responsive/a11y checks. - Q: What is the most common beginner CSS mistake?
A: Random property changes without understanding cascade and specificity. - Q: How do you improve CSS quickly?
A: Build small components repeatedly and debug with DevTools.
Challenge
Cascade experiment
- Add a class rule and an element rule targeting the same text.
- Predict which color wins, then run the preview.
Done when: you can explain specificity in one sentence.