Advanced CSS and Sass, Animations and more

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

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!