MTM6230

CSS Zen Garden Project

Introduction

CSS Zen Garden was created in 2003 by Dave Shea as a showcase of what can be accomplished through CSS-based design.

Objective

For this project, you will create and provide the CSS for your own CSS Zen Garden design, which will be applied to the provided HTML. You may design the page anyway you like, but the HTML file CANNOT be changed.

Requirements

The following requirements must be met in order to complete the assignment successfully:

  1. Download the CSS Zen Garden starter files. The starter files contain an index.html file, and a style.css file. No changes should be made to the index.html file.
  2. You may NOT change the HTML file in any way.
  3. Your design must be optimized for a variety of browsers, devices and screens sizes.
  4. Your design must utilize Flexbox and/or CSS Grid in a meaningful way.
  5. You may use a reset or normalize CSS by including the styles as part of your style.css file.
  6. If you choose to use web fonts, which is encouraged, use only fonts that you have the rights to use. Fonts from Google Fonts are fine.
  7. If you choose to use images or illustrations, use only ones you have the rights to use. Make sure that the images and illustrations are optimized.
  8. The use of CSS Frameworks (i.e. Bootstrap) or other CSS Libraries is forbidden.

Submission

Create a zip file of the entire project and submit the file to the CSS Zen Garden assignment in Brightspace.

Rubric

Submissions will be graded using the following rubric.

Criteria Excellent Satisfactory Marginal Unsatisfactory
Points 20 15 12 10
Layout The layout demonstrates superior layout that transitions seamlessly between screen sizes and optimizes on all browsers. The layout is responsive and optimized for multiple browsers and screen sizes. The layout is partially responsive, but was not optimized to work well on multiple browsers and screen sizes. The layout is not responsive nor optimized to work well on multiple browsers and screen sizes.
Design The design is outstanding and creative with excellent use of colors, fonts, and whitespace. The design is appealing with good use of colors, fonts, and whitespace. The design is lacking with choice of colors, fonts, and whitespace making since difficult to use. The design is unappealing with poor use of colors, fonts, and whitespace.
CSS The CSS is well organized, uses Flexbox and/or CSS Grid in an excellent manner, and demonstrates a strong understanding of CSS techniques and best practices. The CSS is well organized and uses Flexbox and/or CSS Grid in a efficient manner. The CSS uses Flexbox and/or CSS Grid marginally, but is unorganized, bloated and/or contains many bad practices. The CSS contains no meaningful use of Flebox or CSS Grid.