Making a simple CSS timeline for beginners!

A little bit of backstory

While I was designing my own portfolio, I was thinking to create a dedicated timeline for it. Timelines always looked complicated, to be honest. While I searched for timelines across the internet, I came to know that there are multiple ways of creating CSS Timelines.

A few ways to create timeline:

Using Flexboxes
Using Grid
Using an Unordered List (Seriously?)
Positioning divs using transforms

We'll be using grids to create a CSS timeline, which is probably the most beginner friendly ways to get started with CSS Timelines (I hope).

Creating the basic structure

We'll start with some basic HTML to create a barebones structure for our Timeline.

<section class="full-page">
<!--This is the main container that contains the whole timeline.-->

<div class="timeline">

          <!--Well, The reason for this div is to fill space. 
This space is technically used for keeping dates, 
but I didn't find the need for dates. However, I'll provide 
you the styling for dates, so that you can use it if you 
wanted to.-->
                  <div class="timeline-empty">
                  </div>

<!--This is the class where the timeline graphics are 
housed in. Note that we have timeline-circle 
here for that pointer in timeline.-->

               <div class="timeline-middle">
                   <div class="timeline-circle"></div>
               </div>
               <div class="timeline-component timeline-content">
                <h3>HTML</h3>
                <p>Some Text</p>
           </div>
                <div class="timeline-component timeline-content">
                         <h3>CSS</h3>
                         <p>Some Text.</p>
                </div>
                <div class="timeline-middle">
                    <div class="timeline-circle"></div>
                </div>
                <div class="timeline-empty">
                </div>

                <div class="timeline-empty">
                </div>

               <div class="timeline-middle">
                   <div class="timeline-circle"></div>
               </div>
               <div class=" timeline-component timeline-content">
                <h3>Javascript</h3>
                <p>Some Text.</p>
           </div>

       </div>
    </div> 
</section>

I have explained majority part of the code in the comment blocks in the above code, in case you felt it wasn't adequate enough, let me know in the comments below.

The first half of making timeline is over. On to CSS!

Styling the timeline.

Right now, our timeline looks like this:

Not a great thing to look at. So, we'll use CSS to make our timeline look cool.

I've used Sass here, which you can see in the variables here, but there's no much deviation from regular CSS.

.full-page{
/*I have used this to center the whole timeline on the screen.*/
  display: flex;
  align-items: center;
  justify-content: center;
}

/*The timeline container has a minimal width
than the main container to make text look more dressed up.*/
.timeline{
  width: 80%;
  height: auto;
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

/*This is the container for timeline content. Those are its
styling. The include statement is used in sass to copy 
a certain bunch of rules. This is related to 
styling and nothing to worry at your end.*/

.timeline-content{
  padding: 20px;
  @include neu-card; 
  margin-bottom: 20px;
  border-radius: 6px ;
}

/*Adding some margin for all components in
the timeline. The timeline content is used 
for text blocks exclusively.*/

.timeline-component{
  margin: 0px 20px 20px 20px;
}

/*This is where, I've added responsiveness. Before 
this I added display: flex to show it as an 
array of text blocks. But if the screen size is
 huge enough for a timeline, you can use media 
queries to add styles that are apt for larger 
screens, which is adding a timeline. 1fr 3px
1fr means that there will be 3 columns with 2 
columns equally sized with a column of width 3px
in the middle.
*/

@media screen and (min-width: 768px) {
  .timeline{
    display: grid;
    grid-template-columns: 1fr 3px 1fr;
  }

/*Adding the styles for the timeline line and pointer.*/

  .timeline-middle{
    position: relative;
    background-image: $linear-grad;
    width: 3px;
    height: 100%;
  }

/*Adding styles for that circle pointer. using
some transforms and positioning to keep it center*/
  .timeline-circle{
    position: absolute;
    top: 0;
    left: 50%;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-image: $linear-grad;
    transform: translateX(-50%);

  }
}

And marks the end of this code. The comments in the code block are hopefully helpful in explaining the code well to you.

This is how my version of the code looks (You can find the pure CSS version in this embed, but the formatting is pretty messed:

Try resizing the result window, you'll see the magic for yourself.

There might be much efficient ways to do the same thing (Using flexboxes), but since this is a tutorial oriented for beginners, I've used grids.

Grids are really easy to understand comparatively. That's why I chose grids over flexboxes.

However, if you need a flexbox version of this, there are ton of tutorials on the internet. Who knows, maybe I could create a flexbox version of this article soon!

Stay tuned for more updates.

Blog

Making a simple CSS timeline for beginners!

Divyesh Kamalanaban

A little bit of backstory

A few ways to create timeline:

Creating the basic structure

Styling the timeline.

Join Our Newsletter. No Spam, Only the good stuff.

Related