# Exercise: A Podcast Episode Page

Build the page for a bike-repair podcast's episode, with an audio player, a transcript, a captioned video and a map, and let the tests check each part.

Journeyman · HTML · Updated October 30, 2026

Sam and Priya host The Bike Shed, a made-up podcast about fixing your own bike. Episode 12, *Fixing a Flat in Ten Minutes*, is recorded, and they filmed a short clip of the repair too. They need its page: a player for the episode, the transcript, the video with captions so anyone can follow it, and a map of the workshop where they recorded. The page's text and styles are ready. You'll add the media, and tests tell you when each part works.

## Get the exercise code

In the **Exercise** box beside the lesson, choose **Get the starter on GitHub** to open its GitHub repository. Click **Code**, then **Download ZIP**, and unzip it into a folder of your own. Or clone it with Git.

The folder holds:

- `index.html`: the episode page, with its text in place and four comments that mark what to add. For you to finish.
- `media/captions.vtt`: the video's captions, with the first three cues. For you to finish.
- `media/`: the episode's audio (`bike-shed-ep12.mp3`), the repair video (`flat-fix.mp4`) and its poster picture (`flat-fix-poster.jpg`). Ready to use.
- `style.css`: a ready-made stylesheet, so the page looks good as you build it. You don't need to change it.
- `page.test.js` and `package.json`: the tests. You don't need to change these.

Open the folder in VS Code, right-click `index.html` and choose **Open with Live Server**. Use Live Server, not a double-click: the captions file won't load in a page opened straight from a file.

## What to do

Each comment in `index.html` says what goes in its section. For example, the one in the Listen section:

```html
<!--
    1. The audio player.
       An <audio> element with controls that plays media/bike-shed-ep12.mp3 (its type is audio/mpeg).
       Inside it, a fallback: a link that downloads media/bike-shed-ep12.mp3.
-->
```

1. **The audio player:** the episode, with the browser's controls and a fallback download link.
2. **The transcript:** the three paragraphs already on the page, in a section that stays closed until someone opens it.
3. **The video:** the repair clip with controls, its poster, a width and height, a captions track in English that's on from the start, and a fallback link.
4. **The captions:** `media/captions.vtt` has the first three cues. The README gives the words and times of the last three; add them.
5. **The map:** the workshop's map in a titled iframe that loads only when someone scrolls near it, and a plain link to the full-size map under it. The README gives both addresses.

## Check your work

Open a terminal in VS Code (**Terminal > New Terminal**). The first time, install the test tools:

```bash
npm install
```

Then run the tests whenever you like:

```bash
npm test
```

At first, seven of the nine tests fail. That's expected: each part you finish turns its test green. A failing test's message says what it looked for, for example *Give the `<track>` a label, such as label="English", for the captions menu*. The last test runs the page through an HTML validator and lists any line it finds a problem on.

Then try the page by hand in the browser. The README has a checklist: play the audio with the keyboard alone, open and close the transcript, watch all six captions appear, and scroll down to the map.

## Hints

- **Boolean attributes stand alone.** `controls`, `default` and the others are on when they're there. You met them in *Video and Audio*.
- **Order inside the video matters.** `<source>` first, then `<track>`, then the fallback.
- **A cue is three parts.** A number, a timing line with `-->` between the times, and the words, then a blank line. Look at the first three cues, and at *Captions and Subtitles*.
- **A period, not a comma.** WebVTT writes `00:00:11.000`. A comma there makes the browser skip the cue without a word.
- **Say what the map shows.** The iframe's title is what a screen reader announces; *Embedding Maps and Videos with iframe* has an example.

## When you're done

Every test is green:

```text
✔ the page says its language and has a title
✔ the audio player has controls and plays the episode
✔ the audio has a fallback link that downloads the episode
✔ the transcript opens and closes
✔ the video has controls, a poster, a width and a height
✔ the video has a captions track with a language and a label
✔ the captions file is WebVTT with six cues
✔ the map is a titled iframe that loads lazily
✔ the page passes the HTML validator
ℹ tests 9
ℹ pass 9
ℹ fail 0
```

Now turn off your sound and watch the repair video with only the captions. Could you fix a flat from them? If a step is missing, a deaf viewer would miss it too.

## So what

A podcast or a video reaches more people when it has a transcript, captions and a page that loads fast. The same few elements put any recording online: a band's demo, a lecture, a product video for a shop.

## Key terms

- [&lt;audio>](https://www.ask-codey.com/glossary/audio)
- [&lt;video>](https://www.ask-codey.com/glossary/video)
- [Media controls](https://www.ask-codey.com/glossary/media-controls)
- [&lt;track>](https://www.ask-codey.com/glossary/track)
- [Captions track](https://www.ask-codey.com/glossary/captions-track)
- [&lt;iframe>](https://www.ask-codey.com/glossary/iframe)

## Related

- [Video and Audio](https://www.ask-codey.com/lessons/html-media-video-and-audio)
- [Captions and Subtitles](https://www.ask-codey.com/lessons/html-media-captions-and-subtitles)
- [Embedding Maps and Videos with iframe](https://www.ask-codey.com/lessons/html-media-iframes-and-embeds)

Source: https://www.ask-codey.com/lessons/exercise-html-podcast-episode-page