How can I create a basic timeline in HTML and CSS with dots?

Creating a basic timeline using HTML and CSS with dots involves structuring your content with appropriate tags and then styling them. Here's how you can achieve this:

1. HTML Structure:

- You'll typically use a container element (like a <div>) to hold the entire timeline. Inside this container, you will create individual timeline items, each containing a dot and associated content.

- The structure might look something like this:

<div class="timeline">
  <div class="timeline-item">
    <div class="timeline-dot"></div>
    <div class="timeline-content">
      <h3>Event Title 1</h3>
      <p>Event Description 1.</p>
    </div>
  </div>
  <div class="timeline-item">
    <div class="timeline-dot"></div>
    <div class="timeline-content">
      <h3>Event Title 2</h3>
      <p>Event Description 2.</p>
    </div>
  </div>
  <!-- Additional timeline items -->
</div>

2. CSS Styling:

- Use CSS to create a vertical line for the timeline and position the dots and content elements appropriately. The ::before and ::after pseudo-elements can help achieve this without adding extra divs.

3. Basic CSS Example:

.timeline {
  position: relative;
  padding-left: 20px; / Adjust as needed /
}

.timeline::before {
  content: "";
  position: absolute;
  top: 0;
  left: 8px; / Adjust for dot alignment /
  height: 100%;
  width: 2px;
  background-color: #ccc; / Color of the timeline line /
}

.timeline-item {
  margin-bottom: 20px;
  position: relative;
}

.timeline-dot {
  position: absolute;
  top: 5px; / Adjust dot position /
  left: -7px; / Align with timeline line /
  width: 15px;
  height: 15px;
  background-color: #3498db; / Dot color /
  border-radius: 50%;
}

.timeline-content {
  margin-left: 20px;
}


4. Key CSS Properties Explained:

- position: relative is used on the timeline container and items to allow absolute positioning of the line and dots. ::before creates the vertical line. border-radius: 50% turns the div into a circle for the dots.

5. Customizations:

- You can easily customize the colors, sizes, and positions to match your design needs. You can add different types of content, such as images or links, within the .timeline-content.

By following these steps, you will create a basic timeline with dots in HTML and CSS. This setup is flexible and easy to adapt for more complex timelines if needed.

Learn more about this