lesson 1 – begin

lesson 2 – xhtml

• table based page
• page with tables, javascript stripped out — old code
• page after code has been modified to pass xhtml validation — clean code

lesson 3/4 – css basics

• "live lesson" with external style sheet added
• live.css file — includes a multiple selector

• cascade sampler
• cascade.css file

• selector sampler

lesson 5 – font & text properties

• relative
• relative big
• relative small
• fixed
• fixed small

• vertical align text sampler

• live site with font and text properties
• css file

lesson 6/7 – position properties

• box property sampler

• position property — static
• position property — relative
• position property — absolute
• position property — fixed

• float and clear sampler

• live site with <div> tags colorized

• live site with box properties
• css file

lesson 8 – midterm

lesson 9 – ie / firefox developer toolkit / browser simulators

• post to class message board
  

lesson 10/11 – layout part 1 & 2

• 2 column layout — absolute positioning
• 3 column layout — absolute positioning

• 3 column with header and footer — float and clear

• aslett clearing method

• live site — web page
• live site — css file

lesson 12 – layout part 3

• 3 fixed columns with a background image, so the 3 columns go down the entire length of the columns
• 3 columns with fluid side columns and 2 background images, so the 3 columns go down the entire length of the columns

• live site with a background image (fixed)
• css file

lesson 13 – css layout properties

• 3 column fixed centered
• 3 column fluid centered

• live site with centering trick
• css file that controls live site

lesson 14 – tables & forms

• table sampler
• styled form

lesson 15/16 – navigation

• simple horizontal navigation
• page with links that display an image in the background that has 4 states (link, visited, hover, active)
• view image
• 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

lesson 17 – final

• original design
• design with div tags colorized, color key of div tags, explanation of how they fit into each other
• css file explained
• images explained
• modified design