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 (http://www.csszengarden.com/) 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.
Weinman, B. (Aug 7, 2009). CSS Positioning Best Practices. Retrieved from http://www.lynda.com/CSS-tutorials/positioning-best-practices/47543-2.html.
CSS Zen Garden: The Beauty of CSS Design. (n.d.). Retrieved from http://www.csszengarden.com/.
W3Schools. (n.d.). Retrieved from http://www.w3schools.com/.
The C.R.A.P. method. (n.d.)Think around corners blog. Retrieved from: http://www.thinkaroundcorners.com/2011/10/c-r-a-p-principles-design/.
Assessment in more detail: