/advanced-css-course

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

Primary LanguageCSS

Final Projects of the course

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

https://www.udemy.com/advanced-css-and-sass/

What I learned?

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