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.
File Size :
17.93 GB
Total length :
28h 9m

Category

Instructor

Jonas Schmedtmann

Language

Last update

Last updated 11/2022

Ratings

4.7/5

Advanced CSS and Sass Flexbox Grid Animations and 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

Advanced CSS and Sass Flexbox Grid Animations and More

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 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 sectionDownloadable slides for theory videos (not boring, I promise!)Free support in the course Q&ALots 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!

Overview

Section 1: Welcome, Welcome, Welcome!

Lecture 1 Welcome to the Most Advanced CSS Course Ever!

Lecture 2 READ BEFORE YOU START!

Lecture 3 Setting up Our Tools

Section 2: Natours Project — Setup and First Steps (Part 1)

Lecture 4 Section Intro

Lecture 5 Project Overview

Lecture 6 Building the Header – Part 1

Lecture 7 Building the Header – Part 2

Lecture 8 Creating Cool CSS Animations

Lecture 9 Building a Complex Animated Button – Part 1

Lecture 10 Building a Complex Animated Button – Part 2

Section 3: How CSS Works: A Look Behind the Scenes

Lecture 11 Section Intro

Lecture 12 Three Pillars of Writing Good HTML and CSS (Never Forget Them!)

Lecture 13 How CSS Works Behind the Scenes: An Overview

Lecture 14 How CSS is Parsed, Part 1: The Cascade and Specificity

Lecture 15 Specificity in Practice

Lecture 16 How CSS is Parsed, Part 2: Value Processing

Lecture 17 How CSS is Parsed, Part 3: Inheritance

Lecture 18 Converting px to rem: An Effective Workflow

Lecture 19 How CSS Renders a Website: The Visual Formatting Model

Lecture 20 CSS Architecture, Components and BEM

Lecture 21 Implementing BEM in the Natours Project

Section 4: Introduction to Sass and NPM

Lecture 22 Section Intro

Lecture 23 What is Sass?

Lecture 24 First Steps with Sass: Variables and Nesting

Lecture 25 First Steps with Sass: Mixins, Extends and Functions

Lecture 26 A Brief Introduction to the Command Line

Lecture 27 NPM Packages: Let’s Install Sass Locally

Lecture 28 NPM Scripts: Let’s Write and Compile Sass Locally

Lecture 29 The Easiest Way of Automatically Reloading a Page on File Changes

Section 5: Natours Project — Using Advanced CSS and Sass (Part 2)

Lecture 30 Section Intro

Lecture 31 Converting Our CSS Code to Sass: Variables and Nesting

Lecture 32 Implementing the 7-1 CSS Architecture with Sass

Lecture 33 Review: Responsive Design Principles and Layout Types

Lecture 34 Building a Custom Grid with Floats

Lecture 35 Building the About Section – Part 1

Lecture 36 Building the About Section – Part 2

Lecture 37 Building the About Section – Part 3

Lecture 38 Building the Features Section

Lecture 39 Building the Tours Section – Part 1

Lecture 40 Building the Tours Section – Part 2

Lecture 41 Building the Tours Section – Part 3

Lecture 42 Building the Stories Section – Part 1

Lecture 43 Building the Stories Section – Part 2

Lecture 44 Building the Stories Section – Part 3

Lecture 45 Building the Booking Section – Part 1

Lecture 46 Building the Booking Section – Part 2

Lecture 47 Building the Booking Section – Part 3

Lecture 48 Building the Footer

Lecture 49 Building the Navigation – Part 1

Lecture 50 Building the Navigation – Part 2

Lecture 51 Building the Navigation – Part 3

Lecture 52 Building a Pure CSS Popup – Part 1

Lecture 53 Building a Pure CSS Popup – Part 2

Section 6: Natours Project — Advanced Responsive Design (Part 3)

Lecture 54 Section Intro

Lecture 55 Mobile-First vs Desktop-First and Breakpoints

Lecture 56 Let’s Use the Power of Sass Mixins to Write Media Queries

Lecture 57 Writing Media Queries – Base, Typography and Layout

Lecture 58 Writing Media Queries – Layout, About and Features Sections

Lecture 59 Writing Media Queries – Tours, Stories and Booking Sections

Lecture 60 An Overview of Responsive Images

Lecture 61 Responsive Images in HTML – Art Direction and Density Switching

Lecture 62 Responsive Images in HTML – Density and Resolution Switching

Lecture 63 Responsive Images in CSS

Lecture 64 Testing for Browser Support with @supports

Lecture 65 Setting up a Simple Build Process with NPM Scripts

Lecture 66 Wrapping up the Natours Project: Final Considerations

Section 7: Trillo Project — Master Flexbox!

Lecture 67 Section Intro

Lecture 68 Why Flexbox: An Overview of the Philosophy Behind Flexbox

Lecture 69 A Basic Intro to Flexbox: The Flex Container

Lecture 70 A Basic Intro to Flexbox: Flex Items

Lecture 71 A Basic Intro to Flexbox: Adding More Flex Items

Lecture 72 Project Overview

Lecture 73 Defining Project Settings and Custom Properties

Lecture 74 Building the Overall Layout

Lecture 75 Building the Header – Part 1

Lecture 76 Building the Header – Part 2

Lecture 77 Building the Header – Part 3

Lecture 78 Building the Navigation – Part 1

Lecture 79 Building the Navigation – Part 2

Lecture 80 Building the Hotel Overview – Part 1

Lecture 81 Building the Hotel Overview – Part 2

Lecture 82 Building the Description Section – Part 1

Lecture 83 Building the Description Section – Part 2

Lecture 84 Building the User Reviews Section

Lecture 85 Building the CTA Section

Lecture 86 Writing Media Queries – Part 1

Lecture 87 Writing Media Queries – Part 2

Lecture 88 Wrapping up the Trillo Project: Final Considerations

Section 8: A Quick Introduction to CSS Grid Layouts

Lecture 89 Section Intro

Lecture 90 Why CSS Grid: A Whole New Mindset

Lecture 91 Quick Setup for This Section

Lecture 92 Creating Our First Grid

Lecture 93 Getting Familiar with the fr Unit

Lecture 94 Positioning Grid Items

Lecture 95 Spanning Grid Items

Lecture 96 Grid Challenge

Lecture 97 Grid Challenge: A Basic Solution

Lecture 98 Naming Grid Lines

Lecture 99 Naming Grid Areas

Lecture 100 Implicit Grids vs. Explicit Grids

Lecture 101 Aligning Grid Items

Lecture 102 Aligning Tracks

Lecture 103 Using min-content, max-content and the minmax() function

Lecture 104 Responsive Layouts with auto-fit and auto-fill

Section 9: Nexter Project — Master CSS Grid Layouts!

Lecture 105 Project Overview and Setup

Lecture 106 Building the Overall Layout – Part 1

Lecture 107 Building the Overall Layout – Part 2

Lecture 108 Building the Features Section – Part 1

Lecture 109 Building the Features Section – Part 2

Lecture 110 Building the Story Section – Part 1

Lecture 111 Building the Story Section – Part 2

Lecture 112 Building the Homes Section – Part 1

Lecture 113 Building the Homes Section – Part 2

Lecture 114 Building the Gallery – Part 1

Lecture 115 Building the Gallery – Part 2

Lecture 116 Building the Footer

Lecture 117 Building the Sidebar

Lecture 118 Building the Header – Part 1

Lecture 119 Building the Header – Part 2

Lecture 120 Building the Realtors Section

Lecture 121 Writing Media Queries – Part 1

Lecture 122 Writing Media Queries – Part 2

Lecture 123 Browser Support for CSS Grid

Lecture 124 Wrapping up the Nexter Project: Final Considerations

Section 10: That’s It, Everyone!

Lecture 125 See You Next Time, CSS Master!

Lecture 126 My Other Courses + Updates

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!

Course Information:

Udemy | English | 28h 9m | 17.93 GB
Created by: Jonas Schmedtmann

You Can See More Courses in the Developer >> Greetings from CourseDown.com

New Courses

Scroll to Top