Back to HTML and CSS projects

Sunrise

In this project, you’ll learn how to use CSS to create an animated sunrise.

Start project Download lesson plan PDF
Sunrise

What you will learn

  • 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 colour of elements on a webpage

What you will need

  • A computer capable of accessing trinket.io
  • This project can be completed in a web browser using trinket.io

Curriculum alignment for this project

Use this guide to see how Code Club delivers on the NDTC.

Years F-2

Years F-2

ACTDIK001 Meets

Recognise and explore digital systems (hardware and software components) for a purpose

ACTDIK002 Meets

Recognise and explore patterns in data and represent data as pictures, symbols and diagrams

ACTDIP003 Meets

Collect, explore and sort data, and use digital systems to present the data creatively

ACTDIP004 Partially meets

Follow, describe and represent a sequence of steps and decisions (algorithms) needed to solve simple problems

ACTDIP005 Meets

Explore how people safely use common information systems to meet information, communication and recreation needs

ACTDIP006 Meets

Create and organise ideas and information using information systems independently and with others, and share these with known people in safe online environments