Save for later

Advanced CSS and Sass

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.

Get Details and Enroll Now

OpenCourser is an affiliate partner of Udemy and may earn a commission when you buy through our links.

Get a Reminder

Send to:
Rating 4.8 based on 4,124 ratings
Length 28 total hours
Starts On Demand (Start anytime)
Cost $16
From Udemy
Instructor Jonas Schmedtmann
Download Videos Only via the Udemy mobile app
Language English
Tags Web Development Development

Get a Reminder

Send to:

Similar Courses

What people are saying

web development

This is the best course I have ever taken in web development.

As someone just starting out with web development, I really appreciate how well-structured, organized, and fun this course is!

If you take this course, you risk exposing yourself to not being satisfied by any other related courses here, because what Jonas did is simply setting a standard for a front-end web development course.

Anyone can download a free and modern browser and IE (and Edge) have been slowing down web development for far too long!

Amazing experience about css and learn many thing in the web development.

Yes, 1 week but I felt like a total stranger to web development when I decided to put the knowledge to real practice.

First of all, I’m not a complete beginner in this field - I’ve had previous experience with creating websites as I’m a Web Development student - but this course is a big eye opener.

I reccomend it to everyone who wants to become good at web development.

It just sucks that web development changes so fast that debugging outdated packages was sometimes a pain.

Even though I've been working in web development for a while, this course taught me a lot!

:) I recommend every one is one the way of Web Development to buy all the courses of Joan Schmeidtmann he is the best Tutor I have ever seen, I like how he gives a project for each subject like Flexbox and grid and he always give us new property or trick , course rich with good information .

In this course you will learn SASS, many modern web development techniques and features such as flexbox, grid and much more.

Amazing course for web development Super curso desde que empezo esta bien , lo estoy aplicando a un proyecto de la empresa..Gracias Excellent course, really advanced and I've learn tons and tons!!!!

I cant believe how far I have come in just 7 months with taking his previous entry course into web development as well.

Read more

step by step

Jonas has really thought through how to teach all of these technologies in a step by step manner without overwhelming the students.

The projects are engaging and easy to follow step by step.

Easy to understand and really a step by step tutorial.

These are topics I know but having the explanation and the step by step process of getting the page coded is being really cool.

I'm particularly happy that you show the big picture overall and explain it step by step!

Thank's Jonas for guiding through all the issues step by step and explaining each new thing with a lot of patience!

Then, he introduces you to it step by step, always making sure that you both are on the same page.

Jonas does everything step by step, it's easy to follow a long, and that's really helpful, when the topic is advanced.

Most of the time I can follow step by step on adjacent monitors.

The in-depth explanations of Jonas with graphics and animations helped me grasp most of the subtleties of front-end development, and I finally got a step by step process that I can use for building great websites, or understanding how it's done if I want to hire a designer.

Instead of talking for hours about theory, he goes on to explain the theory by applying it to solve a real world problem step by step, which is building all sorts of CSS components to make web pages look good.

He develops the example step by step without cutting and pasting the code.

Like that he goes through everything step by step and the project is really good looking a fun to build This is the second time I buy your courses.

The instructor really makes things clear, step by step, some concepts that I've learned by myself previously, but I did not understand why things worked that way, here he explains in a natural and paced way.

Read more

half way through

I'm half way through it and I really can say this is exacly what I waslooking for!

I am half way through the course now and he has only had us do things on our own twice I believe.

I would like to see more challenges to help drill in concepts (I am about half way through course, so some may yet be coming).

I am only half way through but I just want to say that so far the topics are very in-depth and thorough.

I'm about half way through this course and already I'm excited to begin using the CSS topics and tools taught in this course :) It really is advanced.

In just half way through the course I learned enough to get me started.

Now that I'm half way through, I can really speak about its quality!

I'm close to half way through the course and I am already very satisfied.

I'm only half way through, but this is by far the best udemy course i've taken.

EDIT: Half way through the course and I have upped my rating to four stars.

I'm about half way through this course and I'm thoroughly impressed.

simply superb Am half way through really enjoying the course Long course but good I'm just loving that course cause it goes deeper in the concepts and theories that makes CSS works.

I am not half way through and I have learned a lot.

Read more

five star

So I decided to enroll in this wonderful CSS course which is definitely deserve a five star rating.

I think that you are an excellent teacher, it seems easy for you to explain all this in a way so that it is understandable keeping me as a student focused, i can give five stars of course, but a perfect world does not exist.. right?

Simply put: Jonas you deserve more than a five star.!

Five stars evaluation.

Just the right flavor for experienced people Please sir, take this five stars.

I think it deserves more than five stars I have been waiting for a great course like this for a long time!

The other two seem like fillers, they don't have the same kind of quality as the first and appear rushed but for me, if I was rating this course on the three projects, I would still award five stars as it's an excellent course overall.

Five stars are not enough :) Amazing and Exciting projects in this course, I really enjoyed it, thanks Jonas for all this knowledge!

The only reason for not giving a full five star review, is the fact that I think there should have been more exercises, where you work on your own, instead of just following along.

First five star review I have given and I am only 43% through the course.

(I tried to give him five star.

However there were minor issues that created some confusion and prevent me from giving this five stars—his use of "epsilon" instead of "y" in the first series of Natours lectures, and the lack of a thorough and systematic presentation of all the different animation properties (especially the confusing use of the ::after pseudo-class in one of the animations).

That course is absolutely fantastic and deserve my five stars.

Read more

worth every penny

Absolutely worth every penny you pay for!

The course is worth every penny and then some!

I've taken two courses by Jonas, wich worth every penny.

Worth every penny!

It is worth every penny!

It worth every penny.

It was worth every penny.

very good Great stuff in here, definitely worth every penny.. Love the clip-path!

Worth every penny and-then-some!

Read more

front end development

Highly recommending it, you will learn flexbox, grid and great tips for front end development.

I am new to front end development, before I took this course I had just barely been introduced to the very basics of html and css.

I've been a back-end developer for the duration of my career, with the occasional toe being dipped in to the water of front end development.

I am a back end developer and took this course to really brush up on my front end development.

Really happy with front end development techniques thought in this course.

If you are serious about front end development, this course is one of the essentials.

At that point Jonas will take you knowledge of Front End development to all time high with the remaining of the course.

1) I'm much more confident in the front end development.

You need to have a good understanding on front end development before taking this course.

Read more

exceeded my expectations

This course has completely exceeded my expectations.

Exceeded my expectations, best course on Udemy that I've watched..

You have exceeded my expectations!

This course has been amazing and far exceeded my expectations.

It has really exceeded my expectations.

This course exceeded my expectations!

Exceeded my expectations!

Read more

works behind the scenes

the instructor is making miracles and im glad to be apart of it Just began the course, but I am really amazed at the explanation of how css works behind the scenes Jonas is a great tutor and I've learned a lot from this course.

I'm using CSS for years already but after watching the first few sections, especially the one about how CSS works behind the scenes, I learned so much fundamental knowledge that I've been missing so far!

He really goes into great detail in explaining how stuff works behind the scenes, why should you know it, and how you should utilize it.

Guter Lektor, guter Inhalt, breites Spektrum --> Sehr empfehlenswert The course in general lines is very useful for real world applications, but the best parts are the ones he goes in depth explaining how CSS works behind the scenes.

Read more

visual studio code

Pros: -Nice looking exciting projects - Good teacher - Even though the course is outdated you still learn things which is still in use today Cons: - Outdated (Think the course was made in 2017) - Installing Sass compiler is complicated - an easy option is to install the live sass compiler extension in Visual Studio Code by Ritwick Dey - Bugs in the final Natours project Jonas is an awesome instructor.

The course is quite good, I like the practical advises (like the Visual Studio Code Ctrl+D multiple selection and etc.)!

Also, I like the Visual Studio Code tool he uses in conjunction with Emmet for generating HTML quick.

Visual Studio Code is awesome!

I have never used the Visual Studio Code editor.

Read more

real world applications

Jonas is very good at applying modern techniques into real world applications in his courses and explains them thoroughly.

really lots of practical real world applications in CSS.

This course helped me understand CSS in depth; I further learned how to apply CSS in real world applications.

It is a good match, I am learning new things and more in depth of things I already knew This is one my favorite courses on udemy more in-depth topics with real world applications.

Read more

media queries

In the beginning, I almost quit from this course but with extra research, this course is a rock, I am so picky with courses but this guy put a lot of effort to make this course >>sure it is worth your time and money Very good so far Media Queries as well SASS and mixin, clarify, verables Great course, Jonas is a really good teacher and gave me a lot of new stuff to work with professionally.

An example of this is that a great job was done explaining media queries but then there was many sass changes for the site.

Along the way you get tons of practice writing media queries, cleaner code with SCSS and good practices in general, such as structuring your project and browser compatibility.

What intrigued me about this course was it contained all the elements that I was looking to learn: SASS, flexbox, media queries, and CSS Grid which was a great added surprise (I purchased the course before he released the videos)!

Dá dicas excelentes de diversas propriedades CSS, inclusive criar animações, como trabalhar com imagens, como nomear classes, como estruturar os arquivos SASS e trabalhar com media queries.

The projects contains a lot of whoa effect and tips :D This course is great, I've learn a lot of new things despite of having some experience with CSS including media queries.

I often have to write media queries for laptop displays.

I was already into several of the concepts and animations he teaches, particularly BEM, the media queries, and text animations, etc.

Read more

muito bom

muito bom o curso otima qualidade Really in-depth CSS course, the lecturer is very knowledgeable about the topic, the narrative is great and understandable, and there is a lot of work implemented in the course, even the slides are beautifully made :) The course was amazing.

O curso é muito bom, o conteúdo tem consistência e relevância.

Thank you :) Muito bom!

Curso realmente muito bom, perfeito para aquele programador backend quem cansou de bater a cabeça com css.

So cool though Muito bom, excelente explicação...

O curso é muito bom.

Muito bom Since it is only the start of the course I have not noticed anything extraordinary so far, just an idea of what I am going to build in the course.

Read more


An overview of related careers and their average salaries in the US. Bars indicate income percentile.

CSS Counselor $42k

CSS-12_ 1 $63k

Assistant CSS $64k

Consulting CSS Representative $66k

CSS Contractor $73k

Staff CSS $76k

Junior CSS $76k

UI / CSS Developer $94k

CSS Developer $97k

Retired CSS $98k

Master CSS $99k

Principal CSS $116k

Write a review

Your opinion matters. Tell us what you think.

Rating 4.8 based on 4,124 ratings
Length 28 total hours
Starts On Demand (Start anytime)
Cost $16
From Udemy
Instructor Jonas Schmedtmann
Download Videos Only via the Udemy mobile app
Language English
Tags Web Development Development

Similar Courses

Sorted by relevance

Like this course?

Here's what to do next:

  • Save this course for later
  • Get more details from the course provider
  • Enroll in this course
Enroll Now