https://github.com/jonitrythall/dotdoodl-kid-classes
Teaching materials for an intro to CSS animations for kids series.
https://github.com/jonitrythall/dotdoodl-kid-classes
animation class css kids series workshop
Last synced: 9 months ago
JSON representation
Teaching materials for an intro to CSS animations for kids series.
- Host: GitHub
- URL: https://github.com/jonitrythall/dotdoodl-kid-classes
- Owner: jonitrythall
- License: other
- Created: 2017-01-19T13:28:27.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-05-14T18:57:54.000Z (about 9 years ago)
- Last Synced: 2025-03-25T13:46:06.133Z (about 1 year ago)
- Topics: animation, class, css, kids, series, workshop
- Language: HTML
- Homepage:
- Size: 1.5 MB
- Stars: 26
- Watchers: 3
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Dot Doodl for Kids
**CSS Animation Classes For Kids By [Joni Bologna](http://jonibologna.com/)** 🐷
**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](http://www.dotdoodl.com/) (and [repo](https://github.com/jonitrythall/dotdoodl))
**Tech Requirements:** All students should have their own [CodePen](http://codepen.io/) accounts prior to class, all computers should have [Chrome](https://www.google.com/chrome/) installed, internet access is required
**Prerequisites:** Basic HTML/CSS ([workshop here](https://github.com/jonitrythall/tutstownworkshop))
**Typography:** The fonts used throughout this series are [Lato](https://fonts.google.com/specimen/Lato) and [Short Stack](https://fonts.google.com/specimen/Short+Stack)
**Sticker Design:** [Sticker PDF, 2.5 x 1.5 inches](https://github.com/jonitrythall/dotdoodl-kid-classes/blob/master/doodl-stickers.pdf)
## Class 1: Shifty Eyes Dot 🔵
* [Blog post review](http://jonibologna.com/css-animation-classes-for-kids-class-1/)
* [Agenda](https://docs.google.com/document/d/1rv8SkQwUP-PGetV-ByROscOrxmsI6re2dkUQq3-cZl4/edit?usp=sharing)
* [Teacher notes](https://docs.google.com/document/d/1q3igOFoHnfXRRegRSzs1qnfhNhNAqFegTqsQqBSZfMA/edit?usp=sharing)
* [Slides presentation](http://slides.com/jonibologna/intro-to-css-animation-1-kids#/)
* [HTML slides](https://github.com/jonitrythall/dotdoodl-kid-classes/blob/master/class-one-slides.html)
* [Demo](http://codepen.io/jonitrythall/pen/GrWPoX/)
* [Original visuals](https://github.com/jonitrythall/dotdoodl-kid-classes/tree/master/class1-original-visuals)
## Class 2: Bounce Dot 🔵
* [Blog post review](http://jonibologna.com/css-animation-classes-for-kids-class-2/)
* [Agenda](https://docs.google.com/document/d/1MnEX15ES3zzLKcoE4lXyH_ut_bCCIyjVe8dwIOlp_yc/edit)
* [Teacher notes](https://docs.google.com/document/d/180tCBkWLGJw-M-oEj5G1MYPcWUlvnrTwniKlntMJkQc/edit)
* [Slides presentation](http://slides.com/jonibologna/intro-to-css-animation-2-kids#/)
* [HTML slides](https://github.com/jonitrythall/dotdoodl-kid-classes/blob/master/class-two-slides.html)
* [Demo](http://codepen.io/jonitrythall/pen/xggROe)
* [Original visuals](https://github.com/jonitrythall/dotdoodl-kid-classes/tree/master/class2-original-visuals)
## Class 3: 3D Dot 🔵
* [Blog post review](http://jonibologna.com/css-animation-classes-for-kids-class3/)
* [Agenda](https://docs.google.com/document/d/10pkbVW9Pqqi1eSTuB8460zTuvvVOT9uscNj5BWts6x0/edit?usp=sharing)
* [Teacher notes](https://docs.google.com/document/d/1PiP8rgLI8XUtveCblmnX5-NIFTuJOrWbOEeqteEkg7Y/edit?usp=sharing)
* [Slides presentation](http://slides.com/jonibologna/intro-to-css-animation-3#/)
* [HTML slides](https://github.com/jonitrythall/dotdoodl-kid-classes/blob/master/class-three-slides.html)
* [Demo](http://codepen.io/jonitrythall/pen/dWeoBB)
* [Original visuals](https://github.com/jonitrythall/dotdoodl-kid-classes/tree/master/class3-original-visuals)
**Please reach out with any questions, [@jonitrythall](https://twitter.com/JoniTrythall) or info@jonibologna.com** 👋