Advanced CSS and Sass: Take Your CSS to the Next Level!

Advanced CSS and Sass: Take Your CSS to the Next Level!
Advanced CSS and Sass: Take Your CSS to the Next Level!

English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 28 Hours | 3.84 GB
eLearning | Skill level: All Levels


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

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 20+ 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!
+ Table of Contents

Welcome_ Welcome_ Welcome!
1 Welcome to the Most Advanced CSS Course Ever!
3 Setting up Our Tools

Natours Project Setup and First Steps (Part 1)
4 Section Intro
5 Project Overview
6 Building the Header – Part 1
7 Building the Header – Part 2
8 Creating Cool CSS Animations
9 Building a Complex Animated Button – Part 1
10 Building a Complex Animated Button – Part 2

How CSS Works_ A Look Behind the Scenes
11 Section Intro
12 Three Pillars of Writing Good HTML and CSS (Never Forget Them!)
13 How CSS Works Behind the Scenes_ An Overview
14 How CSS is Parsed_ Part 1_ The Cascade and Specificity
15 Specificity in Practice
16 How CSS is Parsed_ Part 2_ Value Processing
17 How CSS is Parsed_ Part 3_ Inheritance
18 Converting px to rem_ An Effective Workflow
19 How CSS Renders a Website_ The Visual Formatting Model
20 CSS Architecture_ Components and BEM
21 Implementing BEM in the Natours Project

Introduction to Sass and NPM
22 Section Intro
23 What is Sass_
24 First Steps with Sass_ Variables and Nesting
25 First Steps with Sass_ Mixins_ Extends and Functions
26 A Brief Introduction to the Command Line
27 NPM Packages_ Let’s Install Sass Locally
28 NPM Scripts_ Let’s Write and Compile Sass Locally
29 The Easiest Way of Automatically Reloading a Page on File Changes

Natours Project Using Advanced CSS and Sass (Part 2)
30 Section Intro
31 Converting Our CSS Code to Sass_ Variables and Nesting
32 Implementing the 7-1 CSS Architecture with Sass
33 Review_ Basic Principles of Responsive Design and Layout Types
34 Building a Custom Grid with Floats
35 Building the About Section – Part 1
36 Building the About Section – Part 2
37 Building the About Section – Part 3
38 Building the Features Section
39 Building the Tours Section – Part 1
40 Building the Tours Section – Part 2
41 Building the Tours Section – Part 3
42 Building the Stories Section – Part 1
43 Building the Stories Section – Part 2
44 Building the Stories Section – Part 3
45 Building the Booking Section – Part 1
46 Building the Booking Section – Part 2
47 Building the Booking Section – Part 3
48 Building the Footer
49 Building the Navigation – Part 1
50 Building the Navigation – Part 2
51 Building the Navigation – Part 3
52 Building a Pure CSS Popup – Part 1
53 Building a Pure CSS Popup – Part 2

Natours Project Advanced Responsive Design (Part 3)
54 Section Intro
55 Mobile-First vs Desktop-First and Breakpoints
56 Let’s Use the Power of Sass Mixins to Write Media Queries
57 Writing Media Queries – Base_ Typography and Layout
58 Writing Media Queries – Layout_ About and Features Sections
59 Writing Media Queries – Tours_ Stories and Booking Sections
60 An Overview of Responsive Images
61 Responsive Images in HTML – Art Direction and Density Switching
62 Responsive Images in HTML – Density and Resolution Switching
63 Responsive Images in CSS
64 Testing for Browser Support with @supports
65 Setting up a Simple Build Process with NPM Scripts
66 Wrapping up the Natours Project_ Final Considerations

Trillo Project Master Flexbox!
67 Section Intro
68 Why Flexbox_ An Overview of the Philosophy Behind Flexbox
69 A Basic Intro to Flexbox_ The Flex Container
70 A Basic Intro to Flexbox_ Flex Items
71 A Basic Intro to Flexbox_ Adding More Flex Items
72 Project Overview
73 Defining Project Settings and Custom Properties
74 Building the Overall Layout
75 Building the Header – Part 1
76 Building the Header – Part 2
77 Building the Header – Part 3
78 Building the Navigation – Part 1
79 Building the Navigation – Part 2
80 Building the Hotel Overview – Part 1
81 Building the Hotel Overview – Part 2
82 Building the Description Section – Part 1
83 Building the Description Section – Part 2
84 Building the User Reviews Section
85 Building the CTA Section
86 Writing Media Queries – Part 1
87 Writing Media Queries – Part 2
88 Wrapping up the Trillo Project_ Final Considerations

A Quick Introduction To CSS Grid Layouts
89 section intro
90 Why CSS Grid A Whole New Mindset
91 quick setup for this section
92 creating our grid
93 getting familiar with fr unit
94 positioning grid items
95 spanning grid items
96 grid challenge
97 grid challenge-basic solution
98 .naming grid lines
99 naming grid areas
100 implict grid vs explict grid
101 aligning grid items
102 aligning tracks
103 Using min-content, max-content and the minmax() function
104 Responsive Layouts with auto-fit and auto-fill

Nexter Project — Master CSS Grid Layouts
105 project overview and setup
106 building the overall layout part 1
107 building the overall layout part 2
108 Building the Features Section – Part 1
109 Building the Features Section – Part 2
110 Building the Story Section – Part 1
111 Building the Story Section – Part 2
112 Building the Homes Section – Part 1
113 Building the Homes Section – Part 2
114 Building the Gallery – Part 1
115 Building the Gallery – Part 2
116 building the footbar
117 building the sidebar
118 Building the Header – Part 1
119 Building the Header – Part 2
120 Building the Realtors Section
121 Writing Media Queries – Part 1
122 Writing Media Queries – Part 2
123 Browser Support for CSS Grid
124 Wrapping up the Nexter Project Final Considerations
125 that_s it everyone

That’s It_ Everyone!
126 See You Next Time_ CSS Master!

Download from DepFile

Download from Turbobit

Download from DepositFiles

Download from Rapidgator