Udemy

Platform

English

Language

Web Development

Category

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.78 (28478 reviews)

125876

Students

28 hours

Content

Nov 2020

Last Update
$59.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 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!

 


Screenshots

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

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!



Reviews

G
George7 October 2020

I wanted to gain more ideas in CSS and move beyond basic stuff. I'm using the ideas i've learnt in each lecture to build out and improve my own project. Great stuff, and I like how fast you move too. I really love this course.

G
Geno6 October 2020

Instructor is knowledgable and explains material well. However it would've been more helpful if instructor could provide PDF files with content info instead of searching every video if you need to find something or simply review information

P
Phillip5 October 2020

This is the most advanced CSS course - as of late 2017, maybe even as of 2018. However now in late 2020 it's soon going to be a little out of date. Don't misinterpret me--it is still an incredible resource and I am extremely grateful for it, especially because the websites and design sensibilities are fantastic. You should definitely take it and especially pay attention in the grid section (naming lines never seemed important to me before taking this course - now I know to do so). However, now we have features such as the universal gap property that works for both flex and grid, as well as the place-content/place-items/place-self shorthands. Very soon we will have aspect-ratio and subgrid. These will all be indispensable in responsive design. So take this course, and like Jonas says--keep studying! But also be on the lookout for the inevitable updates to this course in the not-so-distant future.

A
Anett1 October 2020

This is the best CSS course I have ever seen. I've learnt so much. Projects are cool, the explanations are clear, there is so much information is this course. I recommand it to everybody who wants to write CSS in a very clean and professional way.

C
Cassie1 October 2020

Solid reference for a variety of options. It helped me with animations and I commonly refer back to it.

L
Lubomir26 February 2020

Great course! I was working with flexbox and grid before, but didn't know its full power until I've learned it under Jonas. Jonas is a great instructor, explaining everything clearly and slowly, so its easy to understand. The course itself has a good pace, even though I had to slow it down a bit sometimes, well designed projects and loads of CSS properties and tricks to learn! Looking forward to my next course, which is javascript with Jonas!

S
Steve25 February 2020

Jonas explains complex concepts in an easy to follow way. He is easy to understand, and the code presented is in small enough chunks to easily digest.

B
Ben24 February 2020

The course is an excellent way to learn some advanced CSS skills to make your websites clean and modern!

D
Dforms23 February 2020

I'm seriously giving this course 5/5 stars. I learned so much and I'm not event half way through. Very valuable information. Jonas is a great teacher. Will diffidently check out his other courses!

J
Julia23 February 2020

This course was amazing and I learned a lot! It answered a lot of my questions regarding CSS which was in my head already since I started web development. I'm sure I will use the learned techniques during my work.

J
Jason22 February 2020

really great content! I took Angela Yu's course on 2020 Web Dev Bootcamp and it was a fantastic learning experience as well. Although in her course we just covered basic CSS. In this course I have been able to reach much further into the potential of CSS which is what I really needed as I'm working on building a portfolio for future employment as a junior web developer.

M
Michael22 February 2020

Don't buy this course, it's out of date, the Q.A. section has many unanswered questions. Many students have asked for updates with subgrids, nothing in this course has been updated in 2 years, there's JSON that needs to be updated as well. Find another course.

E
Erik22 February 2020

This is the perfect course to take after an intro to HTML & CSS (I took Brad Traversy's but I'm sure Jonas' is excellent). You dive deeper into CSS and it reinforced concepts such as selectors, the cascade, and inheritance. Not to mention you learn about best CSS coding practices such as BEM.

A
Aakro22 February 2020

Am completely new to CSS, and as every chapter progresses, my confidence to build my own CSS and to work on complicated and long project increases.

A
Andrea21 February 2020

What can I say... just an amazing course! Jonas takes you from not knowing much to know all you need to be a succesful CSS developer. I really need to thank you, Jonas. If I know what I know today is because of you. You make learning the subject really intresting, never got bored of watching your lessons, waiting for the next one. Almost as it was a tv series! Can't wait to start the new "season", having done html and css, now javascript awaits me. And of course your javascript course! Thanks again and keep up like that!



1026604

Udemy ID

11/29/2016

Course created date

3/17/2019

Course Indexed date
Bot
Course Submitted by

Twitter
Telegram
Android PlayStore
Apple Appstore