Course collection
The third collection: /course, the lesson player, and the five sections a video-bodied post needed that reading-shaped collections never asked for.
The third collection, and the one that grew the vocabulary. Travel and blog are both collections of reading; course was the first whose post route has a video in it instead of prose, and five sections were simply missing for that.
They went into the shared sheet rather than into course.css, because a podcast season and a video series want every one of them: the stage, the stage bar, the playlist, the transcript and the panels. What stayed behind is the test of whether the split was honest — four things nothing but a course wants: the syllabus scene, the difficulty meter, the knowledge check and the certificate.
A course is a series. A track is a group.
This is the whole argument of the collection, and it is the one thing worth getting right before writing any markup.
| Route | What is on it |
|---|---|
index — | Every course. Resume strip, tracks, the filter, the featured course, the grid, topics, free lessons, what every course includes, and the questions. |
group — | A track. An unordered set of courses that share a subject — it has no first course and nothing to be halfway through. |
place — | A topic. One thing, taught wherever it comes up — which is exactly what a curriculum page cannot tell you. |
series — | The course. A first lesson, a last one, and a percentage through it. That is the definition of a series, and the reason this route gets a spine rather than a grid. |
post — | The lesson player. The video, the syllabus beside it, and four panels under it. |
Getting those two the wrong way round is what produces a course page with a grid of lessons on it — every lesson looking equally like a starting point, on a page whose entire job is to say which one is first.
Open /course → Open the lesson player → Its sections on their own →
The lesson player
The media leads, the rest of the course sits beside it, and the two ways out of the lesson get the width of the bar underneath. Previous and next are the navigation of an ordered collection; everything else on the page is a detour.
.col-stagebar — a disabled step keeps its place in the layout, so the bar does not change shape on the first and last lessons
The playlist is the curriculum
The list beside the player and the syllabus in the middle of the course page are the same component. A contents list should not become a different thing the moment it moves next to a video — so .col-playlist is .curriculum with a body that scrolls, and nothing else.
01Foundations4/4
02Layout1/4
03Type & rhythm0/3
the playlist and the transcript, from /course/…/grid-in-four-rules, unchanged
The panels, and what happens without them
Overview, transcript, resources and notes are the system's .tabs over four .col-panels. Until the script runs, every panel is visible under its own heading — four blocks that all belong to the lesson, stacked. Only once it sets data-tabs="ready" does the stylesheet start hiding the headings, which is why the no-JS page reads as a page rather than a pile of unlabelled sections.
<div data-tabs>
<div class="tabs" role="tablist">
<button class="tab" role="tab" aria-controls="p-notes" aria-selected="false">Notes</button>
</div>
<div class="col-panel" id="p-notes" role="tabpanel">
<span class="col-panel__label">Notes</span>
…
</div>
</div>the arrows move between tabs and only the selected one is in the tab order — four tabs cost one Tab press, not four
What course kept for itself
Four things, and the test of each was whether a second collection would want it. None of these passed, which is the correct outcome — a shared vocabulary that absorbs everything is just the last collection wearing a general prefix.
.crs-level — the word "intermediate" means nothing until you have seen the other two; three bars are comparable at a glance across a grid, which is where difficulty is actually read
.crs-cert — a hairline double border and one line of accent. A certificate that shouts is a certificate nobody believes
What the script does, and what happens without it
Three modules ship in collection.js, and all three obey the same rule as src/nav.js: they only ever set attributes the stylesheet already understands.
| Module | With the script blocked |
|---|---|
Filters | blocked → every course, topic and lesson shows. Which is the correct fallback for a page whose job is listing things. |
Panels | blocked → the four panels stack, each under its own heading. Nothing is unreachable. |
Player | blocked → the playlist is still a list of links, the stage bar is still two links, and only mark complete and the N / P / M keys are gone. |
Nothing is stored. A real course puts completion on the server, and a demo that wrote to localStorage would be teaching a persistence trick rather than a design system.