Page Layout Oct. 14, 2013

Agenda

• Classes and IDs (as a class)
• Page Layout with Float and Clear (as a class)
• Using Float for a Nav (as a class)
• Getting Started with the Fashion Blog Redesign (in pairs)
• Fashion Blog (in pairs)

Starter Files

Classes and IDs (download)

HTML elements can be given classes by adding an attribute like class="foo", and can be given an ID by adding an attribute like id="bar".

These can in turn, be selected for in CSS using .foo (selects elements with class="foo" and #bar (selects elements with id="bar".

We’ll start looking at how to decide when to use these flexible features of HTML and CSS.

Fashion Blog (download) (preview)

We’ll be building out a redesign for our fashion blog.

Before Class

Floats are difficult to get used to, possibly the mind-fuckiest thing we will work on in class. For that reason, please give these articles a read before class on Monday, preferably twice each:

• All About Floats by Chris Coyier
• CSS Floats 101 by Noah Stokes

This is funky material, and is a sticky point for everyone (and I mean everyone). The truth is that using float and clear for page layouts is essentially a hack, but for now, it’s the best option we have.

We will be looking at this more in class, but things will definitely go a bit smoother with a head start.