css layout with html5

Introduction

A trapeze artist performing a "layout" maneuver, which has very little in common with CSS layout but is nevertheless quite elegant. :)

We introduced core HTML and CSS concepts in our CSS 101 and HTML 101 tutorials. This time, we're going to crank it up a notch and show you how to use CSS for actual page layout and prettification. And since it's 2011, we'll take advantage of a handful of HTML5 tags for improved semantics. We'll even learn to use a couple of the most popular features in CSS3, as well as custom typography with Google Web Fonts.

This tutorial is meant to be done step-by-step, working your way up from a bare HTML5 skeleton to a fully functional brochure site for an imaginary plumber (though this design could easily be adapted to suit a blog or news site). Note that we're going to build a serviceable design, not a drop-dead gorgeous one - our focus is on learning techniques of modern web development. While you're free to substitute in your own graphics or layout ideas, we recommend working all the way through the tutorial as written first, making sure you understand each step along the way. Feel free to tweak it for your own purposes later.

Here's how our finished page will look:

Finished

Or see the finished site in your browser.

Filed under: Web Development