CSS - The Complete Guide 2022 (incl. Flexbox, Grid & Sass) is a 266-lesson 20 hours 54 minutes self-paced course by Academind Pro (Maximilian Schwarzmüller), Udemy. CSS - short for C ascading S tyle S heets - is a "programming language" you use to turn your raw HTML pages into real beautiful websites.
CSS - short for Cascading Style Sheets - is a "programming language" you use to turn your raw HTML pages into real beautiful websites.
This course covers it all - we start at the very basics (What is CSS? How does it work? How do you use it)? and gradually dive in deeper and deeper. And we do this by showing both practical examples as well as the theory behind it.
Getting started with CSS might look easy but there actually is a lot of depth to CSS - hence this course provides different "Tracks" or "Entry points" to exactly meet your demands and reflect you current knowledge level:
The Basics Track: Start from scratch, learn CSS from the ground up. You start with lecture 1 and simply follow through to the end.
The Advanced Track: You already know the CSS basics, you know what selectors are and how it works but you want to dive in deeper and learn some advanced features and usages.
The Expert Track: You got the advanced knowledge, too, but you want to dive into things like Flexbox, CSS Grid, CSS Variables or Sass. This track is for you.
Of course this course offers the theory and practical examples - we'll build an entire real course project throughout the course - but there also are multiple assignments, quizzes and challenges for you to practice individual concepts taught throughout the course.
Talking about the course project - we'll build the frontend (no backend) of a fictional web hosting company. We'll have a starting screen which has different sections, we got a responsive design with an animated side-drawer, we got modals and forms and in general we got a lot of CSS animations, font styles and more!
Here's what's inside the course in detail - this is all also applied to the mentioned course project:
The basics about selectors, combinators and how you set up styling rules in general
Properties, values and decalarations
How specifity and inheritance work and why it's called "Cascading" Style Sheets
Important theoretical concepts like the "Box Model"
How the default position of elements can be changed
Styling backgrounds (e.g. gradients) and images
Which units and dimensions you typically use in CSS (px, rem, % and more)
How JavaScript and CSS interact
Responsive design and what "Mobile First" means
Styling forms and form inputs
Working with text, fonts and text styles
Flexbox! How it works and how to use it
Using the CSS Grid and how it differs from Flexbox
Transforming and animating HTML elements with the help of CSS
Writing future-proof CSS with features like CSS variables or best-practice class names
Using Sass and what it actually is all about
Is this course for you?
It's for you if ...
you started with learning web development and you want to build more beautiful websites
you already know CSS but want to dive deeper
you're using CSS in a trial-and-error manner and want to change this (you should!)
You might come back later if ...
you're an absolute CSS pro and you know the CSS working group drafts by heart
you're a backend-only developer (Node, PHP, NO HTML or frontend JavaScript)
you're a total newcomer to web development and you don't know the basics about HTML
Academind is the teaching brand of Maximilian Schwarzmüller (Max) and Manuel Lorenz, two German developers whose Udemy catalog has become one of the largest single-instructor presences on that platform. Max in particular is widely cited as one of the clearest teachers of the JavaScript framework landscape — his Angular, React, Vue, and Node.js courses have collectively taught millions of students.
The Academind Pro platform extends beyond Udemy with deeper, more comprehensive courses aimed at developers building real applications rather than picking up syntax. Course material covers the full modern web stack: React (including Next.js), Vue, Angular, Node.js, NestJS, TypeScript, Docker, AWS, React Native, Flutter, and the broader full-stack JavaScript ecosystem.
The CourseFlix listing under this source carries over 25 Academind Pro courses spanning that range. Material is paid; Academind Pro runs on per-course pricing on the original platform. Courses are taught in Max's signature thorough, build-an-application-with-me style — long-form, deeply project-based, and continuously updated as the underlying frameworks evolve.
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.
| # | Lesson Title | Duration |
|---|---|---|
| 1 | Introduction | 01:40 |
| 2 | What is CSS? | 03:00 |
| 3 | CSS History, Present & Future | 01:51 |
| 4 | Course Outline | 04:35 |
| 5 | Course Prerequisites | 00:44 |
| 6 | How To Get The Most Out Of This Course | 02:50 |
| 7 | Recommended Tools | 01:27 |
| 8 | Module Introduction | 00:56 |
| 9 | Understanding the Course Project Setup | 02:45 |
| 10 | Adding CSS to our Project with Inline Styles | 03:54 |
| 11 | Understanding the <style> Tag & Creating a .css File | 06:28 |
| 12 | Applying Additional Styles & Importing Google Fonts | 06:52 |
| 13 | Theory Time - Selectors | 08:57 |
| 14 | Understanding the "Cascading" Style & Specificity​ | 08:15 |
| 15 | Understanding Inheritance | 05:48 |
| 16 | Adding Combinators | 06:17 |
| 17 | Theory Time - Combinators | 05:43 |
| 18 | Summarizing Properties & Selectors | 03:50 |
| 19 | Wrap Up | 02:03 |
| 20 | Module Introduction | 01:20 |
| 21 | Introducing the CSS Box Model | 03:37 |
| 22 | Understanding the Box Model | 03:02 |
| 23 | Understanding Margin Collapsing and Removing Default Margins | 03:06 |
| 24 | Theory Time - Working with Shorthand Properties | 03:49 |
| 25 | Applying Shorthands in Practice | 02:06 |
| 26 | Diving Into the Height & Width Properties | 06:08 |
| 27 | Understanding Box Sizing | 06:44 |
| 28 | Adding the Header to our Project | 05:38 |
| 29 | Understanding the Display Property | 07:13 |
| 30 | Applying the Display Property & Styling our Navigation Bar | 06:54 |
| 31 | Understanding an Unexpected "inline-block" Behaviour | 02:04 |
| 32 | Working with "text-decoration" & "vertical-align" | 04:55 |
| 33 | Styling Anchor Tags | 04:01 |
| 34 | Adding Pseudo Classes | 01:48 |
| 35 | Theory Time - Pseudo Classes & Pseudo Elements | 05:39 |
| 36 | Grouping Rules | 01:16 |
| 37 | Working with "font-weight" & "border" | 02:05 |
| 38 | Adding & Styling a CTA-Button | 04:10 |
| 39 | Adding a Background Image to our Project | 01:51 |
| 40 | Properties Worth to Remember | 01:30 |
| 41 | Wrap Up | 02:32 |
| 42 | Module Introduction | 00:42 |
| 43 | Using Multiple CSS Classes & Combined Selectors | 07:10 |
| 44 | Classes or IDs? | 04:06 |
| 45 | (Not) using !important | 03:16 |
| 46 | Selecting the Opposite with :not() | 03:30 |
| 47 | CSS & Browser Support | 03:52 |
| 48 | Wrap Up | 01:07 |
| 49 | Module Introduction | 00:38 |
| 50 | Adding Style to our Plans | 08:35 |
| 51 | Working on the Recommended Plan | 06:34 |
| 52 | Styling the Badge with "border-radius" | 03:23 |
| 53 | Styling our List | 03:04 |
| 54 | Working on the Title and the Price of our Packages | 04:34 |
| 55 | Improving our Action Button | 06:41 |
| 56 | Understanding Outlines | 02:18 |
| 57 | Presenting the Core Features to the User | 01:23 |
| 58 | Styling the Headline of the Core Features Section | 03:39 |
| 59 | Preparing the Content of the Key Feature Area | 07:16 |
| 60 | Adding the Footer | 06:50 |
| 61 | What we Achieved so Far | 01:47 |
| 62 | Adding the Packages Page | 06:25 |
| 63 | Your Challenge | 01:32 |
| 64 | Styling the Links | 03:56 |
| 65 | Styling our Package Boxes | 07:16 |
| 66 | Adding "float" to our Package | 05:15 |
| 67 | Fixing the Hover Effect | 04:12 |
| 68 | Adding the Final Touches | 03:02 |
| 69 | Module Introduction | 02:45 |
| 70 | Why Positioning will Improve our Website | 02:33 |
| 71 | Understanding Positioning - The Theory | 05:56 |
| 72 | Working with the "fixed" Value | 09:51 |
| 73 | Creating a Fixed Navigation Bar | 03:55 |
| 74 | Using "position" to Add a Background Image | 06:04 |
| 75 | Understanding the Z-Index | 07:00 |
| 76 | Adding a Badge to our Package | 08:01 |
| 77 | Styling & Positioning our Badge with "absolute" and "relative" | 03:11 |
| 78 | Diving Deeper into Relative Positioning | 04:04 |
| 79 | Working with "overflow" and Relative Positioning | 04:19 |
| 80 | Introducing "sticky" Positioning | 06:54 |
| 81 | Understanding the Stacking Context | 05:54 |
| 82 | Wrap Up | 04:13 |
| 83 | Optional: Advanced Track Introduction | 02:23 |
| 84 | Module Introduction | 01:07 |
| 85 | Understanding "background-size" | 08:42 |
| 86 | Working with "background-position" | 05:01 |
| 87 | The "background" Shorthand - Theory | 02:13 |
| 88 | Applying "background" Origin, Clip & Attachment | 05:52 |
| 89 | Using the "background" Shorthand on our Project | 02:20 |
| 90 | Styling Images | 07:34 |
| 91 | Adding the Customers Page to our Website | 03:20 |
| 92 | Working on the Image Layout | 08:08 |
| 93 | Understanding Linear Gradients | 06:17 |
| 94 | Applying Radial Gradients | 05:42 |
| 95 | Stacking Multiple Backgrounds | 04:51 |
| 96 | Understanding Filters | 04:01 |
| 97 | Adding & Styling SVGs - The Basics | 04:21 |
| 98 | Wrap Up | 02:15 |
| 99 | Module Introduction | 02:36 |
| 100 | What's Wrong With Our Project Units? | 05:22 |
| 101 | Where Units Matter | 06:03 |
| 102 | An Overview of Available Sizes & Units | 04:25 |
| 103 | Rules to Remember: Fixed Positioning & "%" | 04:16 |
| 104 | Rules to Remember: Absolute Positioning & "%" | 08:15 |
| 105 | Rules to Remember: Relative / Static Positioning & "%" | 08:54 |
| 106 | Fixing the Height 100% Issue | 12:03 |
| 107 | Defining the Font Size in the Root Element | 02:19 |
| 108 | Using "min-width/height" & "max-width/height" | 05:28 |
| 109 | Working with "rem" & "em" | 12:48 |
| 110 | Adding "rem" to Additional Properties | 08:18 |
| 111 | Finishing "rem" | 05:22 |
| 112 | Understanding the Viewport Units "vw" &"vh" | 09:48 |
| 113 | Choosing the Right Unit | 05:31 |
| 114 | Using "auto" to Center Elements | 01:43 |
| 115 | Cleaning Up our Code | 01:07 |
| 116 | Wrap Up | 04:24 |
| 117 | Module Introduction | 01:17 |
| 118 | Adding a Modal | 04:14 |
| 119 | Selecting & Manipulating Styles with JavaScript | 10:35 |
| 120 | Adding an Event Listener | 06:06 |
| 121 | Adding a Side Navigation Bar | 07:15 |
| 122 | Opening and Closing the Hamburger Menu | 03:58 |
| 123 | Manipulating Element Classes | 06:41 |
| 124 | Understanding Property Notations | 03:13 |
| 125 | Cleaning Up our Code | 05:32 |
| 126 | Wrap Up | 01:16 |
| 127 | Module Introduction | 01:46 |
| 128 | Why our Project Should Become Responsive | 02:26 |
| 129 | Understanding Hardware Pixels vs. Software Pixels | 10:30 |
| 130 | Comparing the Viewport Metatag (HTML) and Media Queries (CSS) | 03:05 |
| 131 | Understanding the "viewport" Metatag | 07:23 |
| 132 | Designing Websites "Mobile First" | 01:55 |
| 133 | Adding our First Media Queries | 12:53 |
| 134 | Things to Keep in Mind when Working with Media Queries | 08:10 |
| 135 | Finding the Right Breaking Points | 03:46 |
| 136 | Creating the Mobile First Design for our Plans | 06:38 |
| 137 | Making the Plans Responsive | 08:36 |
| 138 | Your Challenge | 06:07 |
| 139 | Working with Logical Operators | 08:14 |
| 140 | Improving the Customers Page | 14:59 |
| 141 | Improving the Packages Page | 05:42 |
| 142 | Cleaning Up the Navigation Bar | 04:40 |
| 143 | Positioning our Footer Correctly | 10:11 |
| 144 | Wrap Up | 02:16 |
| 145 | Module Introduction | 01:33 |
| 146 | Adding the Unstyled Form | 02:38 |
| 147 | Page Initialization | 06:36 |
| 148 | Understanding Advanced Attribute Selectors | 06:03 |
| 149 | Working on the General Layout | 07:16 |
| 150 | Restyling the Form Elements | 06:30 |
| 151 | Styling the Checkbox | 06:53 |
| 152 | Providing Validation Feedback | 08:51 |
| 153 | Styling the Signup Button | 03:43 |
| 154 | Wrap Up | 01:30 |
| 155 | Module Introduction | 01:21 |
| 156 | Comparing Generic Families & Font Families | 02:58 |
| 157 | Understanding the Browser Settings | 06:18 |
| 158 | Using the Default Font Families | 06:54 |
| 159 | Understanding the "font-family" Syntax | 06:19 |
| 160 | Working with Locally Saved Fonts | 03:51 |
| 161 | Working with Google Fonts | 10:29 |
| 162 | Understanding Font Faces & "font-style" | 06:51 |
| 163 | Importing our Custom Fonts | 09:04 |
| 164 | Understanding Font Formats | 05:42 |
| 165 | Diving into Font Properties | 03:11 |
| 166 | Adding "letter-spacing" | 04:44 |
| 167 | Changing the Line Height | 06:08 |
| 168 | Applying "text-decoration" & "text-shadow" | 05:52 |
| 169 | Understanding the "font" Shorthand | 08:40 |
| 170 | Loading Performance & "font-display" | 09:50 |
| 171 | Wrap Up | 03:49 |
| 172 | Optional: Expert Track Introduction | 03:24 |
| 173 | Module Introduction | 01:33 |
| 174 | How we Could Improve our Project | 02:59 |
| 175 | Understanding Flexbox | 03:19 |
| 176 | Creating a Flex Container | 05:34 |
| 177 | Using "flex-direction" & "flex-wrap" | 05:37 |
| 178 | Understanding the Importance of Main Axis & Cross Axis | 07:28 |
| 179 | Working with "align-items" & "justify-content" | 11:00 |
| 180 | And What About "align-content"? | 02:41 |
| 181 | Improving the Navigation Bar with Flexbox | 12:03 |
| 182 | Your Challenge - Working on the Mobile Navigation Bar | 04:18 |
| 183 | Improving the Footer | 05:36 |
| 184 | [OPTIONAL] Assignment Solution | 08:33 |
| 185 | Adding Flexbox to the Customers Page | 03:17 |
| 186 | Using the "order" Property for a Flex Item | 06:08 |
| 187 | Working with "align-self" | 02:45 |
| 188 | Understanding "flex-grow" | 07:36 |
| 189 | Applying "flex-shrink" | 03:13 |
| 190 | Comparing "flex-basis" vs "width" & "height" | 08:36 |
| 191 | Wrap Up | 03:53 |
| 192 | Module Introduction | 01:15 |
| 193 | What is the CSS Grid? | 01:28 |
| 194 | Getting Started | 02:24 |
| 195 | Turning a Container into a Grid | 03:22 |
| 196 | Defining Columns & Rows | 05:50 |
| 197 | Positioning Child Elements in a Grid | 04:14 |
| 198 | Using "element-sizing", "repeat" & "minmax" | 06:46 |
| 199 | Advanced Element Positioning | 06:31 |
| 200 | Working with Named Lines | 03:54 |
| 201 | Understanding Column & Row Shorthands | 02:55 |
| 202 | Working with Gaps | 02:34 |
| 203 | Adding Named Template Areas | 06:40 |
| 204 | Creating Automatically Generated Grid Areas | 07:11 |
| 205 | Using the Grid on our Project | 09:11 |
| 206 | Working with "fit-content" | 03:32 |
| 207 | Positioning Grid Elements | 03:36 |
| 208 | Positioning the Entire Grid Content | 03:18 |
| 209 | Positioning Elements Individually | 01:36 |
| 210 | Understanding Responsive Grids | 05:31 |
| 211 | Applying Autoflow | 06:40 |
| 212 | Comparing the Explicit & Implicit Grid | 02:32 |
| 213 | Understanding "auto-fill" & "auto-fit" | 03:34 |
| 214 | Creating a Dense Grid | 03:23 |
| 215 | Styling the Project Form with Grid | 09:46 |
| 216 | Comparing Grid & Flexbox | 02:28 |
| 217 | Next Steps | 01:32 |
| 218 | Wrap Up | 03:50 |
| 219 | Module Introduction | 00:32 |
| 220 | Rotating Elements and setting transform-origin | 03:46 |
| 221 | Using Rotate and Translate | 04:58 |
| 222 | Working with "skew" and "scale" | 06:19 |
| 223 | Applying Transformation Shorthands | 02:25 |
| 224 | Rotating Elements in 3 Dimensions | 04:20 |
| 225 | Understanding the "perspective" Property | 03:38 |
| 226 | Moving Elements along the Z-Axis with "translateZ" | 03:55 |
| 227 | Rotating the Container with "transform style" | 03:45 |
| 228 | Flipping Elements & "backface-visibility" | 01:16 |
| 229 | Wrap Up | 01:15 |
| 230 | Module Introduction | 00:23 |
| 231 | Understanding and Applying Transitions | 07:24 |
| 232 | Working with Timing Functions | 02:51 |
| 233 | Transitions & "display" | 06:12 |
| 234 | Using CSS Animations | 09:02 |
| 235 | Adding Multiple Keyframes | 03:23 |
| 236 | Adding Animations to our Customers Page | 04:00 |
| 237 | Using JavaScript Animation Event Listeners | 03:25 |
| 238 | Wrap Up | 01:36 |
| 239 | Module Introduction | 00:35 |
| 240 | CSS Modules & Their Working Groups | 01:56 |
| 241 | Using CSS Variables | 07:32 |
| 242 | Understanding & Using Vendor Prefixes | 04:49 |
| 243 | Which Prefixes Should You Use? | 02:59 |
| 244 | Detecting Browser Support with @supports | 05:10 |
| 245 | Polyfills | 02:46 |
| 246 | Eliminating Cross-Browser Inconsistencies | 02:59 |
| 247 | How to Name CSS Classes | 04:53 |
| 248 | Vanilla CSS vs Frameworks | 08:37 |
| 249 | Wrap Up | 04:17 |
| 250 | Module Introduction | 00:43 |
| 251 | What is Sass & Scss? | 03:32 |
| 252 | Installing Sass | 04:26 |
| 253 | Things to be Improved with Sass | 01:34 |
| 254 | Nesting Selectors | 06:36 |
| 255 | Adding Nested Properties | 01:28 |
| 256 | Understanding Variables | 03:06 |
| 257 | Storing Lists & Maps in Variables | 05:59 |
| 258 | Built-In Functions | 03:19 |
| 259 | Adding Simple Arithmetics | 02:25 |
| 260 | Adding Better Import and Partials | 04:47 |
| 261 | Improving Media Queries | 02:25 |
| 262 | Understanding Inheritance | 03:34 |
| 263 | Adding Mixins | 06:46 |
| 264 | Using the Ampersand Operator | 02:58 |
| 265 | Wrap Up | 01:15 |
| 266 | Course Roundup | 01:57 |
Updated 10mo ago
Updated 2y ago
Updated 2y ago
Updated 2y ago
Updated 2y ago
Updated 2y ago
Updated 2y ago
New![React Native - The Practical Guide [2024 Edition] thumbnail](https://cdnq.courseflix.net/course/thumbnail/react-native-the-practical-guide-2021-edition-160x90.webp "React Native - The Practical Guide [2024 Edition] thumbnail")
Updated 2y ago
Updated 2y ago
Updated 3y ago
Classic![Flutter & Dart - The Complete Guide [2023 Edition] thumbnail](https://cdnq.courseflix.net/course/thumbnail/flutter-dart-the-complete-guide-2023-edition-160x90.webp "Flutter & Dart - The Complete Guide [2023 Edition] thumbnail")
Classic