Homework page

CS 50.11C - Section 1385

Elke Gimmler-Kraft

Lesson 2 - XHTML

Here is a link to the tables and javascript based page

Here is the page with the tables, javascript stripped out of it. Link to old code

Here is the page after code has been modified to pass XHTML validation. Link to clean code

Lesson 3/4 - CSS Basics

“Live lesson” with external style sheet added
live.css file - include a multiple selector

Cascade Sampler
cascade.css file

Selector Sampler

Lesson 5 - Font and Text Properties

relative.html
relative-big.html
relative-sm.html
fixed.html
fixed-small.html

Vertical Align Text sampler

live site with font and text properties
css file

text sampler
font sampler

 

Lesson 6/7- Position Properties

Box Property sampler
box.html

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 your commentws 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,

3 columns out of order with 2 background images

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

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

Live site

CSS

Sliding Door Navigation

 Final

original zengarden site

Final colorized

Final CSS explanation

Final images explanation

Final modified

modified CSS

Valid XHTML 1.0 Strict

Valid CSS!