CSS - Animations Part 2

Instructors: Jess, Carmen, and Eda

Animations

Before this session, please:

• Try to complete as many steps from Build a Flappy Penguin as possible before class. This workshop is Jess’ favorite and she hopes you’ll love it too.
• Complete Build a Personal Portfolio solo over the next few days. Even though this is a lab, we recommend you approach it like you would a certification. The work you do on this lab can be used as the basis of your own portfolio site to show off your skills!
• Read CSS Animations Review and take notes
• Complete CSS Animations Quiz solo to test your knowledge of CSS animations

During this session, we’ll:

• We’ll work through some of the steps from Build a Flappy Penguin together to share the joy of watching the penguin wave
• We’ll talk through Build a Personal Portfolio and discuss what you might want to include in your portfolio website
• Review notes

After this session, please:

• Read CSS Review and take notes

Instructor notes

Build a Flappy Penguin

In this fun exercise, we’ll build a Flappy Penguin and practice CSS transforms and animations!

Build a Personal Portfolio

This exercise is a good opportunity to put all the HTML and CSS concepts we’ve learned into practice!

CSS Animations Review

In this unit, we’ve explored:

• CSS animation basics
• Accessibility and the prefers-reduced-motion media query