Lesson 2/3 - CSS Basics

Link to live page :: link to live css file

"Live page" with external style sheet added

"Live" css file - with a multiple and contextual selector

Here is the link for the Cascade Sampler and it's CSS file

Here is the link for the Selector Samplerand it's CSS file

Lesson 4 - Font and Text Properties

Here is the link to Relative Font

Here is the link to Relative Small

Here is the link to Relative Big

Here is the link to Fixed Font

Here is the link to Fixed Small

Here is the link to Vertical Alignment

Here is the live site with text/font changes: Live Site

...and the accompanying CSS file

@font-face using Google and local fonts

text shadow sampler

I have used the following fonts - Angelina (local fonts) and Julee (Google fonts). Text properties used: neon glow, drop shadows, outlines, fuzzy text

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

Completed Exam & Practical

Lesson 9/10- Layout Part 1 and 2

2 column fixed

2 column fixed right

2 column fluid

1 column fluid

3 column fixed (using Aslett clearing method and faux columns)

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

Live Site - 2 column fixed

Live Site - 2 column fluid

Live Site - 3 column fixed

Live Site - 3 column fluid

Lesson 13 - Tables and Forms

Table Sampler

Form Styles

Lesson 14/15 - Navigation

Simple horizontal navigation

Page with links that display an image in the background that has 4 states (link, visited, hover, active)

background image - bumpy bakcground

Horizontal navigation bar that has drop down navigation, pop out navigation, and second level pop out navigation. (for a total of 4 levels of navigation)

Vertical Navigation

Sliding Door Navigation

Live site look under the lesson link for my drop down menus

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