How To Create a Vertical Timeline Using HTML & CSS

👉 Check out Kite - A Free AI-powered Coding Assistant (download link):
www.kite.com/get-kite/?...
Today we are going to create a vertical timeline using HTML & CSS. It will be a responsive design which means it will look good in every device. Hope you guys will like it. If you are new to my channel please do subscribe. Happy web!!
source code: codepen.io/Web_Cifar/pen/jObBvqN
Also Watch :
Make a full website with html & css : • One Page Full Website ...
Mini Project for HTML & CSS : • Responsive Website Wit...
How To Make A WordPress website : • How To Make A Professi...
Some useful Playlist :
HTML & CSS: • HTML & CSS
Elementor Tutorials (wp): • Elementor Tutorials (wp)
Elementor Speed Art: • Elementor Speed Art
Join The Community :
Our website : webcifar.com/
Facebook Page : / webcifar
Facebook group : bit.ly/fb-group-webcifar
Instagram : / web_cifar
twitter : / webcifar
Github: github.com/WebCifar
Music Credit :
Song: DayFox - Crushed Hearts (Vlog No Copyright Music)
Music provided by Vlog No Copyright Music.
Video Link: • DayFox - Crushed Heart...
#html #css #timeline

[@armanh.shohan4255]

Most underrated channel :( amazing work again bro

[@webcifar]

Glad you enjoy it!.

[@webcifar]

Thanks For Watching ❤

[@worldwibeweb7133]

I used this to make road map of a course. Thanks mate!!

[@abhinabrajopadhyaya9786]

Thanks bro... Beautifully explained

[@BAMitsFRESHPINK]

Excellent tutorial. No problems at all

[@JovianCasius]

many new thing that i learn here, thanks!

[@RahulKumar-md5ml]

thank u very much sir to provide such amazing concept. pls provide more💓💓

[@jdubhman]

🙏 great one! thanks.

[@caiomarcellusmartinezcabra3061]

IMPRESSIVE!

[@techwithethan4501]

How can a video like this have only 1 dislike (I'm not saying it is bad it is very helpful).

[@macario9102]

thank you my friend, hard to find a well explained tutorial like this one here in brazil.

[@webcifar]

Glad it helped

[@dovey3839]

Beautiful work their fella

[@sazedurrahman1594]

Helpful video:)

[@ayushdedhia25]

Bro this tutorial is just amazing (Its just the easiest implementation ever) ❤️

[@webcifar]

Glad to hear that!

[@ivankalynovskyi3248]

Thank you very much!

[@ujjwalsingh888]

Amazing content man!

[@alexanderdegeyter9264]

Thanks, VERY helpful!

[@webcifar]

Thanks

[@wonga07]

Fantastic tutorial, you're a very good teacher!

[@webcifar]

Thanks

[@saalimkhan4133]

Beautifully explained!

[@webcifar]

Glad you liked it

[@venkatakrishnaiahbeemanabo1166]

Everything is fine but the last tag circle(.) needs to remove the vertical line. can you please help me with that?

[@Michelle-vp9ou]

it is really helpful!! I just found out this video, then I decided to subscribe you instantly, your content is so detailed, respect

[@webcifar]

Thanks for subbing!

[@kashmirtechtv2948]

Professional

[@philip_hofmann]

Thank you, I just watched your video :) Would the color attribute at 7:23 be redundant since we defined it in the html selector previously? Thanks also for your explanations during the video :)

[@webcifar]

Yes, correct

[@truonghoainam3064]

good man

[@sanjanabandarajourney]

Just found your youtube channel... You are awesome :)

[@webcifar]

Thanks, I am glad that you liked it.✨

[@iqbal5942]

best explain bro🔥🔥

[@webcifar]

Glad you think so!

[@srinivas5226]

Thanks a lot for saving my time and I learnt when to use pseudo classes and nth-child etc...

[@webcifar]

Welcome.

[@NargaKuruga]

Thank you so much bro !

[@webcifar]

Always welcome

[@samarjamil3053]

Nice bro!

[@webcifar]

Thanks bro

[@const1525]

Very good. Thank you

[@webcifar]

Welcome

[@mohammadfarhanfajrulhaq4716]

Cool video, thanks man

[@webcifar]

Glad you liked it!

[@boburmirzomuhibullaev2819]

that is nice, how can we do it like when scrolling down it should appear by one by in order

[@priyanshramnani1751]

Thanks a lot!

[@webcifar]

No worries!

[@0815michik]

That looks so amazing. Do you know if there is a way to integrate this into a tool like squarespace?
Thank you for the cool video!

[@angelasands1217]

Hi, I used this in Squarespace. Add the CSS to the into the CSS section, and add a code block to the section you want the timeline and add the HTML part in there.

[@monara97]

Thank you. any way to make this horizontal?

[@biomp4]

thank you/

[@__noob__coder__]

amazing

[@webcifar]

Thanks ✨

[@nikhilkrishna8662]

Hey I am having an error while I use the exact same code but with bootstrap? Can you tell me how I can fix this?

[@a_raouf96]

Can you please make a video of creating Mobile responsive Horizontal carousel for blogging website? Please

[@kashmirtechtv2948]

What's the purpose of position relative on 11 48?

[@naveedali-kx3lg]

why you put position:relative in timeline ul li

[@kashmirtechtv2948]

What if we have to make it dynamic then what about even, odd??

[@syaroan]

I don´t know, but I can´t create a line. Can you pls help me?

[@coolgadgetz8788]

nice bro.. Thanks. Pls can a timeline be animated to scroll automatically without a scroll bar?

[@WebTutorialGuru]

great content keep it up #WebTutorialGuru

[@kousikraj4597]

cool

[@webcifar]

Thanks

[@Meirovsky]

Hey man! Very nice work. Can i ask you one question? How can i do to add opacity when a div element is not been spotted on?

[@webcifar]

May be you can use "Intersection Observer".

[@jameswu2146]

could you put the code in the comments or something please, i dont get how to do the part

[@webcifar]

Check the description.

[@rushipatel9808]

👍

[@webcifar]

Thanks for the thumbsup.

[@IM-gt2lf]

Hello, is it allowed to use the timeline fo free? Great job!

[@webcifar]

Yes

[@shrutiomatic]

15:34 timeline line

[@mykalimba]

This video was made in 2020, and you're using CSS "float" and "clear" for positioning things? 🤔