Making a Page April 16, 2014

Agenda

• Box Model (as a class)
• Getting Started with the Fashion Blog (as a class)
• Fashion Blog Alpha (in pairs)

Starter Files

Box Model (download)

We’ll work as a class to explore margin, border, and padding a bit more.

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.