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

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.

What's inside

Learning objectives

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
Show more
Show less

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
Show more
Show less

Syllabus

Welcome, Welcome, Welcome!

Welcome to the Most Advanced CSS Course Ever!

READ BEFORE YOU START!

Setting up Our Tools

Traffic lights

Read about what's good

what should give you pause

and possible dealbreakers

Teaches tools like flexbox and CSS Grid, which are standard in modern web design

Features Jonas Schmedtmann, who is recognized in the CSS training community

Covers fundamentals to advanced CSS techniques, suitable for intermediates

Includes real-world projects, reinforcing practical applications

Offers hands-on building exercises to strengthen understanding

Requires a solid understanding of HTML and CSS, which may not be suitable for absolute beginners

Reviews summary

Comprehensive advanced css & sass masterclass

According to learners, this course is a highly comprehensive and up-to-date dive into modern CSS and Sass. Many find the explanations on how CSS works behind the scenes particularly illuminating. The hands-on projects are frequently highlighted as being practical and excellent for solidifying understanding of complex layouts like Flexbox and CSS Grid. While the course is described as packed with valuable content, some mention that the pace can be fast and it truly requires a solid intermediate foundation in HTML and CSS, otherwise learners might find it challenging.

Needs solid intermediate HTML/CSS knowledge.

"Make sure you have a strong grasp of intermediate HTML and CSS before starting. This is NOT for beginners."

"The course moves quickly, assuming you're comfortable with the basics. If not, you might struggle."

"As stated, this is an advanced course. Had I not had prior experience, I would have been lost."

"Requires you to already be quite familiar with standard CSS properties and HTML structure."

Instructor is praised for clear explanations and teaching style.

"Jonas is an amazing instructor. His explanations are crystal clear and easy to follow, even for complex topics."

"The way the instructor breaks down difficult concepts is simply superb. I finally understand specificity and the cascade!"

"Instructor is engaging and keeps you motivated throughout the long course. Highly recommended."

"His teaching style made learning advanced CSS enjoyable and not overwhelming."

Real-world projects help apply learned concepts effectively.

"The projects, especially Natours and Trillo, are fantastic! They allowed me to immediately use Flexbox and Grid in a realistic context."

"Building the projects piece by piece really helped solidify everything I was learning."

"I appreciated that the projects weren't trivial examples, but actually mimicked real-world website structures."

"The project-based approach is the best part. I learn by doing, and these projects are perfect for that."

Course covers a wide range of advanced topics thoroughly.

"This course is incredibly comprehensive and covers every advanced CSS topic I could think of, from Flexbox and Grid to animations and Sass."

"I've taken other CSS courses, but none were as detailed on the 'how CSS works' fundamental concepts. Game changer!"

"Packed with modern techniques and practical examples. It's a full toolkit for modern front-end styling."

"Learned so much about CSS architecture and Sass organization - things I was missing before."

Can be challenging to keep up with the speed at times.

"Sometimes the pace felt a bit too fast, and I had to rewatch sections multiple times to fully grasp them."

"The volume of information is huge, and while thorough, the speed can feel overwhelming sometimes."

"Be prepared to pause and practice frequently, as the instructor moves through topics quite efficiently."

"It's a marathon, not a sprint. The speed means you need to dedicate serious time to absorb it all."

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Advanced CSS and Sass: Flexbox, Grid, Animations and More! with these activities:

Follow CSS tutorials on YouTube

Show steps

Learn from experienced CSS developers by following their tutorials and demonstrations.

Browse courses on YouTube

Show steps

Search for CSS tutorials on YouTube.
Choose a tutorial that covers a topic you are interested in.
Follow the steps in the tutorial.
Try out the techniques you learned in your own projects.
Leave comments and ask questions if you have any.

Build a personal CSS portfolio website

Show steps

Demonstrate your CSS skills and creativity by building a website that showcases your best work.

Show steps

Plan the structure and design of your website.
Choose a template or build your own layout using HTML and CSS.
Add content to your website, such as projects, blog posts, or a resume.
Use advanced CSS techniques to enhance the visual appeal and functionality of your website.
Publish your website online and share it with others.

Develop a responsive layout for a website

Show steps

Apply your CSS skills to create a website that adapts to different screen sizes and devices.

Show steps

Plan the structure and design of your website.
Choose a template or build your own layout using HTML and CSS.
Implement media queries to adjust the layout for different screen sizes.
Test your website on different devices and browsers.
Get feedback from others and make improvements.

Show all three activities

Career center

Learners who complete Advanced CSS and Sass: Flexbox, Grid, Animations and More! will develop knowledge and skills that may be useful to these careers:

Front-End Developer

Front end developers are responsible for the design and implementation of the user interface of a website or application. This course will help you build a strong foundation in the core concepts of CSS, including Flexbox, Grid, and animations. You will also learn how to use Sass, a preprocessor that can help you write more efficient and maintainable CSS code. This course is perfect for anyone who wants to start a career as a front end developer or for those who want to improve their skills in this area.

See salaries and explore the career path for Front-End Developer

Web Developer

Web developers are responsible for the design, development, and maintenance of websites and web applications. This course will help you build a strong foundation in the core concepts of CSS, including Flexbox, Grid, and animations. You will also learn how to use Sass, a preprocessor that can help you write more efficient and maintainable CSS code. This course is perfect for anyone who wants to start a career as a web developer or for those who want to improve their skills in this area.

See salaries and explore the career path for Web Developer

User Interface Designer

User interface designers are responsible for the design of the user interface of a website or application. This course will help you build a strong foundation in the core concepts of CSS, including Flexbox, Grid, and animations. You will also learn how to use Sass, a preprocessor that can help you write more efficient and maintainable CSS code. This course is perfect for anyone who wants to start a career as a user interface designer or for those who want to improve their skills in this area.

See salaries and explore the career path for User Interface Designer

Graphic Designer

Graphic designers are responsible for the creation of visual concepts, using computer software or by hand, to communicate ideas that inspire, inform, and captivate consumers. This course will help you build a strong foundation in the core concepts of CSS, including Flexbox, Grid, and animations. You will also learn how to use Sass, a preprocessor that can help you write more efficient and maintainable CSS code. This course is perfect for anyone who wants to start a career as a graphic designer or for those who want to improve their skills in this area.

See salaries and explore the career path for Graphic Designer

Art Director

Art directors are responsible for the visual style and presentation of a variety of media, including websites, magazines, newspapers, and advertisements. This course will help you build a strong foundation in the core concepts of CSS, including Flexbox, Grid, and animations. You will also learn how to use Sass, a preprocessor that can help you write more efficient and maintainable CSS code. This course is perfect for anyone who wants to start a career as an art director or for those who want to improve their skills in this area.

See salaries and explore the career path for Art Director

Creative Director

Creative directors are responsible for the overall creative vision of a project, including the design, development, and execution. This course will help you build a strong foundation in the core concepts of CSS, including Flexbox, Grid, and animations. You will also learn how to use Sass, a preprocessor that can help you write more efficient and maintainable CSS code. This course is perfect for anyone who wants to start a career as a creative director or for those who want to improve their skills in this area.

See salaries and explore the career path for Creative Director

Product Designer

Product designers are responsible for the design and development of products, including websites, apps, and hardware. This course will help you build a strong foundation in the core concepts of CSS, including Flexbox, Grid, and animations. You will also learn how to use Sass, a preprocessor that can help you write more efficient and maintainable CSS code. This course is perfect for anyone who wants to start a career as a product designer or for those who want to improve their skills in this area.

See salaries and explore the career path for Product Designer

Software Engineer

Software engineers are responsible for the design, development, and maintenance of software systems. This course will help you build a strong foundation in the core concepts of CSS, including Flexbox, Grid, and animations. You will also learn how to use Sass, a preprocessor that can help you write more efficient and maintainable CSS code. This course may be useful for those who want to start a career as a software engineer or for those who want to improve their skills in this area.

See salaries and explore the career path for Software Engineer

UX Designer

UX designers are responsible for the user experience of a website or application. This course will help you build a strong foundation in the core concepts of CSS, including Flexbox, Grid, and animations. You will also learn how to use Sass, a preprocessor that can help you write more efficient and maintainable CSS code. This course may be useful for those who want to start a career as a UX designer or for those who want to improve their skills in this area.

See salaries and explore the career path for UX Designer

Webmaster

Webmasters are responsible for the maintenance and administration of websites. This course will help you build a strong foundation in the core concepts of CSS, including Flexbox, Grid, and animations. You will also learn how to use Sass, a preprocessor that can help you write more efficient and maintainable CSS code. This course may be useful for those who want to start a career as a webmaster or for those who want to improve their skills in this area.

See salaries and explore the career path for Webmaster

Full-Stack Developer

Full stack developers are responsible for the design, development, and maintenance of websites and web applications. This course will help you build a strong foundation in the core concepts of CSS, including Flexbox, Grid, and animations. You will also learn how to use Sass, a preprocessor that can help you write more efficient and maintainable CSS code. This course may be useful for those who want to start a career as a full stack developer or for those who want to improve their skills in this area.

See salaries and explore the career path for Full-Stack Developer

Computer Programmer

Computer programmers are responsible for the design, development, and maintenance of computer programs. This course will help you build a strong foundation in the core concepts of CSS, including Flexbox, Grid, and animations. You will also learn how to use Sass, a preprocessor that can help you write more efficient and maintainable CSS code. This course may be useful for those who want to start a career as a computer programmer or for those who want to improve their skills in this area.

See salaries and explore the career path for Computer Programmer

Software Developer

Software developers are responsible for the design, development, and maintenance of software systems. This course will help you build a strong foundation in the core concepts of CSS, including Flexbox, Grid, and animations. You will also learn how to use Sass, a preprocessor that can help you write more efficient and maintainable CSS code. This course may be useful for those who want to start a career as a software developer or for those who want to improve their skills in this area.

See salaries and explore the career path for Software Developer

Web Designer

Web designers are responsible for the design and development of websites. This course will help you build a strong foundation in the core concepts of CSS, including Flexbox, Grid, and animations. You will also learn how to use Sass, a preprocessor that can help you write more efficient and maintainable CSS code. This course may be useful for those who want to start a career as a web designer or for those who want to improve their skills in this area.

See salaries and explore the career path for Web Designer

Digital Marketing Manager

Digital marketing managers are responsible for the planning and execution of digital marketing campaigns. This course may be useful for those who want to start a career as a digital marketing manager or for those who want to improve their skills in this area.

See salaries and explore the career path for Digital Marketing Manager