Skip to content
WebDev Path
Back

Week 3: CSS fundamentals, Flexbox and Grid

Next video

Free lesson by Kevin Powell on YouTube

About this lesson

Module:
Foundations
Time:
about 11 hours
Video:
19 min

Style pages with confidence and build any layout with Flexbox and Grid.

By the end of this week you can

  • Use selectors, the cascade and specificity without fighting them
  • Explain the box model: content, padding, border, margin
  • Build one-dimensional layouts with Flexbox and two-dimensional ones with Grid

Learn

  • Selectors, cascade and specificity
  • Colors, fonts and units (px, rem, %)
  • The box model
  • Flexbox and CSS Grid

Read or watch

Practice

  1. Finish Flexbox Froggy and Grid Garden
  2. Clone a 3-column pricing section from a real site

Build

Style your whole site with a consistent color and type system.

Check your understanding

Score 4 out of 5 to complete this week.

  1. 1. In the CSS box model, what sits between the content and the border?
  2. 2. Which layout tool is best for a one-dimensional row of items?
  3. 3. What does box-sizing: border-box change?
  4. 4. Which selector has the highest specificity?
  5. 5. In Grid, what does grid-template-columns: repeat(3, 1fr) create?
0 of 5 answered