Making a Page January 20, 2015

Agenda

• Classes and IDs (as a class)
• Basic Page Layout (as a class)
• Getting Started with the Fashion Blog (as a class)
• Fashion Blog Alpha (in pairs)

Starter Files

Class and IDs (on Codepen)

We’ll work as a class to explore the class and id attributes.

Basic Page Layout (on Codepen)

We’ll start using float for very basic page layouts (to be used more next class).

Fashion Blog Alpha (download) (preview)

Beginning with the starter files, flesh out this blog homepage to look like the preview linked to above. We’ll discuss this first as a class.

Notes

The red color for links is #D00. On hover, they turn to #A00.

The fonts used on the site are from Google Fonts. Please read there to see how to set these up properly. It should be fairly straightforward. This site is using:

• Lato Light
• Lato Light Italic
• Lato Bold
• Lato Bold Italic

There are a slew of grays being used on the page, including (from lightest to darkest):

• #EEE
• #DDD
• #CCC
• #BBB
• #444

Before Class

Please look over the MDN CSS reference, with a focus on these:

• background
• border
• color
• display
• font-family
• font-size
• font-style
• font-weight
• line-height
• list-style
• margin
• padding
• text-align
• text-decoration
• text-indent
• text-transform

For the Fashion Blog project, I’d also recommend looking at :hover and :first-letter.

Of course, if you feel like exploring more, please feel free.