CSS3 tutorial ideas for kids

By Eoin on 14 June 2013.

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

Cloud

(Should fade in, move across the screen, and fade out.)

The sun

(Should be spinning, and have a gradiented colour.)

Earthquake

Earth

(Should shake like an earthquake when you hover your mouse over the image.)

Rocking boat

Pirate boat

(Boat should be rocking.)

Teaching the concepts

Technicalities

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.

About and Contact · All posts