Timeline Creator
Create interactive HTML timelines and project roadmaps with Gantt charts and milestones.
When to Use "Create timeline for [project]" "Generate roadmap for Q1-Q4" "Make Gantt chart for schedule" "Show project milestones" Components Timeline Header: project name, date range, completion % Phase Groups: Q1, Q2, Q3, Q4 or custom phases Timeline Items: tasks with start/end dates, progress, status Milestones: key deliverables with dates Gantt Visualization: horizontal bars showing duration HTML Structure
<html> <head> <title>[Project] Timeline</title> <style> body { font-family: system-ui; max-width: 1400px; margin: 0 auto; } .timeline-bar { background: linear-gradient(90deg, #4299e1, #48bb78); height: 20px; border-radius: 4px; } .milestone { border-left: 3px solid #e53e3e; padding-left: 10px; } /* Status colors: #48bb78 (done), #4299e1 (in-progress), #718096 (planned) */ </style> </head> <body>[Project] Timeline
</body> </html>Timeline Bar Pattern
Workflow Extract tasks, dates, phases from project Calculate duration percentages Group by phases (quarters or custom) Create HTML with Gantt-style bars Add milestones section Write to [project]-timeline.html
Use semantic colors for status, keep layout responsive.