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

The most advanced and modern CSS course on the internet: master flexbox, CSS Grid, responsive design, and so much more.

4.73 (43403 reviews)
Udemy
platform
English
language
Web Development
category
207,673
students
28 hours
content
Nov 2023
last update
$139.99
regular price

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

Description

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!

Content

Welcome, Welcome, Welcome!

Welcome to the Most Advanced CSS Course Ever!
READ BEFORE YOU START!
Setting up Our Tools

Natours Project — Setup and First Steps (Part 1)

Section Intro
Project Overview
Building the Header - Part 1
Building the Header - Part 2
Creating Cool CSS Animations
Building a Complex Animated Button - Part 1
Building a Complex Animated Button - Part 2

How CSS Works: A Look Behind the Scenes

Section Intro
Three Pillars of Writing Good HTML and CSS (Never Forget Them!)
How CSS Works Behind the Scenes: An Overview
How CSS is Parsed, Part 1: The Cascade and Specificity
Specificity in Practice
How CSS is Parsed, Part 2: Value Processing
How CSS is Parsed, Part 3: Inheritance
Converting px to rem: An Effective Workflow
How CSS Renders a Website: The Visual Formatting Model
CSS Architecture, Components and BEM
Implementing BEM in the Natours Project

Introduction to Sass and NPM

Section Intro
What is Sass?
First Steps with Sass: Variables and Nesting
First Steps with Sass: Mixins, Extends and Functions
A Brief Introduction to the Command Line
NPM Packages: Let's Install Sass Locally
NPM Scripts: Let's Write and Compile Sass Locally
The Easiest Way of Automatically Reloading a Page on File Changes

Natours Project — Using Advanced CSS and Sass (Part 2)

Section Intro
Converting Our CSS Code to Sass: Variables and Nesting
Implementing the 7-1 CSS Architecture with Sass
Review: Basic Principles of Responsive Design and Layout Types
Building a Custom Grid with Floats
Building the About Section - Part 1
Building the About Section - Part 2
Building the About Section - Part 3
Building the Features Section
Building the Tours Section - Part 1
Building the Tours Section - Part 2
Building the Tours Section - Part 3
Building the Stories Section - Part 1
Building the Stories Section - Part 2
Building the Stories Section - Part 3
Building the Booking Section - Part 1
Building the Booking Section - Part 2
Building the Booking Section - Part 3
Building the Footer
Building the Navigation - Part 1
Building the Navigation - Part 2
Building the Navigation - Part 3
Building a Pure CSS Popup - Part 1
Building a Pure CSS Popup - Part 2

Natours Project — Advanced Responsive Design (Part 3)

Section Intro
Mobile-First vs Desktop-First and Breakpoints
Let's Use the Power of Sass Mixins to Write Media Queries
Writing Media Queries - Base, Typography and Layout
Writing Media Queries - Layout, About and Features Sections
Writing Media Queries - Tours, Stories and Booking Sections
An Overview of Responsive Images
Responsive Images in HTML - Art Direction and Density Switching
Responsive Images in HTML - Density and Resolution Switching
Responsive Images in CSS
Testing for Browser Support with @supports
Setting up a Simple Build Process with NPM Scripts
Wrapping up the Natours Project: Final Considerations

Trillo Project — Master Flexbox!

Section Intro
Why Flexbox: An Overview of the Philosophy Behind Flexbox
A Basic Intro to Flexbox: The Flex Container
A Basic Intro to Flexbox: Flex Items
A Basic Intro to Flexbox: Adding More Flex Items
Project Overview
Defining Project Settings and Custom Properties
Building the Overall Layout
Building the Header - Part 1
Building the Header - Part 2
Building the Header - Part 3
Building the Navigation - Part 1
Building the Navigation - Part 2
Building the Hotel Overview - Part 1
Building the Hotel Overview - Part 2
Building the Description Section - Part 1
Building the Description Section - Part 2
Building the User Reviews Section
Building the CTA Section
Writing Media Queries - Part 1
Writing Media Queries - Part 2
Wrapping up the Trillo Project: Final Considerations

A Quick Introduction to CSS Grid Layouts

Section Intro
Why CSS Grid: A Whole New Mindset
Quick Setup for This Section
Creating Our First Grid
Getting Familiar with the fr Unit
Positioning Grid Items
Spanning Grid Items
Grid Challenge
Grid Challenge: A Basic Solution
Naming Grid Lines
Naming Grid Areas
Implicit Grids vs. Explicit Grids
Aligning Grid Items
Aligning Tracks
Using min-content, max-content and the minmax() function
Responsive Layouts with auto-fit and auto-fill

Nexter Project — Master CSS Grid Layouts!

Project Overview and Setup
Building the Overall Layout - Part 1
Building the Overall Layout - Part 2
Building the Features Section - Part 1
Building the Features Section - Part 2
Building the Story Section - Part 1
Building the Story Section - Part 2
Building the Homes Section - Part 1
Building the Homes Section - Part 2
Building the Gallery - Part 1
Building the Gallery - Part 2
Building the Footer
Building the Sidebar
Building the Header - Part 1
Building the Header - Part 2
Building the Realtors Section
Writing Media Queries - Part 1
Writing Media Queries - Part 2
Browser Support for CSS Grid
Wrapping up the Nexter Project: Final Considerations

That's It, Everyone!

See You Next Time, CSS Master!

Screenshots

Advanced CSS and Sass: Flexbox, Grid, Animations and More! - Screenshot_01Advanced CSS and Sass: Flexbox, Grid, Animations and More! - Screenshot_02Advanced CSS and Sass: Flexbox, Grid, Animations and More! - Screenshot_03Advanced CSS and Sass: Flexbox, Grid, Animations and More! - Screenshot_04

Reviews

Bishar
November 7, 2023
Jonas is the best teacher i saw in internet and i took most of his courses becouse of his explanation and content
Kamil
November 4, 2023
Really nice course. The author explains the concepts in an understandable and clear way. I recommend it to everyone who wants to learn more about how CSS works
Mustafa
November 4, 2023
great effort from jonas and i learned new knowledge i have not know yet specially from css behind the scenes section
Kevin
November 3, 2023
I am a C# developer that has always enjoyed a good looking site/page. Most developers just have the boxes and buttons and such on a page and they all work, but it looks bad. Not me. But I have always struggled at some point on complex layouts with deeply nested items trying to get them to work just how I want. I hoped this course would fill in the Swiss-cheese of knowledge I have and I believe it did. I am now off to redesign a site in this more modern way and I look forward to the next project where I can really make these skills shine.
Bilgehan
October 30, 2023
First of all, thanks to Jonas. His teaching strategy is excellent, and he beautifully elaborates on the reasons behind everything he does. Thanks to him, I've learned a lot. Thanks for touching my life. Stay well Jonas
Sergei
October 26, 2023
Wonderful course and it was expected from a perfect teacher, who is Jonas Schmedtmann! I improved my development skills a lot in particular Flex and Grid and even more. Thank you very much!
Alex
October 26, 2023
The instructor was comprehensive, and his examples were straightforward to follow. Further, he did everything step-by-step, and he explained why. I highly recommend this class to developers like me who know enough about CSS but not enough to claim to be an expert. I learned a few tips and tricks from this course.
Josip
October 23, 2023
I already watched this course some 3 years ago when I started web development. Now I am watching it again and it's cool how some stuff has more sense than before and I again had some answers to some questions that I had and also reviewing all the stuff gave me come cool ideas to use, that i'd forgotten about :) And Jonas is a cool dude like always. I enjoy his learning style and it fits me the most.
Lisa
October 23, 2023
I love this class so far! Very interesting and helpful. Thank you, Jonas. You are an excellent instructor!
Simple
October 18, 2023
Not that advanced, considering the updates for the regular CSS/HTML course in some sense regular course from Jonas is more advanced. A lot of things are outdated. The only thing in this course that is still viable is a really basic intruduction to SASS. And there is like no practice at all.
Azizbek
October 18, 2023
This CSS course is an absolute game-changer! Prior to taking it, I was stumbling through CSS, clueless and randomly typing. However, after completing the course, I gained an in-depth understanding. Not only did I become proficient, but I also landed a top spot in a startup. Highly recommend for anyone looking to go from CSS novice to expert swiftly.
Nicholas
October 17, 2023
I first did (most of) this course a couple years ago, and came back to go through the whole thing in recent weeks. Simply first rate. Very well done, easy to follow, and it will give you more CSS than you're likely to need. A couple things have changed since the course was first made (e.g., rather than using npm to produce CSS from SASS, there's now an extension for VS Code), but the course remains overwhelmingly relevant and useful. Also, I think Flexbox and CSS Grid, which had somewhat restricted coverage when the course was made, can now be used without any worries. All in all, a highly recommended course.
Daniel
October 14, 2023
I understand the length of the course makes it difficult but having more small challenges along the way could keep learners motivated
Aytaç
August 16, 2023
This is 4th course of Jonas that I have finished and I also try other courses in Udemy or in other sources. I can clearly and honestly say that Jonas is the best. His teaching tecniques, pace, methods, curriculum and most importantly attitude towards learners is perfect and well-thought. Thank you Jonas for another great, detailed and up-to-date course :)
Els
August 14, 2023
This was an awesome course. I learned a ton on CSS. The hands-on style did not only teach me the advanced CSS stuff but also great debugging practices and set up a build process that will help me move forward while building up experience.

Coupons

DateDiscountStatus
7/20/202194% OFF
expired
11/14/202288% OFF
expired
11/14/202389% OFF
expired

Charts

Price

Advanced CSS and Sass: Flexbox, Grid, Animations and More! - Price chart

Rating

Advanced CSS and Sass: Flexbox, Grid, Animations and More! - Ratings chart

Enrollment distribution

Advanced CSS and Sass: Flexbox, Grid, Animations and More! - Distribution chart
1026604
udemy ID
11/29/2016
course created date
3/17/2019
course indexed date
Bot
course submited by