It is March 1st, and this marks the start of the new weekly format for the challenge series.

A fresh pace, more room for creativity, and bigger ideas to explore.

Let’s kick off the first weekly edition with something fun but deceptively tricky.

The Mission

Build a fully responsive, scrollable timeline using only HTML and CSS — but with no JavaScript, no libraries, and no SVG animation frameworks.

Your timeline should feel like a “CSS time machine”: smooth, readable, and visually guiding the user through different moments or events (It doesn't have to be real events, just placeholders).

The Rules ⛓️

  • No JavaScript All interactivity and layout must be CSS‑driven.
  • Use semantic HTML <section>, <time>, <article>, etc.
  • Timeline must be scrollable or step‑based Vertical, horizontal, or even diagonal — your choice.
  • Include at least 5 “events” Each with a title and description.

The Goal 🏆

Create a timeline that:

  • Adapts cleanly between mobile and desktop
  • Uses CSS to visually connect events (lines, dots, borders, pseudo‑elements)
  • Feels like a guided journey through time
  • Has a polished, intentional aesthetic

Pro Tip

Pseudo‑elements (::before and ::after) can act as connectors, markers, or even animated progress lines.

Combine them with position: sticky; for surprisingly dynamic effects.

How to enter

Drop your CodePen or GitHub Repo in the comments.

Extra Credit

If your timeline includes:

  • A “current moment” indicator
  • A CSS‑only animation that progresses as you scroll
  • A dark/light mode toggle with no JavaScript
  • Actual events

—you’ve mastered the art of pure‑CSS storytelling.

Good luck, have fun, and welcome to the weekly era. Can’t wait to see what you build this time.