Activity Directions


100 Level - No experience necessary

In this project, you’ll create lots of fun stickers that you can use to decorate web pages. You’ll learn about using gradients that gradually change from one color to another to make your stickers look cool.

Learning Objectives

Styling and animation with CSS:

  • Introducing @keyframes rule for defining steps in an animation.
  • Reinforcing the use of properties to define the size, shape, position and color of elements on a webpage.


“Diagonal animation” - editing animation @keyframe properties to use left:;

“Improve the sky” - add more keyframes and setting background:.

“More animation” - animate more images or elements using a variety of CSS properties.

Enter Your Submission

Past Submissions

Got it!

Here's what happens next:

An Assessor Will:
  • Review your submission
  • Provide feedback within 2-3 days
  • Accept your submission or ask you to make changes