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.
Top comments (0)