playlistduration

HTML & CSS

by Traversy Media · 65 videos

Total watch time

2d 9h 10m

at 1× speed · exactly 2 days, 9 hours, 10 minutes, 22 seconds at 1×

1×2d 9h 10m 22s
1.25×1d 21h 44m 18s
1.5×1d 14h 6m 55s
1.75×1d 8h 40m 13s
2×1d 4h 35m 11s
Average video52m 46s
Longest2h 18m 34s
Shortest11m 15s
Compare Open on YouTube JSON

Plan to finish

About 58 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 58 days. Turn on JavaScript to plan around your week.

Videos (65)

2d 9h 10m in total · tick what you've watched

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

Videos to
Watched
1 HTML Crash Course For Absolute Beginners 1:00:42 2017-07-17
2 CSS Crash Course For Absolute Beginners 1:25:11 2017-07-19
3 Build An HTML5 Website With A Responsive Layout 1:01:15 2016-12-25
4 Flexbox CSS In 20 Minutes 19:59 2016-12-08
5 CSS Grid Layout Crash Course 27:55 2017-08-01
6 Build a Netflix Landing Page Clone with HTML, CSS & JS 1:32:19 2019-05-21
7 Microsoft Homepage Clone - CSS Grid, Flex & Media Queries 1:10:59 2020-02-11
8 Responsive Landing Page Using HTML & CSS (A Little jQuery) 1:04:07 2018-08-19
9 Pluralsight Login Page Clone - HTML & CSS 42:35 2018-11-08
10 HTML & CSS Easy Elegant Landing Page With Blur Effect 34:43 2018-09-13
11 Build a Responsive, Mobile First Website - HTML5 & CSS3 48:23 2018-05-29
12 Easy Fullscreen Landing Page With HTML & CSS 22:38 2017-08-14
13 CSS Grid Layout With Image Span 13:38 2020-05-12
14 Sliding Sign In & Sign Up Form 32:14 2019-04-17
15 CSS Variables Tutorial (CSS Custom Properties) 23:06 2017-12-27
16 Pure CSS Hamburger Menu & Overlay 35:47 2019-04-04
17 Full Screen Video Background - HTML & CSS 17:52 2020-04-24
18 Basic Parallax Website With HTML & CSS 20:48 2017-07-12
19 Bootstrap Beginner Crash Course 1:13:27 2017-01-02
20 Build A CMS Admin Bootstrap Theme From Scratch 1:00:47 2017-01-03
21 CSS Text Background Animation 11:15 2018-12-15
22 Easy Responsive CSS3 Pricing Tables 17:21 2017-06-23
23 Responsive HTML & CSS Side Menu From Scratch 23:57 2017-06-21
24 Quick & Easy CSS Loaders 28:18 2019-05-30
25 Fullscreen Video Background With HTML & CSS 23:37 2017-10-05
26 Simple Explanation Of rem & em CSS Units 14:43 2017-10-08
27 Create a Presentation Slide Website 32:24 2020-03-13
28 Mobile First Responsive Contact Form Featuring Grid CSS 29:42 2017-08-18
29 Parallax Landing Page - Rellax.js 22:33 2020-03-30
30 Landing Page With Smooth Scroll - 3 Options 22:43 2019-03-08
31 Animate On Scroll Webpage | AOS Library 21:25 2019-08-28
32 Build a Bootstrap Theme With Scroll Animation 35:45 2017-04-13
33 Skeleton CSS Crash Course & Landing Page 38:37 2017-09-24
34 Materialize CSS Crash Course [Part 1] 56:08 2017-06-15
35 Materialize CSS Crash Course [Part 2] - JavaScript Widgets 40:09 2017-06-16
36 Build A Travel Agency Theme With Materialize CSS 1.0.0 54:29 2018-04-09
37 Bulma CSS Framework Crash Course 49:41 2017-06-30
38 Social Media Accordion With CSS3 Transitions 37:44 2018-03-20
39 Build A Responsive HTML & CSS Template With FlexboxGrid 1:12:06 2017-06-05
40 Foundation Framework Crash Course 1:13:00 2017-01-17
41 Custom Bootstrap Theme With Sass 1:04:19 2016-11-17
42 Fancy Form UI From Scratch - HTML, CSS3, JS & Sass 1:10:23 2018-06-13
43 Create a Responsive Website With the W3 CSS Framework 47:34 2017-03-05
44 CSS3 Animation & Transitions Crash Course 36:20 2017-10-31
45 Grid CSS Responsive Website Layout - "Mobile First" Design 49:09 2017-11-10
46 Full Screen Responsive Image Slider | No Libraries 31:55 2019-03-20
47 Create a Split Landing Page With HTML, CSS & JS 34:13 2018-01-03
48 Build a Responsive Grid CSS Website Layout From Scratch 45:33 2018-02-05
49 Product Landing Page | Build & Deploy | HTML & CSS 1:01:21 2019-08-02
50 Sass Crash Course 48:05 2020-02-28
51 Build a Portfolio Website & Deploy 2:00:45 2020-07-22
52 Build a Modern Landing Page Website | HTML & CSS 1:15:26 2020-08-28
53 Build a Responsive Website | HTML, CSS Grid, Flexbox & More 2:02:22 2020-10-23
54 Create a Website With Video Background | HTML & CSS 35:15 2021-01-04
55 Creative Agency Website From Scratch | HTML & CSS 1:26:51 2021-03-16
56 Build a Music Player | Vanilla JavaScript 44:06 2021-04-10
57 Bootstrap 5 Crash Course | Website Build & Deploy 1:18:48 2021-06-09
58 Hulu Webpage Clone | HTML & CSS 1:30:57 2021-07-15
59 Build a Starbucks Landing Page Clone 1:19:23 2021-11-23
60 CSS Grid Crash Course 53:45 2022-03-02
61 Tailwind Crash Course | Project From Scratch 1:35:39 2022-04-05
62 5 HTML, CSS & JS Mini Projects - Scroll Animation, Rotating Navigation, Drag Events, etc 1:41:24 2022-07-27
63 SpaceX Website Clone - HTML, CSS & JavaScript 2:13:53 2022-08-09
64 Build A Digital Resume & Host For Free 1:10:20 2022-08-11
65 Professional Website From Scratch | HTML & CSS For Beginners 2:18:34 2023-10-16

Embed a badge

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

Watch time: 2d 9h 10m · 65 videos

Markdown
[![Watch time: 2d 9h 10m · 65 videos](https://playlistduration.com/badge/playlist/PLillGF-RfqbZTASqIqdvm1R5mLrQq79CU.svg)](https://playlistduration.com/playlist/PLillGF-RfqbZTASqIqdvm1R5mLrQq79CU)
HTML
<a href="https://playlistduration.com/playlist/PLillGF-RfqbZTASqIqdvm1R5mLrQq79CU"><img src="https://playlistduration.com/badge/playlist/PLillGF-RfqbZTASqIqdvm1R5mLrQq79CU.svg" alt="Watch time: 2d 9h 10m · 65 videos" width="221" 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/PLillGF-RfqbZTASqIqdvm1R5mLrQq79CU 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.