Teaching materials for an intro to CSS animations for kids series.
HTML
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
class1-original-visuals
class2-original-visuals
class3-original-visuals
LICENSE
README.md
class-one-slides.html
class-three-slides.html
class-two-slides.html
doodl-stickers.pdf

README.md

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 info@jonibologna.com 👋