Workshop › Traffic light › Step 1 of 12

Traffic light: An empty box

A traffic light that switches by itself, with only HTML and CSS: boxes, circles, flexbox, colors by position, and a CSS animation with a timeline.

What we are doing

We are building a traffic light that switches by itself, with only HTML and CSS. The first piece is its body: an empty box.

```html
<div class="light"></div>
```

What it means

Your turn

Write the line on the empty line inside <body>, then Run.

Skills: HTML structure

All steps

  1. An empty box
  2. Give the box a shape
  3. Three lamps inside
  4. Round lamps
  5. Stack them in the middle
  6. Red, yellow, green
  7. Turn them off
  8. A timeline for a lamp
  9. Play the timeline
  10. One after another
  11. One setting for the speed
  12. Build it yourself: a pole