Yorkville High School Computer Science Department
Yorkville High School Computer Science Department on Facebook  Yorkville High School Computer Science Department Twitter Feed  Yorkville High School Computer Science Department on Instagram

Yorkville High School Computer Science

ASSIGNMENTS: No Current Assignments

Web Design II for Designers :: Projects :: CSS Zen Garden

Rubric
Due: Sep 21

Problem

You are going to create your own design for the CSS Zen Garden website. You cannot change the HTML file and must use a new CSS file to start your own design. You can look at the original site's CSS file for ideas and inspiration. You may also create an entirely new CSS file to make the design completely your own. To start this project you must download the example HTML file.

Instructions

  1. Design your site using a program such as Adobe Illustrator. This design must be approved by Mr. Miller and Ms. Rizio/Mr. McCulloch before you begin work.
  2. Do NOT change the HTML file. If you need to use AP Divs there are some empty ones included in the HTML file for your use called "extra1," "extra2," etc.
  3. Come up with some theme for your design and include the name of the theme as an image somewhere prominent on your page.
  4. Use element selectors (body, a, img), class selectors, and ID selectors in your stylesheet.
  5. Combine and group selectors in your stylesheet.
  6. Use at least one advanced CSS selector.
  7. Use CSS for the page layout of your site.
  8. Create a font family for your page that includes a main font, backup font, safe font, and generic font family. Explain your font choices in a Google Document. Check of the Typography Lesson from Web Design I for more details.
  9. Your stylesheet must use valid CSS. Go to The W3C CSS Validation Service to ensure your code is valid.
  10. Turn in your project online. Check this lesson for the information to do this. The host directory should be zen.
Yorkville High School Computer Science Department on Facebook Yorkville High School Computer Science Department Twitter Feed Yorkville High School Computer Science Department on Instagram