In this blog post, we will explore how to create a responsive vertical timeline using HTML, CSS, and JavaScript. This timeline will feature animations that allow content to slide in from the left and right as the user scrolls. Let’s dive into the details of building this timeline step by step. ## Setting Up the Project To start, we will create three main files in our project directory: - `index.html` - `style.css` - `script.js` We will also use an `MD` file to add content to our timeline. ## HTML Structure First, we need to set up the HTML structure for our timeline. Here’s how we can do it: ```html

Responsive Timeline

HTML
2012
Content about HTML.
CSS3
2014
Content about CSS3.
JavaScript
2016
Content about JavaScript.
C#
2017
Content about C#.
PHP
2020
Content about PHP.
React
2021
Content about React.
Node.js
2022
Content about Node.js.

``` This structure includes a section for the timeline, a heading, and an unordered list containing timeline items. Each item has a title, year, content, and a button. ## CSS Styling Next, we will style our timeline using CSS. Here’s a basic setup: ```css body { margin: 0; font-family: 'Open Sans', sans-serif; background-color: #f4f4f4; } timeline { position: relative; padding: 50px 0; } .timeline ul { list-style-type: none; padding: 0; } .timeline .item { position: relative; margin: 20px 0; } .timeline .box { background-color: white; padding: 20px; border-radius: 5px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } .timeline .title { font-weight: bold; } button { margin-top: 10px; padding: 10px 15px; border: none; background-color: #007BFF; color: white; border-radius: 5px; cursor: pointer; } ``` This CSS will give our timeline a clean and modern look, with a white background for each timeline item and a button styled for interaction. ## Adding JavaScript for Animation To make our timeline interactive, we will use JavaScript to add animations. Here’s a simple script to handle the scroll event: ```javascript const boxes = document.querySelectorAll('.box'); window.addEventListener('scroll', checkBoxes); function checkBoxes() { const triggerBottom = window.innerHeight / 5 * 4; boxes.forEach(box => { const boxTop = box.getBoundingClientRect().top; if (boxTop < triggerBottom) { box.classList.add('show'); } else { box.classList.remove('show'); } }); } ``` This script listens for the scroll event and checks the position of each box. If the box is in view, it adds a class to trigger the animation. ## Final Touches To complete the timeline, we need to add some CSS for the `.show` class to handle the animation: ```css .box { transform: translateX(-400%); transition: transform 0.5s ease-in-out; } .box.show { transform: translateX(0); } ``` This CSS will animate the boxes from the left when they come into view. ## Conclusion In this blog post, we have created a responsive vertical timeline using HTML, CSS, and JavaScript. We structured the HTML, styled it with CSS, and added animations with JavaScript to enhance user interaction. This timeline can be a great addition to any website, providing a visually appealing way to present chronological information. Thank you for following along, and happy coding!

Responsive Timeline

HTML

CSS3

JavaScript

C#

PHP

React

Node.js