CSS Saas Flexbox Grid Course
at just
$69
Enroll Now
Sign Up
Sign In
CSS Saas Flexbox Grid Course
CSS, Saas Flexbox, Grid Course
Section 1 : Welcome, Welcome, Welcome
Lecture 1
Welcome to the Most Advanced CSS Course Ever! c
3:44
Lecture 2
READ BEFORE YOU START
Lecture 3
Setting up Our Tools
2:30
Section 2 : Natours Project — Setup and First Steps (Part 1)
Lecture 4
Section Intro
0:35
Lecture 5
Project Overview
5:24
Lecture 6
Building the Header - Part 1
24:5
Lecture 7
Building the Header - Part 2
16:55
Lecture 8
Creating Cool CSS Animations
19:2
Lecture 9
Building a Complex Animated Button - Part 1
15:40
Lecture 10
Building a Complex Animated Button - Part 2
12:34
Section 3 : How CSS Works A Look Behind the Scenes
Lecture 11
Section Intro
1:22
Lecture 12
Three Pillars of Writing Good HTML and CSS (Ne
3:41
Lecture 13
How CSS Works Behind the Scenes An Overview.
3:25
Lecture 14
How CSS is Parsed, Part 1 The Cascade and
12:7
Lecture 15
Specificity in Practice
5:26
lecture 16
How CSS is Parsed, Part 2 Value Processing
15:5
Lecture 17
How CSS is Parsed, Part 3 Inheritance
3:42
Lecture 18
Converting px to rem An Effective Workflow
13:41
Lecture 19
How CSS Renders a Website The Visual Formatting M
12:22
Lecture 20
CSS Architecture, Components and BEM.
Preview
Lecture 21
Implementing BEM in the Natours Project
4:48
Section 4 : Introduction to Sass and NPM
Lecture 22
Section Intro
0:53
Lecture 23
What is Sass
4:32
Lecture 24
First Steps with Sass Variables and Nesting
24:50
Lecture 25
First Steps with Sass Mixins, Extends and Function
16:45
Lecture 26
A Brief Introduction to the Command Line
10:2
Lecture 27
NPM Packages Let's Install Sass Locally
13:9
Lecture 28
NPM Scripts Let's Write and Compile Sass Locally
12:52
Lecture 29
The Easiest Way of Automatically Reloading a Page
5:50
Section 5 : Natours Project — Using Advanced CSS and Sass (Part 2
Lecture 30
Section Intro
0:43
Lecture 31
Converting Our CSS Code to Sass Variables and Nes
10:56
Lecture 32
Implementing the 7-1 CSS Architecture with Sass
17:9
Lecture 33
Review Basic Principles of Responsive Design and L
4:1
Lecture 34
Building a Custom Grid with Floats
36:42
Lecture 35
Building the About Section - Part 1
23:4
Lecture 36
Building the About Section - Part 2
21:37
Lecture 37
Building the About Section - Part 3
17:17
Lecture 38
Building the Features Section
30:6
Lecture 39
Building the Tours Section - Part 1
25:3
Lecture 39
Building the Tours Section - Part 1
25:3
Lecture 40
Building the Tours Section - Part 2
30:51
Lecture 41
Building the Tours Section - Part 3
16:23
Lecture 42
Building the Stories Section - Part 1
19:23
Lecture 43
Building the Stories Section - Part 2
13:57
Lecture 44
Building the Stories Section - Part 3
13:42
Lecture 45
Building the Booking Section - Part 1
17:48
Lecture 46
Building the Booking Section - Part 2
18:27
Lecture 47
Building the Booking Section - Part 3
22:53
Lecture 48
Building the Footer
Preview
Lecture 49
Building the Navigation - Part 1
Preview
Lecture 50
Building the Navigation - Part 2
12:53
Lecture 51
Building the Navigation - Part 3
15:17
Lecture 52
Building a Pure CSS Popup - Part 1
24:57
Lecture 53
Building a Pure CSS Popup - Part 2
16:39
Section 6 : Natours Project — Advanced Responsive Design (Part 3
Lecture 54
Section Intro
0:50
Lecture 55
Mobile-First vs Desktop-First and Breakpoints
17:7
Lecture 56
Let's Use the Power of Sass Mixins to Write Media
27:48
Lecture 57
Writing Media Queries - Base, Typography and Layou
26:21
Lecture 58
Writing Media Queries - Layout, About and Features
12:17
Lecture 59
Writing Media Queries - Tours, Stories and Booking
20:8
Lecture 60
An Overview of Responsive Images
5:11
Lecture 61
Responsive Images in HTML - Art Direction and Dens
9:59
Lecture 62
Responsive Images in HTML - Density and Resolutio
17:6
Lecture 63
Responsive Images in CSS
11:28
Lecture 64
Testing for Browser Support with @supports
Preview
Lecture 66
Wrapping up the Natours Project Final Consideratio
13:37
Section 7 : Trillo Project — Master Flexbox
Lecture 67
Section Intro
0:54
Lecture 68
Why Flexbox An Overview of the Philosophy Behind
6:11
Lecture 69
A Basic Intro to Flexbox The Flex Container
14:53
Lecture 70
A Basic Intro to Flexbox Flex Items
10:13
Lecture 71
A Basic Intro to Flexbox Adding More Flex Items
5:57
Lecture 72
Project Overview
6:59
Lecture 73
Defining Project Settings and Custom Properties
13:25
Lecture 74
Building the Overall Layout
11:46
Lecture 75
Building the Header - Part 1
17:36
Lecture 76
Building the Header - Part 2
14:35
Lecture 77
Building the Header - Part 3
12:12
Lecture 78
Building the Navigation - Part 1
11:21
Lecture 79
Building the Navigation - Part 2
16:28
Lecture 80
Building the Hotel Overview - Part 1
15:4
Lecture 81
Building the Hotel Overview - Part 2
15:12
Lecture 82
Building the Description Section - Part 1
12:39
Lecture 83
Building the Description Section - Part 2
19:25
Lecture 84
Building the User Reviews Section
22:34
Lecture 85
Building the CTA Section
16:39
Lecture 86
Writing Media Queries - Part 1
18:46
Lecture 87
Writing Media Queries - Part 2
16:1
Lecture 88
Wrapping up the Trillo Project Final Considerati
14:26
Section 8 : A Quick Introduction to CSS Grid Layouts
Lecture 89
Section Intro
0:49
Lecture 90
Why CSS Grid A Whole New Mindset
4:56
Lecture 91
Quick Setup for This Section
1:35
Lecture 92
Creating Our First Grid
11:52
Lecture 93
. Getting Familiar with the fr Unit
Preview
Lecture 94
Positioning Grid Items
7:11
Lecture 95
Spanning Grid Items
9:28
Lecture 96
Grid Challenge
2:29
Lecture 97
Grid Challenge A Basic Solution
10:39
Lecture 98
Naming Grid Lines
9:18
Lecture 99
Naming Grid Areas
10:40
Lecture 100
Implicit Grids vs. Explicit Grids
10:19
Lecture 101
Aligning Grid Items
9:40
Lecture 102
Aligning Tracks
12:31
Lecture 103
Using min-content, max-content and the minmax() fu
15:52
Lecture 104
Responsive Layouts with auto-fit and auto-fill.
10:33
Section 9 : Nexter Project — Master CSS Grid Layouts
Lecture 105
Project Overview and Setup
11:6
Lecture 106
Building the Overall Layout - Part 1
15:20
Lecture 107
Building the Overall Layout - Part 2
24:12
Lecture 108
Building the Features Section - Part 1
20:9
Lecture 109
Building the Features Section - Part 2
20:9
Lecture 110
Building the Story Section - Part 1 copy
17:45
Lecture 111
Building the Story Section - Part 2
11:24
Lecture 112
Building the Homes Section - Part 1
15:22
Lecture 113
Building the Homes Section - Part 2
18:37
Lecture 114
Building the Gallery - Part 1
14:56
Lecture 115
Building the Gallery - Part 2
12:15
Lecture 116
Building the Footer
12:17
Lecture 117
Building the Sidebar
4:54
Lecture 118
Building the Header - Part 1
16:1
Lecture 119
Building the Header - Part 2
9:39
Lecture 120
Building the Realtors Section copy
11:1
Lecture 121
Writing Media Queries - Part 1
16:48
Lecture 122
Writing Media Queries - Part 2
18:5
Lecture 123
Browser Support for CSS Grid
8:11
Lecture 124
Wrapping up the Nexter Project Final Consideratio
6:30
Section 10 : That's It, Everyone
Lecture 125
See You Next Time, CSS Master
1:41
Lecture 126
My Other Courses + Updates
$69
Take this course now.
Enroll Now
Lectures
126
Video
27:33:56 Hours
Skill level
intermediate
level
Languages
English
Includes
Lifetime access
Certificate of Completion
Preview
×