Course Content
01 – Welcome, Welcome, Welcome!
0/2
001 Welcome to the Most Advanced CSS Course Ever!.mp4
03:54
003 Setting up Our Tools.mp4
02:52
02 – Natours Project — Setup and First Steps (Part 1)
0/8
001 Section Intro.mp4
00:44
002 Project Overview.mp4
05:42
002 Project Overview.mp4
05:42
003 Building the Header – Part 1.mp4
24:23
004 Building the Header – Part 2.mp4
17:06
005 Creating Cool CSS Animations.mp4
19:19
006 Building a Complex Animated Button – Part 1.mp4
15:56
007 Building a Complex Animated Button – Part 2.mp4
12:51
03 – How CSS Works A Look Behind the Scenes
0/11
001 Section Intro.mp4
01:38
002 Three Pillars of Writing Good HTML and CSS (Never Forget Them!).mp4
04:21
003 How CSS Works Behind the Scenes An Overview.mp4
04:32
004 How CSS is Parsed, Part 1 The Cascade and Specificity.mp4
12:33
005 Specificity in Practice.mp4
05:55
006 How CSS is Parsed, Part 2 Value Processing.mp4
15:44
007 How CSS is Parsed, Part 3 Inheritance.mp4
04:05
008 Converting px to rem An Effective Workflow.mp4
14:00
009 How CSS Renders a Website The Visual Formatting Model.mp4
12:45
010 CSS Architecture, Components and BEM.mp4
09:17
011 Implementing BEM in the Natours Project.mp4
05:14
04 – Introduction to Sass and NPM
0/8
001 Section Intro.mp4
01:02
002 What is Sass.mp4
04:58
003 First Steps with Sass Variables and Nesting.mp4
25:22
004 First Steps with Sass Mixins, Extends and Functions.mp4
17:05
005 A Brief Introduction to the Command Line.mp4
11:21
006 NPM Packages Let’s Install Sass Locally.mp4
13:48
007 NPM Scripts Let’s Write and Compile Sass Locally.mp4
13:10
008 The Easiest Way of Automatically Reloading a Page on File Changes.mp4
06:22
05 – Natours Project — Using Advanced CSS and Sass (Part 2)
0/24
013 Building the Stories Section – Part 1.mp4
19:40
024 Building a Pure CSS Popup – Part 2.mp4
16:55
023 Building a Pure CSS Popup – Part 1.mp4
25:13
022 Building the Navigation – Part 3.mp4
15:36
021 Building the Navigation – Part 2.mp4
13:13
020 Building the Navigation – Part 1.mp4
29:37
019 Building the Footer.mp4
15:57
018 Building the Booking Section – Part 3.mp4
23:10
017 Building the Booking Section – Part 2.mp4
18:37
016 Building the Booking Section – Part 1.mp4
18:18
015 Building the Stories Section – Part 3.mp4
13:49
014 Building the Stories Section – Part 2.mp4
14:14
001 Section Intro.mp4
00:55
012 Building the Tours Section – Part 3.mp4
16:36
011 Building the Tours Section – Part 2.mp4
31:00
010 Building the Tours Section – Part 1.mp4
25:28
009 Building the Features Section.mp4
30:19
008 Building the About Section – Part 3.mp4
17:30
007 Building the About Section – Part 2.mp4
21:51
006 Building the About Section – Part 1.mp4
23:25
005 Building a Custom Grid with Floats.mp4
37:03
004 Review Responsive Design Principles and Layout Types.mp4
07:48
003 Implementing the 7-1 CSS Architecture with Sass.mp4
17:33
002 Converting Our CSS Code to Sass Variables and Nesting.mp4
11:17
06 – Natours Project — Advanced Responsive Design (Part 3)
0/13
001 Section Intro.mp4
01:00
002 Mobile-First vs Desktop-First and Breakpoints.mp4
17:35
003 Let’s Use the Power of Sass Mixins to Write Media Queries.mp4
28:08
004 Writing Media Queries – Base, Typography and Layout.mp4
26:39
005 Writing Media Queries – Layout, About and Features Sections.mp4
12:33
006 Writing Media Queries – Tours, Stories and Booking Sections.mp4
20:26
007 An Overview of Responsive Images.mp4
05:41
008 Responsive Images in HTML – Art Direction and Density Switching.mp4
10:14
009 Responsive Images in HTML – Density and Resolution Switching.mp4
17:21
010 Responsive Images in CSS.mp4
11:42
011 Testing for Browser Support with @supports.mp4
21:42
012 Setting up a Simple Build Process with NPM Scripts.mp4
20:55
013 Wrapping up the Natours Project Final Considerations.mp4
13:58
07 – Trillo Project — Master Flexbox!
0/22
012 Building the Navigation – Part 1.mp4
11:36
022 Wrapping up the Trillo Project Final Considerations.mp4
14:45
021 Writing Media Queries – Part 2.mp4
16:27
020 Writing Media Queries – Part 1.mp4
19:27
019 Building the CTA Section.mp4
16:54
018 Building the User Reviews Section.mp4
22:52
017 Building the Description Section – Part 2.mp4
19:38
016 Building the Description Section – Part 1.mp4
12:53
015 Building the Hotel Overview – Part 2.mp4
15:26
014 Building the Hotel Overview – Part 1.mp4
15:18
013 Building the Navigation – Part 2.mp4
16:50
001 Section Intro.mp4
01:03
011 Building the Header – Part 3.mp4
12:26
010 Building the Header – Part 2.mp4
14:48
009 Building the Header – Part 1.mp4
17:59
008 Building the Overall Layout.mp4
12:00
007 Defining Project Settings and Custom Properties.mp4
13:40
006 Project Overview.mp4
07:14
005 A Basic Intro to Flexbox Adding More Flex Items.mp4
06:14
004 A Basic Intro to Flexbox Flex Items.mp4
10:33
003 A Basic Intro to Flexbox The Flex Container.mp4
15:08
002 Why Flexbox An Overview of the Philosophy Behind Flexbox.mp4
06:31
08 – A Quick Introduction to CSS Grid Layouts
0/16
001 Section Intro.mp4
00:59
002 Why CSS Grid A Whole New Mindset.mp4
05:15
003 Quick Setup for This Section.mp4
02:11
004 Creating Our First Grid.mp4
12:15
005 Getting Familiar with the fr Unit.mp4
10:00
006 Positioning Grid Items.mp4
07:26
007 Spanning Grid Items.mp4
09:48
008 Grid Challenge.mp4
02:48
009 Grid Challenge A Basic Solution.mp4
11:08
010 Naming Grid Lines.mp4
09:40
011 Naming Grid Areas.mp4
11:03
012 Implicit Grids vs. Explicit Grids.mp4
10:39
013 Aligning Grid Items.mp4
09:57
014 Aligning Tracks.mp4
12:59
015 Using min-content, max-content and the minmax() function.mp4
16:19
016 Responsive Layouts with auto-fit and auto-fill.mp4
10:57
09 – Nexter Project — Master CSS Grid Layouts!
0/20
011 Building the Gallery – Part 2.mp4
12:27
020 Wrapping up the Nexter Project Final Considerations.mp4
06:44
019 Browser Support for CSS Grid.mp4
08:35
018 Writing Media Queries – Part 2.mp4
18:38
017 Writing Media Queries – Part 1.mp4
17:12
016 Building the Realtors Section.mp4
11:22
015 Building the Header – Part 2.mp4
09:51
014 Building the Header – Part 1.mp4
16:15
013 Building the Sidebar.mp4
05:08
012 Building the Footer.mp4
12:33
001 Project Overview and Setup.mp4
11:31
010 Building the Gallery – Part 1.mp4
15:24
009 Building the Homes Section – Part 2.mp4
18:51
008 Building the Homes Section – Part 1.mp4
15:45
007 Building the Story Section – Part 2.mp4
11:38
006 Building the Story Section – Part 1.mp4
18:00
005 Building the Features Section – Part 2.mp4
20:27
004 Building the Features Section – Part 1.mp4
13:01
003 Building the Overall Layout – Part 2.mp4
24:31
002 Building the Overall Layout – Part 1.mp4
15:33
10 – That’s It, Everyone!
0/1
001 See You Next Time, CSS Master!.mp4
02:28
[Last updated 11/2023] Advanced CSS and Sass: Flexbox, Grid, Animations and More! (Udemy – Vietsub and Engsub)
Previous
Next
0% Complete