Grace Whitfield
Free, and better than two paid CSS courses I have taken. The container query module changed how I build components — I have not written a component-level media query since.
DesignBeginnerFree forever
CSS Without a Framework
Modern layout, custom properties and container queries — the browser is the framework now.
Free preview · 20 min
Free
30-day money-back guarantee
Includes
- 8 hours of video
- 6 hands-on projects
- A token starter sheet
- Lifetime access
- Certificate of completion
41% of the running time is hands-on — projects and quizzes rather than video.
What you'll learn
Choose grid or flexbox instantly
A decision procedure that takes ten seconds, instead of trying one and then the other.
Build a theme from custom properties
One layer of tokens a dark-mode toggle can flip, with no build step and no JavaScript.
Make components respond to themselves
Container queries let a card react to its own width, so it stacks correctly in a sidebar even on a wide screen.
Keep specificity flat
Wrapping library selectors in :where() gives you overrides that simply work, with no !important anywhere.
Write CSS that can be deleted
Structure a stylesheet so a teammate can remove a component six months later without breaking three others.
What’s inside
Every figure below is summed from the lesson list, not estimated — so the chart and the curriculum can never disagree.
| Content type | Minutes | Share |
|---|---|---|
| Video lessons | 298 | 58.7% |
| Hands-on projects | 200 | 39.4% |
| Quizzes | 10 | 2% |
41% of this course is hands-on.
Curriculum
4 sections · 17 lessons · 8h total
A decision procedure, not a list of properties.
- VideoFlexbox or grid: choosing in ten seconds
- VideoIntrinsic sizing and why min-width matters
- VideoSubgrid for aligned cards
- VideoLogical properties, and RTL for free
- ProjectProject: a responsive pricing page, no media queries
One layer of variables that a whole product can theme from.
- VideoNaming tokens so they survive a rebrand
- VideoColour with oklch and color-mix
- VideoDark mode with one attribute
- VideoFluid type without a plugin
- QuizTokens quiz
Container queries change how you write a card.
- VideoContainer queries from first principles
- Video:has() and the parent selector we waited for
- VideoCascade layers for predictable overrides
- ProjectProject: one card, four contexts
Motion, focus and the things that make it feel finished.
- VideoFocus styles worth keeping
- VideoMotion that respects prefers-reduced-motion
- ProjectCapstone: theme an entire marketing site
Your instructor
Inês Marchetti
Design engineer · accessibility specialist
Inês sits between design and engineering and refuses to pick a side. She audits for WCAG by day and rebuilds the offending components by night, which is why her lessons always come with the fixed version next to the broken one.
Design systems at Aurora Health
CompletedA component library used across 60 clinical products.
IAAP CPACC
CompletedCertified Professional in Accessibility Core Competencies.
Public audits
In progressPublished teardowns of 40 popular component libraries.
Reviews
What learners said
7,114 ratings from people who bought this course.
4.7
7,114 ratings
- 5 stars
- 4 stars
- 3 stars
- 2 stars
- 1 star
Rafael Monteiro
I came from a utility-class background and was sceptical. The token lesson made the case better than any argument on the internet has. Now I do both, deliberately.
Lucy Chen
Great for the modern stuff. If you have to support older browsers at work you will still need to check support tables yourself — the course assumes evergreen.
Learners also took
Same category first, then whatever pairs well with it.
DesignAccessible by Default
Semantics, keyboard and ARIA — building interfaces that work for everyone, from the first commit.
8h16 lessonsBeginner
Full-stackShip It: Next.js 16 from Zero to Production
Build and deploy a real application on the App Router — async request APIs, streaming, caching and the deploy that follows.
15h25 lessonsIntermediate
FrontendTypeScript for Teams
Types that catch real bugs and stay out of the way — for codebases with more than one author.
10h18 lessonsIntermediate
Browse the full course catalogue, or see how this page is put together on Built with VivekUI.