CSS Layout

Up until now the "layout" of our sites has been restricted to a single column. Exploring layout will allow us to structure our content and make better use of large screens.

The Box Model

3D Box Model

3d Box Model image courtesy of Hicks Design

Using CodePen.io we’ll walk through the box model, thinking about margins, padding, borders, and content.

Layout Tutorial

Together we’ll walk through the Learn Layout tutorial.

2 column layout

In Class Activity

Recreate the following layout in HTML and CSS:

multi column layout

This Week’s Assignments

Mystery Assignment

Bring a a six-sided package that has text on all sides to next week’s class (example: a cereal box).

Readings

CodeAcademy practice

Make a Website Unit 4