Compile Academy Start learning
{ } Course · 61 lessons · approx. 400 minutes

Learn CSS

With CSS you give web pages colour, shape and layout. From your first selector to responsive, animated layouts with Flexbox and Grid.

Start the CSS courseOpen compiler
  • Selectors
  • Colours & fonts
  • Box model
  • Flexbox
  • Grid
  • Responsive design
  • Animations
  • Your own programs & going deeper
  • CSS variables: colours in one place
  • clamp: limiting font sizes flexibly
  • Reducing motion on request
  • aspect-ratio: a shape keeps its proportions
  • object-fit: cropping images to fit
  • padding-inline: spacing in the reading direction
  • overflow-wrap: breaking long words
  • position: sticky – a header stays visible
  • transform: moving and rotating
  • :has() – an element reacts to its content
  • linear-gradient: a colour gradient
  • :nth-child – every second row
  • Keeping sizes predictable with border-box
  • Setting a size ratio
  • Scrolling large content inside a box
  • Setting spacing in a layout with gap
  • Letting long identifiers wrap
  • Creating your own stacking contexts on purpose
  • Readable glass with a limited backdrop blur
  • Keeping focus outlines readable with an offset
  • Display & positioning
  • CSS Grid
  • Transitions & animations

What you’ll learn

  1. Chapter 1Selectors & linking – Write rules and select elements precisely.
    Hello, CSS! · Classes & IDs
  2. Chapter 2Colours, backgrounds & fonts – Colour systems and typography.
    Colours & fonts
  3. Chapter 3The box model – margin, padding, border – and how wide a box really is.
    The box model
  4. Chapter 4Display & positioning – block, inline, hiding and placing elements precisely.
    block, inline and inline-block · Hiding with display: none · position: relative – a small offset · position: absolute – right into the corner · Boss: a card with a notice badge
  5. Chapter 5Flexbox – Arrange elements flexibly in a row or column.
    Flexbox lab · Boss: navigation bar
  6. Chapter 6CSS Grid – Columns, rows and responsive grids – without any media queries.
    Dividing columns with fr · repeat(): many identical columns · Across several columns: span · Responsive with auto-fit and minmax · Boss: an image gallery in a grid
  7. Chapter 7Responsive design – Layouts that work on every screen.
    Media queries
  8. Chapter 8Your code workshop – Connect what you have learned and discover a new building block.
    A grid with CSS Grid
  9. Chapter 9Workshop: understand and build it yourself – Practise new building blocks with short explanations and your own programs.
    States: hover and keyboard focus · Smooth transitions with transition · Boss: a responsive card grid
  10. Chapter 10New tools for your own ideas – Understand new concepts, fill them in and use them yourself.
    CSS variables: colours in one place · clamp: limiting font sizes flexibly · Reducing motion on request
  11. Chapter 11Level up: your next practice chapter – Understand four new building blocks in small steps and use them yourself.
    aspect-ratio: a shape keeps its proportions · object-fit: cropping images to fit · padding-inline: spacing in the reading direction · overflow-wrap: breaking long words
  12. Chapter 12Master chapter: how real programs are built – Five building blocks from real projects – explained, connected, filled in and written by you.
    position: sticky – a header stays visible · transform: moving and rotating · :has() – an element reacts to its content · linear-gradient: a colour gradient · :nth-child – every second row
  13. Chapter 13Project tools: understand and apply – Eight more building blocks with explanation pages and four exercises per lesson.
    Keeping sizes predictable with border-box · Setting a size ratio · Scrolling large content inside a box · Setting spacing in a layout with gap · Letting long identifiers wrap · Creating your own stacking contexts on purpose · Readable glass with a limited backdrop blur · Keeping focus outlines readable with an offset
  14. Chapter 14Pseudo-classes & states – :hover, :focus-visible and more.
    ::before and ::after: content from CSS · :not() – everything except … · :first-child and :last-child · :checked – reacting to ticks · Boss: styling form states
  15. Chapter 15Transitions & animations – Smooth transitions, hover effects and your own animations with @keyframes.
    transition: property, duration, curve · Hover effect with transform: scale · @keyframes: an animation of your own · Animating endlessly: infinite and alternate · Boss: a loading indicator
  16. Chapter 16CSS variables & structure – Custom properties and maintainable styles.
    var() with a fallback value · Overriding variables locally · Calculating with calc() · Who wins? Specificity · Boss: a colour scheme with variables
  17. Chapter 18Final project – A responsive, animated landing page.
    Portfolio style 1: font and reading width · Portfolio style 2: the navigation bar · Portfolio style 3: project cards with shadows · Portfolio style 4: a friendly form · Boss: the portfolio for phones

Final project: Responsive landing page

An animated landing page that looks good on phones and desktops.

How it works

Every lesson starts with short explanation pages. Then you practise with multiple-choice questions, fill-in-the-gap tasks, putting code in order and writing your own code – with hints and instant feedback. Free, without ads, on phone, tablet and PC.

Learn CSS now