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

Produced in 2022

icon
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

icon
Quality Score

Content Quality
/
Video Quality
/
Qualified Instructor
/
Course Pace
/
Course Depth & Coverage
/

Overall Score : 96 / 100

icon
Live Chat with CourseDuck's Co-Founder for Help

Need help deciding on a web development course? Or looking for more detail on Jonas Schmedtmann's Advanced CSS and Sass: Flexbox, Grid, Animations and More!? Feel free to chat below.
Join CourseDuck's Online Learning Discord Community

icon
Course Description

icon
web development 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 kind 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 into 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:
Lifetime access to 20+ hours of HD quality videos. No monthly subscription. Learn at your own pace, whenever you want;
All videos are downloadable. Learn wherever you want, even without an internet connection!
Friendly and fast support in the course Q&A whenever you have questions or get stuck;
English closed captions (not the auto-generated ones provided by Udemy);
Course slides in PDF format;
Downloadable assets, starter code and final code for each project;
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!
Who this course is for:
  • 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!

*Some courses are excluded from this sale. Coupon not working? If the link above doesn't drop prices, clear the cookies in your browser and then click this link here.
Also, you may need to apply the coupon code directly on the cart page to get the discount.

Coupon Code

icon
Instructor Details

Jonas Schmedtmann

Hi, I'm Jonas! I have been identified as one of Udemy's Top Instructors and all my premium courses have recently 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 things from scratch. I've been building websites and apps since 2007 and also have a Master's degree in Engineering.
It was in college where I first discovered my passion for teaching and helping others by sharing all I knew. And that passion brought me to Udemy in 2015, where my students love the fact that I take the time to explain important concepts in a way that everyone can easily understand.
Do you want to learn how to build awesome websites with advanced HTML and CSS?
Looking for a complete JavaScript course that takes you from beginner to advanced developer?
Or maybe you want to build modern and fast back-end applications with Node.js?
Then don't waste your time with random tutorials or incomplete 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!
So see for yourself, enroll in one of my courses (or all of them :D) and join my 500,000+ happy students today.

icon
Reviews

4.8

100 total reviews

5 star 4 star 3 star 2 star 1 star
% Complete
% Complete
% Complete
% Complete
% Complete

By Lee Colsant on a week ago

I recently completed a coding bootcamp but they did not focus heavily on design aspects and advanced css topics. I was looking to bring my knowledge in this area to the next level and this course ended up being the perfect compliment. Jonas is an amazing instructor and is great at being able to break down complex css topics into several manageable video clips. The project are well designed and rewarding to complete. Thanks Jonas for all of your hard work!!

By Marcio Braz on 3 weeks ago

This is so far the best online course I ever studied in my life. Thank you Jonas for this awesome content!

By Mykhailo Serdyuk on a month ago

This course is the best IMO. Jonas helps to understand web technologies while building real web HTML5/CSS3 sites and this way to teach someone new to web technologies is the best one. Without a doubt this course is PERFECT!

By Tarique Ejaz on 2 months ago

This is a really comprehensive course to get into the nitty gritty of styling and understand the simpler to complex concepts concerning it. Jonas is calm and helps one get the essential aspects easily.

By Albena Kostova on 3 months ago

Dear Jonas, I cannot adequately thank you for all the knowledge provided with this course! I gladly recommend all your courses, especially if someone has been struggling for some time figuring out stuff on their own. I wish I had found you earlier! Please, keep up expanding your mission! People need it...

By Stefan Cutajar on a month ago

Thank you, Jonas, for such great content. I learned a lot of new techniques from this course which I will put into practice in my next projects.

By Patrick v D on 3 months ago

Great teacher and a course which give you a great foundation to become a web designer.

By Vojt?ch anda on 3 months ago

Everything is simply amazing. Jonas is a great teacher and this course covers every single detail of Flexbox and Grid that you can imagine. Projects and lectures are fun and well structured. Thank you so much for sharing you knowlage.

This course is awesome. Thank you very much, Jonas, for such a great course. I've learned a lot! All the course content is developed in a clear and well-structured way, and each one of the three projects gave me a totally new set of high-quality knowledge. By the way, Jonas is an excellent instructor.

By Martin Charette on 3 weeks ago

Jonas has a very nice way of explaining something actually quite difficult to learn! I agree, the projects that we build during the courses are beautiful and modern looking! Thank you very much Jonas!

By Florence St-Amand on 2 weeks ago

What a great course! It is jammed packed with relevant, advanced information to help get to the next level and start work on professional projects.

This course has completely exceeded my expectations. I was very insecure when it came to CSS. This was truly the best CSS course I have ever seen! Highly recommended for all levels of web programmers. To be a good professional we need three things: discipline, discipline and discipline! Thanks to Jonas and his team.