<>

Lesson 3: Box Model

Outline

1. Everything is in a box whether you know it or not
2. Turn border to 1px
3. Border applied to p tag. Inheritance.
4. div, span
5. display inline and block
6. float for wrapping
7. Widths

Example

1. The example we coded up in class
2. Horizontal centering
3. Vertical centering

Exercise

Using Frank Stella, Josef Albers and Karel Martens as inspiration, create a page of web box art. Keep the principles of classes, inheritance and float in top of mind. Experiment wildly in code (not in your sketchbook), starting a new html file if one breaks or seems at a stopping point. Add a post with the category exercise 3 that links to 1 or 2 finished pieces. We’ll look at aesthetics and your style sheets as a class first thing tomorrow morning.

Links

b Comments