What a Gantt chart has to say before it shows bars
A Gantt chart places tasks on a timeline as bars, so you can see what happens when and who it's assigned to. The bars are the easy part. Two other pieces carry more weight. Dependencies mark a task that can't start until another one finishes. Milestones are single dates, such as a delivery or a launch, that the rest of the plan hangs on.
Before you open any template, write three things next to each task: who owns it, roughly how long it takes, and what it waits on. If a task has no single owner or no clear length, it's probably several tasks. Splitting it now keeps you from drawing a bar that means nothing.
A worked example: a community garden's spring build
Here is one plan carried all the way through. A volunteer coordinator is getting a neighborhood garden ready for a planting day on April 17, 2027, and twelve raised beds have to be built, filled and watered first. The garden, the people and the dates are fictional.
Start with the lumber delivery on March 22. It's a milestone rather than a task, and the bed build can't begin until it arrives, so every row after it inherits its risk. That's why its status reads “At risk” in words, not only in red. A volunteer checking on a phone in bright sun, or someone who can't tell red from green, still gets the message.
Then look at the week of April 5. Filling the beds and installing irrigation both wait on the finished beds, not on each other, so they run side by side. A chart shows that overlap at a glance, which a checklist can't.
<!doctype html><html lang="en"><head><meta name="nos-demo-layout" content="responsive-lab"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Elm Street Community Garden: Spring Build 2027</title><style>*{box-sizing:border-box}body{margin:0;background:#f2f4ef;color:#172d2b;font:17px/1.8 system-ui,sans-serif}main{max-width:920px;margin:auto;padding:48px 24px}header{padding:32px;background:#163e34;color:#fff;border-radius:24px;margin-bottom:32px}.tag{color:#d2f637;font-size:12px;letter-spacing:2px}h1{font-size:clamp(30px,5vw,46px);line-height:1.16;letter-spacing:-1px}h2{line-height:1.3;margin-top:38px}p{margin:0 0 20px}section{min-width:0}.sample{border:1px solid #d4dbcd;background:#fff;border-radius:22px;padding:28px;margin:32px 0;box-shadow:0 16px 40px #17392c0a}.sample h2{margin-top:10px}.kicker{font-size:12px;letter-spacing:2px;color:#537b66}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}.card{border:1px solid #dbe2d6;background:#f6f8f2;padding:20px;border-radius:14px}.card h3{margin-top:0}table{border-collapse:collapse;width:100%;font-size:14px}th,td{text-align:left;border-bottom:1px solid #dee4d8;padding:13px;vertical-align:top}th{background:#f0f5e8}.table-wrap{overflow:auto}button{background:#d2f637;color:#203a22;border:0;border-radius:9px;padding:12px 18px;font:600 14px system-ui;cursor:pointer}pre{white-space:pre-wrap;overflow-wrap:anywhere;background:#182e29;color:#edf4df;padding:24px;border-radius:16px;font:14px/1.8 monospace}a{color:#245d50}label{display:block;margin:10px 0}[contenteditable]{outline-offset:4px}.note{color:#647166;font-size:13px}.status{font-size:13px;color:#526446}.timeline{border-left:3px solid #b3ce62;padding-left:24px}.timeline>div{margin:16px 0}@media(max-width:600px){main{padding:22px 14px}header,.sample{padding:22px}body{font-size:16px}.grid{grid-template-columns:1fr}}</style></head><body><main><div class="sample"><div class="kicker">Fictional example · Gantt chart</div><h2 contenteditable="true">Elm Street Community Garden: Spring Build 2027</h2><p contenteditable="true">Mar 1 – Apr 17, 2027 · Coordinator: Dana Reyes · Last updated: Mar 15, 2027</p><p class="note">Fictional sample. You can try editing its text here; these preview edits are temporary.</p><section><h3>What this plan has to deliver</h3><p contenteditable="true">Twelve raised cedar beds, filled with soil and on drip irrigation, ready for neighborhood planting day on April 17, 2027.</p><p contenteditable="true">The lumber delivery is the date to watch. Nothing can be built until it arrives.</p><p contenteditable="true">The garden, people, supplier and dates on this page are fictional and shown only as an example.</p></section><section><h3>Tasks, owners and what each waits on</h3><div class="table-wrap"><table><thead><tr><th>Task</th><th>Owner</th><th>Start</th><th>End</th><th>Starts after</th><th>Status</th></tr></thead><tbody><tr><td contenteditable="true">Confirm plot layout with parks office</td><td contenteditable="true">Dana Reyes</td><td contenteditable="true">Mar 1</td><td contenteditable="true">Mar 5</td><td contenteditable="true">—</td><td contenteditable="true">Done</td></tr><tr><td contenteditable="true">Order cedar lumber</td><td contenteditable="true">Luis Moreno</td><td contenteditable="true">Mar 8</td><td contenteditable="true">Mar 12</td><td contenteditable="true">Confirm plot layout</td><td contenteditable="true">Done</td></tr><tr><td contenteditable="true">Lumber delivery (milestone)</td><td contenteditable="true">Supplier</td><td contenteditable="true">Mar 22</td><td contenteditable="true">Mar 22</td><td contenteditable="true">Order cedar lumber</td><td contenteditable="true">At risk</td></tr><tr><td contenteditable="true">Build 12 raised beds</td><td contenteditable="true">Priya Kumar</td><td contenteditable="true">Mar 27</td><td contenteditable="true">Apr 4</td><td contenteditable="true">Lumber delivery</td><td contenteditable="true">Not started</td></tr><tr><td contenteditable="true">Fill beds with soil and compost</td><td contenteditable="true">Sam Taylor</td><td contenteditable="true">Apr 5</td><td contenteditable="true">Apr 9</td><td contenteditable="true">Build 12 raised beds</td><td contenteditable="true">Not started</td></tr><tr><td contenteditable="true">Install drip irrigation</td><td contenteditable="true">Luis Moreno</td><td contenteditable="true">Apr 5</td><td contenteditable="true">Apr 14</td><td contenteditable="true">Build 12 raised beds</td><td contenteditable="true">Not started</td></tr><tr><td contenteditable="true">Planting day (milestone)</td><td contenteditable="true">All volunteers</td><td contenteditable="true">Apr 17</td><td contenteditable="true">Apr 17</td><td contenteditable="true">Fill beds; install irrigation</td><td contenteditable="true">Not started</td></tr></tbody></table></div></section><section><h3>Milestones</h3><div class="timeline"><div><strong>Mar 5: Plot layout confirmed</strong><p contenteditable="true">Parks office approved the bed positions. Done.</p></div><div><strong>Mar 22: Lumber delivery</strong><p contenteditable="true">At risk. The supplier has not confirmed the truck date. The bed build cannot start without it.</p></div><div><strong>Apr 4: Beds built</strong><p contenteditable="true">Soil and irrigation both start the next day and run in parallel.</p></div><div><strong>Apr 17: Planting day</strong><p contenteditable="true">Needs filled beds and working irrigation. Open to all volunteers.</p></div></div></section><section><h3>Week by week (the view on a phone)</h3><div class="grid"><div class="card"><h3 contenteditable="true">Week of Mar 1</h3><p contenteditable="true">Dana confirms the plot layout. Done.</p></div><div class="card"><h3 contenteditable="true">Week of Mar 8</h3><p contenteditable="true">Luis orders the lumber. Done.</p></div><div class="card"><h3 contenteditable="true">Week of Mar 15</h3><p contenteditable="true">No crew tasks. Dana follows up with the supplier about the delivery date.</p></div><div class="card"><h3 contenteditable="true">Week of Mar 22</h3><p contenteditable="true">Lumber due Mar 22 (at risk). Priya's crew starts building beds Mar 27.</p></div><div class="card"><h3 contenteditable="true">Week of Mar 29</h3><p contenteditable="true">Bed build continues and finishes Apr 4.</p></div><div class="card"><h3 contenteditable="true">Week of Apr 5</h3><p contenteditable="true">Sam fills beds (Apr 5–9) while Luis installs irrigation (Apr 5–14).</p></div><div class="card"><h3 contenteditable="true">Week of Apr 12</h3><p contenteditable="true">Irrigation finishes Apr 14. Planting day is Apr 17.</p></div></div></section><section><h3>Before you share the link</h3><label><input type="checkbox"> Every bar matches the start and end dates in your task list</label><label><input type="checkbox"> Each milestone has a date and a name written in text</label><label><input type="checkbox"> Every status is a word on the row, not only a color</label><label><input type="checkbox"> Unknown dates say TBD instead of a guess</label><label><input type="checkbox"> Open the page on a phone and read one task without zooming</label><label><input type="checkbox"> If someone asked for a spreadsheet or PDF, send that file too</label></section></div><script>const questions=[];const check=document.getElementById('check-answers');if(check)check.addEventListener('click',()=>{let n=0;questions.forEach((q,i)=>{const v=document.querySelector('input[name="q'+i+'"]:checked');if(v&&Number(v.value)===q.correct)n++;document.getElementById('answer-'+i).hidden=false;});document.getElementById('score').textContent=n+' / '+questions.length+' correct';});</script></main></body></html>
Spreadsheet, project software or a single page
If a manager, client or grant office asked for the schedule as a spreadsheet or PDF, start from a spreadsheet template and send the file they asked for. A shared web page doesn't replace a required attachment, though you can offer it alongside.
Project management software suits teams that update tasks every day and are ready to manage accounts for it. A whiteboard is fine for a two-week job no one outside the room will see.
A single web page fits a narrower case. The people who need the schedule only need to read it, often on their phones, and you want it to look clear without an afternoon of formatting cells. That's where an AI tool helps: it handles the layout, and you supply the facts.
A prompt that turns your task list into the chart
Paste the prompt below into the AI chat tool you already use, replace everything in square brackets with your own project, and ask for a single HTML file. HTML is the code web pages are written in. One file holds the whole chart, and you can open it in a browser to check it before anyone else sees it.
The prompt asks for status words, dependencies in plain text and a stacked layout on narrow screens, because a wide grid of week columns is hard to read on a phone. It also tells the AI to write TBD for anything you haven't decided instead of guessing. Check every bar against your list anyway, because a date placed one week off is easy to miss.
Build a Gantt chart as a single, self-contained HTML file for this project.
Project: [project name]
Dates covered: [first date] to [last date]
Who will read it: [for example: volunteers, a client, a site crew]
Tasks (one per line: task | owner | start date | end date | starts after | status):
[Task 1 | Owner | YYYY-MM-DD | YYYY-MM-DD | none | Not started / On track / At risk / Done]
[Task 2 | Owner | YYYY-MM-DD | YYYY-MM-DD | Task 1 | status]
Milestones (name | date | starts after):
[Milestone | YYYY-MM-DD | task it depends on]
Notes to show under the chart:
[any short notes, or none]
Requirements:
- Use only the tasks, names, dates and notes above. If a value says TBD, show “TBD” and do not invent a date, owner or task.
- One row per task: task name and owner on the left, a bar across a week-by-week grid on the right. Label each week column with the date it starts.
- Show each milestone as a marker on its date with its name written next to it.
- Under each task name, write “Starts after: [task]” in plain text so dependencies don't rely on arrows alone.
- Write each status as a word on its row. Color may repeat the status but must never be the only signal. Use high-contrast text.
- Put “Last updated: [date]” under the title.
- On screens narrower than 640px, replace the grid with a stacked list in date order: one card per task showing owner, start, end, dependency and status as text.
- Use semantic HTML (headings, and a table or list for tasks) so a screen reader reads the schedule in a sensible order.
- Put all CSS inline in the file. No external libraries, fonts, images, forms, buttons that send data, or network requests.
- Write dates, names and statuses as plain text in the HTML, not generated by script, so they can be edited later.
Keeping the shared page current
Once the chart is done, the people who need it mostly want a link they can open again next week and trust. In NOS, you keep the page in your workspace and publish it as a share link. People open it without creating an account, and the link stays the same after you edit the page. Treat that page as the one place the schedule lives, so a changed date isn't sitting in three different versions.
That pays off on the small weekly changes. When the supplier confirms delivery, you edit the status text directly, changing “At risk” to “Confirmed,” and add a line to the notes. When Priya hands the bed build to another lead, you retype the owner's name. None of that needs a new AI request, and volunteers who saved the link see the update there.
A slipped date is different. Moving a bar changes the layout, not just the words, so ask your AI tool for a revised version or adjust the code yourself. Direct edits keep the names, labels and notes accurate between those bigger revisions.
Start with your own three columns: owner, length and what each task waits on. The chart follows from them.