Shape of the Day:

• Questions about the future in Web Development
• Animation Challenge

Website of the Day:

https://santatracker.google.com/village.html– Google’s holiday game site 

1. Answer the following questions in a word or notepad document:

1. What is a web developer? What is a web designer? What is a graphic designer?
2. What is a front end developer? What is a back end developer?
3. What is a full stack developer?
4. What is user design (or UX/UI or user experience design)?
5. What could you study in post secondary to prepare for one of these positions?
6. What do web developers study in college? What about graphic designers? What about game designers/developers?
7. How else could you become a web designer or developer if you don’t do it in post secondary? Find at least two different ways.
8. What are code boot camps? Why do people do them?
9. What do code boot camps cost?
10. What percentage of high schools in North America offer web design? Computer science? Game development?
11. What is the average salary of a web developer? A game developer? A graphic designer?
12.  What are you interested in and why? Are you potentially interested in studying these subject areas in college? What about graphic design, mobile app development, or game development?

2. Animation Challenge

• You are going to practice everything we’ve learned about animations over the past few classes. You will use Animate.css, @keyframes rule and the animation property, and Animista.net.

1. Download this code and copy/paste into a new Visual Studio page. Save as animationchallenge.html.
2. Animate.css
   • The Animate.css style sheet has been added to the code above (see line 8 in your code) so all you have to do is add classes to animate your elements
   • Choose any animated class you want to apply to your h1. Go here for the list of choices. **Each class begins with the word animated and ends with the class name.** Example: p class=”animated bounce”
   • Your h1 will only be animated once when the page loads. Make your h2 have an infinite animation by choosing a new animation class in the same way as the previous step but add infinite in the middle. Example: p class=”animated infinite bounce”
3. @keyframes rule and animation property
   • Make the square change background-color from pink to purple by adding the background-color property in the to keyframe
   • Try to animate the box by moving it horizontally with the following steps
   • Add the correct animation-name for the .box class and make the animation-duration 5 seconds
   • Make the box move horizontally 100px by using the transform property (see code example here). Add the transform property in the to keyframe for from and to
   • Make the animation for the square (.box) happen two times
   • Make the animation for the square (.box) the same speed from beginning to end and find the right animation property to do that here (look for “Specify the Speed Curve of the Animation”)
   • Make the square end up purple and moved over 100px when the animation is over- find the right animation property to do that here (check under “Specify the fill-mode For an Animation”)
   • Add the correct animation-name to the .circle class
   • Make the animation-duration for .circle 5 seconds, the animation-iteration-count infinite, and the animation-timing-function linear
   • Add the correct @keyframes stages for spin by filling in the ????
   • For the 25% @keyframes stage have the circle rotate 45 degrees by filling in the correct value for the transform property (see here for example)
   • Make the 75% @keyframes stage the same as 25%
4. Animista.net
   • You are going to use Animista.net to animate your adventure mug image
   • Go to Animista.net and pick an animation you like
   • Modify the animation by using the left menu if you want to change things like animation duration, speed, etc.
   • When you have the animation the way you want, click on the curly brackets on the right just above the animation example to get the code. You will see animation property and @keyframes code. Click Autoprefixer to get rid of the unnecessary code.
   • Copy and paste the animation property and its values to the img selector in your CSS
   • Copy and paste the new @keyframes rule for the animation with the code below your image selector
5. Your turn
   • Create a new animation any way you want by using either Animate.css, the @keyframes rule and the animation property, or Animista.net. Apply the animation to new content to animate (text or an image – identify what is your own animation creation).