Progress this week
Each bar is just a pale track with a red bar laid on top. Change the
width in the HTML to move it.
Weekly log
A table for reading only — no forms, no buttons. Add a new
<tr> to record another week.
| Week | Dates | Distance | Pace | Type |
|---|---|---|---|---|
| Week 06 | Feb 3 – 9 | 24.0 km | 5:38 /km | Tempo |
| Week 05 | Jan 27 – Feb 2 | 31.5 km | 5:51 /km | Long |
| Week 04 | Jan 20 – 26 | 18.2 km | 6:04 /km | Easy |
| Week 03 | Jan 13 – 19 | 22.6 km | 5:47 /km | Tempo |
| Week 02 | Jan 6 – 12 | 15.0 km | 6:12 /km | Easy |
| Week 01 | Jan 1 – 5 | 9.3 km | 6:30 /km | Recovery |
How to use this template
Open index.html in Notepad and type over the words to make the log your own. All the colour, spacing and type lives in style.css, which sits right beside it. Save the file, refresh the browser, and you will see your change straight away.
Two things are worth poking at while you learn. The progress bars are only two elements each — a grey track and a red span whose width is a percentage. The weekly table is display only, so it teaches borders, alignment and how a table reads without a single line of script.