Zen Garden Website Redesign

CSS Zen Garden is an online collaboration began to showcase the abilities of CSS for page layout. Designers design the same xHTML file modifying only the CSS file, not making any alterations to the xHTML.

In this project, you will create your own version of the CSS Zen Garden site, using CSS to style the CSS Zen Garden xHTML template. You may introduce colors, fonts and imagery, however, you may not modify the xHTML file.

For the site concept you will choose a color to use as inspiration. You may choose to use the colors as literal inspiration, including it in your site design, or draw from color theory, representing the mood and meaning of the color. Any way you can draw inspiration from the color is acceptable, but the connection should be evident throughout your process.


  1. Review the CSS Zen Garden site.
  2. Download the sample xHTML file and CSS file.
  3. Following the instructions on the CSS Zen Garden site, modify the style sheet to create your own presentation of the xHTML template.
  4. You may modify the style sheet to change layout, colors, fonts, background images, etc. However, you may not make changes to the xHTML template.

Browser Support

Firefox will be our primary browser. All projects will be viewed and graded using Firefox, so be sure to double-check that everything is working and appears as you want in this browser.

Additional Resources

FireBug is an add-on for Firefox that allows you to make real-time edits to CSS files while previewing their effects.