CSS References
This track teaches the language; it is not the specification. The categorized references below are the
sources to keep open while you work — official standards, documentation, compatibility data, validators,
and free practice environments. Every link is free to use.
Specifications and standards
| Reference | What it is | Best for | Link |
|---|
| W3C CSS Snapshot |
The index of CSS specifications that define the web platform's CSS |
Seeing what "CSS" officially consists of |
w3.org/TR/CSS |
| CSSWG Editor Drafts |
The CSS Working Group's current specification drafts |
Reading a module in its most current form |
drafts.csswg.org |
| cssdb |
A database of CSS features and their standardization stages |
Judging whether a modern feature is safe to ship |
cssdb.org |
Documentation and guides
| Reference | What it is | Best for | Link |
|---|
| MDN Web Docs: CSS |
Property and selector reference with examples and browser-compatibility notes |
The day-to-day reference while coding |
developer.mozilla.org |
| Learn CSS (web.dev) |
A structured CSS course from the Chrome team, module by module |
A second, deeper pass after this track |
web.dev/learn/css |
| CSS-Tricks Almanac |
A curated catalog of selectors, properties, functions, and at-rules |
Quick lookup with practical examples |
css-tricks.com/almanac |
| Modern CSS Solutions |
Stephanie Eckles' series on solving old problems with modern CSS |
Component patterns with current features |
moderncss.dev |
Compatibility, validation and linting
| Reference | What it is | Best for | Link |
|---|
| Can I Use |
Browser support tables for every CSS feature |
Deciding your support baseline per feature |
caniuse.com |
| W3C CSS Validator |
Checks syntax and flags invalid declarations |
Catching typos a silent parser drops |
jigsaw.w3.org/css-validator |
| Stylelint |
A linter for stylesheets with configurable rules |
Enforcing naming and quality conventions in a team |
stylelint.io |
Architecture, tokens and type
| Reference | What it is | Best for | Link |
|---|
| Get BEM |
The BEM naming convention explained with examples |
Adopting a class-naming contract |
getbem.com |
| Design Tokens Format |
The community-group specification for exchanging design tokens |
Structuring a token system that tools understand |
design-tokens CG |
| Open Props |
An MIT-licensed set of ready-made CSS custom properties |
Studying a production token vocabulary |
open-props.style |
| Modern Font Stacks |
System font stacks organized by typeface classification |
Zero-download font stacks that look right everywhere |
modernfontstacks.com |
Playgrounds and practice
| Reference | What it is | Best for | Link |
|---|
| CodePen |
Browser playground for isolated HTML/CSS/JS experiments |
Testing an idea and sharing it with a link |
codepen.io |
| JSFiddle |
Lightweight snippet runner |
Quick three-file prototypes |
jsfiddle.net |
| Flexbox Froggy |
A game that teaches flexbox alignment by solving puzzles |
Making the axis model stick |
flexboxfroggy.com |
| Grid Garden |
A companion game for grid placement |
Practicing track and area placement |
cssgridgarden.com |
| Frontend Mentor |
Design-to-code challenges with supplied assets |
Practicing against real designs, free tier included |
frontendmentor.io |
Accessibility references
| Reference | What it is | Best for | Link |
|---|
| WCAG 2.2 Quick Reference |
The success criteria of the Web Content Accessibility Guidelines, filterable |
Checking the exact requirement behind a styling rule |
w3.org/WAI/WCAG22/quickref |
| WebAIM Contrast Checker |
Instant contrast ratio evaluation against WCAG levels |
Validating a color pair in seconds |
webaim.org/resources/contrastchecker |
| ARIA Authoring Practices Guide |
Widget patterns and keyboard-interaction conventions |
Styling interactive components correctly |
w3.org/WAI/ARIA/apg |
Free static hosting
| Provider | What it is | Best for | Link |
|---|
| Cloudflare Pages |
Static deploys on a global CDN with a free tier |
Publishing practice sites |
pages.cloudflare.com |
| Vercel |
Deploy platform with preview environments (this site's host) |
Shipping a portfolio |
vercel.com |
| Netlify |
Static hosting with a developer-oriented workflow |
Continuous deploys from a repository |
netlify.com |
| GitHub Pages |
Static hosting served from a repository |
Documentation and project pages |
pages.github.com |
Write CSS daily, inspect real pages with dev tools, and validate often. A suggested order: finish the
lessons, solve the Froggy and Grid Garden games, rebuild one real page from scratch, then publish it and
run an accessibility pass on your own work.
