CSS3 tutorial ideas for kids
(Examples should work in Chrome and Firefox at the time of writing, 2013.)
Teaching kids CSS animations
I was tasked with setting up a CSS3 tutorial for kids.
They were about the age of 13 and 14.
I figured that CSS3 animation would interest them, so we went through these examples.
(Should fade in, move across the screen, and fade out.)
(Should be spinning, and have a gradiented colour.)
(Should shake like an earthquake when you hover your mouse over the image.)
(Boat should be rocking.)
Teaching the concepts
- Check the source code of this page to see how it’s implemented.
- Teach in very small steps.
- For example, start the sun to be a yellow square.
- Then add
border-radiusto get it into a circle.
- Go through step-by-step for the first couple of examples, then leave it as a project for them in class to work out how to implement the other related examples.
- The content here covered five hours of teaching.
- At the time of writing (2013), not all CSS3 animation actions are implemented across browsers.
- You’ll see in the source code some
-webkit-elements. They’re to get Chrome working.
I’d love to hear your ideas for more CSS3 activities for teaching kids. Please leave a comment below.
Credits: Images from OpenClipart.org.