To build a timeline layout using HTML and CSS, start with semantic HTML structure, add visual flow with vertical line and dots, style each item for readability, apply responsive tweaks, and ensure cross-device compatibility. Begin by creating a container div with multiple timeline items, each containing a date and content section. Use CSS positioning to create a central vertical line and circular markers for events. Style dates and content with fonts and spacing, optionally alternate item sides using nth-child selectors. Optimize for mobile by adjusting padding, margins, and font sizes within media queries, ensuring the layout remains clean and functional across all devices.

Timeline layouts are a clean and visual way to present events, tasks, or processes in chronological order. Whether you're building a project roadmap, a history page, or a personal portfolio timeline, using just HTML and CSS can get the job done nicely — no JavaScript required.

Here’s how to build a simple yet flexible timeline layout with CSS.

Basic structure: Use semantic HTML

Start with a container for your timeline and add items inside it. Each item represents a point on the timeline.

<div class="timeline">
  <div class="timeline-item">
    <div class="timeline-date">2021</div>
    <div class="timeline-content">
      <h3>Started Learning Web Development</h3>
      <p>Learned HTML, CSS, and basic JavaScript.</p>
    </div>
  </div>

  <div class="timeline-item">
    <div class="timeline-date">2022</div>
    <div class="timeline-content">
      <h3>Built First Real Project</h3>
      <p>A responsive blog using static HTML and CSS.</p>
    </div>
  </div>
</div>

This gives us a clear structure to style. The .timeline holds all the items, each of which has a date and content section.

Vertical line and dots: Add visual flow

A timeline usually has a central vertical line with markers (dots or icons) indicating each event.

Use CSS positioning to place the line and markers:

.timeline {
  position: relative;
  padding-left: 20px;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: #ccc;
}

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

.timeline-item::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 10px;
  width: 10px;
  height: 10px;
  background-color: white;
  border: 2px solid #333;
  border-radius: 50%;
}

You now have a vertical line running down the left side and small circles marking each event. This helps users visually follow the sequence.

Styling each item: Make it readable and attractive

Each item should be easy to scan. You can separate the date from the content and apply light spacing and colors.

.timeline-date {
  font-weight: bold;
  color: #555;
  margin-bottom: 5px;
}

.timeline-content h3 {
  margin: 0 0 5px;
  font-size: 1rem;
}

.timeline-content p {
  margin: 0;
  font-size: 0.9rem;
  color: #444;
}

If you want to alternate the side of the content (left/right), you can use nth-child(odd) and nth-child(even) selectors to shift items back and forth. Just remember to adjust the padding and margins accordingly.

Responsive tweaks: Keep it mobile-friendly

Timelines can get cramped on smaller screens. A good fix is to stack everything vertically and remove the alternating sides on mobile.

@media (max-width: 600px) {
  .timeline {
    padding-left: 15px;
  }

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

Also consider reducing font sizes slightly and increasing touch targets if needed.

That’s basically it. With some basic HTML and a few lines of CSS, you’ve got a working timeline layout that looks clean and works well across devices. It's not complicated, but getting the spacing and alignment right makes a big difference in how professional it feels.

The above is the detailed content of CSS tutorial on creating a timeline layout. For more information, please follow other related articles on the PHP Chinese website!