CF

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

28h 10m 20s
English
Paid

Advanced CSS and Sass: Flexbox, Grid, Animations and More! is a 124-lesson 28 hours 10 minutes self-paced course by Udemy. Elevate Your CSS Skills!

Course facts

Lessons
124
Duration
28 hours 10 minutes
Level
All levels
Language
English
Updated
Instructor
Udemy
Price
Premium

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!

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)

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

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.