Building a responsive timeline with HTML and CSS

In web design, timelines can be a powerful tool for presenting information in a clear and concise manner. A responsive timeline is particularly useful because it can be viewed on a variety of devices, from desktop computers to mobile phones. In this tutorial, we will walk you through the steps of building a responsive timeline with HTML and CSS.

Step 1: Set up the HTML structure

The first step is to create the basic HTML structure of the timeline. In this example, we will use an unordered list (ul) to contain the timeline items, with each item being a list item (li) element. The code below shows the basic HTML structure:

<div class="timeline">
  <ul>
    <li>
      <div class="timeline-content">
        <h2>Event Title</h2>
        <p>Event description goes here</p>
        <span class="timeline-date">Event date</span>
      </div>
    </li>
    <li>
      <div class="timeline-content">
        <h2>Event Title</h2>
        <p>Event description goes here</p>
        <span class="timeline-date">Event date</span>
      </div>
    </li>
    <!-- add more timeline items here -->
  </ul>
</div>

Note that each list item contains a div with a class of "timeline-content". This is where we will add the event information.

Step 2: Style the timeline

Now that we have the HTML structure in place, we can style the timeline with CSS. We will start by styling the basic elements of the timeline, such as the list items and the timeline content.

.timeline {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}

.timeline ul {
  list-style: none;
  padding: 0;
}

.timeline li {
  position: relative;
  width: 50%;
  padding: 50px 0;
  float: left;
  clear: both;
}

.timeline-content {
  position: relative;
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 5px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
}

.timeline-date {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 14px;
  font-weight: bold;
  color: #999;
}

In the code above, we set the position of the timeline container to relative and give it a maximum width of 1200 pixels with a margin of 0 auto to center it on the page. We then set the list style of the unordered list to none and remove any padding.

Next, we style the list items to be 50% of the width of the timeline container and set some padding. We also set the float property to left and clear both to ensure that the items are aligned properly. We then style the timeline content with a background color, border-radius, and box-shadow to give it a card-like appearance.

Finally, we add the timeline date to the content and position it absolutely in the top right corner.

Step 3: Add media queries for responsiveness

To make the timeline responsive, we need to add media queries to adjust the layout for different screen sizes. We will use two breakpoints in this example: one for screens up to 768 pixels and another for screens larger than 768 pixels.

@media screen and (max-width: 768px) {
  .timeline li {
    width: 100%;
    padding: 20px 0;
  }
  .timeline-content {
    padding: 10px;
  }
    
  .timeline-date {
    position: static;
    margin-top: 10px;
  }
}
    
@media screen and (min-width: 769px) {
  .timeline li {
    width: 50%;
    padding: 50px 0;
  }
    
  .timeline-content {
    padding: 20px;
  }
    
  .timeline-date {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 14px;
    font-weight: bold;
    color: #999;
  }
}

In the first media query, we set the width of the list items to 100% and reduce the padding. We also change the position of the timeline date to static and add a margin to give it some space.

In the second media query, we reset the width of the list items to 50% and increase the padding. We also position the timeline date absolutely again to maintain the original layout.

Step 4: Add animations (optional)

To add some visual interest to the timeline, we can use CSS animations to fade in each timeline item as the user scrolls down the page. We will use the Animate.css library to simplify the animation process.

/* add this to your HTML head section to include Animate.css */
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />

/* add this CSS to your timeline styles */
.timeline li {
  opacity: 0;
  transition: opacity 0.8s ease;
}

.timeline li.in-view {
  opacity: 1;
}

In the code above, we set the initial opacity of the list items to 0 and add a CSS transition to gradually fade them in over 0.8 seconds. We then use JavaScript to add a class of "in-view" to each list item when it comes into view on the screen.

// add this JavaScript to your page
const timelineItems = document.querySelectorAll('.timeline li');

function isInViewport(element) {
  const rect = element.getBoundingClientRect();
  return (
  rect.top >= 0 &&
  rect.left >= 0 &&
  rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
  rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
}

function runAnimation() {
  timelineItems.forEach((item) => {
  if (isInViewport(item)) {
    item.classList.add('in-view');
  }
  });
}

window.addEventListener('scroll', runAnimation);

In the JavaScript code above, we define a function called "isInViewport" that checks if an element is currently visible on the screen. We then define a function called "runAnimation" that adds the "in-view" class to each list item that is currently in view. Finally, we add an event listener to the window object that triggers the animation function whenever the user scrolls the page.

Conclusion

In this tutorial, we walked through the steps of building a responsive timeline with HTML and CSS. We also added optional animations to fade in each timeline item as the user scrolls down the page. With these techniques, you can create beautiful and functional timelines that work well on all devices.