IML300 Reading and Writing the Web

Professor: Evan Hughes 

Website Re-Skin Assignment 

50% Visual Rhetoric | 50% Code Work

Overview: This project draws from the highly creative and practical CSS Zen Garden ( for inspiration. Everyone will receive the same content – a structured HTML document. Each student will plan a design for the site and style the HTML document using only CSS. This project has two deliverables and will be done in two stages:

Stage 1: Review content and mockup a design for the project (due: week 5)

Stage 2: Use CSS to style the HTML document according to your mockup design (due: week 8)

Goal: The goal of this assignment is to hone both your design technique (stage 1) and your CSS coding skills (stage 2) in preparation for the final project.

Parameters: Nothing on the HTML document can be changed or altered unless there is a mistake that compromises the structural integrity of the site. Make sure that you make the professor aware of the necessary change. You can incorporate images, but only as part of the CSS.


Step 1: Download the HTML document from the class wiki

Step 2: Create a style sheet: css/styleProjectOneSkin.css

Step 3: Create and code a unique design using only CSS

Step 4: Make sure the site is up and running on the server

Step 5: Present your site to the class

Grading Criteria: This assignment is both a design and coding challenge, and therefore, 50% of the grade is based on the visual rhetoric of the site and 50% based on using best practices for coding in CSS. See the scale below for a more specific breakdown of the grading citeria.

Helpful Sources:

Weinman, B.  (Aug 7, 2009). CSS Positioning Best Practices. Retrieved from

CSS Zen Garden: The Beauty of CSS Design. (n.d.). Retrieved from

W3Schools. (n.d.). Retrieved from

The C.R.A.P. method. (n.d.)Think around corners blog. Retrieved from:

Assessment in more detail: rubric