Advanced CSS and Sass: Flexbox, Grid, Animations and More! (Udemy.com)
The most advanced and modern CSS course on the internet: master flexbox, CSS Grid, responsive design, and so much more.
Created by: Jonas Schmedtmann
Last updated November 2024
Our take
Based on the ratings of 46,326 students, a sample of their written reviews and the syllabus, as the course stood in November 2024. No course pays to be reviewed.
Jonas Schmedtmann's course is a project-driven step up for people who already write HTML and CSS but want to go deeper. It runs about 28 hours across 126 lectures and 10 sections, built around three projects: Natours for advanced CSS, Sass and responsive design, Trillo for Flexbox, and Nexter for CSS Grid. A shorter section explains how the cascade, specificity and the box model actually work. The author says plainly that it is not for absolute beginners.
Reviewers keep coming back to the teaching. They say complex ideas get broken down clearly, the pace holds attention without rushing the hard parts, and the Q&A section is quick to answer. One reviewer says it helped with client work, and another says it moved their understanding of CSS up a level. The sample holds almost no complaints. Of 46,326 ratings, about 350 are one or two stars, and three-star ratings are under 3 percent. The drawbacks the data does show are the length and the lack of quizzes or exercises.
It was last updated in November 2024. It is a paid course, but with this much material and a 4.8 rating it is good value for anyone who will actually finish the projects. Plan on coding along across many sessions, not one evening. Developers comfortable with CSS who want Flexbox, Grid and Sass in real builds should take it. Newcomers should start with a beginner course first, and anyone after one narrow topic can find something shorter.
Pros
- Three full projects (Natours, Trillo, Nexter) cover Sass, Flexbox and Grid in real builds
- Reviewers say hard topics are explained clearly without dragging out the easy ones
- A section on the cascade, specificity and the box model explains why CSS behaves as it does
- Q&A support is described as fast, and about 96 percent of ratings are 4 or 5 stars
Cons
- Not for beginners: it expects confident HTML and CSS before the first lecture
- No quizzes or coding exercises, so practice comes only from following the projects
- 28 hours long, a big time commitment for anyone who only needs one topic
This guy is great. He jumps right in to more complex elements of CSS, and yet his clear explanations made it easy for me to understand.
Intermediate. Needs solid HTML and CSS first; the course says it is not for absolute beginners.
What you will learn
- Tons of modern CSS techniques to create stunning designs and effects
- Advanced CSS animations with @keyframes, animation and transition
- How CSS works behind the scenes: the cascade, specificity, inheritance, etc.
- CSS architecture: component-based design, BEM, writing reusable code, etc.
- Flexbox layouts: build a huge real-world project with flexbox
- CSS Grid layouts: build a huge real-world project with CSS Grid
- Using Sass in real-world projects: global variables, architecting CSS, managing media queries, etc.
- Advanced responsive design: media queries, mobile-first vs desktop-first, em vs rem units, etc.
- Responsive images in HTML and CSS for faster pageloads
- SVG images and videos in HTML and CSS: build a background video effect
- The NPM ecosystem: development workflows and building processes
- Get friendly and fast support in the course Q&A
- Downloadable lectures, code and design assets for all projects
Course content
10 sections · 126 lectures · 28 hours of video 2 articles
- 1Welcome, Welcome, Welcome! 2 free previews3 lectures · 7 min
- 2Natours Project — Setup and First Steps (Part 1) 2 free previews7 lectures · 1.6 hours
- 3How CSS Works: A Look Behind the Scenes 1 free preview11 lectures · 1.5 hours
- 4Introduction to Sass and NPM 1 free preview8 lectures · 1.6 hours
- 5Natours Project — Using Advanced CSS and Sass (Part 2) 3 free previews24 lectures · 7.8 hours
- 6Natours Project — Advanced Responsive Design (Part 3) 1 free preview13 lectures · 3.5 hours
- 7Trillo Project — Master Flexbox! 5 free previews22 lectures · 5 hours
- 8A Quick Introduction to CSS Grid Layouts16 lectures · 2.4 hours
- 9Nexter Project — Master CSS Grid Layouts!20 lectures · 4.7 hours
- 10That's It, Everyone!2 lectures · 3 min
Who it is for
The instructor says it suits
- CSS developers who want to update their CSS skills to the most modern level
- CSS developers who want to expand their toolset to animations, flexbox, Sass, NPM, SVG, and much more
- Front-end developers who want to finally understand how CSS works behind the scenes
- In general: anyone who wants to truly master CSS!
What you need before you start
- This not a beginner course — You should be confident in coding HTML and CSS before taking the course
- Any computer and OS will work — Windows, macOS or Linux
- There is no need for any paid software — The text editor you already have works just fine
How it compares
Against the other 110 rated Udemy courses in CSS on CourseDuck:
- Rating4.8 out of 5higher than 97% of them
- Reviews46,326#2 of 111 by number of reviews
- Length28.1 hourslonger than 93% of them
- Last updatedNovember 2024more recently than 70% of them
Quality Score
Overall Score : 96 / 100
Course Description
CSS Awards Best Paid Course
Have you been coding CSS for some time, but want to take your game to the next level? Do you feel confused with CSS jargon like inheritance, specificity, or the cascade?
What if there was one resource, one place, where you could learn all the advanced and modern CSS techniques and properties you've been reading about?
Good news: there is!
Welcome to "Advanced CSS and Sass", the most advanced, the most modern, and the most complete CSS course on the internet. It's everything you want in an advanced CSS course, and more.
You will learn complex CSS animations, advanced responsive design techniques, flexbox layouts, Sass, CSS architecture, fundamental CSS concepts, and so much more.
Like in all my courses, you will build beautiful and carefully designed projects, that will make you proud of yourself and leave you ready to build complex projects on your own.
After finishing this course, you will:
1) Be up to speed with the most modern and advanced CSS properties and techniques;
2) Have mastered the cutting-edge layout technologies Flexbox and CSS Grid;
3) Be ready to build responsive layouts for all kinds of devices and situations;
4) Truly understand how CSS works behind the scenes;
5) Be able to architect large CSS codebases for reusability and maintainability using Sass.
Please note that this course is NOT for absolute beginners, so you should already be at an intermediate level in HTML and CSS (please check out my other course if that's not the case).
This course is massive, coming in at 28+ hours. Here is exactly what you will learn:
Tons of modern cutting-edge CSS techniques to create stunning designs and effects: clip-path, background-clip, mask-image, background-blend-mode, shape-outside, filter, backdrop-filter, object-fit, transform, column-count, hyphens, perspective, calc() and custom CSS properties;
Advanced CSS animations with @keyframes, animation, and transition;
Advanced CSS selectors, pseudo-classes, and pseudo-elements required for modern CSS development;
How CSS works behind the scenes: the cascade, specificity, inheritance, value processing, the visual formatting model, the box model, box types, positioning schemes, and stacking contexts;
CSS architecture: The 7-1 rule, component-based design, the BEM methodology, writing reusable, maintainable, and scalable code;
Introduction to Sass: variables, nesting, partials, imports, mixins, functions, extends, and more;
Using Sass in real-world projects: setting global variables, building for reusability, architecting CSS, and managing media queries;
The NPM ecosystem: setting up a development process to compile Sass and automatic browser reload, and creating a build process to concatenate, prefix, and compress CSS files;
Modern responsive design: fluid grids, layout types, flexible images, using media queries to test for different screen widths, pixel densities, and touch capabilities;
Advanced responsive design workflows: mobile-first vs desktop-first strategies, selecting breakpoints, em vs rem units and feature queries to test for browser support;
Responsive images in HTML and CSS for faster pageloads: resolution switching, density switching, art direction;
SVG images in HTML and CSS: how and why to use SVG, generating SVG sprites, changing SVG colors in CSS and best practices;
Videos in HTML and CSS: building a background video effect;
Flexbox layouts: main concepts, introduction to both flex container and flex item-specific properties, advanced positioning techniques applied to a huge real-world project;
CSS Grid layouts: main concepts, CSS grid vs flexbox, and layout techniques applied to a real-world project. This part alone could be an entire course!
Why should you take this course?
So you saw that the course is absolutely full-packed with content. But maybe you're still not sure if you should actually learn advanced CSS?
That's probably because CSS is so easy to get started with. In fact, most developers highly underestimate the importance and power of CSS. But nothing could be further away from the truth!
CSS is what makes our design come to life. And there is so much we can do with it! Mastering advanced techniques like flexbox, CSS grid, and animations, will give you an edge over many CSS developers out there who still use outdated methods.
Plus, CSS can become a real nightmare when you try to master it, and when you have to maintain large projects. So having a good grasp on fundamental concepts is an absolute must for any serious front-end developer.
And this course will help you with all that!
So, should you take this course? The answer is most likely a big YES!
And I packed so much content into this course, that no matter if you're just starting out, or if you're already an experienced front-end developer, there is definitely gonna be something for you in this course.
And this is what you get by signing up today:
28h of Up-to-date HD-quality videos, that are easy to search and reference (great for Udemy Business students)
Professional English captions (not the auto-generated ones)
Downloadable design assets + starter code and final code for each section
Downloadable slides for theory videos (not boring, I promise!)
Free support in the course Q&A
Lots of small challenges are included in the videos so you can track your progress.
If you're still with me at this point, then please watch the promo video to take a look at the course projects, and I promise you will be amazed :)
After that, I hope to welcome you as a new student in my course. I'm sure you're gonna love it!
Instructor Details
- 4.8 Rating
46,326 Reviews
Jonas Schmedtmann
Hi, I'm Jonas! I'm one of Udemy's Top Instructors and all my premium courses have earned the best-selling status for outstanding performance and student satisfaction.
I'm a full-stack web developer and designer with a passion for building beautiful web interfaces from scratch. I've been building websites and apps since 2010 and also have a Master's degree in Engineering.
I discovered my passion for teaching and helping others by sharing everything I knew during college. This passion led me to Udemy in 2015, where I now have the privilege of training 2,000,000+ learners in the field of web development.
What learners love the most about all my courses is the fact that I take the time to explain every single concept in a way that everyone can easily understand.
So, do you want to learn how to build awesome websites with modern HTML and CSS?
Looking for a complete JavaScript course that takes you from zero to an advanced developer?
Or maybe you want to build modern and powerful front-end applications with React?
Then don't waste your time with random tutorials or incomplete youtube videos. All my courses are easy-to-follow, all-in-one packages that will take your skills to the next level.
These courses are exactly the courses I wish I had when I was first getting into web development!
More courses by Jonas Schmedtmann
Build Responsive Real-World Websites with HTML and CSS (2024)
4.8 (119,018 Reviews)
Provider: Udemy
Time: 37.5h
$174.99
Web Design for Web Developers: Build Beautiful Websites! (2024)
4.5 (45,706 Reviews)
Provider: Udemy
Time: 2.5h
Free
Node.js, Express, MongoDB & More: The Complete Bootcamp (2024)
4.7 (30,347 Reviews)
Provider: Udemy
Time: 42.2h
$159.99
The Ultimate React Course 2025: React, Next.js, Redux & More
4.7 (27,027 Reviews)
Provider: Udemy
Time: 83.9h
$99.99
Crash Course: Build a Full-Stack Web App in a Weekend! (2024)
4.8 (3,973 Reviews)
Provider: Udemy
Time: 12.3h
$99.99
More CSS courses
Build Responsive Real-World Websites with HTML and CSS (2024)
4.8 (119,018 Reviews)
Provider: Udemy
Time: 37.5h
$174.99
Modern HTML & CSS From The Beginning 2.0 (2025)
4.8 (28,669 Reviews)
Provider: Udemy
Time: 24.3h
$129.99
How to Create A Website: An HTML Tutorial and CSS Tutorial (2025)
4.7 (2,057 Reviews)
Provider: Udemy
Time: 31.9h
$10.99
Ultimate CSS Grid Course: From Beginner to Advanced (2021)
4.7 (1,039 Reviews)
Provider: Udemy
Time: 2.7h
$13.99
Master HTML and CSS by building real world projects (2023)
4.7 (645 Reviews)
Provider: Udemy
Time: 16.2h
$79.99
Reviews
By Sipho Mathabatha on 4/27/2026
It was a good match for me as much as I had the basic skills of HTML and CSS. I really learned a lot and upgraded my skills to a better level. At this point it's up to me to better my skills and try to find a way to entry level. Will be starting to build my portfolio soon that I will share with you on the Q & A section.
By Matthew Lawrence on 3/23/2026
This guy is great. He jumps right in to more complex elements of CSS, and yet his clear explanations made it easy for me to understand. He moves just quickly enough to keep my interest whereas in some other courses people talk endlessly on simple subjects and then rush through the more difficult topics. I wish all of the courses I've signed up for were held by this guy. Thanks!
By Stefan Krsmanovic on 2/10/2026
Very complete course on CSS, I absolutely loved it! Jonas explains everything very well, you can watch it in faster speed if you find his way of talking a bit slow. The course covers everything including SaSS which was amazing, do note to watch the questions as the course isn't intended to be finished in order of lessons (we make some jumps but it all makes sense don't worry). All in all if you are looking for a complete CSS course that covers advanced topics, look no further than Jonas.
By Ilyas on 2/5/2026
A huge thank you for this amazing course! ⭐️ It was truly wonderful and incredibly interesting. I really enjoyed every moment and learned so much. Special thanks to Jonas! I also want to give a big shoutout to the teacher, Sebastian Neferu, who patiently answers every question that comes up. Sebastian Neferu is an incredible person who gives truly valuable, helpful, and clear answers. He's so responsive and a pleasure to interact with. Big thanks to both Sebastian Neferu and Jonas Schmedtmann! ❤️
By Shivendra Dwivedi on 1/28/2026
This course has fully met (and honestly exceeded) my expectations for an Advanced CSS curriculum. The instructor does a fantastic job covering everything that truly matters in real-world CSS: - Advanced animations and transitions - Modern layout techniques (Floats, Flexbox, Grid) - Responsive design principles - Advanced CSS properties and patterns - Sass fundamentals and architecture - Best practices for writing maintainable and scalable CSS - Clear focus on CSS architecture and long-term code quality The explanations are clear, practical, and project-driven, which makes the concepts easy to understand and apply in real projects. I especially appreciate the emphasis on clean structure and scalability, which many CSS courses completely miss. Suggestion for improvement: One small update I’d recommend is replacing @import with modern Sass features like @use and @forward in the 7–1 architecture. Since @import is deprecated in Dart Sass and will be removed in the future, showing the modern approach would make the course even more future-proof. Overall, this is an outstanding course and a must-have for anyone serious about mastering CSS at a professional level. Highly recommended.
By Lonnie Bruhn on 12/29/2025
I came into this class with a decent understanding of the basics of CSS. I didn't think I would get anything out of the lectures until much later in the course. I purchased this course years ago to understand the fundamental rules of CSS; I had been too lazy to learn. Finally, now, at the end of 2025 and beginning of 2026, I decided I had enough of knowing just enough to break every design project I have ever worked on. Now, because I didn’t skip the beginning, I learned three significant points of CSS theory that make the difference between improving the inconsistencies that occur with CSS, if you are inexperienced, like me, and too lazy to learn the parts we should never ignore. The first two I’ll share. It is a very simple part I never knew was important — box sizing. The second is how specificity was actually calculated. This second one was so helpful, I ended up pausing the course to inspect my current project and debug it in order to fix the issue I was having. No matter how advanced you think you may be, it will be worth your time, to follow along and take in the entire course, because you will end up saving yourself huge gaps of time by learning exactly how to play by the rules as they are intended for us to follow — only then will you be able to break a few of of them with confidence.
By Howie Ticzon on 12/28/2025
This is an amazing course, as I have learned various techniques in developing websites using advanced CSS and SASS technologies. Although there are only three website projects included in this course, I experienced learning many design styles and animations that are useful for designing my future projects. Overall, as I’m pursuing web development, I highly recommend this course to anyone interested in the field.
By Bosco Fong on 11/24/2025
An amazing course for advanced CSS learning. I have done the other courses teaching by Jonas and enjoying his teaching style. One thing to improve is to give update videos, e.g. to support the replacement of deprecated node-sass by sass package and how to make changes in the sass. While leaving as a challenge to the student is fine, but maybe just a short video to give some directions.
By Lionel Herrero Battista on 11/19/2025
This is another high-quality course by Jonas Schmedtmann. It is an excellent resource for mastering advanced CSS and SASS architecture. Just be aware that the course is showing its age slightly. You may encounter issues with the provided SASS/NPM configuration and syntax, and you will miss out on some modern Flexbox/Grid shortcuts (like gap for flexbox). Despite this, the core concepts remain invaluable.
By Maria Korniets on 11/4/2025
The course is great for practicing your CSS skills and for learning new features. Some parts of the course need updating, but these take only about 2-3% of the course, so it's not a problem. This course was absolutely perfect for me in terms of repeating material I have learned in the other Jonas's HTML/CSS course, overall I feel much more confident in my skills now.










