Advanced Css And Sass

  1. Home
  2. Css
  3. Advanced Css And Sass

Tags: CSS

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

Last updated 2022-01-10 | 4.8

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

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

* Requirements

* 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

Description

  • 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

10 sections • 126 lectures

Welcome, Welcome, Welcome! 3 lectures

Welcome to the Most Advanced CSS Course Ever! Preview 03:54

READ BEFORE YOU START! Preview 00:38

Setting up Our Tools Preview 02:52

Natours Project — Setup and First Steps (Part 1) 7 lectures

Section Intro Preview 00:44

Project Overview Preview 05:42

Building the Header - Part 1 Preview 24:23

Building the Header - Part 2 Preview 17:06

Creating Cool CSS Animations Preview 19:19

Building a Complex Animated Button - Part 1 Preview 15:57

Building a Complex Animated Button - Part 2 Preview 12:51

How CSS Works: A Look Behind the Scenes 11 lectures

Section Intro Preview 01:38

Three Pillars of Writing Good HTML and CSS (Never Forget Them!) Preview 04:21

How CSS Works Behind the Scenes: An Overview Preview 04:32

How CSS is Parsed, Part 1: The Cascade and Specificity Preview 12:33

Specificity in Practice Preview 05:55

How CSS is Parsed, Part 2: Value Processing Preview 15:44

How CSS is Parsed, Part 3: Inheritance Preview 04:05

Converting px to rem: An Effective Workflow Preview 14:01

How CSS Renders a Website: The Visual Formatting Model Preview 12:45

CSS Architecture, Components and BEM Preview 09:17

Implementing BEM in the Natours Project Preview 05:14

Introduction to Sass and NPM 8 lectures

Section Intro Preview 01:02

What is Sass? Preview 04:58

First Steps with Sass: Variables and Nesting Preview 25:22

First Steps with Sass: Mixins, Extends and Functions Preview 17:05

A Brief Introduction to the Command Line Preview 11:21

NPM Packages: Let's Install Sass Locally Preview 13:48

NPM Scripts: Let's Write and Compile Sass Locally Preview 13:10

The Easiest Way of Automatically Reloading a Page on File Changes Preview 06:22

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

Section Intro Preview 00:55

Converting Our CSS Code to Sass: Variables and Nesting Preview 11:17

Implementing the 7-1 CSS Architecture with Sass Preview 17:34

Review: Responsive Design Principles and Layout Types Preview 07:48

Building a Custom Grid with Floats Preview 37:03

Building the About Section - Part 1 Preview 23:25

Building the About Section - Part 2 Preview 21:51

Building the About Section - Part 3 Preview 17:30

Building the Features Section Preview 30:19

Building the Tours Section - Part 1 Preview 25:28

Building the Tours Section - Part 2 Preview 31:00

Building the Tours Section - Part 3 Preview 16:36

Building the Stories Section - Part 1 Preview 19:40

Building the Stories Section - Part 2 Preview 14:14

Building the Stories Section - Part 3 Preview 13:49

Building the Booking Section - Part 1 Preview 18:19

Building the Booking Section - Part 2 Preview 18:37

Building the Booking Section - Part 3 Preview 23:10

Building the Footer Preview 15:57

Building the Navigation - Part 1 Preview 29:37

Building the Navigation - Part 2 Preview 13:13

Building the Navigation - Part 3 Preview 15:36

Building a Pure CSS Popup - Part 1 Preview 25:13

Building a Pure CSS Popup - Part 2 Preview 16:55

Natours Project — Advanced Responsive Design (Part 3) 13 lectures

Section Intro Preview 01:00

Mobile-First vs Desktop-First and Breakpoints Preview 17:35

Let's Use the Power of Sass Mixins to Write Media Queries Preview 28:08

Writing Media Queries - Base, Typography and Layout Preview 26:39

Writing Media Queries - Layout, About and Features Sections Preview 12:33

Writing Media Queries - Tours, Stories and Booking Sections Preview 20:26

An Overview of Responsive Images Preview 05:41

Responsive Images in HTML - Art Direction and Density Switching Preview 10:14

Responsive Images in HTML - Density and Resolution Switching Preview 17:21

Responsive Images in CSS Preview 11:42

Testing for Browser Support with @supports Preview 21:42

Setting up a Simple Build Process with NPM Scripts Preview 20:55

Wrapping up the Natours Project: Final Considerations Preview 13:58

Trillo Project — Master Flexbox! 22 lectures

Section Intro Preview 01:03

Why Flexbox: An Overview of the Philosophy Behind Flexbox Preview 06:31

A Basic Intro to Flexbox: The Flex Container Preview 15:08

A Basic Intro to Flexbox: Flex Items Preview 10:34

A Basic Intro to Flexbox: Adding More Flex Items Preview 06:14

Project Overview Preview 07:14

Defining Project Settings and Custom Properties Preview 13:40

Building the Overall Layout Preview 12:00

Building the Header - Part 1 Preview 17:59

Building the Header - Part 2 Preview 14:48

Building the Header - Part 3 Preview 12:26

Building the Navigation - Part 1 Preview 11:36

Building the Navigation - Part 2 Preview 16:50

Building the Hotel Overview - Part 1 Preview 15:18

Building the Hotel Overview - Part 2 Preview 15:26

Building the Description Section - Part 1 Preview 12:53

Building the Description Section - Part 2 Preview 19:38

Building the User Reviews Section Preview 22:52

Building the CTA Section Preview 16:54

Writing Media Queries - Part 1 Preview 19:27

Writing Media Queries - Part 2 Preview 16:27

Wrapping up the Trillo Project: Final Considerations Preview 14:45

A Quick Introduction to CSS Grid Layouts 16 lectures

Section Intro Preview 00:59

Why CSS Grid: A Whole New Mindset Preview 05:15

Quick Setup for This Section Preview 02:11

Creating Our First Grid Preview 12:15

Getting Familiar with the fr Unit Preview 10:00

Positioning Grid Items Preview 07:26

Spanning Grid Items Preview 09:48

Grid Challenge Preview 02:48

Grid Challenge: A Basic Solution Preview 11:08

Naming Grid Lines Preview 09:40

Naming Grid Areas Preview 11:03

Implicit Grids vs. Explicit Grids Preview 10:39

Aligning Grid Items Preview 09:57

Aligning Tracks Preview 12:59

Using min-content, max-content and the minmax() function Preview 16:19

Responsive Layouts with auto-fit and auto-fill Preview 10:57

Nexter Project — Master CSS Grid Layouts! 20 lectures

Project Overview and Setup Preview 11:31

Building the Overall Layout - Part 1 Preview 15:33

Building the Overall Layout - Part 2 Preview 24:31

Building the Features Section - Part 1 Preview 13:01

Building the Features Section - Part 2 Preview 20:27

Building the Story Section - Part 1 Preview 18:00

Building the Story Section - Part 2 Preview 11:38

Building the Homes Section - Part 1 Preview 15:46

Building the Homes Section - Part 2 Preview 18:51

Building the Gallery - Part 1 Preview 15:24

Building the Gallery - Part 2 Preview 12:27

Building the Footer Preview 12:33

Building the Sidebar Preview 05:08

Building the Header - Part 1 Preview 16:15

Building the Header - Part 2 Preview 09:51

Building the Realtors Section Preview 11:22

Writing Media Queries - Part 1 Preview 17:12

Writing Media Queries - Part 2 Preview 18:38

Browser Support for CSS Grid Preview 08:35

Wrapping up the Nexter Project: Final Considerations Preview 06:44

That's It, Everyone! 2 lectures

See You Next Time, CSS Master! Preview 02:28

My Other Courses + Updates Preview 00:46