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

Published: 18 January 2022
on channel: Viral Courses
2,718
23

Advanced CSS and Sass: Flexbox, Grid, Animations and More!
Download full course : https://bit.ly/3FBUJX5

Get Pluralsight Free Subscription Here : http://bit.ly/2BhXOhi

The most advanced and modern CSS course on the internet: master flexbox, CSS Grid, responsive design, and so much more.

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.

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!


Watch video Advanced CSS and Sass: Flexbox, Grid, Animations and More! online without registration, duration hours minute second in high quality. This video was added by user Viral Courses 18 January 2022, don't forget to share it with your friends and acquaintances, it has been viewed on our site 2,718 once and liked it 23 people.