We may earn an affiliate commission when you visit our partners.
Course image
Udemy logo

Advanced CSS and Sass

Flexbox, Grid, Animations and More!

Jonas Schmedtmann

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?

Read 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 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 section

  • Downloadable slides for theory videos (not boring, I promise. )

  • Free support in the course Q&A

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

Enroll now

What's inside

Learning objectives

  • 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
  • Show more
  • Show less

Syllabus

Welcome, Welcome, Welcome!
Welcome to the Most Advanced CSS Course Ever!
READ BEFORE YOU START!
Setting up Our Tools
Read more
Natours Project — Setup and First Steps (Part 1)
Section Intro
Project Overview
Building the Header - Part 1
Building the Header - Part 2
Creating Cool CSS Animations
Building a Complex Animated Button - Part 1
Building a Complex Animated Button - Part 2
How CSS Works: A Look Behind the Scenes
Three Pillars of Writing Good HTML and CSS (Never Forget Them!)
How CSS Works Behind the Scenes: An Overview
How CSS is Parsed, Part 1: The Cascade and Specificity
Specificity in Practice
How CSS is Parsed, Part 2: Value Processing
How CSS is Parsed, Part 3: Inheritance
Converting px to rem: An Effective Workflow
How CSS Renders a Website: The Visual Formatting Model
CSS Architecture, Components and BEM
Implementing BEM in the Natours Project
Introduction to Sass and NPM
What is Sass?
First Steps with Sass: Variables and Nesting
First Steps with Sass: Mixins, Extends and Functions
A Brief Introduction to the Command Line
NPM Packages: Let's Install Sass Locally
NPM Scripts: Let's Write and Compile Sass Locally
The Easiest Way of Automatically Reloading a Page on File Changes
Natours Project — Using Advanced CSS and Sass (Part 2)
Converting Our CSS Code to Sass: Variables and Nesting
Implementing the 7-1 CSS Architecture with Sass
Review: Responsive Design Principles and Layout Types
Building a Custom Grid with Floats
Building the About Section - Part 1
Building the About Section - Part 2
Building the About Section - Part 3
Building the Features Section
Building the Tours Section - Part 1
Building the Tours Section - Part 2
Building the Tours Section - Part 3
Building the Stories Section - Part 1
Building the Stories Section - Part 2
Building the Stories Section - Part 3
Building the Booking Section - Part 1
Building the Booking Section - Part 2
Building the Booking Section - Part 3
Building the Footer
Building the Navigation - Part 1
Building the Navigation - Part 2
Building the Navigation - Part 3
Building a Pure CSS Popup - Part 1
Building a Pure CSS Popup - Part 2
Natours Project — Advanced Responsive Design (Part 3)
Mobile-First vs Desktop-First and Breakpoints
Let's Use the Power of Sass Mixins to Write Media Queries
Writing Media Queries - Base, Typography and Layout
Writing Media Queries - Layout, About and Features Sections
Writing Media Queries - Tours, Stories and Booking Sections
An Overview of Responsive Images
Responsive Images in HTML - Art Direction and Density Switching
Responsive Images in HTML - Density and Resolution Switching
Responsive Images in CSS
Testing for Browser Support with @supports
Setting up a Simple Build Process with NPM Scripts
Wrapping up the Natours Project: Final Considerations
Trillo Project — Master Flexbox!
Why Flexbox: An Overview of the Philosophy Behind Flexbox
A Basic Intro to Flexbox: The Flex Container
A Basic Intro to Flexbox: Flex Items
A Basic Intro to Flexbox: Adding More Flex Items
Defining Project Settings and Custom Properties
Building the Overall Layout
Building the Header - Part 3
Building the Hotel Overview - Part 1
Building the Hotel Overview - Part 2
Building the Description Section - Part 1
Building the Description Section - Part 2
Building the User Reviews Section
Building the CTA Section
Writing Media Queries - Part 1
Writing Media Queries - Part 2
Wrapping up the Trillo Project: Final Considerations
A Quick Introduction to CSS Grid Layouts
Why CSS Grid: A Whole New Mindset
Quick Setup for This Section
Creating Our First Grid

Good to know

Know what's good
, what to watch for
, and possible dealbreakers
Teaches tools like flexbox and CSS Grid, which are standard in modern web design
Features Jonas Schmedtmann, who is recognized in the CSS training community
Covers fundamentals to advanced CSS techniques, suitable for intermediates
Includes real-world projects, reinforcing practical applications
Offers hands-on building exercises to strengthen understanding
Requires a solid understanding of HTML and CSS, which may not be suitable for absolute beginners

Save this course

Save Advanced CSS and Sass: Flexbox, Grid, Animations and More! to your list so you can find it easily later:
Save

Reviews summary

Solid css and sass course

Learners say this course provides a comprehensive understanding of CSS and Sass/SCSS. Students praise the engaging assignments and appreciate the instructor's guidance. Some wish for more in-depth coverage of accessibility.
Students praise the engaging assignments and instructor guidance.
"This is a great course overall that teaches and guides you to the various possibilities and what of what you are capable of doing with CSS and Sass/SCSS."
Some wish for more in-depth coverage of accessibility.
"I loved this course and if I had to gripe about anything it would be about the accessibility portion where he teaches how to make the sites mobile but only walks you through a small portion of it."

Career center

Learners who complete Advanced CSS and Sass: Flexbox, Grid, Animations and More! will develop knowledge and skills that may be useful to these careers:
User Interface Designer
User interface designers are responsible for the design of the user interface of a website or application. This course will help you build a strong foundation in the core concepts of CSS, including Flexbox, Grid, and animations. You will also learn how to use Sass, a preprocessor that can help you write more efficient and maintainable CSS code. This course is perfect for anyone who wants to start a career as a user interface designer or for those who want to improve their skills in this area.
Web Developer
Web developers are responsible for the design, development, and maintenance of websites and web applications. This course will help you build a strong foundation in the core concepts of CSS, including Flexbox, Grid, and animations. You will also learn how to use Sass, a preprocessor that can help you write more efficient and maintainable CSS code. This course is perfect for anyone who wants to start a career as a web developer or for those who want to improve their skills in this area.
Front-End Developer
Front end developers are responsible for the design and implementation of the user interface of a website or application. This course will help you build a strong foundation in the core concepts of CSS, including Flexbox, Grid, and animations. You will also learn how to use Sass, a preprocessor that can help you write more efficient and maintainable CSS code. This course is perfect for anyone who wants to start a career as a front end developer or for those who want to improve their skills in this area.
Graphic designer
Graphic designers are responsible for the creation of visual concepts, using computer software or by hand, to communicate ideas that inspire, inform, and captivate consumers. This course will help you build a strong foundation in the core concepts of CSS, including Flexbox, Grid, and animations. You will also learn how to use Sass, a preprocessor that can help you write more efficient and maintainable CSS code. This course is perfect for anyone who wants to start a career as a graphic designer or for those who want to improve their skills in this area.
Art Director
Art directors are responsible for the visual style and presentation of a variety of media, including websites, magazines, newspapers, and advertisements. This course will help you build a strong foundation in the core concepts of CSS, including Flexbox, Grid, and animations. You will also learn how to use Sass, a preprocessor that can help you write more efficient and maintainable CSS code. This course is perfect for anyone who wants to start a career as an art director or for those who want to improve their skills in this area.
Product Designer
Product designers are responsible for the design and development of products, including websites, apps, and hardware. This course will help you build a strong foundation in the core concepts of CSS, including Flexbox, Grid, and animations. You will also learn how to use Sass, a preprocessor that can help you write more efficient and maintainable CSS code. This course is perfect for anyone who wants to start a career as a product designer or for those who want to improve their skills in this area.
Creative Director
Creative directors are responsible for the overall creative vision of a project, including the design, development, and execution. This course will help you build a strong foundation in the core concepts of CSS, including Flexbox, Grid, and animations. You will also learn how to use Sass, a preprocessor that can help you write more efficient and maintainable CSS code. This course is perfect for anyone who wants to start a career as a creative director or for those who want to improve their skills in this area.
Computer Programmer
Computer programmers are responsible for the design, development, and maintenance of computer programs. This course will help you build a strong foundation in the core concepts of CSS, including Flexbox, Grid, and animations. You will also learn how to use Sass, a preprocessor that can help you write more efficient and maintainable CSS code. This course may be useful for those who want to start a career as a computer programmer or for those who want to improve their skills in this area.
Webmaster
Webmasters are responsible for the maintenance and administration of websites. This course will help you build a strong foundation in the core concepts of CSS, including Flexbox, Grid, and animations. You will also learn how to use Sass, a preprocessor that can help you write more efficient and maintainable CSS code. This course may be useful for those who want to start a career as a webmaster or for those who want to improve their skills in this area.
Full-Stack Developer
Full stack developers are responsible for the design, development, and maintenance of websites and web applications. This course will help you build a strong foundation in the core concepts of CSS, including Flexbox, Grid, and animations. You will also learn how to use Sass, a preprocessor that can help you write more efficient and maintainable CSS code. This course may be useful for those who want to start a career as a full stack developer or for those who want to improve their skills in this area.
Software Developer
Software developers are responsible for the design, development, and maintenance of software systems. This course will help you build a strong foundation in the core concepts of CSS, including Flexbox, Grid, and animations. You will also learn how to use Sass, a preprocessor that can help you write more efficient and maintainable CSS code. This course may be useful for those who want to start a career as a software developer or for those who want to improve their skills in this area.
Web Designer
Web designers are responsible for the design and development of websites. This course will help you build a strong foundation in the core concepts of CSS, including Flexbox, Grid, and animations. You will also learn how to use Sass, a preprocessor that can help you write more efficient and maintainable CSS code. This course may be useful for those who want to start a career as a web designer or for those who want to improve their skills in this area.
Software Engineer
Software engineers are responsible for the design, development, and maintenance of software systems. This course will help you build a strong foundation in the core concepts of CSS, including Flexbox, Grid, and animations. You will also learn how to use Sass, a preprocessor that can help you write more efficient and maintainable CSS code. This course may be useful for those who want to start a career as a software engineer or for those who want to improve their skills in this area.
UX Designer
UX designers are responsible for the user experience of a website or application. This course will help you build a strong foundation in the core concepts of CSS, including Flexbox, Grid, and animations. You will also learn how to use Sass, a preprocessor that can help you write more efficient and maintainable CSS code. This course may be useful for those who want to start a career as a UX designer or for those who want to improve their skills in this area.
Digital Marketing Manager
Digital marketing managers are responsible for the planning and execution of digital marketing campaigns. This course may be useful for those who want to start a career as a digital marketing manager or for those who want to improve their skills in this area.

Reading list

We've selected 12 books that we think will supplement your learning. Use these to develop background knowledge, enrich your coursework, and gain a deeper understanding of the topics covered in Advanced CSS and Sass: Flexbox, Grid, Animations and More!.
Provides a comprehensive overview of responsive web design principles and techniques. A good foundation for the course's coverage of responsive design.
Explores the inner workings of CSS and helps you write more efficient and effective code. A valuable resource for understanding the course's coverage of how CSS works.
Provides comprehensive coverage of CSS grid layout. A good supplement to the course's introduction to CSS grid.
Covers SVG in detail, including how to create, edit, and use SVG images on the web. A valuable resource for the course's coverage of SVG.
Introduces Git, a version control system that is essential for managing CSS code. A valuable resource for the course's coverage of NPM.
Provides guidance on writing clean and maintainable code. A useful reference for writing CSS code in Sass.
Covers advanced CSS topics, including flexbox, grid, animations, and Sass. A good supplement to the course's coverage of advanced CSS techniques and concepts.
Provides a comprehensive reference for CSS properties and values. A valuable resource for understanding the course's coverage of CSS fundamentals and advanced techniques.

Share

Help others find this course page by sharing it with your friends and followers:

Similar courses

Here are nine courses similar to Advanced CSS and Sass: Flexbox, Grid, Animations and More!.
Modern HTML & CSS From The Beginning (Including Sass)
Most relevant
Hands-on Responsive Web Design 3: Columns, Flexbox, and...
Most relevant
CSS Bootcamp - Master CSS (CSS Grid / CSS Flexbox)
Most relevant
SASS - The Complete SASS Course (CSS Preprocessor)
Most relevant
Build Responsive Service Page UI using CSS3 Flexbox
Most relevant
Build Responsive CSS3 Flexbox Holy Grail Layout
Most relevant
Hands-on Responsive Web Design 1: Media Queries & CSS...
Most relevant
Build CSS3 Flexbox Holy Grail Layout in Angular
Most relevant
Creating Responsive Pages with CSS FlexBox
Most relevant
Our mission

OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.

Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.

Find this site helpful? Tell a friend about us.

Affiliate disclosure

We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.

Your purchases help us maintain our catalog and keep our servers humming without ads.

Thank you for supporting OpenCourser.

© 2016 - 2024 OpenCourser