Lay the groundwork for this chapter

01 / 05

What this chapter is for

The bones of a page came together in the beginner chapter. From here you work on how the surfaces and the text feel.

Transparency, spacing between letters, rounded corners, what sits in front of what — you add these small settings one at a time until it starts to look the part.

02 / 05

Build the base before you dress it

Start with colour and decoration and rearranging it later becomes a chore. The order to build in is boxes, then surfaces, then text.

So begin by rebuilding the boxes that hold everything up, using only the settings from the beginner chapter.

03 / 05

The centring pattern

To gather the contents into the middle, set a width and make the space on each side auto.

auto does nothing without a width, so those two lines always go together.

.container {  width: 640px;  margin: 0 auto;}

04 / 05

Divide with colour and space

Give each group a background colour and some padding, and where one subject ends becomes visible without drawing any lines.

Often it settles better to divide by surface than to put a border round everything.

.section {  background-color: #f7f3ea;  padding: 40px;}

05 / 05

Write it as it comes back to you

Everything in this round can be solved with only what the beginner chapter taught.

If you have forgotten some of it, no matter. Change a value while watching the preview and it comes back quickly. Have a go.