The CSS Zen Garden Assignment

On this page…

    CSS Zen Garden

    Create the project

    In Brackets, create a new project called css-zen-garden.

    In your project, create two folders:

    Download the files you will need

    Go to the CSS Zen Garden website, at

    The second paragraph of the site reads as follows:

    Download the example HTML FILE and CSS FILE

    Click on HTML FILE, & your computer should download a file named index.html. You cannot change this file (with one exception, which I will explain below).

    Click on CSS FILE, & your computer should download a file named style.css. Do not change this file. Instead, keep it for reference.

    Move index.html into your css-zen-garden project folder.

    Move style.css into the styles folder of your css-zen-garden project folder.

    Change the files


    Duplicate style.css & name the duplicate file style-original.css. Do not edit style-original.css; instead, keep it for a reference. However, you are to edit the living crap out of style.css.

    Got that?


    Now for the HTML file. With one exception, which I am about to elucidate, do not edit the HTML file!

    This is the only edit you are allowed to make to the HTML file:

    That’s it. You have to change the <link> so that it points to your CSS, but other than that, do not edit the HTML file!

    (& you should edit the stuffing out of style.css!)

    The images folder is there in case you want to use background images in your CSS. You may end up having nothing in it at all (although that’s doubtful).

    To summarize

    Oh, one more thing: do not edit index.html other than changing the link to the CSS!

    WebSanity Top Secret