CF

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

28h 10m 20s
English
Paid
Released
Added to CourseFlix

Advanced CSS and Sass: Flexbox, Grid, Animations and More! is a 124-lesson 28 hours 10 minutes self-paced course by Udemy. Built for developers who already know CSS basics but get tripped up by inheritance, specificity, and the cascade, this course pushes into the advanced end of CSS and Sass.

Course facts

Lessons
124
Duration
28 hours 10 minutes
Language
English
Released
December 2017
Added to CourseFlix
May 2023
Instructor
Udemy
Price
Premium

Built for developers who already know CSS basics but get tripped up by inheritance, specificity, and the cascade, this course pushes into the advanced end of CSS and Sass.

Core skills covered

  • Complex animations with @keyframes, transitions, and modern properties like clip-path and custom CSS properties
  • Flexbox and CSS Grid layouts for real-world responsive design
  • How the cascade, specificity, inheritance, and box model actually work under the hood
  • CSS architecture with the 7-1 rule and BEM for maintainable, scalable stylesheets
  • Sass fundamentals: variables, nesting, mixins, functions, and extends

Built for intermediate developers

Spanning more than 28 hours, the course assumes intermediate HTML and CSS knowledge and is aimed at developers ready to move past basic layouts into responsive images and video, fluid grids, and production-grade Sass workflows.

Who teaches Advanced CSS and Sass: Flexbox, Grid, Animations and More!? Udemy

Udemy thumbnail

Udemy is the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.

Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.

What lessons are included in Advanced CSS and Sass: Flexbox, Grid, Animations and More!?

This is a demo lesson (10:00 remaining)

Watch the first 10 minutes free. One payment unlocks all 124 lessons here and every other premium course. No auto-renew.

Watch all 124 lessons from $6.67/mo
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
Watch the other 123 lessons

One payment unlocks this course and every other premium course. No auto-renew.

See plans

What courses are similar to Advanced CSS and Sass: Flexbox, Grid, Animations and More!?

More courses by Udemy

Frequently asked questions

What are the prerequisites for taking this course?
This course is designed for individuals who have intermediate skills in HTML and CSS. It assumes a foundational understanding of CSS basics, including selectors and basic styling. Beginners might find the content challenging and are recommended to consider an introductory CSS course before enrolling in this advanced program.
What projects will I build throughout the course?
Throughout the course, you will build several sophisticated projects that apply advanced CSS techniques. These include creating complex animations, a custom grid system with floats, and a variety of website sections such as headers, footers, and popups. Each project is designed to reinforce your understanding of the concepts taught and provide real-world application experience.
Who is the target audience for this course?
The course is aimed at web developers and designers who have a solid foundation in CSS and wish to enhance their skills with advanced techniques. It is ideal for those looking to master modern CSS layout technologies like Flexbox and Grid, as well as those interested in CSS architecture and responsive design.
How does this course compare to other CSS courses?
This course offers a deep dive into advanced CSS topics that are not typically covered in beginner courses. It includes modern layout technologies such as Flexbox and CSS Grid, advanced responsive design techniques, and an introduction to Sass for CSS architecture. It provides a comprehensive and practical approach to mastering these subjects.
Which specific tools or platforms will I learn to use?
You will learn to use several tools and platforms, such as Sass for CSS preprocessing, npm for managing packages, and command-line interfaces for compiling Sass locally. You'll also explore using mixins in Sass to write efficient media queries, enhancing the maintainability and scalability of your CSS projects.
What topics are not covered in this course?
The course focuses on advanced CSS and Sass techniques. It does not cover basic HTML and CSS principles, server-side programming, or JavaScript. Those seeking foundational CSS knowledge or looking to integrate CSS with JavaScript frameworks may need to explore additional courses or resources.
What is the time commitment required to complete the course?
The course spans over 28 hours of video content, divided into 124 lessons. Students should allocate additional time for practice, projects, and review. A consistent study schedule is recommended to absorb the material thoroughly and apply it effectively in practical scenarios.