Learn CSS: Layout & Design

Learn CSS step by step, from your first selector to responsive layouts, animations and modern web design. Type a line of CSS and watch the page change on your phone: the editor shows your HTML and CSS side by side with a live preview.

This CSS tutorial is built for beginners and grows with you. Every course is one real topic, every lesson is short, and the editor is always one tap away, so you practice what you just read instead of only reading about it.

WHAT'S INSIDE

• 40 courses and 159 bite-sized lessons, from beginner (A1) to advanced (C1)

• A live HTML and CSS editor with an instant preview, for quick experiments and your own pages

• 20 guided web design projects, one step at a time: a toolbar, a card grid, a sticky header, a pulsing button and more

• 20 bug-hunt missions: a card 42px wider than its column, a media query that never fires on a phone, a modal stuck behind the page

• A final exam and a certificate of completion

• The app is available in 22 languages

A COMPLETE PATH, BEGINNER TO ADVANCED

• Syntax and selectors, colors, backgrounds and typography

• The box model, display, positioning, units and values

• Pseudo-classes and pseudo-elements

• Flexbox fundamentals and advanced flexbox

• Grid basics, grid areas and advanced grid layout

• Responsive design, media queries and container queries

• Custom properties (variables), functions, specificity, the cascade and @layer

• Transitions, transforms, keyframe animation, filters and blend modes

• Dark mode and color schemes, scroll and overflow, clip-path and shapes

• Debugging with DevTools, BEM architecture, Sass, PostCSS and design tokens

• Component patterns, modern layout patterns, performance and Houdini

PRACTICE THAT STICKS

• Quizzes to check what you learned

• A cheat sheet with 69 entries of properties, selectors and layout syntax

• 50 interview questions with clear answers, useful before a front end or web developer interview

• A code library of short examples you can open and edit

• Save your own code, notes and favorite lessons

• World Coding Challenge: three global rounds a day, solved in Python, JavaScript and other languages

• Streaks, XP, a leaderboard and daily reminders to keep your practice going

AI MENTOR

• Stuck on a layout or a property? Ask the AI mentor about a concept, an error or your own code

• AI playground: describe a page and watch the HTML and CSS get built

• Free users get a daily AI allowance; Pro makes it unlimited

WHO IT'S FOR

• Complete beginners taking their first steps in web development

• Designers who want to style their own pages instead of handing off mockups

• Students who want extra practice alongside a web design course

• Developers who know some HTML and CSS and want to finally understand flexbox and grid

• Career switchers preparing for a front end job

HOW IT WORKS

1. Start with the free first course: CSS syntax and selectors

2. Open the editor, change a value and watch the preview follow

3. Move up the path: the box model, flexbox, grid, responsive design and animation

4. Build guided projects and fix real layout bugs in the missions

5. Pass the final exam and earn your certificate

FREE AND PRO

The first course, the first guided project, two missions and the live editor are free, with a daily AI mentor allowance. Pro unlocks every course, all projects and missions, the certificate exam and unlimited AI, and removes ads.

Start today, learn CSS at your own pace and style your first page in minutes.