Thomas Fonseca - Homework CS 50.11C

Section #5407

Spring 2012

pic

Lesson 2/3 - CSS Basics

Link to cascade-sampler

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

Link to selector-sampler

Lesson 4 - Font and Text Properties

Create the following files to illustrate how to stretch and shrink fonts

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

Vertical Align Text sampler

@font-face using google and local fonts

text shadow sampler

live site with font and text properties
css file

I have used the following font and text properties:


Lesson 5/6 Position Properties

Box Property sampler

Position Property - static
Position Property - relative
Position Property - absolute
Position Property - fixed

image gallery sampler

Live site with <div> tags colorized

live site with box properties
css file

Lesson 7 - Backgrounds

border radius sampler

box shadow sampler

gradient sampler

multiple background project

Lesson 8 - Midterm

Lesson 9 - IE / Browser Simulators

post your comments to the class message board

Lesson 10/11- Layout part 1 and 2

2 column fixed

2 column fixed right

1 column fluid

2 column fluid

Part 2

3 column fixed (Using Aslett clearing and Faux image Method)

3 column fluid

3 column fluid center

Lesson 12 - Layout part 3

2 column absolute

3 column absolute

3 column absolute with header

order of content

Lesson 13 - 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 14 - Tables and Forms

table sampler

styled form

Lesson 15/16 - Navigation

simple horizontal navigation

links that display an image that has 4 states

My Background Image menu background

horizontal navigation bar with 3 levels of drop down navigation.

vertical navigation

sliding door navigation

live site with either drop down, vertical or sliding door navigation.

Final

link to original design

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

css explained

images explained

modified design

 

Valid XHTML 1.0 Strict