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

About Course

Master advanced CSS and Sass techniques for stunning web design. This comprehensive course will equip you with the knowledge and skills needed to create complex and responsive layouts, build interactive animations, and implement efficient CSS architecture using Flexbox, Grid, and Sass. Learn from expert instructors and build real-world projects to enhance your web development skills. This free course covers modern CSS techniques like clip-path, background-clip, mask-image, and more. Learn advanced animation techniques, CSS selectors, pseudo-classes, and pseudo-elements. Gain a deeper understanding of how CSS works behind the scenes, including the cascade, specificity, and inheritance. Explore Sass for creating reusable, maintainable, and scalable CSS codebases.

Discover how to architect large CSS codebases using the 7-1 rule, component-based design, and BEM methodology. Understand the NPM ecosystem for managing Sass compilation and browser reloading. Master modern responsive design strategies, including mobile-first and desktop-first approaches, selecting breakpoints, and utilizing em vs rem units.

Learn how to create responsive images in HTML and CSS for faster page loads. Explore the power of SVG images in HTML and CSS, including generating SVG sprites and customizing colors. Build background video effects and master Flexbox and Grid layouts for creating dynamic and responsive web interfaces.

This course is designed for intermediate-level HTML and CSS developers. It’s free and available on Theetay from platforms like Udemy, Udacity, Coursera, MasterClass, NearPeer, and more.

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

Course Content

Welcome, Welcome, Welcome!

A Message from the Professor
Welcome to the Most Advanced CSS Course Ever!

03:54
Setting up Our Tools

02:52
Course Material Download Link

00:00

Natours Project — Setup and First Steps (Part 1)

How CSS Works A Look Behind the Scenes

Section Intro

01:38
Three Pillars of Writing Good HTML and CSS (Never Forget Them!)

04:21
How CSS Works Behind the Scenes An Overview

04:32
How CSS is Parsed

12:33
Specificity in Practice

05:55
How CSS is Parsed

15:44
How CSS is Parsed

04:05
Converting px to rem An Effective Workflow

14:00
How CSS Renders a Website The Visual Formatting Model

12:45
CSS Architecture

09:17
Implementing BEM in the Natours Project

05:14

Introduction to Sass and NPM

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

Section Intro

00:55
Converting Our CSS Code to Sass Variables and Nesting

11:17
Implementing the 7-1 CSS Architecture with Sass

17:33
Review Basic Principles of Responsive Design and Layout Types

04:28
Building a Custom Grid with Floats

37:03
Building the About Section – Part 1

23:25
Building the About Section – Part 2

21:51
Building the About Section – Part 3

17:30
Building the Features Section

30:39
Building the Tours Section – Part 1

25:28
Building the Tours Section – Part 2

31:00
Building the Tours Section – Part 3

16:36
Building the Stories Section – Part 1

19:40
Building the Stories Section – Part 2

14:14
Building the Stories Section – Part 3

13:49
Building the Booking Section – Part 1

18:19
Building the Booking Section – Part 2

18:07
Building the Booking Section – Part 3

23:10
Building the Footer

15:57
Building the Navigation – Part 1

29:37
Building the Navigation – Part 2

13:13
Building the Navigation – Part 3

15:36
Building a Pure CSS Popup – Part 1

25:13
Building a Pure CSS Popup – Part 2

16:55

Natours Project — Advanced Responsive Design (Part 2)

Section Intro

01:00
Mobile-First vs Desktop-First and Breakpoints

17:35
Let’s Use the Power of Sass Mixins to Write Media Queries

28:08
Writing Media Queries – Base

26:39
Writing Media Queries – Layout

12:33
Writing Media Queries – Tours

20:26
An Overview of Responsive Images

05:41
Responsive Images in HTML – Art Direction and Density Switching

10:14
Responsive Images in HTML – Density and Resolution Switching

17:21
Responsive Images in CSS

11:42
Testing for Browser Support with @supports

21:42
Setting up a Simple Build Process with NPM Scripts

20:55
Wrapping up the Natours Project Final Considerations

13:58

Trillo Project — Master Flexbox!

Section Intro

01:03
Why Flexbox An Overview of the Philosophy Behind Flexbox

06:31
A Basic Intro to Flexbox The Flex Container

15:08
A Basic Intro to Flexbox Flex Items

10:34
A Basic Intro to Flexbox Adding More Flex Items

06:14
Project Overview

07:14
Defining Project Settings and Custom Properties

13:40
Building the Overall Layout

12:00
Building the Header – Part 1

17:59
Building the Header – Part 2

14:48
Building the Header – Part 3

12:26
Building the Navigation – Part 1

11:36
Building the Navigation – Part 2

16:50
Building the Hotel Overview – Part 1

15:18
Building the Hotel Overview – Part 2

15:26
Building the Description Section – Part 1

12:53
Building the Description Section – Part 2

19:38
Building the User Reviews Section

22:52
Building the CTA Section

16:54
Writing Media Queries – Part 1

19:27
Writing Media Queries – Part 2

16:27
Wrapping up the Trillo Project Final Considerations

14:45

A Quick Introduction to CSS Grid Layouts

Section Intro

00:59
Why CSS Grid A Whole New Mindset

05:15
Quick Setup for This Section

02:11
Creating Our First Grid

12:16
Getting Familiar with the fr Unit

10:00
Positioning Grid Items

07:26
Spanning Grid Items

09:49
Grid Challenge

02:48
Grid Challenge A Basic Solution

11:08
Naming Grid Lines

09:40
Naming Grid Areas

11:03
Implicit Grids vs. Explicit Grids

10:39
Aligning Grid Items

09:57
Aligning Tracks

12:59
Using min-content

16:19
Responsive Layouts with auto-fit and auto-fill

10:57

Nexter Project — Master CSS Grid Layouts!

Project Overview and Setup

11:31
Building the Overall Layout – Part 1

15:34
Building the Overall Layout – Part 2

24:31
Building the Features Section – Part 1

13:01
Building the Features Section – Part 2

20:27
Building the Story Section – Part 1

18:00
Building the Story Section – Part 2

11:38
Building the Homes Section – Part 1

15:46
Building the Homes Section – Part 2

18:51
Building the Gallery – Part 1

15:24
Building the Gallery – Part 2

12:27
Building the Footer

12:33
Building the Sidebar

05:08
Building the Header – Part 1

16:16
Building the Header – Part 2

09:52
Building the Realtors Section

11:22
Writing Media Queries – Part 1

17:12
Writing Media Queries – Part 2

18:38
Browser Support for CSS Grid

08:03
Wrapping up the Nexter Project Final Considerations

06:44

That’s It, Everyone!

Add this certificate to your resume to demonstrate your skills & increase your chances of getting noticed.

Student Ratings & Reviews

No Review Yet

About Course

What Will You Learn?

Course Content

Welcome, Welcome, Welcome!

A Message from the Professor

Welcome to the Most Advanced CSS Course Ever!

Setting up Our Tools

Course Material Download Link

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

Specificity in Practice

How CSS is Parsed

How CSS is Parsed

Converting px to rem An Effective Workflow

How CSS Renders a Website The Visual Formatting Model

CSS Architecture

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

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 1)

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 2)

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

Writing Media Queries – Layout

Writing Media Queries – Tours

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