Warning: This is an archived course website that is part of my teaching portfolio, so some links may no longer work. Please contact me with any questions about this site.

English 313 Header Image

CSS Zen Garden Redesign

Due Date: Tuesday, October 7th

Submission Name: <zengarden> (site folder)

Introduction

This assignment will allow you to demonstrate what you have learned so far this semester about styling (X)HTML using cascading style sheets (CSS) and will require you to extend your knowledge of CSS positioning and contemporary web design practices. Up to this point, we have used CSS in simple ways (e.g., to add color, margins, and borders to (X)HTML elements), but we have only scratched the surface of what CSS can do. By participating in an ongoing project called the CSS Zen Garden, you will have the opportunity to study the work of talented web designers and apply what you learn to your own original Zen Garden design.

Assignment Details

How the CSS Zen Garden Works. The CSS Zen Garden, created by CSS expert Dave Shea, is an ongoing project that demonstrates “what can be accomplished visually through CSS-based design.” Shea created an unstyled .html file that adheres to XHTML 1.0 Strict guidelines, then challenged interested web designers to create a CSS file (and supporting images) to style the page. The CSS Zen Garden was created in 2003; since that time, over 1000 designs have been submitted, and roughly 200 of the best designs have been featured on the site.

Learning from the Masters. Browse the CSS Zen Garden archive, which contains the best designs submitted to the site. Select a few designs that appeal to you and inspect the CSS file of each design to get a sense of how the designer achieved a particular visual style. (This would be a great time to use Firefox’s Web Developer Toolbar and/or Firebug.) Next, chose one of these designs and download the .html and .css files, as well as all of the images used in the design. Put these files into a folder on your computer and verify that you can view the design in your browser when you’re offline. We will practice CSS techniques in class using these files, so make sure you have accomplished this step before class on Thursday, September 18. (IMPORTANT: The designs on the CSS Zen Garden site are copyrighted. We are downloading and modifying designs for educational purposes, so it is important that you DO NOT put these practice files on your website. Instead, save them to your flash drive.)

Creating Your Own Design. As you have probably noticed, the best CSS Zen Garden designs use a theme or a visual motif. As you begin to create your own design, you should choose a theme that will guide your design decisions. At this point, you should make a rough sketch (on paper or in a drawing program) of what you want your page to look like. Next, download the base HTML file and begin coding your CSS file. Start with a blank file and slowly begin adding structure to the page, then add color to the text and insert background images. Remember to follow the iterative design process we’ve been talking about in class: make a few small changes, then refresh the page to see how it looks in your browser. We will be using Firefox in class, but you should take time to test your page in other browsers (Safari, Internet Explorer, Opera, etc.).

A Note about Originality. Your work on this project will be reflected in your original CSS file and in the images you create. You may NOT modify the CSS Zen Garden base HTML file. While it is a standard practice among designers to borrow CSS code snippets from other designers, on the whole, your design should be an original composition. Use only graphics and images which you have the rights to use (i.e., don’t steal copyrighted images from other websites).

Peer Review and Debugging. As you work on your design, you should frequently check it for coding errors using the W3C’s CSS Validator. On October 2nd, we will hold a peer-review workshop, where you will be able to see what everyone in the class has done. You will give feedback to several of your peers and, in turn, will receive plenty of feedback on your design.

Design Report. At the conclusion of this project, you will write a short report (400-500 words) in which you discuss your goals and design strategies for the project, describe your work process, make an honest assessment of your work, and give credit to others for ideas, graphics, code snippets, etc. This design report will be submitted as an .html file, and it should make effective use of headings, bullets, and other conventions of writing for the web. The best project submissions will also apply their style sheet (or some variation of it) to this design report. (A few excellent examples of articles written about the Zen Garden design process: Andy Budd, Bobby van der Sluis, Douglas Bowman 1, Douglas Bowman 2.)

Submitting Your Design. When your design is complete, upload it to YOURNETID.public.iastate.edu/zengarden/ with the base file renamed as “index.html”. Your “zengarden” folder should also contain your design report (named as “report.html”) and a zipped folder containing ALL files you’ve used or created for this project (named “allfiles.zip”). Last but not least, after I have graded your assignment and you have had the chance to revise your style sheet, I encourage you to submit your design to the curator of the CSS Zen Garden. If your design is selected to become part of the Garden, you will receive 10% extra credit on this assignment, the envy of your peers, and the adoration of small children around the globe.

Evaluation Criteria

Your grade on this assignment will be determined by your performance on the following criteria:

  • Page Structure–Does the page organize information in a readable and accessible manner? Is there a connection between the structure of the page and the visual theme?
  • Visual Theme–Does the page feature a coherent and consistent visual theme? Does the color scheme complement the background images (if any)?
  • CSS Coding–Does the CSS file you created pass the W3C Validator? Is the file well-organized? Does it make effective use of comments to communicate with others who might view the file?
  • Design Report–How well does your report explain and justify the decisions you made in completing this assignment? Is the report structured logically? Does the report adhere to the conventions of standard written English? Does the report effectively use the original CSS design you created for this project?

[Note: This assignment was inspired by Charlie Lowe, who was inspired by Steve Krause. I offer my thanks to both of them and to others who have designed similar assignments.]