Our courses website is live at jsmates.com
#tech talks
#Logrocket Blog

Codepen - Learn to create a simple timeline using CSS

June 23, 2019🍿 1 min readEdit this post on Github
Follow me on twitter. I share quick tips, my reading list and also about free workshop and webinars around web and mobile development everyday.

Timeline UI design is a common UI in many applications. The design differs based on the application need.


  • Github have a daily calendar like timeline
  • Most CV sites have timeline about your career progress based on month and year

This codepen timeline is off second type where you have lesser number of activities in a timeline,

Vertical timeline

The content is bit old but still relevant to make a dead simple CSS timeline.

What I learned from the pen,

  • Idea to create vertical timeline using SCSS

Note: The code is not well optimized, learn it only for making the component.

Get Weekly Developer Tips

I send out a short email each friday with code snippets, tools, techniques, and interesting stuff from around the web. Join 2,600+ subscribers.


Made with ❤️ in Tallinn, Estonia

Paramanantham Harrison's DEV Profile