Advanced CSS and Sass: Flexbox, Grid, Animations and More!
-
Welcome, Welcome, Welcome!
-
Natours Project – Setup and First Steps (Part 1)
-
How CSS Works: A Look Behind the ScenesSection Intro0sThree Pillars of Writing Good HTML and CSS (Never Forget Them!)0sHow CSS Works Behind the Scenes: An Overview0sHow CSS is Parsed, Part 1: The Cascade and Specificity0sSpecificity in Practice0sHow CSS is Parsed, Part 2: Value Processing0sHow CSS is Parsed, Part 3: Inheritance0sConverting px to rem: An Effective Workflow0sHow CSS Renders a Website: The Visual Formatting Model0sCSS Architecture, Components and BEM0sImplementing BEM in the Natours Project0s
-
Introduction to Sass and NPMSection Intro0sWhat is Sass?0sFirst Steps with Sass: Variables and Nesting0sFirst Steps with Sass: Mixins, Extends and Functions0sA Brief Introduction to the Command Line0sNPM Packages: Let’s Install Sass Locally0sNPM Scripts: Let’s Write and Compile Sass Locally0sThe Easiest Way of Automatically Reloading a Page on File Changes0s
-
Natours Project – Using Advanced CSS and Sass (Part 2)Section Intro0sConverting Our CSS Code to Sass: Variables and Nesting0sImplementing the 7-1 CSS Architecture with Sass0sReview: Responsive Design Principles and Layout Types0sBuilding a Custom Grid with Floats0sBuilding the About Section – Part 10sBuilding the About Section – Part 20sBuilding the About Section – Part 30sBuilding the Features Section0sBuilding the Tours Section – Part 10sBuilding the Tours Section – Part 20sBuilding the Tours Section – Part 30sBuilding the Stories Section – Part 10sBuilding the Stories Section – Part 20sBuilding the Stories Section – Part 30sBuilding the Booking Section – Part 10sBuilding the Booking Section – Part 20sBuilding the Booking Section – Part 30sBuilding the Footer0sBuilding the Navigation – Part 10sBuilding the Navigation – Part 20sBuilding the Navigation – Part 30sBuilding a Pure CSS Popup – Part 10sBuilding a Pure CSS Popup – Part 20s
-
Natours Project – Advanced Responsive Design (Part 3)Section Intro0sMobile-First vs Desktop-First and Breakpoints0sLet’s Use the Power of Sass Mixins to Write Media Queries0sWriting Media Queries – Base, Typography and Layout0sWriting Media Queries – Layout, About and Features Sections0sWriting Media Queries – Tours, Stories and Booking Sections0sAn Overview of Responsive Images0sResponsive Images in HTML – Art Direction and Density Switching0sResponsive Images in HTML – Density and Resolution Switching0sResponsive Images in CSS0sTesting for Browser Support with @supports0sSetting up a Simple Build Process with NPM Scripts0sWrapping up the Natours Project: Final Considerations0s
-
Trillo Project – Master Flexbox!Section Intro0sWhy Flexbox: An Overview of the Philosophy Behind Flexbox0sA Basic Intro to Flexbox: The Flex Container0sA Basic Intro to Flexbox: Flex Items0sA Basic Intro to Flexbox: Adding More Flex Items0sProject Overview0sDefining Project Settings and Custom Properties0sBuilding the Overall Layout0sBuilding the Header – Part 10sBuilding the Header – Part 20sBuilding the Header – Part 30sBuilding the Navigation – Part 10sBuilding the Navigation – Part 20sBuilding the Hotel Overview – Part 10sBuilding the Hotel Overview – Part 20sBuilding the Description Section – Part 10sBuilding the Description Section – Part 20sBuilding the User Reviews Section0sBuilding the CTA Section0sWriting Media Queries – Part 10sWriting Media Queries – Part 20sWrapping up the Trillo Project: Final Considerations0s
-
A Quick Introduction to CSS Grid LayoutsSection Intro0sWhy CSS Grid: A Whole New Mindset0sQuick Setup for This Section0sCreating Our First Grid0sGetting Familiar with the fr Unit0sPositioning Grid Items0sSpanning Grid Items0sGrid Challenge0sGrid Challenge: A Basic Solution0sNaming Grid Lines0sNaming Grid Areas0sImplicit Grids vs. Explicit Grids0sAligning Grid Items0sAligning Tracks0sUsing min-content, max-content and the minmax() function0sResponsive Layouts with auto-fit and auto-fill0s
-
Nexter Project – Master CSS Grid Layouts!Project Overview and Setup0sBuilding the Overall Layout – Part 10sBuilding the Overall Layout – Part 20sBuilding the Features Section – Part 10sBuilding the Features Section – Part 20sBuilding the Story Section – Part 10sBuilding the Story Section – Part 20sBuilding the Homes Section – Part 10sBuilding the Homes Section – Part 20sBuilding the Gallery – Part 10sBuilding the Gallery – Part 20sBuilding the Footer0sBuilding the Sidebar0sBuilding the Header – Part 10sBuilding the Header – Part 20sBuilding the Realtors Section0sWriting Media Queries – Part 10sWriting Media Queries – Part 20sBrowser Support for CSS Grid0sWrapping up the Nexter Project: Final Considerations0s
-
That’s It, Everyone!
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.
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 kinds 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?
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?
That’s probably because CSS is so easy to get started with. In fact, most developers highly underestimate the importance and power of CSS. But nothing could be further away from the truth!
CSS is what makes our design come to life. And there is so much we can do with it! Mastering advanced techniques like flexbox, CSS grid, and animations, will give you an edge over many CSS developers out there who still use outdated methods.
Plus, CSS can become a real nightmare when you try to master it, and when you have to maintain large projects. So having a good grasp on fundamental concepts is an absolute must for any serious front-end developer.
And this course will help you with all that!
So, should you take this course? The answer is most likely a big YES!
And I packed so much content into this course, that no matter if you’re just starting out, or if you’re already an experienced front-end developer, there is definitely gonna be something for you in this course.
And this is what you get by signing up today:
28h of Up-to-date HD-quality videos, that are easy to search and reference (great for Udemy Business students)
Professional English captions (not the auto-generated ones)
Downloadable design assets + starter code and final code for each section
Downloadable slides for theory videos (not boring, I promise!)
Free support in the course Q&A
Lots of small challenges are included in the videos so you can track your progress.
If you’re still with me at this point, then please watch the promo video to take a look at the course projects, and I promise you will be amazed 🙂
After that, I hope to welcome you as a new student in my course. I’m sure you’re gonna love it!
What's included
- 28 hours on-demand video
- 2 articles
- Access on mobile and TV
- Full lifetime access
- Certificate of completion