2-project

#Project 1: Animations and Styles

Before Class

###Teacher Preparation

• Print enough copies of this worksheet for each student.
• The teacher should become familiar with General Assembly Dash Project 4. Walking through this project should take an experienced user 20-30 minutes.
• Pay close attention to the JS-like buttons in this project. They will not function outside of the General Assembly site.
• Review what was covered last lesson to understand the level of skill students have with HTML, CSS, and JavaScript.

Daily Objective

• Students will be able to create a webpage that includes a creating simple shapes in HTML and CSS, cover border properties, as well as manipulate gradients and background size.

Key Points

• The border radius creates circles, ovals, bullet, or egg shapes.
• You need to define attributes to make a <div> or border visible.
• Radial gradients radiate outward in all directions, from a central point.

Assessment

1. A worksheet to accompany dash.ga.co tutorial
2. Site made in Cloud9 IDE after completing walkthrough (to be completed in the following lesson)

Vocabulary

• Radial Gradient
• Variable
• Function
• Strings
• Animation
• Toggle
• Keyframes

###References

• https://c9.io/
• http://w3schools.com
• http://dash.ga.co
• Project 4 walkthrough Worksheet - For Students Teacher must print a copy for each student

During Class

Do Now

1. Volunteer takes attendance. Procedure found here.
2. Give each student a General Assembly walkthrough [worksheet] (https://docs.google.com/document/d/1LqsUrYEFPIfy9u0eaQDDD5MKPC6k9aUL5HhpWeTh0LU/edit).
3. Have students log onto dash.ga.co and login to their account.

Opening

"Today we are going to explore some new concepts using the Dash site we used earlier in the year. Please login to your account and start on Project 4 - The CSS Robot."

Introduction of new material (“I Do”)

On the screen, open up the General Assembly site and provide a quick reminder on how to navigate it.

Guided Practice (“We Do”)

Walk through the first 4-5 slides with the students on the board to show how the tutorial tells you what to type, BUT also becomes LESS helpful as the tutorial progresses. Be sure to also point out the importance of answering the questions on the worksheet as you complete the tutorial.

Independent practice ("You do")

Students should use the rest of class to complete sections 1, 2, 3 & 4 of Project 4. Note It could be useful for a student who is falling behind to complete the previous projects.

During this time, teachers will circulate to help students with technical issues. If a majority of the class is struggling with the same issue, you may consider demonstrating the solution on the board.

Note: This is a long period of time for a teenager to be completing a single task. Some may need an occasional break from time-to-time. Feel free to have a quick off-topic conversation with a student if you see them struggling to focus.

Closing

After completing sections 1, 2, 3 & 4 encourage students to transfer the code into a new GitHub repo.

Checks for Understanding

Example questions: What's the difference between margin vs. padding? How are those different than border-radius? Describe a common pitfall in creating a basic shape. Leave about 5 minutes at the end of class for there to be a discussion about what was learned today by completing a tutorial on General Assembly.

###Homework Students who are not complete with the tutorial and/or the worksheet by the end of class should complete it at home for homework.

After Class

• Teachers must check the tutorial worksheet. It is crutial to provide this feedback so that students will see the value of their work.

• Prepare for next lesson / hand off to next volunteer in rotation.