The CSS Zen Garden

##Scope

The focus of this project is to have the students all start off with the same set of HTML code that they cannot alter. The student may only change the CSS.
In completing this project the students will see the amount a website can change just by altering the CSS.

##Before Class

###Teacher Preparation

• Familiarize yourself with the CSS Zen Garden.

Prerequisites

Students should only start this project after they have completed the other lessons and projects in the unit.

Starter code

See here for code and here to view.

Solution code

There is no solotuion code for this project. However, It is encouraged to have students look at examples submitted at CSS Zen Garden.

Assessment

1. Students will be assessed based on their performance in the project.

##During Class

###Do Now

1. Volunteer takes attendance. Procedure found here.
2. Return graded do-now and exit ticket from previous class
3. Do-now activity

###Opening

Remember at the beginning of the year we worked on CSS Garden when you redesigned the ScriptEd starter code we gave you? Well now that you have more CSS skills we want you all to submit to the site for real.

The CSS Zen Garden is an online competition in which developers design a website using the exact same HTML file.

##Lecture

You are going to build a simple Facebook Wall. Your instructions:

1. Clone this repo into your own Cloud9 account workspace

1. Copy the "clone URL" from this repo
2. In your Cloud9 dashboard click on the green "Create New Workspace" button and select "Clone from URL"

Once the workspace has been processed check to be sure it is up to date by running git status in the terminal. You should receive a messege telling you that your branch is up to date.

NOTE: It is common practice to push you changes to your GitHub repository often. It is recommended you make a push after every major change. Through the course of completing this project you should make 7-10 pushes to GitHub. Your manager will be grading you on this.

To push to GitHub run the following commands in your terminal:
git status
git add .
git commit -m "example comment"
git push origin master

2. Fill out style.css

During this project the student is only manipulating the css sheet. Give explicit directions to not alter the HTML in any way.

###Build Time Students will work alone on this project. The teacher's role will be to walk around the room helping students with any questions they have. Students are encouraged to look at previous lessons for reference.

##Closing Select students to present their work to the class.

###Check for Understanding Teachers should keep track of student success while they are presenting to the class.

###How to Submit Students must push all final code to their GitHub repository. To push changes in Cloud 9 the following commands must be run in the terminal:

git status
git add .
git commit -m "example comment"
git push origin master

Students will then share the link to their repo at bit.ly/ScriptEdProjects