Learn CSS

Shape the feel of a page, one style rule at a time.

Start learning 6 lessons · about 1.5 hours · free
About this track

CSS makes web pages readable, expressive and responsive. Learn selectors, color and type, the box model, the cascade and modern layouts with Flexbox and Grid. Change real styles in the editor, preview the result, and see how a few clear rules can transform a page.

Before you start
  • No programming experience needed.
  • A modern web browser.
  • A little HTML knowledge helps, but examples provide the markup.
  1. Unit 1 · 0/2 lessons

    Styling basics

    Write your first rules and make text comfortable to read. Badge: Style starter

    1. 0x001Give a page its first stylesConnect CSS to a page and write your first selector and declaration. 12 min 0/1 exercises solved 12 min 0/1 exercises solved
    2. 0x102Set readable type and colorChoose font properties, align text and use color with enough contrast. 13 min 0/1 exercises solved 13 min 0/1 exercises solved
  2. Unit 2 · 0/3 lessons

    Rules and layout

    Control element boxes and build one-dimensional layouts. Badge: Layout maker

    1. 0x203Understand the box modelControl the space inside and around elements with padding, borders and margins. 14 min 0/1 exercises solved 14 min 0/1 exercises solved
    2. 0x304Follow the cascadeUnderstand how the browser chooses between rules that can style the same element. 13 min 0/1 exercises solved 13 min 0/1 exercises solved
    3. 0x405Arrange items with FlexboxLine up items and control the space between them with a flexible layout. 15 min 0/1 exercises solved 15 min 0/1 exercises solved
  3. Unit 3 · 0/1 lessons

    Responsive pages

    Build layouts that adapt across screen sizes. Badge: Screen shaper

    1. 0x506Adapt layouts for every screenUse Grid and media queries to make page layouts fit different viewport sizes. 16 min 0/1 exercises solved 16 min 0/1 exercises solved
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação:
Quero contribuir