Put a page together
INPUT · Slides
01 / 05
Think of the sites you visit. Most of them come apart into a top, a middle and a bottom.
Make those divisions first, then fill them. That is the order you build in.
02 / 05
The tag you use for a region is <div>. It is just a box, with no meaning of its own.
<h1> means "heading" and <p> means "paragraph", but <div> only means "these belong together". Which is why it goes anywhere.
<div> <h1>Willow Diner</h1></div>03 / 05
A bare <div> gives you no way to tell one region from another. So you name it with a class.
Once it has a name, your CSS can aim at that one region and give it a colour or a size.
<div class="header"> <h1>Willow Diner</h1></div>04 / 05
Anything you have learned can go inside a <div> — headings, paragraphs, lists, pictures, links, all of it.
Indent what you put inside by two spaces and you can see at a glance where the region begins and ends.
<div class="main"> <h2>Menu</h2> <ul> <li>curry</li> </ul></div>05 / 05
Stack three <div> tags and you have the ground plan of a page. After that you give each one a background colour and a height so the divisions show.
Build the containers before the contents. Get that order into your head and even a big page stops being confusing.
<div class="header"></div><div class="main"></div><div class="footer"></div>