Homework for CS 50.21B

Georgette Darcy

Lessons for CS 50.21B

Lesson 1 - Client 3 Preliminary Design

• I have chosen Design #105.
• Client 3 second-level page
• Client 3 color overlay for div tags

Lesson 2 - HTML/CSS/images for Client 3

• Link to second level page for client 3

Lesson 3/4 - Photos and Logos

• link to 2 clients which have had redesigned logos - Client 1 - Client 3
• link to page which displays resized logo at 200, 100 and 50 pixels
• link to 2 photo collages

Lessons 5 - Advanced Images

• link to lightbox photo gallery
• link to random image
• link to slideshow

Lesson 6 - Advanced Navigation

• link to client 1 page with vertical navigation
• link to horizonatal navigation sample page
• link to sliding door navigation sample page

Lessons 7 - New in CSS#

• The text-shadow technique is used on the link at the bottom of a second-level page in client 2.
• The @font-face technique is used in client 1 on the content text for the home page. I used the Kelmscott Roman font from Font Squirrel.
• The box-shadow and border-radius techniques are used on the portfolio images and main container on the home page of client 2.
• A gradient has been used on the body background of client 3.
• I have redesigned Client 1 to show the techniques of border-radius, box-shadow, 3 backgrounds layered one on top of the other, a gradient,
  rotated text, and text from the Google API. Note: I was unable to make the gradient show up in Opera or the rotated text in Google after several attempts.

----------------------------------------------------------------------------------

Homework for CS 50.21A/B

Georgette Darcy

Lessons for the Beginning Class

Lesson 1 - Load this file onto the Web

Lesson 2 - Formats

• link to photo saved as JPEG and PNG
• link to clip art saved as JPEG and PNG
• link to transparency sampler

Lesson 3 - Client #1

• template page with each div tag colorized
• CSS explanation page
• images explained

Lessons 4/5 - Color and Images

• jpeg that shows the redesign
• link to index page with color and images added
• link to second level page
• link to other second level page
• link to edited image

Lesson 6 - Client 2

• I selected design #151
• template page with each div tag colorized
• CSS explanation page
• images explained

Lessons 7/8 - Modify Client 2

• jpeg that shows the resdesign
• link to index page with color and images added
• link to second level page
• link to other second level page
• link to linked text sampler
• link to horizontal navigation sampler