lessons: 2/3 :: 4 :: 5/6 :: 7 :: 8 :: 9 :: 10/11 :: 12 :: 13 :: 14 :: 15/16 :: final

Lesson 2/3 - CSS Basics

Live page with external style sheet added
live.css file - include a multiple and contextual selector

Cascade Sampler
cascade.css

Selector Sampler

Lesson 4 - Font and Text Properties

Live page
live.css file - The font and text properties I added this week are:

relative file
relative big
relative small
fixed file
fixed small

vertical alignment

@font-face using google and local fonts

test shadow sampler

Lesson 5/6- Position Properties

live site with <div> tags colorized

Live site with box properties

box property sampler

position-static
position-relative
position-absolute
position-fixed

image gallery

Lesson 7 - Backgrounds

border radius sampler

box shadow sampler

gradient sampler

multiple background project

Lesson 8 - Midterm

Lesson 9/10 - Layout part 1 and 2

All pages use the matching columns javascript method except for 3 column fixed.

2 column fixed (both columns fixed, nav left)

2 column fixed right (both columns fixed, nav right)

2 column fluid (both columns are fluid)

1 column fluid (left nav column is fixed while content column is fluid)

3 column fixed (Aslett Method)

3 column fluid

3 column fluid center

Lesson 11 - Layout part 3

2 column absolute

3 column absolute

3 column with header

order of content

Lesson 12 - Layout part 4

(please note I have 4 examples on my homework page, you are required to produce only 3)

live site - 2 column fixed

live site - 2 column fluid

live site 3 - column fixed

Lesson 13 - Tables and Forms

table sampler

styled form

Lesson 14/15 - Navigation

simple horizontal navigation

links that display an image that has 4 states

my background image: my background image

horizontal navigation bar with 3 sub-levels of drop down navigation.

vertical navigation

sliding door navigation

live site with drop down

css for live site

Final

link to original design

link to design with div tags colorized, color key of div tags, explanation of how they fit together.

css explained

images explained

modified design

About the modified design: To modify the design I mirrored it and changed it's color scheme which required moving the navigation from left side to right side and moving all other elements from right to left. I created all new images with new colors and flipped some of the images to match the new nav-on-right layout, changed colors of text, links (link, hover, visited, and active) and changed font sizes, padding, margins and background colors wherever necessary to create the new look.