CSS3 tutorial ideas for kids

/ Uncategorized

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.

Earthquake On Hover

Earth
(Should shake like an earthquake when you hover your mouse over the image. The kids were using desktop machines with mice.)

Rocking boat

Pirate boat
(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-radius to 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.

Technicalities

  • 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.

More ideas?

I’d love to hear your ideas for more CSS3 activities for teaching kids. Please leave a comment below.

Credits: Images from OpenClipart.org.