Home
CSS
HTML

Build a Interactive Timeline using HTML, CSS and JavaScript

Interactive Timeline | Coding Zemigle

An interactive timeline is an excellent way to visually present chronological events, making it easier for users to understand a sequence of events or the evolution of a particular subject. Whether it's showcasing a company’s history, the progression of a project, or the development of technology, a timeline allows viewers to engage with the content in a clear and organized way.

In this project, we'll focus on creating a dynamic and interactive timeline using three core technologies: HTML, CSS, and JavaScript. HTML will be responsible for building the structure, CSS will ensure the timeline is visually appealing, and JavaScript will add interactivity, allowing users to interact with timeline events, reveal hidden information, and navigate through the timeline seamlessly.


Before we start coding, it's important to set up the necessary project structure and resources. This will ensure that our timeline is well-organized and easy to develop. In this section, we’ll create the basic folder structure, set up the HTML boilerplate, and link external resources such as stylesheets and JavaScript libraries.

Step 01: Setting up the HTML structure

With the project set up, the next step is to build the core structure of the timeline using HTML. The timeline will consist of several events or milestones, each represented by a date and a description. We will structure these events in a way that makes it easy to style and add interactivity later with CSS and JavaScript.

✲    index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interactive Timeline | Coding Zemigle</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="timeline">
        <div class="timeline-container left">
            <div class="timeline-content">
                <h2>Event 1</h2>
                <p>Description for event 1.</p>
            </div>
        </div>
        <div class="timeline-container right">
            <div class="timeline-content">
                <h2>Event 2</h2>
                <p>Description for event 2.</p>
            </div>
        </div>
        <div class="timeline-container left">
            <div class="timeline-content">
                <h2>Event 3</h2>
                <p>Description for event 3.</p>
            </div>
        </div>
        <div class="timeline-container right">
            <div class="timeline-content">
                <h2>Event 4</h2>
                <p>Description for event 4.</p>
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>



This HTML structure gives us a strong foundation for the timeline. In the next section, we’ll apply CSS to make the timeline visually appealing and responsive across different devices. Let me know when you’re ready to proceed with the styling!

Now that we have the basic HTML structure for our interactive timeline, the next step is to bring it to life with CSS. We’ll style the timeline container, individual events, and add visual elements like lines and icons to enhance the design. We will also ensure the timeline is responsive for different screen sizes.

Step 02: Style the Interactive Timeline project with CSS

Before we dive into the specific timeline design, let's set up some basic styles for the entire document to ensure everything looks neat and consistent.

✲    style.css
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

body {
    background-color: #f4f4f4;
    padding: 20px 0;
}

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

.timeline-container {
    padding: 15px 30px;
    position: relative;
    width: 100%;
}

.timeline-container.left {
    left: 0;
}

.timeline-container.right {
    left: 50%;
}

.timeline-container::after {
    content: "";
    position: absolute;
    width: 25px;
    height: 25px;
    right: -13px;
    background-color: white;
    border: 4px solid #FF9F55;
    top: 15px;
    border-radius: 50%;
    z-index: 1;
}

.timeline-container.left::after {
    left: -13px;
}

.timeline-content {
    padding: 20px;
    background-color: white;
    position: relative;
    border-radius: 6px;
    border: 1px solid #ddd;
}

h2 {
    font-size: 20px;
    margin-bottom: 10px;
}

p {
    font-size: 16px;
}

@media screen and (max-width: 768px) {
    .timeline-container {
        width: 100%;
        left: 0;
    }

    .timeline-container.right {
        left: 0;
    }

    .timeline-container::after {
        left: 50%;
        margin-left: -13px;
    }
}



With this CSS, your timeline will be visually appealing, interactive, and responsive. The alternating design with a central timeline line gives it a modern look, and the hover effects make it engaging for users. Let me know if you need any further adjustments!


Step 03: Adding Interactivity with JavaScript

A popular way to add interactivity is to reveal timeline events as users scroll down the page. We’ll use JavaScript to detect when an event enters the viewport and then add a class that triggers a CSS animation.

✲    script.js
document.querySelectorAll('.timeline-container').forEach(item => {
    item.addEventListener('click', () => {
        const content = item.querySelector('.timeline-content');
        content.classList.toggle('active');
    });
});

With this JavaScript, your timeline will not only be interactive and visually appealing, but it will also provide users with dynamic features like scrolling animations, click-to-expand events, and filtering based on categories. Let me know if you need further customization!

With these skills, you can create timelines for any type of content—historical events, project milestones, or even personal achievements. This timeline structure can be further customized by adding additional JavaScript features, such as drag-and-drop functionality, AJAX loading, or even integrating with external APIs to pull in data.

Now that you’ve completed this timeline project, you’re equipped with the tools to take on even more advanced web development tasks. Keep experimenting with different designs and interactivity to take your projects to the next level!