Udemyintermediateen

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

Learn modern CSS! Master Flexbox, CSS Grid & responsive design. Build beautiful, adaptable web layouts. Advanced CSS skills for web development.

4.8(45,883)
221,258students
28h 7m
Certificate
Jonas Schmedtmann
Jonas SchmedtmannWeb Developer, Designer, and Teacher

Course Content

Advanced CSS and Sass: Flexbox, Grid, Animations and More! is an intermediate-level Udemy course taught by Jonas Schmedtmann. It runs 28h 7m, is taught in English, and includes a certificate of completion. Learners rate it 4.8 out of 5 from 45,883 reviews, with 221,258 students enrolled. It is a paid course, last updated November 2024.

Unlock the Power of Advanced CSS & Sass: Master Modern Web Design

Ready to elevate your CSS skills? This comprehensive Advanced CSS and Sass course dives deep into the techniques used by top web developers to create stunning, modern websites. If you're comfortable with basic HTML and CSS and want to move beyond the fundamentals, you've come to the right place.

What You'll Learn:

  • Modern CSS Techniques: Explore cutting-edge CSS properties like 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 to achieve unique visual effects.
  • Advanced CSS Animations: Create captivating CSS animations using @keyframes, animation, and transition for dynamic and engaging user experiences.
  • Advanced CSS Selectors & Pseudo-Elements: Master advanced CSS selectors, pseudo-classes, and pseudo-elements for precise and targeted styling.
  • CSS Architecture & Scalability: Learn to build robust and maintainable CSS codebases using Sass, the 7-1 rule, component-based design, and the BEM methodology. Architect scalable CSS for long-term project success.
  • Sass Mastery: Gain a thorough understanding of Sass, including variables, nesting, partials, imports, mixins, functions, and extends, to streamline your CSS workflow.
  • NPM & Build Processes: Set up a development process using NPM for Sass compilation, automatic browser reloading, and create efficient build processes for CSS concatenation, prefixing, and compression.
  • Responsive Design Expertise: Develop fully responsive layouts using fluid grids, flexible images, and media queries to adapt to any device. Explore mobile-first and desktop-first strategies, breakpoints, and em vs. rem units.
  • Responsive Images: Implement responsive images in HTML and CSS for optimized page load times, including resolution switching, density switching, and art direction.
  • SVG Integration: Learn how to effectively use SVG images in HTML and CSS, including generating SVG sprites and manipulating SVG colors with CSS.
  • Layout Techniques: Become proficient with Flexbox and CSS Grid, understanding their core concepts and applying advanced positioning techniques to real-world projects. (This section alone is extensive!)
  • CSS Fundamentals: Deep dive into the core principles of CSS, including the cascade, specificity, inheritance, value processing, the visual formatting model, the box model, box types, positioning schemes, and stacking contexts.

Why Choose This Course?

Many developers underestimate the power of CSS. Mastering advanced CSS techniques like Flexbox, CSS Grid, and animations provides a significant advantage over those using outdated methods. This course equips you to:

  • Create Stunning Designs: Bring your designs to life with powerful CSS techniques.
  • Maintain Large Projects: Develop scalable and maintainable CSS codebases.
  • Stay Ahead of the Curve: Learn the latest and greatest CSS properties and best practices.
  • Become a More Valuable Developer: Gain a deeper understanding of how CSS works and how to use it effectively.

Course Features:

  • 28+ Hours of HD Video Content: Easy to search and reference.
  • Professional English Captions: Enhance your learning experience.
  • Downloadable Resources: Includes design assets, starter code, final code, and slides.
  • Interactive Challenges: Track your progress and reinforce your learning.
  • Dedicated Q&A Support: Get help when you need it.

This course is NOT for beginners. A solid understanding of HTML and CSS is required.

Ready to take your CSS skills to the next level? Watch the promo video to see the course projects and prepare to be amazed! Enroll today and unlock the full potential of CSS.

$ whoami — the devs behind tutorialsearch.io

Need a web app built? Hire the team behind TutorialSearch.io

We ship fast, production-grade full-stack apps (Next.js, React, edge infra) — the same stack that powers this site.

5.0
1h 16m
intermediate
pluralsight
5.0
41m
intermediate
pluralsight
5.0(13)
1h 15m
all
5.0(47)
1h 29m
intermediate