ADVANCED CSS AND SASS: FLEXBOX, GRID, ANIMATIONS AND MORE!

Advertisement

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

BestsellerCreated by Jonas SchmedtmannLast updated 6/2019English

English SubsThis course includes

  • 28 hours on-demand video
  • 1 article
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion

What you’ll learn

  • 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

Course contentall 125 lectures 28:05:10Requirements

  • This not a beginner course — You should be confident in coding HTML and CSS before taking the course
  • Any computer and OS will work — Windows, macOS or Linux
  • There is no need for any paid software — The text editor you already have works just fine

Description

Advertisement

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.

Advertisement

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 kind 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?

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

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?

Who this course is for:

  • CSS developers who want to update their CSS skills to the most modern level
  • CSS developers who want to expand their toolset to animations, flexbox, Sass, NPM, SVG, and much more
  • Front-end developers who want to finally understand how CSS works behind the scenes
  • In general: anyone who wants to truly master CSS!
Download

Advertisement

Add a Comment

Your email address will not be published. Required fields are marked *