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

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.


Advanced CSS and Sass: Flexbox, Grid, Animations and More!
English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 28 Hours | 3.93 GB
eLearning | Skill level: All Levels

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

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!

 

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!

Welcome, Welcome, Welcome!
1 Welcome to the Most Advanced CSS Course Ever!
2 READ BEFORE YOU START!
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 CSS Architecture, Components and BEM
13 Implementing BEM in the Natours Project
14 Three Pillars of Writing Good HTML and CSS (Never Forget Them!)
15 How CSS Works Behind the Scenes An Overview
16 How CSS is Parsed, Part 1 The Cascade and Specificity
17 Specificity in Practice
18 How CSS is Parsed, Part 2 Value Processing
19 How CSS is Parsed, Part 3 Inheritance
20 Converting px to rem An Effective Workflow
21 How CSS Renders a Website The Visual Formatting Model

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 Building the Tours Section – Part 1
32 Building the Tours Section – Part 2
33 Building the Tours Section – Part 3
34 Building the Stories Section – Part 1
35 Building the Stories Section – Part 2
36 Building the Stories Section – Part 3
37 Building the Booking Section – Part 1
38 Building the Booking Section – Part 2
39 Building the Booking Section – Part 3
40 Building the Footer
41 Converting Our CSS Code to Sass Variables and Nesting
42 Building the Navigation – Part 1
43 Building the Navigation – Part 2
44 Building the Navigation – Part 3
45 Building a Pure CSS Popup – Part 1
46 Building a Pure CSS Popup – Part 2
47 Implementing the 7-1 CSS Architecture with Sass
48 Review Basic Principles of Responsive Design and Layout Types
49 Building a Custom Grid with Floats
50 Building the About Section – Part 1
51 Building the About Section – Part 2
52 Building the About Section – Part 3
53 Building the Features Section

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

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

A Quick Introduction to CSS Grid Layouts
89 Section Intro
90 Naming Grid Lines
91 Naming Grid Areas
92 Implicit Grids vs. Explicit Grids
93 Aligning Grid Items
94 Aligning Tracks
95 Using min-content, max-content and the minmax() function
96 Responsive Layouts with auto-fit and auto-fill
97 Why CSS Grid A Whole New Mindset
98 Quick Setup for This Section
99 Creating Our First Grid
100 Getting Familiar with the fr Unit
101 Positioning Grid Items
102 Spanning Grid Items
103 Grid Challenge
104 Grid Challenge A Basic Solution

Nexter Project — Master CSS Grid Layouts!
105 Project Overview and Setup
106 Building the Gallery – Part 1
107 Building the Gallery – Part 2
108 Building the Footer
109 Building the Sidebar
110 Building the Header – Part 1
111 Building the Header – Part 2
112 Building the Realtors Section
113 Writing Media Queries – Part 1
114 Writing Media Queries – Part 2
115 Browser Support for CSS Grid
116 Building the Overall Layout – Part 1
117 Wrapping up the Nexter Project Final Considerations
118 Building the Overall Layout – Part 2
119 Building the Features Section – Part 1
120 Building the Features Section – Part 2
121 Building the Story Section – Part 1
122 Building the Story Section – Part 2
123 Building the Homes Section – Part 1
124 Building the Homes Section – Part 2

That’s It, Everyone!
125 See You Next Time, CSS Master!


Add a Comment

Your email address will not be published. Required fields are marked *