Build the base before you switch by width

01 / 05

Decide the pattern before you switch anything

From here you take one page all the way down to phone width. But start writing @media first and the places you have to fix scatter, and you get lost.

What you build first is the base that is common to every width. The switching comes after.

02 / 05

The base is three layers

One section of a page is always built from these three.

the band … edge to edge across the screen, carrying the background colour and space above and below
the container … a decided width, put in the middle, lining the contents up at the sides
the cards … the parts that sit inside the container, carrying their widths as percentages

The names change but the jobs do not. Once you can tell the three apart, you stop wondering where to make a fix.

<div class="events">  <div class="inner">    <div class="card"></div>  </div></div>

03 / 05

Only the container carries a width in numbers

The only thing whose width you set with a number is the container. The cards carry theirs as percentages.

That way, when you want to change the width there is one line to rewrite. The cards are percentages, so they follow on their own.

.inner {  width: 320px;  margin: 0 auto;}.card {  width: 30%;}

04 / 05

Settle the counting first

The first thing you write in the base is box-sizing: border-box;. Add it later and every width you had settled up to that point shifts.

List the boxes you are using with commas and set them all at once.

.inner, .card {  box-sizing: border-box;}

05 / 05

Have a go at the foundation

In this lesson you write no @media at all. You build only the wide-screen shape, carefully, in a way that does not fall apart.

Have a go.