Learn CSS by styling real pages
Write CSS and watch the page restyle itself beside your code. Short lessons, real projects you keep, and an AI tutor that can read what you wrote.
CSS is what turns a bare HTML document into something you would actually want to look at. HTML gives a page its structure; CSS gives it everything else - colour, spacing, typography, and the layout that arranges it all on the screen. It's the difference between a wall of text and a design.
It's also unusually satisfying to learn, because every change is visible. You adjust a value and the page responds - no console, no guessing, just the result in front of you.
How Devpuff teaches CSS
With a live preview beside your code. Devpuff's CSS lessons re-render the page as you type - change a value, watch it take effect. Automated checks confirm each requirement ("uses flexbox", "the heading is centred"), so you always know what's done and what's next. Hints unblock you without spoiling the answer, and Puff, our AI tutor, can read your actual code when you're properly stuck.
We split CSS into three courses because it's really three skills. CSS Basics is styling - selectors, the cascade and specificity, colour, units, the box model, and typography. CSS Layout is arrangement - flexbox, grid, positioning, and the responsive rules behind every modern site. Advanced CSS is craft - transitions, keyframe animation, custom properties, and the filters and effects that make an interface feel designed.
Where it leads
CSS is one half of the front of the web; HTML is the other. Basics and Layout are the second and third courses of the Frontend Development program, which continues into JavaScript and React - the standard route into frontend work. Every step of it starts free.
Things people ask before they start
Do I need to know HTML before CSS?
A little, and that's all. CSS styles HTML, so it helps to know what a heading, a list, and a link are before you start colouring and arranging them. If you have done HTML Basics you are more than ready; if not, an afternoon with it is enough.
Is CSS hard to learn?
The basics are quick - colour, spacing, fonts, borders. Layout is the part people find fiddly, which is exactly why Devpuff gives it its own course and a live preview - you write a flexbox or grid rule and watch the boxes move, so the mental model forms from watching rather than guessing.
What is the difference between the three CSS courses?
CSS Basics is styling - selectors, the cascade, colour, the box model, and typography. CSS Layout is arrangement - flexbox, grid, positioning, and responsive design. Advanced CSS is polish - transitions, animations, custom properties, and modern effects. Together they cover CSS end to end.
Keep exploring
Ready to learn CSS?
Free to start, no credit card required. Write real code from your first lesson and keep your progress forever.
Start Learning Free