Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA Amazon AWS CompTIA Security+ AWS Certified Developer - Associate
Graphic Design Photoshop Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Mindfulness Personal Development Meditation Personal Transformation Life Purpose Coaching Neuroscience
Web Development JavaScript React CSS Angular PHP WordPress Node.Js Python
Google Flutter Android Development iOS Development Swift React Native Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Retargeting
SQL Microsoft Power BI Tableau Business Analysis Business Intelligence MySQL Data Analysis Data Modeling Data Science
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Online Business Business Plan Startup Freelancing Blogging Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
30-Day Money-Back Guarantee

This course includes:

  • 28 hours on-demand video
  • 2 articles
  • Full lifetime access
  • Access on mobile and TV
Development Web Development CSS

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.
Bestseller
Rating: 4.8 out of 54.8 (27,694 ratings)
122,737 students
Created by Jonas Schmedtmann
Last updated 11/2020
English
English, French [Auto], 
30-Day Money-Back Guarantee

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
Curated for the Udemy for Business collection

Course content

10 sections • 126 lectures • 28h 6m total length

  • Preview03:54
  • READ BEFORE YOU START!
    00:38
  • Preview02:52

  • Section Intro
    00:44
  • Preview05:42
  • Building the Header - Part 1
    24:23
  • Building the Header - Part 2
    17:06
  • Creating Cool CSS Animations
    Preview19:19
  • Building a Complex Animated Button - Part 1
    15:56
  • Building a Complex Animated Button - Part 2
    12:51

  • 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
    Preview04:32
  • How CSS is Parsed, Part 1: The Cascade and Specificity
    12:33
  • Specificity in Practice
    05:55
  • How CSS is Parsed, Part 2: Value Processing
    15:44
  • How CSS is Parsed, Part 3: Inheritance
    04:05
  • Converting px to rem: An Effective Workflow
    14:00
  • How CSS Renders a Website: The Visual Formatting Model
    12:45
  • CSS Architecture, Components and BEM
    09:17
  • Implementing BEM in the Natours Project
    05:14

  • Section Intro
    01:02
  • What is Sass?
    04:58
  • First Steps with Sass: Variables and Nesting
    Preview25:22
  • First Steps with Sass: Mixins, Extends and Functions
    17:05
  • A Brief Introduction to the Command Line
    11:21
  • NPM Packages: Let's Install Sass Locally
    13:48
  • NPM Scripts: Let's Write and Compile Sass Locally
    13:10
  • The Easiest Way of Automatically Reloading a Page on File Changes
    06:22

  • 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:19
  • Preview25:28
  • Preview31:00
  • Preview16: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:37
  • 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

  • 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, Typography and Layout
    26:39
  • Writing Media Queries - Layout, About and Features Sections
    12:33
  • Writing Media Queries - Tours, Stories and Booking Sections
    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
    Preview20:55
  • Wrapping up the Natours Project: Final Considerations
    13:58

  • 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
  • Preview07:14
  • Defining Project Settings and Custom Properties
    13:40
  • Building the Overall Layout
    Preview12:00
  • Building the Header - Part 1
    Preview17:59
  • Preview14:48
  • Preview12: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

  • 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:15
  • Getting Familiar with the fr Unit
    10:00
  • Positioning Grid Items
    07:26
  • Spanning Grid Items
    09:48
  • 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, max-content and the minmax() function
    16:19
  • Responsive Layouts with auto-fit and auto-fill
    10:57

  • Project Overview and Setup
    11:31
  • Building the Overall Layout - Part 1
    15:33
  • 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:15
  • Building the Header - Part 2
    09:51
  • 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:35
  • Wrapping up the Nexter Project: Final Considerations
    06:44

  • See You Next Time, CSS Master!
    02:28
  • My Other Courses + Updates
    00:45

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!

Featured review

Paolo Angelo Manlunas
Paolo Angelo Manlunas
191 courses
16 reviews
Rating: 5.0 out of 5a year ago
Amazing Course! The details and information about the different tools and design methods/approaches used in each project are all important knowledge for anyone who wants to be proficient in this field of web design and development. Jonas explains everything clearly and straight to the point and not wasting time. I highly recommend this course to anyone!

Instructor

Jonas Schmedtmann
Web Developer, Designer, and Teacher
Jonas Schmedtmann
  • 4.7 Instructor Rating
  • 205,930 Reviews
  • 974,343 Students
  • 5 Courses

Hi, I'm Jonas! I have been identified as one of Udemy's Top Instructors and all my premium courses have recently earned the best-selling status for outstanding performance and student satisfaction.

I'm a full-stack web developer and designer with a passion for building beautiful things from scratch. I've been building websites and apps since 2007 and also have a Master's degree in Engineering.

It was in college where I first discovered my passion for teaching and helping others by sharing all I knew. And that passion brought me to Udemy in 2015, where my students love the fact that I take the time to explain important concepts in a way that everyone can easily understand.

Do you want to learn how to build awesome websites with advanced HTML and CSS?

Looking for a complete JavaScript course that takes you from beginner to advanced developer?

Or maybe you want to build modern and fast back-end applications with Node.js?

Then don't waste your time with random tutorials or incomplete videos. All my courses are easy-to-follow, all-in-one packages that will take your skills to the next level.

These courses are exactly the courses I wish I had when I was first getting into web development!

So see for yourself, enroll in one of my courses (or all of them :D) and join my 500,000+ happy students today.

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.