The CSS Zen Garden is a World Wide Web development resource. The goal of the site is to showcase what is possible with CSS-based design. Style sheets contributed by graphic designers from around the world are used to change the visual presentation of a single HTML file, producing hundreds of different designs. Aside from reference to an external CSS file, the HTML markup itself never changes. All visual differences are the result of the CSS (and supporting imagery).

For this project, you will download the HTML file from CSS Zen Garden and create an original CSS page to style the content. All text, links and content from the .html template must remain exactly the same. For this project, you will use CSS to create a new presentation and design for the content. Everyone will be using the same content (html text) but creatively adding your own context through design.

Before writing any code, you should spend some time thinking about the look and feel that you intend to create. You must develop a wireframe of your intended design, and consider aspects of color, font, layout, etc. Additional images or graphics may be added for decorative purposes.

Many of the existing CSS Zen Garden styles are extremely outdated and lack the elegance of modern web design. This project is as much a design challenge as it is a technical exercise; you are expected to develop a modern, aesthetically interesting web style.

Project 2 is worth 10% of your grade.

Parameters

  • create a wireframe sketch of your intended design
  • build and implement an external css stylesheet and link to that page
  • do not modify the original .html content aside from updating any necessary path urls
  • validate your css
  • this project should be saved to a dedicated ‘zen-garden’ directory within the project directory on your creative server
  • all graphics/imagery must be original or available for your use under a creative commons liscenses

Project 2 is due before class on MARCH 14th