Lessons
Lesson 01 - Getting Started/Housekeeping
Lesson 02 - XHTML
- Here is the link to the table based page.
- Here is the page with the tables, javascript stripped out of it. Old Code
- Here is the page after code has been modified to pass XHTML validation Clean Code
Lesson 03/04 - CSS Basics
- "Live Lesson" with external style sheet added
- bus-web.css file - include a multiple selector
- Cascade Sampler
- Cascade.css
- Selector Sampler
Lesson 05 - Fonts & Text Properties
Create the following files to illustrate how to stretch and shrink fonts
- Relative
- Relative-Big
- Relative-Small
- Fixed
- Fixed-Small
- Vertical Align Text Sampler
- live site with font and text properties
- css file
- Font-Sampler - Extra Credit
- Text-Sampler - Extra Credit
Lesson 06/07 - Positioning 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 08 - Midterm
Lesson 09 - IE / Firefox Developer Toolkit / Browser Simulators
- Post your comments to the class message board
Lesson 10/11 - Layout part 1 and 2
- 2 column layout using absolute positioning
- 3 column layout using absolute positioning
- 3 column with header and footer using 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.
- The "live site" with a background image (fixed or fluid, your choice).
- 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 and Forms
Lesson 15/16 - Navigation
- Simple horizontal navigation
- Page with links that display an image in the background that has 4 states (linked, 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
- live site
- CSS file that controls live site
Final
- Original Zen Garden Site
- Final color div
- Final CSS explain
- Final images explain
- Modified Zen Garden 124
- Modified Zen Garden 124 CSS