Dot Doodl for Kids
CSS Animation Classes For Kids By Joni Bologna
Title: Dot Doodl For Kids
Grade Level: 6-8
Total Time: 1-1.5 hours each
Objective: Students will leave each class with a foundational understanding of CSS @keyframes animation moments and be excited to continue experimenting with values on their own.
Topics Covered: Breif review of HTML/CSS, creating shapes with CSS, intro to @keyframes animations, planning motion, timing movements, translate and movement along an axis, rotation, 3D
Presentation Format: slide presentation with illustrations and code samples, hands on building with existing demos
Materials Included: agendas, teacher notes, slides, demos, reference site (and repo)
Tech Requirements: All students should have their own CodePen accounts prior to class, all computers should have Chrome installed, internet access is required
Prerequisites: Basic HTML/CSS (workshop here)
Typography: The fonts used throughout this series are Lato and Short Stack
Sticker Design: Sticker PDF, 2.5 x 1.5 inches
Class 1: Shifty Eyes Dot 🔵
Class 2: Bounce Dot 🔵
Class 3: 3D Dot 🔵
Please reach out with any questions, @jonitrythall or [email protected]