Making a Page January 20, 2015


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.


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:

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

Before Class

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

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.