playlistduration

Mobile-First Responsive Build (with CSS Grid)

by Net Ninja · 14 videos

Total watch time

2h 6m

at 1× speed · exactly 2 hours, 5 minutes, 43 seconds at 1×

1×2h 5m 43s
1.25×1h 40m 34s
1.5×1h 23m 49s
1.75×1h 11m 50s
2×1h 2m 52s
Average video8m 59s
Longest17m 1s
Shortest6m 4s
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 (14)

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

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

Videos to
Watched
1 Mobile-First Responsive Build #1 - Introduction 6:24 2020-01-20
2 Mobile-First Responsive Build #2 - HTML Template 17:01 2020-01-20
3 Mobile-First Responsive Build #3 - Mobile-First Approach 8:29 2020-01-22
4 Mobile-First Responsive Build #4 - Base Styles 9:28 2020-01-22
5 Mobile-First Responsive Build #5 - Fonts 11:23 2020-01-24
6 Mobile-First Responsive Build #6 - Grid Basics 9:46 2020-01-24
7 Mobile-First Responsive Build #7 - Creating a 12-Column Grid 6:59 2020-01-27
8 Mobile-First Responsive Build #8 - Mobile Styles (part 1) 7:44 2020-01-27
9 Mobile-First Responsive Build #9 - Mobile Styles (part 2) 9:15 2020-01-29
10 Mobile-First Responsive Build #10 - Mobile Styles (part 3) 8:46 2020-01-29
11 Mobile-First Responsive Build #11 - Tablet Styles 8:39 2020-01-31
12 Mobile-First Responsive Build #12 - Laptop Styles (part 1) 8:54 2020-01-31
13 Mobile-First Responsive Build #13 - Laptop Styles (part 2) 6:04 2020-02-03
14 Mobile-First Responsive Build #14 - Desktop Styles 6:51 2020-02-03

Embed a badge

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

Watch time: 2h 6m · 14 videos

Markdown
[![Watch time: 2h 6m · 14 videos](https://playlistduration.com/badge/playlist/PL4cUxeGkcC9hH1tAjyUPZPjbj-7s200a4.svg)](https://playlistduration.com/playlist/PL4cUxeGkcC9hH1tAjyUPZPjbj-7s200a4)
HTML
<a href="https://playlistduration.com/playlist/PL4cUxeGkcC9hH1tAjyUPZPjbj-7s200a4"><img src="https://playlistduration.com/badge/playlist/PL4cUxeGkcC9hH1tAjyUPZPjbj-7s200a4.svg" alt="Watch time: 2h 6m · 14 videos" width="196" 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/PL4cUxeGkcC9hH1tAjyUPZPjbj-7s200a4 returns them as JSON — free, no key. API docs →

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