Site menu:

Homework

All assignments are loaded onto a Web server, where they will be viewed and graded online. Due dates are midnight Pacific Standard Time. Late work will be accepted one week after due date, and a 20% deduction will be imposed. Late work will not be graded unless student sends instructor an email with URL for late work. If you have problems with FTP or the online forms send email to lhemenway@santarosa.edu

In grading your work, some points will be assigned for completing the assignment, additional points are awarded based on the appropriateness of the design decisions. A student who completes all parts of the class assignment is guaranteed a C in the course. Grades of A and B are made based on the aesthetic and usability of the design. The instructor is happy to make suggestions for improvement and offer design suggestions to students before the due date of an assignment.

Lesson 1:Getting Started Lesson
Step by Step homework explanation page
Check in part 1
DO NOT DO THIS IF YOU WERE ENROLLED IN CS 50.21A this semester, or if you have another class with me this semester. Use your existing username and password in the Student Introduction form below.		Submit
Form		Due
10/28		 n/aWELCOME
Student Introductions Form
Share a little bit about your history, your experience with computers, HTML, CSS, Photoshop and design on the Student Introductions form. 		Submit
Form		Due
10/28		 5
Points		Classmate
Introductions
Update Homework page send email if URL has changedDue
10/31		 5
Points		 Student Work

The easiest way to complete this assignment is to add onto the homework page you created in the beginning class. Refer to the link below to see the new assignments that need to be added to the top of your homework page. If you are new to the class, send me an emal with the homework page URL.

homework example file
Client 3 Preliminary DesignDue
10/31		 20
Points		 Student Work

Look through the Photoshop designs found in the PWD folder > Designs - Third Edition > 101-120-photoshop. You will select one of those designs to use as your model.

Second Level Design [15]
Use the PSD file which is a design of the home page. Modify that design to one that will work for the second level page. Save the file as a JPG.

Second Level Design with Color Overlay [5]
Add color overlays where you think the major div tags will be. Save the file as a JPG.

You may want to review the sample I have on the class DVD > Advanced class > client 3 > designing a second level page.
top

Lesson 2: Create HTML/CSS/images for Client 3
Step by Step homework explanation page

Client 3 final Due
11/7		 40
Points		 Student Work

Client 3 - second level page
Create the HTML and CSS code that will produce a second level page that is based on your PSD design. Add images produced from the Photoshop file. The page should pass HTML and CSS validation. It should look the same on the current version of Firefox and IE.

Link to Homework page
Create a link from your homework page to this second level page.

Lesson 3/4 : Photos/Logos
Step by Step Homework Explanation Page
Please Note - you have 2 weeks to complete this assignment

Photo/Logos Lesson
Due
11/21
70
Points

Logo inserted in 2 of 3 client sites [30]
Chose 2 of the 3 clients we have worked on in class and create new logos for these clients. Add the original logo you created to the home page and second level pages.

Logo in various sizes [10]
Create a Web page which displays the original logos you created sized at 200, 100 and 50 pixels.

Photo Collage Sampler [20]
Create a web page which links to 2 original collages you created (these can either be inserted into one of the 3 clients sites or placed on a sample page)

Layout Examples for Designer Sampler [10]
Use class message board to turn in this part of the assignment, access the Layout Analysis posting.

Link to Homework page
Create links to all the items listed above from our homework page so your instructor can easily access the work.

top

Lesson 5: Advanced Images
Step by Step Homework Explanation Page

Advanced Images Due
11/28		 40
Points		 Student Work

Photo Gallery [15]
Create a photo gallery using the Lightbox code.
optional - create an Adobe Photoshop Gallery.

Random Image or Slideshow [15]
Either add the code which displays random images or create code which displays a slideshow (your choice).

Add Mulitmedia Examples to Designer Sampler [10]
Use class message board to turn in this part of the assignment, access the Multimedia Analysis posting.

Link to Homework page
Create links to all the items listed above from our homework page so your instructor can easily access the work.

top

Lesson 6: Advanced Navigation
Please Note - you have 2 weeks to complete this assignment
Step by Step Homework Explanation Page

Adv. Navigation Lesson Due
12/11		 70
Points		 Student Work

Select one of the 3 client sites you have created during the class and add one of these types of navigation to that site: [30]

Make sample pages of the other types of navigation you did not use at your client site [30]

Add Navigation Options to Designer Sampler [10]
Use class message board to turn in this part of the assignment, access the Navigation Analysis posting.

Link to Homework page
Create links to all the items listed above from our homework page so your instructor can easily access the work.

top

Lesson 7: What's New in CSS3
Step by Step Homework Explanation Page

CSS 3 Samples Due
12/18		 40
Points		Student Work

The following concepts are discussed in the CSS 3 lesson:

  • text-shadow
  • @font-face
  • box-shadow
  • border-radius
  • gradients
  • multiple background images, colors or gradients

Use at least 4 of these concepts on the client sites we have created to date. Please make links on your homework page that indicate what client contains a specific concept [30]

ie "client 1 has text-shadow on the site name and uses @font-face to call up a google font which makes up the site name".

Make a sample page of the techniques you do not use with the clients. [10]

Please note - If you would like to use all 6 techniques with your 3 clients you may do that instead of making sample pages.
Classmate Critique class message boardDue
12/18		 5
Points		class message board
Go to the Student Work page, find your name, select the person above you in the list. If that person has not completed the work for the class, keep going up until you find someone who has. Remember, this is going to be posted for everyone to read, so be constructive in your comments. This assignment is meant to encourage dialogue. If a classmate has achieved an effect that you are curious about, this is the time to inquire about i, by posting a comment to the class message board.
Class Evaluation class message board 12/18 5 points class message board
Please give me feedback on the class and your experience.