Skip to content
Go to file

Latest commit


Git stats


Failed to load latest commit information.

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 👋


Teaching materials for an intro to CSS animations for kids series.





No releases published


You can’t perform that action at this time.