Advanced CSS and Sass: Flexbox, Grid, Animations and More!

28h 10m 20s
English
Paid

Elevate Your CSS Skills! Have you been coding CSS for some time, but want to improve your expertise? Do terms like inheritance, specificity, or the cascade leave you puzzled?

Great news! There's a comprehensive resource to master all the advanced CSS techniques and properties you've been curious about.

Welcome to "Advanced CSS and Sass: Flexbox, Grid, Animations, and More!"—the most comprehensive and modern CSS course available online. This course offers everything you desire in an advanced CSS curriculum and beyond.

What You Will Learn

Throughout this course, you will master:

  • Complex CSS animations and advanced responsive design techniques
  • Flexbox layouts and the power of Sass
  • CSS architecture and core CSS concepts
  • Creating sophisticated projects that hone your skills for real-world application

Course Outcomes

Upon completing this course, you will:

  1. Gain proficiency with the latest advanced CSS properties and techniques
  2. Master cutting-edge layout technologies like Flexbox and CSS Grid
  3. Be equipped to build responsive layouts for various devices and situations
  4. Possess a deep understanding of how CSS works behind the scenes
  5. Be skillful in architecting large CSS codebases for maintainability and reusability using Sass

Note: This course is designed for those with intermediate HTML and CSS skills. Beginners may wish to consider taking my other introductory course first.

Course Details

This expansive course spans 28+ hours. Highlights include:

  • Modern CSS Techniques: Create stunning designs with clip-path, mask-image, transform, perspective, custom CSS properties, and more.
  • Advanced CSS Animations: Master @keyframes, animations, and transitions for vibrant web pages.
  • In-depth Understanding of CSS Mechanics: Learn about the cascade, specificity, inheritance, box model, and stacking contexts.
  • CSS Architecture Strategies: Employ the 7-1 rule, BEM methodology, and write scalable, maintainable code.
  • Sass Introduction: Understand variables, nesting, mixins, functions, and extends.
  • Real-world Sass Application: Manage media queries and develop reusable code in projects.
  • Responsive Design Mastery: Explore fluid grids, flexible images, and responsive workflows.
  • Responsive Images and Videos: Implement resolution switching, use SVG and background videos effectively.
  • Flexbox and CSS Grid Layouts: Deep dive into concepts and apply layout techniques in real-world projects.

Join us to transform your CSS knowledge and create extraordinary web designs!

About the Author: udemy

udemy thumbnail
By connecting students all over the world to the best instructors, Udemy is helping individuals reach their goals and pursue their dreams. Udemy is the leading global marketplace for teaching and learning, connecting millions of students to the skills they need to succeed. Udemy helps organizations of all kinds prepare for the ever-evolving future of work. Our curated collection of top-rated business and technical courses gives companies, governments, and nonprofits the power to develop in-house expertise and satisfy employees’ hunger for learning and development.

Watch Online 124 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 124 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Welcome to the Most Advanced CSS Course Ever!
All Course Lessons (124)
#Lesson TitleDurationAccess
1
Welcome to the Most Advanced CSS Course Ever! Demo
03:55
2
Setting up Our Tools
02:53
3
Section Intro
00:46
4
Project Overview
05:43
5
Building the Header - Part 1
24:24
6
Building the Header - Part 2
17:07
7
Creating Cool CSS Animations
19:20
8
Building a Complex Animated Button - Part 1
15:58
9
Building a Complex Animated Button - Part 2
12:52
10
Section Intro
01:39
11
Three Pillars of Writing Good HTML and CSS (Never Forget Them!)
04:22
12
How CSS Works Behind the Scenes: An Overview
04:33
13
How CSS is Parsed, Part 1: The Cascade and Specificity
12:34
14
Specificity in Practice
05:56
15
How CSS is Parsed, Part 2: Value Processing
15:45
16
How CSS is Parsed, Part 3: Inheritance
04:06
17
Converting px to rem: An Effective Workflow
14:02
18
How CSS Renders a Website: The Visual Formatting Model
12:46
19
CSS Architecture, Components and BEM
09:18
20
Implementing BEM in the Natours Project
05:16
21
Section Intro
01:03
22
What is Sass?
05:00
23
First Steps with Sass: Variables and Nesting
25:23
24
First Steps with Sass: Mixins, Extends and Functions
17:06
25
A Brief Introduction to the Command Line
11:22
26
NPM Packages: Let's Install Sass Locally
13:49
27
NPM Scripts: Let's Write and Compile Sass Locally
13:11
28
The Easiest Way of Automatically Reloading a Page on File Changes
06:24
29
Section Intro
00:56
30
Converting Our CSS Code to Sass: Variables and Nesting
11:18
31
Implementing the 7-1 CSS Architecture with Sass
17:35
32
Review: Responsive Design Principles and Layout Types
07:49
33
Building a Custom Grid with Floats
37:04
34
Building the About Section - Part 1
23:26
35
Building the About Section - Part 2
21:53
36
Building the About Section - Part 3
17:31
37
Building the Features Section
30:21
38
Building the Tours Section - Part 1
25:29
39
Building the Tours Section - Part 2
31:01
40
Building the Tours Section - Part 3
16:37
41
Building the Stories Section - Part 1
19:41
42
Building the Stories Section - Part 2
14:15
43
Building the Stories Section - Part 3
13:50
44
Building the Booking Section - Part 1
18:20
45
Building the Booking Section - Part 2
18:38
46
Building the Booking Section - Part 3
23:11
47
Building the Footer
15:58
48
Building the Navigation - Part 1
29:38
49
Building the Navigation - Part 2
13:14
50
Building the Navigation - Part 3
15:37
51
Building a Pure CSS Popup - Part 1
25:15
52
Building a Pure CSS Popup - Part 2
16:56
53
Section Intro
01:01
54
Mobile-First vs Desktop-First and Breakpoints
17:36
55
Let's Use the Power of Sass Mixins to Write Media Queries
28:09
56
Writing Media Queries - Base, Typography and Layout
26:40
57
Writing Media Queries - Layout, About and Features Sections
12:34
58
Writing Media Queries - Tours, Stories and Booking Sections
20:27
59
An Overview of Responsive Images
05:42
60
Responsive Images in HTML - Art Direction and Density Switching
10:16
61
Responsive Images in HTML - Density and Resolution Switching
17:22
62
Responsive Images in CSS
11:44
63
Testing for Browser Support with @supports
21:44
64
Setting up a Simple Build Process with NPM Scripts
20:56
65
Wrapping up the Natours Project: Final Considerations
13:59
66
Section Intro
01:04
67
Why Flexbox: An Overview of the Philosophy Behind Flexbox
06:32
68
A Basic Intro to Flexbox: The Flex Container
15:09
69
A Basic Intro to Flexbox: Flex Items
10:35
70
A Basic Intro to Flexbox: Adding More Flex Items
06:15
71
Project Overview
07:15
72
Defining Project Settings and Custom Properties
13:41
73
Building the Overall Layout
12:01
74
Building the Header - Part 1
18:00
75
Building the Header - Part 2
14:49
76
Building the Header - Part 3
12:27
77
Building the Navigation - Part 1
11:37
78
Building the Navigation - Part 2
16:51
79
Building the Hotel Overview - Part 1
15:19
80
Building the Hotel Overview - Part 2
15:27
81
Building the Description Section - Part 1
12:54
82
Building the Description Section - Part 2
19:39
83
Building the User Reviews Section
22:53
84
Building the CTA Section
16:55
85
Writing Media Queries - Part 1
19:28
86
Writing Media Queries - Part 2
16:28
87
Wrapping up the Trillo Project: Final Considerations
14:46
88
Section Intro
01:00
89
Why CSS Grid: A Whole New Mindset
05:16
90
Quick Setup for This Section
02:12
91
Creating Our First Grid
12:16
92
Getting Familiar with the fr Unit
10:01
93
Positioning Grid Items
07:27
94
Spanning Grid Items
09:49
95
Grid Challenge
02:49
96
Grid Challenge: A Basic Solution
11:09
97
Naming Grid Lines
09:41
98
Naming Grid Areas
11:04
99
Implicit Grids vs. Explicit Grids
10:40
100
Aligning Grid Items
09:58
101
Aligning Tracks
13:00
102
Using min-content, max-content and the minmax() function
16:20
103
Responsive Layouts with auto-fit and auto-fill
10:58
104
Project Overview and Setup
11:32
105
Building the Overall Layout - Part 1
15:35
106
Building the Overall Layout - Part 2
24:33
107
Building the Features Section - Part 1
13:02
108
Building the Features Section - Part 2
20:28
109
Building the Story Section - Part 1
18:01
110
Building the Story Section - Part 2
11:39
111
Building the Homes Section - Part 1
15:47
112
Building the Homes Section - Part 2
18:52
113
Building the Gallery - Part 1
15:25
114
Building the Gallery - Part 2
12:28
115
Building the Footer
12:34
116
Building the Sidebar
05:09
117
Building the Header - Part 1
16:17
118
Building the Header - Part 2
09:52
119
Building the Realtors Section
11:23
120
Writing Media Queries - Part 1
17:13
121
Writing Media Queries - Part 2
18:39
122
Browser Support for CSS Grid
08:36
123
Wrapping up the Nexter Project: Final Considerations
06:45
124
See You Next Time, CSS Master!
02:29
Unlock unlimited learning

Get instant access to all 123 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription