How to Create a Vertical Timeline - HTML & CSS Tutorial

LINK TO CODE:

In today's video I'll show you how to create a vertical events timeline using HTML and CSS. This is perfect for portfolios or business websites to showcase the events within a person or organisation.

If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!

#dcode #html #css

[abubalo]

How did you come up with something we don't think about but needed? You are absolutely great a teacher.

[getzelda]

thank you so much your video came in clutch for my web 2 project I had absolutely NO idea how to code a timeline

[gadoosher]

INSANELY cracked explanation my man, thank you SO much!! Helped me actually understand what was going on 🙏🏼

[zuzukouzina-original]

What I really like about your videos, are the very useful examples. I learn a lot from your videos, like how to use grid to make a timeline. At the same time, if I need a timeline, I’ll use your example. Chapeau dear friend!

[ghandimauler]

I appreciate your work. I've found several sites that provide timelining, but that's a costly venture and often limited. Your approach is creator-owned (well, shared by you, used by the readers) and thus a cheaper option that can be customized.

I do have one minor niggle - I think the final circle should be below the last entry, not equal to the bottom. It's the only entry that has two white balls next to it. (Yeah, that's not a huge thing, but it would be the cherry on top... or in this case, below the last entry...).

Keep up the good work.

[code_sparks]

Thanks for the content! A really doubt I had was how does GitHub draws its timelines and how could I copy it in my projects. I think the solution you provided is a good one for me. Thanks!

[vtech]

Nice !!! Good tutorial as well, good luck

[RianYK]

Nah, this is very useful, always use it for Transportation Schedule

[painperdu]

Hello good Sir,
Thank you very much for your tutorial.
However, I was having an issue : The middle circles were "hidden" (if I set the color to red, I was only seeing a little red line on the middle line).
If someone has the same "bug", here is the solution :
My * tag in my CSS file had "overflow: auto" attribute. I had to override this in .timeline__middle to "overflow: visible", and it fixed it.

If this is a bad practice, please let me know, web development is not really my specialty !

[TomasMisura]

using of grid is bit unusual but why not ....