Responsive Vertical Timeline Using HTML CSS and JavaScript

7 min readOct 7, 2023

let’s look at how to create a responsive timeline in HTML and CSS, When you display the previous details such as experiences or educational details inside your website you need to use a vertical timeline.

recently, I’ve made a complete tutorial on it, so, I’m going to share with you how you can do that using HTML and CSS3. It’s a simple project, but it’s very helpful to improve your HTML and CSS logic.

Responsive design is a key component of modern web development, and it is essential to ensure that websites display properly on all devices, regardless of their screen size or orientation. One popular way to display information in a responsive manner is through the use of a vertical timeline.

A vertical timeline is a visual representation of a sequence of events or milestones, arranged in chronological order from top to bottom. It can be a powerful tool for storytelling, especially when paired with engaging visuals and succinct descriptions.

In this article, we will explore creating a responsive timeline in HTML and CSS. This timeline will be easy to customize and will adapt to various screen sizes and orientations.

Step 1: Setting up the HTML structure

To start, we need to create the basic HTML structure for the timeline. We will use an unordered list with the class “timeline” to create our timeline. Each timeline item will be a “li” element.

Inside each “timeline”, we will create child elements div to hold the text content. This structure will allow us to keep the text and visual content separate, making it easier to style each component individually.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Responsive timeline using HTML CSS and JavaScript</title>
    <link rel="stylesheet" href="css/style.css" />
    <script defer src="js/script.js"></script>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
    />
  </head>
  <body>
    <section id="timeline">
      <h2 class="heading">Responsive Timeline</h2>
      <ul>
        <li>
          <i class="fa-brands fa-html5"></i>
          <div class="box">
            <h3 class="title"><span class="year">2013</span>HTML Language</h3>
            <p>
              Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quo
              possimus in ipsum iure eaque atque esse commodi molestiae, et
              odio!
            </p>
            <button>Read More</button>
          </div>
        </li>
        <li>
          <i class="fa-brands fa-css3"></i>
          <div class="box">
            <h3 class="title"><span class="year">2014</span>CSS Language</h3>
            <p>
              Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quo
              possimus in ipsum iure eaque atque esse commodi molestiae, et
              odio!
            </p>
            <button>Read More</button>
          </div>
        </li>
        <li>
          <i class="fa-brands fa-js"></i>
          <div class="box">
            <h3 class="title">
              <span class="year">2015</span>JavaScript Programming
            </h3>
            <p>
              Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quo
              possimus in ipsum iure eaque atque esse commodi molestiae, et
              odio!
            </p>
            <button>Read More</button>
          </div>
        </li>
        <li>
          <i class="fa-solid fa-database"></i>
          <div class="box">
            <h3 class="title"><span class="year">2016</span>SQL Server</h3>
            <p>
              Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quo
              possimus in ipsum iure eaque atque esse commodi molestiae, et
              odio!
            </p>
            <button>Read More</button>
          </div>
        </li>
        <li>
          <i class="fa-solid fa-code"></i>
          <div class="box">
            <h3 class="title"><span class="year">2017</span>C# Programming</h3>
            <p>
              Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quo
              possimus in ipsum iure eaque atque esse commodi molestiae, et
              odio!
            </p>
            <button>Read More</button>
          </div>
        </li>
        <li>
          <i class="fa-brands fa-php"></i>
          <div class="box">
            <h3 class="title"><span class="year">2018</span>Php Programming</h3>
            <p>
              Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quo
              possimus in ipsum iure eaque atque esse commodi molestiae, et
              odio!
            </p>
            <button>Read More</button>
          </div>
        </li>
        <li>
          <i class="fa-brands fa-react"></i>
          <div class="box">
            <h3 class="title"><span class="year">2020</span>React JS</h3>
            <p>
              Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quo
              possimus in ipsum iure eaque atque esse commodi molestiae, et
              odio!
            </p>
            <button>Read More</button>
          </div>
        </li>
        <li>
          <i class="fa-brands fa-node-js"></i>
          <div class="box">
            <h3 class="title"><span class="year">2022</span>Node JS</h3>
            <p>
              Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quo
              possimus in ipsum iure eaque atque esse commodi molestiae, et
              odio!
            </p>
            <button>Read More</button>
          </div>
        </li>
      </ul>
    </section>
  </body>
</html>

Step 2: Adding the CSS styles

Next, we need to style our timeline using CSS. We will start by setting the overall styling for the “timeline” class, including the background color, padding, and font size.

To ensure that the timeline is responsive, we will use media queries to adjust the styling at different breakpoints. For example, we might want to change the font size or padding on smaller screens to make the timeline more readable.

We will also style the “li” class, setting the width, height, and margin for each item. Additionally, we will add a border to each item to create a visual separation between the timeline entries.

Inside each “timeline” div, we will add styles for the text content, including the font family, size, and color. We can also adjust the margin and padding to create a more readable layout.

Finally, inside the “timeline-image” div, we will add styles for any visual content, such as images or icons. We can adjust the size and position of the image to create a visually appealing timeline.

@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  background-color: #17202a;
  color: #fff;
  overflow-x: hidden;
  font-family: "poppins", sans-serif;
}

.heading {
  color: #f4d03f;
  padding: 1rem 0;
  text-align: center;
  font-size: 3rem;
  box-shadow: 10px 5px 10px rgba(0, 0, 0, 0.5);
}

.title {
  box-shadow: 10px 5px 10px rgba(0, 0, 0, 0.5);
  padding: 1rem 0rem 1rem 0.7rem;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  color: #fff;
  font-size: 1.3rem;
  background-color: #de3163;
}

.year {
  background-color: #fff;
  padding: 0.2rem 0.8rem;
  border-radius: 10px;
  color: #2c3e50;
  font-size: 0.9rem;
  margin: 0 0.5rem;
}

#timeline p {
  padding: 1rem 0 1rem 1rem;
  color: #000;
}

#timeline button {
  margin: 0.5rem 0rem 1rem 1rem;
  outline: none;
  border: 1px solid #ddd;
  padding: 0.5rem 1rem;
  border-radius: 50px;
  background: transparent;
  transition: all 0.3s ease-in;
  font-family: inherit;
  cursor: pointer;
}

#timeline button:hover {
  background-color: #17202a;
  color: #fff;
}

#timeline ul {
  padding: 50px 0;
}

/* create a line */
#timeline ul li {
  list-style: none;
  position: relative;
  width: 7px;
  margin: 0 auto;
  padding-top: 50px;
  background-color: #58d68e;
}

#timeline ul li .box {
  position: relative;
  bottom: 0;
  width: 450px;
  background-color: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  transform: translateX(400%);
  transition: all 0.5s ease-in-out;
}

/* right side */
#timeline ul li:nth-child(odd) .box {
  left: 50px;
}

/* left side */
#timeline ul li:nth-child(even) .box {
  left: -500px;
  transform: translateX(-400%);
}

#timeline ul li .box.show {
  transform: translateX(0%);
  transition: all 0.5s ease-in-out;
}

#timeline ul li i {
  position: absolute;
  left: 50%;
  top: 20;
  width: 45px;
  height: 45px;
  background: #2c3e50;
  transform: translateX(-50%);
  border-radius: 50%;
}

#timeline .fa-brands,
#timeline .fa-solid {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  color: #f4d03f;
}

/* arrow */
#timeline .box:before {
  content: "";
  position: absolute;
  top: 5px;
  width: 0;
  right: 0;
  border-style: solid;
}

#timeline ul li:nth-child(odd) .box:before {
  left: -15px;
  border-width: 8px 16px 8px 0;
  border-color: transparent #de3163;
}

#timeline ul li:nth-child(even) .box:before {
  right: -15px;
  border-width: 8px 0px 8px 16px;
  border-color: transparent #de3163;
}

@media (max-width: 900px) {
  #timeline ul li .box {
    width: 350px;
  }

  #timeline ul li:nth-child(even) .box:beofre {
    left: -15px;
    border-width: 8px 16px 8px 0px;
    border-color: transparent #de3163;
  }

  /* right side */
  #timeline ul li:nth-child(odd) .box {
    left: 40px;
  }

  /* left side */
  #timeline ul li:nth-child(even) .box {
    left: -390px;
  }
}

@media (max-width: 768px) {
  #timeline ul li {
    margin-left: 30px;
  }

  #timeline ul li .box {
    width: calc(100vw -90px);
  }

  /* left side conte */
  #timeline ul li:nth-child(even) .box {
    left: 40px;
  }

  #timeline ul li:nth-child(even) .box:before {
    left: -15px;
    border-width: 8px 16px 8px 0px;
    border-color: transparent #de3163;
  }
}

Step 3: JavaScript

If you want to add the scroll animations, so, you need to use JS. You can check the codes that I mentioned on below.

"use strict";

const boxes = document.querySelectorAll(".box");

window.addEventListener("scroll", DisplayContent);
DisplayContent();

function DisplayContent() {
  const TriggerBottom = (window.innerHeight / 5) * 4;

  boxes.forEach((box) => {
    const topBox = box.getBoundingClientRect().top;

    if (topBox < TriggerBottom) {
      box.classList.add("show");
    } else {
      box.classList.remove("show");
    }
  });
}

Step 4: Testing and tweaking

Once we have created our HTML and CSS, we can test our timeline on different devices and screen sizes to ensure that it is responsive and displays correctly. We may need to make adjustments to the CSS styles to ensure that the timeline looks good on all devices.

You May Also Like:

One way to test the timeline is to use a tool like Chrome DevTools to simulate different screen sizes and orientations. We can also test the timeline on physical devices, such as smartphones and tablets, to see how it looks in real-world conditions.

Create a Responsive Timeline in HTML and CSS

here is a video tutorial about how to create a responsive timeline in HTML and CSS from scratch. It’s the vertical responsive timeline. hope this tutorial is helpful and beneficial for you.

Conclusion

In conclusion, a responsive vertical timeline is a powerful tool for visual storytelling on the web. By using HTML and CSS, we can create a timeline that adapts to different devices and screen sizes, making it easy for users to engage with our content.

By following the steps outlined in this article, we can create a customizable and responsive timeline that is visually appealing and easy to use. With a little bit of creativity and experimentation, we can create timelines that truly stand out and engage our audience.

Responsive Vertical Timeline Using HTML CSS and JavaScript

Create a Responsive Timeline in HTML and CSS

Written by Arhaan Ali

No responses yet