Create Timeline Design For Website Using HTML & CSS | Responsive Web Design

[@SlickFX_Trader]

*Just became a member because this is the best tutorial I have have ever seen* and actually came in useful on my site. Literally have this CSS on my site right now! I will absolutely purchase your course!

[@Ericpricing]

Thanks Buddy, Am currently working on a website project and i really appreciate you for this video - it has contributed to one of the website section MUCH LOVE FROM KENYA🌎

[@Traderflow_com]

Yes, I feel the same way! Very very helpful!

[@Merry_say]

Thank you, this was really useful. Sadly neither me nor my friend know shit about coding so we gave up but you gave us a nice input and you seem like a very nice person. Greetings from beautiful Poland

[@DevWis]

no one knows shit about about coding at the beginning. it compounds. you just have to show up everyday.

[@rahulnishad2752]

Bro it's awesome plzz aise hi content late rahiye

[@SlickFX_Trader]

Thanks!

[@GreatStackDev]

Thanks for supporting my channel

[@SlickFX_Trader]

@@GreatStackDev no prob, It's a great channel but I can not follow any instructions on how to node.js integrate with VSC, are there any other instructions information's you recommend I look at?

[@nabilanuzhatmoin5392]

Thank you for explaining and showing so easily

[@destinyidris8473]

Great ❤❤

[@ezizhummedov3607]

Love it. Next time can you split the screen so we can follow while you design the webpage? Thanks.

[@infinitegaming2541]

Hey You are the master. Please make the css tutorial (Beginning to Advance Level). Please.

[@computerlearning6455]

Please bro we want more Video, please don't stop.... Never Give Up, 🔥🔥

[@ramyavaishnaviradhakrishna3900]

let poll = { question: "Which team will win the IPL Trophy in 2025?", answers: ["CSK", "RCB", "SRH", "RR"], pollcount: 100, answerweight: [60, 10, 20, 10], //sum = 100 selectanswer: -1 }; let polldom = { question: document.querySelector(".poll .question"), answers: document.querySelector(".poll .answers") }; polldom.question.innerText = poll.question; polldom.answers.innerHTML = poll.answers.map(function(answer, i) { return ` ${answer} `; }).join(""); function showresults() { let answers = document.querySelectorAll(".poll .answers .answer"); for (let i = 0; i < answers.length; i++) { let percentage = 0; if (i === poll.selectanswer) { percentage = Math.round( (poll.answerweight[i] + 1) * 100 / (poll.pollcount + 1) ); } else { percentage = Math.round( (poll.answerweight[i]) * 100 / (poll.pollcount + 1) ); } answers[i].querySelector(".percentage_bar").style.width = percentage + "%"; answers[i].querySelector(".percentage_value").innerText = percentage + "%"; } } function markanswer(i) { poll.selectanswer = +i; try { document.querySelector(".poll .answers .answer.selected") .classList.remove("selected"); } catch (msg) {} document.querySelectorAll(".poll .answers .answer")[+i].classList.add("selected"); showresults(); }

[@danc01]

Is this part of a series or a stand alone. I really enjoyed this tutorial

[@renanmalato]

do you have a video revealling that on scrolling?

[@rosalindajerryboy1287]

Thanks for this man. Truly helped!

[@Vaibhav_Upadhyay20]

Thank you so much sir ❤️

[@nobodyeverybody8437]

Thumbs up bro 👍👋👋👋👋

[@Leeeph]

Really cool vid, I was assigned to follow along to it for Coding class in school. Definitely recommend if you are into coding and writing, this was very fun.

[@codedreamfullstuckdevelope8096]

Super sir very nice 😊 and helpful 👍

[@ikka433]

Full stack developer not full stuck 🙃

[@ikka433]

I also found this video very helpful.

[@ramyavaishnaviradhakrishna3900]

okay sir

[@md_anees07]

love your content brother...........keep posting

[@muhammadnajibbala4059]

You are the best my good man

[@marvelousncube]

Love you man

[@советник-б9ф]

looks cool))

[@Nanashi-rq7lk]

Perfect Video

[@Harshgamerworld]

First view

[@worlz_]

how to trigger the keyframes when we get to the timeline section? because they are triggered as soon as the page is loaded, so I don't have time to see the animation of the keyframes since my section is at the bottom of my page

[@sherylrenny2141]

lmk when u get this

[@as01331]

​@@sherylrenny2141 Use animation-timeline property and set it's value to view(); then add another property called animation-range and set it's value to entry(0) cover 40%;

[@IbrahimSikder-e3x]

A million of thank you so much.

[@djjordis]

Thanks Boddy, very useful.

[@DevanshuAugusty]

awesome man

[@sydney7400]

Thanks again!

[@afflictgamer]

Sir make a video on parallax scrolling effect please

[@Efizzy_brendan]

How does it work, is it whenever you refresh or when you scroll down to the current page? 🤔

[@sherylrenny2141]

lmk when u get this

[@bekuxui4081]

thank you for very much !👍

[@sudhanhunt3317]

timeline::after is not working for me. I could not able to add the vertical line. Can someone help here ?

[@followthewhiterabbit7559]

I also have the same issue, did you solve your issue ?

[@semnomeporenquanto2]

Man, how did you learn to do all that stuff? I can't believe it turned out so amazing just with CSS, I really need to get better to be able to do all this for myself. How long did it take you to learn CSS at that level? And thanks for the video!

[@mariohermes2115]

My dude, he just used the W3Schools tutorial, it's all there.

[@mohammadsyiedbinsalim5177]

where is the source code?

[@vikas_chaudhary_23]

have u found the source code?

[@icrmsoftware59]

Good tutorial

[@silas_wolf]

Thank you, great video.

[@darshilkumar7816]

too good

[@SalmanShah95]

Awesome

[@sdfsfsfd437]

👋👋👋👋👋👋

[@Japleen_abc]

Thank you sir

[@ramyavaishnaviradhakrishna3900]

let poll = { question: "Which team will win the IPL Trophy in 2025?", answers: ["CSK", "RCB", "SRH", "RR"], pollcount: 100, answerweight: [60, 10, 20, 10], //sum = 100 selectanswer: -1 }; let polldom = { question: document.querySelector(".poll .question"), answers: document.querySelector(".poll .answers") }; polldom.question.innerText = poll.question; polldom.answers.innerHTML = poll.answers.map(function(answer, i) { return ` ${answer} `; }).join(""); function showresults() { let answers = document.querySelectorAll(".poll .answers .answer"); for (let i = 0; i < answers.length; i++) { let percentage = 0; if (i === poll.selectanswer) { percentage = Math.round( (poll.answerweight[i] + 1) * 100 / (poll.pollcount + 1) ); } else { percentage = Math.round( (poll.answerweight[i]) * 100 / (poll.pollcount + 1) ); } answers[i].querySelector(".percentage_bar").style.width = percentage + "%"; answers[i].querySelector(".percentage_value").innerText = percentage + "%"; } } function markanswer(i) { poll.selectanswer = +i; try { document.querySelector(".poll .answers .answer.selected") .classList.remove("selected"); } catch (msg) {} document.querySelectorAll(".poll .answers .answer")[+i].classList.add("selected"); showresults(); }

[@TheBoysMemes123]

love you bro

[@UJJWALSHARMA-bt8ip]

Sir, I have made the timeline using your video ..but in a separate HTML, CSS file it working correctly, when am trying to add the code in my project using copy paste everything thing is working.. but container and fonts are displaying in a large way not as in video but on separate file they are exactly as same in video. How to avoid this CSS Conflict..am already renamed the containers because I used containers as a class name in my above code.. But still didn't succeed and the problem persist. please help!

[@danc01]

I'm trying to add a circle to the top and bottom of the time line and I'm not sure where to add the HTML for that.

[@TheBoysMemes123]

thanks😍🤩😍🥰😍😍😍🤩😗😗😘🤩😍😍🤩

[@hungdo9071]

hi sir, timeline it auto scroll?

[@bethanimoorhouse8611]

When creating the line using timeline::after, nothing shows up on my screen? Everything else has worked perfectly, so thank you for that! Am I potentially doing something wrong? here is my code .. .timeline::after{ content: ''; position: absolute; width: 6px; height: 100%; background-color: white; top: 0; left: 50%; margin-left: -3px; z-index: -1; }

[@amazingango9103]

I reckon its in ur content part, you put speech marks ". but i think you're meant to do either Option A: content : ' '; or Option B: content: " "; I'm pretty sure thats the solution, let me know if it works!

[@OppositeScoped]

@@amazingango9103 I have the same Problem and i tried to change it to Speech mark but it didn't work

[@OppositeScoped]

I think it has some thing to do with the z-index, maybe try to change it to like 1 or something

[@shreyanshpandey.3281]

make z-index positive may it work.

[@shubhangisrivastava6654]

Did you get a solution for this? It isn't working for me too :(

[@Abhishek_1105]

Ye effect agar on scroll hota toh mast lagta

[@ramyavaishnaviradhakrishna3900]

hindi laam theriyaathu

[@roselynthalathara958]

how would you make this sortable? like select only asian car manufacturers

[@Japleen_abc]

From canada

[@ramyavaishnaviradhakrishna3900]

suyper brooo

[@EdytzCreationsHub]

I'm a beginner in web design and I'm having trouble on how to submit websites to my clients, can you show the steps on how to submit to clients

[@GreatStackDev]

add you project folder in a ZIP file and send them, they can extract the zip file and open the index.html file with web browser to preview the website. But if they want it to publish it online, then they need to provide the Domain name and web hosting here is the video to upload website online: kzbin.info/www/bejne/ZpTWg6CjnLNmZ9E

[@ak.nishat8869]

Please create music websites by html css javascript

[@OCEMTechZone]

🎉

[@TheSuccessfulLife1115]

no grid?

[@Custom-Tkinter]

Why didn't you gave hero class to div as in every video your div as hero.....

[@KoKuRyuOfficial]

Do you have grid photo lightbox like facebook?

[@GreatStackDev]

here it is: kzbin.info/www/bejne/apjGqmCniZ6efdk

[@rohitbodhankar2199]

the animation of isn't working of the container part im only able to see the line going form top to bottom

[@jessicamonteirobueno3406]

Could you please provide the complete code or js?

[@drewnorman3632]

Do you have the source code for this project to help with learning?

[@projectend8705]

how to make flipkart like timeline?

[@francescomerenda2970]

ti amo

[@Mr_Addy1]

anyone can help me mine one is not showing respnsiveness

[@sanarashid7386]

@4:32

[@santiagobulamosquera7255]

The animation delay is not working to me. Someone knows the reason?

[@akheelchitaaa]

is there a source code ?

[@tayyabafzal7296]

Sir, please make a website using Bootstrap 5

[@waseemmalik3281]

Can we get source code please?

[@vikas_chaudhary_23]

can anyone provide the source code?

[@PiyushKumar-ey8ub]

where is source code ?? any one can share the source code?

[@harish931]

Source Code ??

[@Sinha.ritesh]

Fantastic

[@GreatStackDev]

Thank you so much 😀