CompSci 290.2 : Spring 2018

CSS Zen Garden - Multiple Styles

This project is intended for you to show that you can use CSS to style an HTML page by creating two very different designs from the same document structure.

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, then challenged web designers to create a CSS file (and supporting images) to style the page without altering the HTML of the file. 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.

Many of those sites are intricate and far beyond anything expected at your current experience level and in the short amount of time given. Instead, your goal is to experiment, to create two pages that look as different as you can make them (focusing on layout rather than just fonts and colors). Really, the only requirements are that your CSS validates and that you can describe what experiments you were trying to accomplish (so we can tell if what we see is intended or a bug). This can either be in the form of extensive comments within your style sheets or separately in your README file.

To prove grading will not be based on aesthetic appeal, here are two "unconventional" sites:

To get started understanding the structure of the HTML document provided, look at this version (which is itself just another CSS styled variant) or explore the page using the Developer Tools.

To demonstrate your two different web pages, make two copies of the original HTML that differ only in which style sheet they refer to. No other changes to the HTML will be accepted. Keep the tags and the text in the HTML file exactly as they are when you download it. You may alter your two CSS files as much as you like. You may use as many images as you like, provided that they are added using CSS.

Put another way in this version of this assignment:

Do not edit zengarden-sample.css; instead, keep it for a reference. However, you are to edit the stuffing out of style.css. Got that?

zengarden-sample.css is not to be edited. Keep it as a reference as you work on your version.

style.css should be edited and edited and edited again to within an inch of its life.

You do not have to write style rules for all of the elements in the HTML file. The excessive amount of additional structure is there to provide as much flexibility as you may want in your design. This may seem daunting at first if you have never worked this way before, but will help to make you more aware of all the capabilities of CSS.

I strongly suggest design your pages iteratively: making a few small changes at a time to see how it affects your page.

Start by downloading the starting files using these links:

Resources

Page Layout with CSS
CSS is Important to Modern Web Design (with CSS Zen Garden as an example)
Design and Coding by Bobby van Der Sluis (with CSS Zen Garden as an example)

Submission: Adding your Pages to your Portfolio

As a reminder, each project will be added to your assignments-portfolio-GIT_SCREEN_NAME repository so there is one single place we can go to find your work during the semester.

To submit this project

create a new folder within your assignments-portfolio-GIT_SCREEN_NAME folder named csszen
within that folder put
- two copies of the CSS Zen Garden HTML page (that differ only in the style sheet they refer to)
- two different CSS style files you made
- a README file (in plain text or Markdown format) describing your work on the project
then add two very obvious links on your Portfolio web site to these two pages (i.e., on the index.html page itself or a separate page of assignment links)

Your style files must display the way you expect in the latest version of Chrome and validate using the W3C CSS validator online.

Only what is in your assignments-portfolio-GIT_SCREEN_NAME repository on GitHub at the deadline will be considered for your submission.