MoreLesson 167Free preview

Timeline

This lesson is part of How To · All levels

Summary

This lesson discusses creating a vertical timeline to show events in sequence. The timeline is made with pseudo-elements, whereas each event has a point marker and a content card. On a small screen, the two-sided layout is usually converted into a single column to keep it easy to read.

Key points

Use a sequential list like ol/li to make the sequence of events semantically meaningful.
Make a vertical line with a pseudo-element before on the container timeline
Position the marker point absolutely against each item
Change the layout to one column on the media query for the narrow screen

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.