A-6: CSS Zen Garden Project

A-6: Project 1

This project focuses intensely on design, CSS styling methods, and the separation of presentation from content.


Due

  • Date: Please check Blackboard’s “Weekly Schedule!”
  • html and support files uploaded to the server

About the Project

The CSS Zen Garden project is based on the worldwide web development project at csszengarden.com, started by David Shea. The Zen Garden project was started 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).

This project was revolutionary in helping designers understand the importance of CSS and how to most effectively achieve desired designs through technical understanding of how to write CSS.

To complete this project you will follow the general guidelines set by the online Zen Garden project. You will use the basic HTML5 page provided in this page (see below) and use your own original imagery and css style sheet to achieve a unique visual presentation theme for the HTML page. This is not a multi-page site; instead, it is a single page project focused on teaching students design layout principles and techniques for visual web presentation.

Project Requirements

  • Use the base CSS Zen Garden Starter Zip Folder as your basis for the page (use the download link above for the files). The HTML portion in this page is not to be customized or modified, with only ONE EXCEPTION: to add tag in the head to include Google Fonts. Do NOT touch any other HTML in this page!
  • Create a separate stylesheet and use it to customized the HTML. You can use HTML tag styling, along with the existing IDs and classes within the HTML. For specificity in customization, you can nest your css selectors.
  • Use your own original imagery. If you use imagery from another source, it must be significantly altered so that can stand alone as new and distinctly different imagery.

Getting Started

First, visit http://csszengarden.com to see what the project is all about. Read the actual content on the page, as it describes what the goal of the project is.

Secondly, download the zipped folder here. This folder contains the base starting files you need:

  1. the “css-zen-garden-HTML5.html” file for the predefined content,
  2. and its linked, blank css file that you will use for styling the content in “css-zen-garden-HTML5.html”

Next, look through all of the different designs on the site to get a sense of what others have done.

Finally, you will need to refer to the “Zen Walk-Through” class demos to see how to approach this assignment. You can click the above link or view it below:


Past Student Work

To get some ideas of what students have done in the past, check out this gallery. BE AWARE that many of these were done prior to the emergence of the responsive design movement. You should consider making yours responsive, however. ***Links to the live sites are available upon clicking the thumbnail.

 


Project 1 Timeline

Please see the class schedule.

Upload


  • Upload to our class server making this the parallel directory path:
    Lastname_Firstname/assignment6/

    • What does that mean? Remember, if you are working inside of a folder on your computer called “assignment6/” then you would drop the entire folder into the server’s “Lastname_Firstname/” directory.
    • Here’s the path you are REQUIRED TO USE:
      YES!Lastname_Firstname/assignment6/
  • Please test it in a browser before submitting your work through Blackboard. Go to the following address and navigate to the folder where you uploaded work:
    http://mat.miracosta.edu/MAT125_Cotnoir/
  • HINT: for additional help using an SFTP program to upload your work, please refer to the tutorials in the:
    ~~~ “Weekly Schedule > Week 01: Orientation > Connecting to Server” folder.

Digital Art, Design, and Communication Education