playlistduration

Gatsby Tutorial

by Net Ninja · 22 videos

Total watch time

2h 39m

at 1× speed · exactly 2 hours, 38 minutes, 37 seconds at 1×

1×2h 38m 37s
1.25×2h 6m 54s
1.5×1h 45m 45s
1.75×1h 30m 38s
2×1h 19m 19s
Average video7m 13s
Longest11m 48s
Shortest2m 19s
Compare Open on YouTube JSON

Plan to finish

About 3 days at an hour a day

Pick a daily pace and the days you'll watch. Ticked videos are skipped.

Days

At one hour a day, every day, this playlist takes about 3 days. Turn on JavaScript to plan around your week.

Videos (22)

2h 39m in total · tick what you've watched

Tick videos you've watched — progress is saved in this browser.

Videos to
Watched
1 Gatsby Tutorial #1 - What is a Static Site Generator? 10:32 2021-02-24
2 Gatsby Tutorial #2 - Starter Sites 7:49 2021-02-24
3 Gatsby Tutorial #3 - Pages & Routes 5:55 2021-02-25
4 Gatsby Tutorial #4 - Navbar & Links 5:49 2021-02-25
5 Gatsby Tutorial #5 - Creating a Layout File 7:00 2021-02-26
6 Gatsby Tutorial #6 - Styling Components 11:48 2021-03-01
7 Gatsby Tutorial #7 - Static Files 3:50 2021-03-01
8 Gatsby Tutorial #8 - Content Mesh & GraphQL 6:31 2021-03-02
9 Gatsby Tutorial #9 - Site Metadata & Page Queries 8:11 2021-03-03
10 Gatsby Tutorial #10 - Static Queries (useStaticQuery) 4:43 2021-03-05
11 Gatsby Tutorial #11 - Source Plugins 9:01 2021-03-05
12 Gatsby Tutorial #12 - Markdown & Transformer Plugins 7:53 2021-03-08
13 Gatsby Tutorial #13 - Fetching & Listing Data 7:31 2021-03-08
14 Gatsby Tutorial #14 - Sorting / Ordering Queries 4:36 2021-03-09
15 Gatsby Tutorial #15 - Multiple Queries 5:32 2021-03-09
16 Gatsby Tutorial #16 - Optimized Images 10:00 2021-03-10
17 Gatsby Tutorial #17 - Featured Images 8:12 2021-03-10
18 Gatsby Tutorial #18 - Template Components 7:13 2021-03-11
19 Gatsby Tutorial #19 - Generating Pages 10:11 2021-03-11
20 Gatsby Tutorial #20 - Query Variables 8:36 2021-03-11
21 Gatsby Tutorial #21 - Building & Deploying to Netlify 2:19 2021-03-12
22 Gatsby Tutorial #22 - Continuous Deployment 5:25 2021-03-12

Embed a badge

Show the watch time in a README or course description — it links back here and updates itself

Watch time: 2h 39m · 22 videos

Markdown
[![Watch time: 2h 39m · 22 videos](https://playlistduration.com/badge/playlist/PL4cUxeGkcC9hw1g77I35ZivVLe8k2nvjB.svg)](https://playlistduration.com/playlist/PL4cUxeGkcC9hw1g77I35ZivVLe8k2nvjB)
HTML
<a href="https://playlistduration.com/playlist/PL4cUxeGkcC9hw1g77I35ZivVLe8k2nvjB"><img src="https://playlistduration.com/badge/playlist/PL4cUxeGkcC9hw1g77I35ZivVLe8k2nvjB.svg" alt="Watch time: 2h 39m · 22 videos" width="203" height="20"></a>

Add ?speed=1.5 to the image URL for the time at that speed, ?label=Course to change the left text, or ?style=flat-square for square corners.

Want the numbers themselves? GET https://playlistduration.com/api/v1/playlist/PL4cUxeGkcC9hw1g77I35ZivVLe8k2nvjB returns them as JSON — free, no key. API docs →

Data from the YouTube Data API as of 2026-09-22 (fresh). Private or deleted videos are excluded from totals.