Web Design II Project 2:
CSS Zen Garden
Problem
You are going to create your own design for the CSS Zen Garden website. You cannot change the HTML file but you may use the example CSS file to start your own design. 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 and you have to option to download the example CSS file if you would like to modify it.
Extra Credit
You can receive extra credit if you create more than one design for CSS Zen Garden. If you submit your design to the site and it is accepted you can earn major extra credit.
Instructions
- Do NOT change the HTML file besides naming it "index.html". If you need to use AP Divs there are some empty ones included in the HTML file for your use.
- Come up with some theme for your design and include the name of the theme as an image somewhere prominent on your page.
- Create a page called color.html in which you specify the color scheme you used. Check out this page for an example of a good color.html file. You do not have to design the file or link to it. Check Design Lesson 2 for information about color schemes.
- Create a font family for your page that includes a main font, backup font, safe font, and generic font family. Explain in the color.html file while you chose the fonts you did. Check Design Lesson 3 for information about choosing fonts.
- Your stylesheet must use valid CSS. To check this you can use the Web Developer Toolbar in Firefox. Go to Tools>Validate CSS to validate your styles.
- Make sure your page is called "index.html".
- You will turn in your site online using the host directory "zen." Check HTML Lesson 3 for the details.