How to Make a Gantt Chart: Step-by-Step Guide

What you need first

Before you draw a single bar, get three things clear: the goal and deadline, a list of tasks that gets you there, and a rough sense of durations and what depends on what. Perfect estimates are not required — a starting point you can refine is. New to the format? Read what a Gantt chart is first.

The plan we will build

Every step below is applied to one plan: a website relaunch for Bramble & Co., five working days a week, kicking off Monday 6 April 2026. Here is where it lands after step 7 — glance at it now, because each step explains one column.

Step 1: List your tasks

Break the project into concrete tasks small enough to hand to one person — a few days to a couple of weeks is a good range. If something would take two months, split it. Write them as plain verbs: "Draft homepage copy," "Review with legal," "Deploy to production." Order can wait; just get everything out of your head and into a list.

The size test: you should be able to name one owner and describe "done" in a sentence. If you cannot, the task is too big or too vague. The Bramble & Co. list came out at ten rows for ten weeks, which is about right — enough that each bar means something, few enough to read in one screen. Working from a template for your project type also stops you forgetting the standard tasks everyone forgets.

Step 2: Set start/end dates & durations

Give every task a start date and either an end date or a duration — set two and the third follows. Use working days, not calendar days, so weekends do not distort the schedule: Bramble & Co.'s twelve-day build spans nearly three calendar weeks. Be honest with estimates, since padding every task hides real risk while padding none leaves no room for the inevitable. Best guesses are fine for now; step 4 lets you change them without re-entering anything.

Step 3: Order tasks & add phases/groups

Arrange the tasks in the order they will happen and nest them under phase headings. A phase is a summary row — Discovery, Design, Build, Launch — whose bar is calculated from the earliest start and latest finish beneath it, so you move a phase by moving its contents. Grouping makes a big plan readable and lets you collapse detail for stakeholders. gantts.app also adds automatic WBS numbering (1, 1.1, 1.2) so every task has a stable reference.

Step 4: Add dependencies

Dependencies are what turn a static picture into a real schedule: link tasks that rely on each other and moving one shifts the others automatically. Draw the link and let the tool recalculate; resist the urge to hard-code a date that a dependency should control.

The four types, each judged against the Bramble & Co. plan:

Type	Rule	Where it fits here	How often you need it
Finish-to-start (FS)	B cannot start until A finishes	Front-end build after design sign-off — nine of the nine links in this plan	Almost always
Start-to-start (SS)	B cannot start until A starts	If copywriting were to begin the day wireframes began, rather than after the audit	Occasionally, for overlapping work
Finish-to-finish (FF)	B cannot finish until A finishes	QA finishing no earlier than the last content is loaded	Rarely
Start-to-finish (SF)	B cannot finish until A starts	Nowhere. It exists mainly for shift handovers	Almost never

Two of the plan's links are worth pointing at. Row 7, "Content load", has two predecessors — copywriting and the build — so it starts when the later of the two finishes, which is the build on 18 May. And row 3, copywriting, finishes on 24 April but is not needed until 19 May, which gives it sixteen working days of slack. That gap is real information: it is where you put the writer when something else catches fire.

One behaviour to know before dragging bars: gantts.app schedules as-placed. A dependency can push a task later than where you put it, never pull it earlier. Drop "QA" in August and linking it to content load will not drag it back to May — the link sets the earliest it may begin, and the chart shows the gap you left. ⚡ Auto-schedule closes those gaps when you ask it to.

Dependencies also feed the critical path in Step 7 — without them, the tool has no way to know which tasks drive the deadline. If you only add one type of structure to your chart, make it dependencies. For the full picture, see the four dependency types.

Step 5: Add milestones

A milestone marks a significant moment with no duration — an approval, a delivery, or the launch itself — and appears as a diamond rather than a bar. Because it has zero length it can be moved but never resized. Bramble & Co. has two: "Design signed off" and "Go live". Both are points where someone outside the delivery team has to act, which is the best rule for choosing them.

Step 6: Assign owners & track % progress

Assign an owner to every task, and update percent complete as work happens. If the "today" line has passed a bar still sitting at 0%, you have slippage to address. Keeping progress current is the single biggest factor in whether a chart stays useful.

Do one more thing before day one: save a baseline. It freezes the plan you agreed, so six weeks later you can measure drift instead of arguing about what was promised.

Step 7: Review the critical path & export

Finally, turn on the critical path — the longest chain of dependent tasks that determines your finish date. In the Bramble & Co. plan that chain runs audit → wireframes → design → sign-off → build → content load → QA → UAT → go live. Eight of the ten rows are on it, which tells you something uncomfortable but useful: this plan has almost no give in it, and one task, copywriting, carries all the slack the project owns.

The figure gantts.app reports is total float — how long a task can slip before the project finish date moves — not free float, which only measures slack against the next task. Copywriting's sixteen days is therefore sixteen days of real protection at go-live.

Review the path, resequence where you can, and confirm the end date is realistic. Then export to PDF or PNG for a report, or Excel or PowerPoint for a deck. For the underlying math, read the critical path method guide.

Common mistakes to avoid

• Too much detail too soon — start at phase level and drill down only where it helps.
• Hard-coding dates instead of dependencies — if dates do not move when a predecessor slips, the chart lies the moment reality changes.
• No buffer anywhere — eight of ten Bramble & Co. rows are critical, so the plan breaks on the first bad week. Add contingency near the deadline, visibly, rather than hiding it in every estimate.
• Never updating progress — an un-maintained chart is worse than none, because people keep trusting it.
• Ignoring the critical path — you cannot protect a deadline whose drivers you have not identified.

Building it in gantts.app

The same ten rows, in the editor, using the buttons as they are actually labelled:

1. Open ✨ Paste to Gantt and paste the outline. Durations in brackets, after for a link and a trailing ! for a milestone are detected as you paste — Front-end build (12d) after Design signed off, then Go live !.
2. By hand instead: ＋ Task for a work row, ◆ Milestone for a diamond, ▣ Group for a phase, then the indent button to nest tasks under it.
3. Double-click a row for Runs after (predecessors), Assignee and % complete. Milestones live here too: change a row's type and its finish collapses onto its start. You cannot drag a milestone wider — a milestone with duration is not a milestone.
4. Press ⚡ Auto-schedule to move every task to the earliest date its links allow. This is the step that produces 11 June.
5. Tick Critical path to stripe the eight critical bars, and check that copywriting is not among them.
6. Save ◳ Baseline before day one, so the variance table above is something the app fills in rather than something you assemble by hand.
7. Set the Zoom to Week for a ten-week plan, and hit ◎ Today to jump back to the current date once work starts.
8. ⬇ Export gives 📄 PDF document, 📊 Excel (.xlsx), 📑 CSV (spreadsheet) and 📽 PowerPoint (.pptx); 📤 Share… gives a 🔗 Shareable link. For the client, set View to Milestones only first — sign-off and go live, and nothing else.

Do it free online

gantts.app is free with no sign up, no login and no download — everything runs and saves in your own browser. Prefer to start from a ready-made plan? Browse the template library, or if you work in spreadsheets, see how to make a Gantt chart in Excel.

Frequently asked questions