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

Focused View

Jonas Schmedtmann

28:08:17

151 View

01 - Welcome, Welcome, Welcome!

001 Welcome to the Most Advanced CSS Course Ever!.mp4

03:54

002 READ BEFORE YOU START!.html

003 Setting up Our Tools.mp4

02:52

02 - Natours Project Setup and First Steps (Part 1)

001 Section Intro.mp4

00:45

002 Project Overview.mp4

05:42

003 Building the Header - Part 1.mp4

24:23

004 Building the Header - Part 2.mp4

17:06

005 Creating Cool CSS Animations.mp4

19:19

006 Building a Complex Animated Button - Part 1.mp4

15:57

007 Building a Complex Animated Button - Part 2.mp4

12:51

external-links.txt

03 - How CSS Works A Look Behind the Scenes

001 Section Intro.mp4

01:38

002 Three Pillars of Writing Good HTML and CSS (Never Forget Them!).mp4

04:21

003 How CSS Works Behind the Scenes An Overview.mp4

04:32

004 How CSS is Parsed, Part 1 The Cascade and Specificity.mp4

12:33

005 Specificity in Practice.mp4

05:55

006 How CSS is Parsed, Part 2 Value Processing.mp4

15:44

007 How CSS is Parsed, Part 3 Inheritance.mp4

04:05

008 Converting px to rem An Effective Workflow.mp4

14:01

009 How CSS Renders a Website The Visual Formatting Model.mp4

12:45

010 CSS Architecture, Components and BEM.mp4

09:17

011 Implementing BEM in the Natours Project.mp4

05:15

external-links.txt

04 - Introduction to Sass and NPM

001 Section Intro.mp4

01:02

002 What is Sass.mp4

04:59

003 First Steps with Sass Variables and Nesting.mp4

25:22

004 First Steps with Sass Mixins, Extends and Functions.mp4

17:05

005 A Brief Introduction to the Command Line.mp4

11:21

006 NPM Packages Lets Install Sass Locally.mp4

13:48

007 NPM Scripts Lets Write and Compile Sass Locally.mp4

13:10

008 The Easiest Way of Automatically Reloading a Page on File Changes.mp4

06:23

05 - Natours Project Using Advanced CSS and Sass (Part 2)

001 Section Intro.mp4

00:55

002 Converting Our CSS Code to Sass Variables and Nesting.mp4

11:17

003 Implementing the 7-1 CSS Architecture with Sass.mp4

17:34

004 Review Responsive Design Principles and Layout Types.mp4

07:48

005 Building a Custom Grid with Floats.mp4

37:03

006 Building the About Section - Part 1.mp4

23:25

007 Building the About Section - Part 2.mp4

21:52

008 Building the About Section - Part 3.mp4

17:30

009 Building the Features Section.mp4

30:20

010 Building the Tours Section - Part 1.mp4

25:28

011 Building the Tours Section - Part 2.mp4

31:00

012 Building the Tours Section - Part 3.mp4

16:36

013 Building the Stories Section - Part 1.mp4

19:40

014 Building the Stories Section - Part 2.mp4

14:14

015 Building the Stories Section - Part 3.mp4

13:49

016 Building the Booking Section - Part 1.mp4

18:19

017 Building the Booking Section - Part 2.mp4

18:37

018 Building the Booking Section - Part 3.mp4

23:10

019 Building the Footer.mp4

15:57

020 Building the Navigation - Part 1.mp4

29:37

021 Building the Navigation - Part 2.mp4

13:13

022 Building the Navigation - Part 3.mp4

15:36

023 Building a Pure CSS Popup - Part 1.mp4

25:14

024 Building a Pure CSS Popup - Part 2.mp4

16:55

06 - Natours Project Advanced Responsive Design (Part 3)

001 Section Intro.mp4

01:00

002 Mobile-First vs Desktop-First and Breakpoints.mp4

17:35

003 Lets Use the Power of Sass Mixins to Write Media Queries.mp4

28:08

004 Writing Media Queries - Base, Typography and Layout.mp4

26:39

005 Writing Media Queries - Layout, About and Features Sections.mp4

12:33

006 Writing Media Queries - Tours, Stories and Booking Sections.mp4

20:26

007 An Overview of Responsive Images.mp4

05:41

008 Responsive Images in HTML - Art Direction and Density Switching.mp4

10:15

009 Responsive Images in HTML - Density and Resolution Switching.mp4

17:21

010 Responsive Images in CSS.mp4

11:43

011 Testing for Browser Support with @supports.mp4

21:43

012 Setting up a Simple Build Process with NPM Scripts.mp4

20:55

013 Wrapping up the Natours Project Final Considerations.mp4

13:58

07 - Trillo Project Master Flexbox!

001 Section Intro.mp4

01:03

002 Why Flexbox An Overview of the Philosophy Behind Flexbox.mp4

06:31

003 A Basic Intro to Flexbox The Flex Container.mp4

15:08

004 A Basic Intro to Flexbox Flex Items.mp4

10:34

005 A Basic Intro to Flexbox Adding More Flex Items.mp4

06:14

006 Project Overview.mp4

07:14

007 Defining Project Settings and Custom Properties.mp4

13:40

008 Building the Overall Layout.mp4

12:00

009 Building the Header - Part 1.mp4

17:59

010 Building the Header - Part 2.mp4

14:48

011 Building the Header - Part 3.mp4

12:26

012 Building the Navigation - Part 1.mp4

11:36

013 Building the Navigation - Part 2.mp4

16:50

014 Building the Hotel Overview - Part 1.mp4

15:19

015 Building the Hotel Overview - Part 2.mp4

15:26

016 Building the Description Section - Part 1.mp4

12:53

017 Building the Description Section - Part 2.mp4

19:38

018 Building the User Reviews Section.mp4

22:52

019 Building the CTA Section.mp4

16:54

020 Writing Media Queries - Part 1.mp4

19:27

021 Writing Media Queries - Part 2.mp4

16:27

022 Wrapping up the Trillo Project Final Considerations.mp4

14:45

external-links.txt

08 - A Quick Introduction to CSS Grid Layouts

001 Section Intro.mp4

00:59

002 Why CSS Grid A Whole New Mindset.mp4

05:15

003 Quick Setup for This Section.mp4

02:11

004 Creating Our First Grid.mp4

12:15

005 Getting Familiar with the fr Unit.mp4

10:00

006 Positioning Grid Items.mp4

07:26

007 Spanning Grid Items.mp4

09:48

008 Grid Challenge.mp4

02:48

009 Grid Challenge A Basic Solution.mp4

11:08

010 Naming Grid Lines.mp4

09:40

011 Naming Grid Areas.mp4

11:03

012 Implicit Grids vs. Explicit Grids.mp4

10:39

013 Aligning Grid Items.mp4

09:57

014 Aligning Tracks.mp4

12:59

015 Using min-content, max-content and the minmax() function.mp4

16:19

016 Responsive Layouts with auto-fit and auto-fill.mp4

10:57

09 - Nexter Project Master CSS Grid Layouts!

001 Project Overview and Setup.mp4

11:31

002 Building the Overall Layout - Part 1.mp4

15:34

003 Building the Overall Layout - Part 2.mp4

24:32

004 Building the Features Section - Part 1.mp4

13:01

005 Building the Features Section - Part 2.mp4

20:27

006 Building the Story Section - Part 1.mp4

18:00

007 Building the Story Section - Part 2.mp4

11:38

008 Building the Homes Section - Part 1.mp4

15:46

009 Building the Homes Section - Part 2.mp4

18:51

010 Building the Gallery - Part 1.mp4

15:24

011 Building the Gallery - Part 2.mp4

12:27

012 Building the Footer.mp4

12:33

013 Building the Sidebar.mp4

05:08

014 Building the Header - Part 1.mp4

16:16

015 Building the Header - Part 2.mp4

09:51

016 Building the Realtors Section.mp4

11:22

017 Writing Media Queries - Part 1.mp4

17:12

018 Writing Media Queries - Part 2.mp4

18:38

019 Browser Support for CSS Grid.mp4

08:35

020 Wrapping up the Nexter Project Final Considerations.mp4

06:44

external-links.txt

10 - Thats It, Everyone!

001 See You Next Time, CSS Master!.mp4

02:28

002 My Other Courses + Updates.html

Description

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

What You'll 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

Who is this 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!

What You Need to Know?

This not a beginner course — You should be confident in coding HTML and CSS before taking the course

Any computer and OS will work — Windows, macOS or Linux

There is no need for any paid software — The text editor you already have works just fine

More details

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!
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!

User Reviews

Rating

average 0

Total votes0

Focused display

CSS

Jonas Schmedtmann

Instructor's Courses

Hi, I'm Jonas! I have been identified as one of Udemy's Top Instructors and all my premium courses have 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 2010 and also have a Master's degree in Engineering.I discovered my passion for teaching and helping others by sharing all I knew when I was in college, and that passion brought me to Udemy in 2015.Here, in all my courses, what students love the most is that I take the time to explain every concept in a way that everyone can easily understand.So, do you want to learn how to build awesome websites with modern HTML and CSS?Looking for a complete JavaScript course that takes you from zero to an 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 youtube 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 1,000,000+ happy students today.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.