DM 171: Week Three Homework

<< Previous | Next >>

css Zen Garden

The css Zen Garden has long been a showcase of separating design from content (and a personal source of inspiration). The site encourages designers to create differing looks for css Zen Garden while using the same content via CSS implementation. You are encouraged to visit their site:

The Assignment

Create your own entry for css Zen Garden. You are not required to officially submit it to the css Zen Garden site. The assignment is due in two weeks on March 8 .

The Rules

From the css Zen Garden web site with my bolds and edited for brevity:


You are modifying this page, so strong CSS skills are necessary, but the example files are commented well enough that even CSS novices can use them as starting points. Please see the CSS Resource Guide for advanced tutorials and tips on working with CSS.

You may modify the style sheet in any way you wish, but not the HTML. This may seem daunting at first if you’ve never worked this way before, but follow the listed links to learn more, and use the sample files as a guide.

Download the sample html file and css file to work on a copy locally.


We would like to see as much CSS1 as possible. CSS2 should be limited to widely-supported elements only. The css Zen Garden is about functional, practical CSS and not the latest bleeding-edge tricks viewable by 2% of the browsing public. The only real requirement we have is that your CSS validates.

Unfortunately, designing this way highlights the flaws in the various implementations of CSS. Different browsers display differently, even completely valid CSS at times, and this becomes maddening when a fix for one leads to breakage in another. View the Resources page for information on some of the fixes available. Full browser compliance is still sometimes a pipe dream, and we do not expect you to come up with pixel-perfect code across every platform. But do test in as many as you can. If your design doesn’t work in at least IE5+/Win and Mozilla (run by over 90% of the population), chances are we won’t accept it.

We ask that you submit original artwork. Please respect copyright laws. Please keep objectionable material to a minimum; tasteful nudity is acceptable, outright pornography will be rejected.


Upload your files into one sub-directory in your space, link the assignment to your index page. Will you use absolute positioning or a floated layout? Or a combination? Just some of the design questions to consider for this assignment.


Get out your sketchbook or doodle pad, whatever you do when you are creatively musing. This assignment showcases your imagination more than anything.

Have fun!

<< Previous | Next >>