IIRF Online > Development > Web Development > CSS > Advanced CSS and Sass: Flexbox, Grid, Animations and More!
Advanced CSS and Sass: Flexbox, Grid, Animations and More! by Udemy
The most advanced and modern CSS course on the internet: master flexbox, CSS Grid, responsive design, and so much more.
Course Highlights
- 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
Skills you will learn!
Curriculum
3 Topics
Welcome to the Most Advanced CSS Course Ever!
READ BEFORE YOU START!
Setting up Our Tools
7 Topics
Section Intro
Project Overview
Building the Header - Part 1
Building the Header - Part 2
Creating Cool CSS Animations
Building a Complex Animated Button - Part 1
Building a Complex Animated Button - Part 2
11 Topics
Section Intro
Three Pillars of Writing Good HTML and CSS (Never Forget Them!)
How CSS Works Behind the Scenes: An Overview
How CSS is Parsed Part 1: The Cascade and Specificity
Specificity in Practice
How CSS is Parsed Part 2: Value Processing
How CSS is Parsed Part 3: Inheritance
Converting px to rem: An Effective Workflow
How CSS Renders a Website: The Visual Formatting Model
CSS Architecture Components and BEM
Implementing BEM in the Natours Project
8 Topics
Section Intro
What is Sass?
First Steps with Sass: Variables and Nesting
First Steps with Sass: Mixins Extends and Functions
A Brief Introduction to the Command Line
NPM Packages: Let's Install Sass Locally
NPM Scripts: Let's Write and Compile Sass Locally
The Easiest Way of Automatically Reloading a Page on File Changes
24 Topics
Section Intro
Converting Our CSS Code to Sass: Variables and Nesting
Implementing the 7-1 CSS Architecture with Sass
Review: Responsive Design Principles and Layout Types
Building a Custom Grid with Floats
Building the About Section - Part 1
Building the About Section - Part 2
Building the About Section - Part 3
Building the Features Section
Building the Tours Section - Part 1
Building the Tours Section - Part 2
Building the Tours Section - Part 3
Building the Stories Section - Part 1
Building the Stories Section - Part 2
Building the Stories Section - Part 3
Building the Booking Section - Part 1
Building the Booking Section - Part 2
Building the Booking Section - Part 3
Building the Footer
Building the Navigation - Part 1
Building the Navigation - Part 2
Building the Navigation - Part 3
Building a Pure CSS Popup - Part 1
Building a Pure CSS Popup - Part 2
13 Topics
Section Intro
Mobile-First vs Desktop-First and Breakpoints
Let's Use the Power of Sass Mixins to Write Media Queries
Writing Media Queries - Base Typography and Layout
Writing Media Queries - Layout About and Features Sections
Writing Media Queries - Tours Stories and Booking Sections
An Overview of Responsive Images
Responsive Images in HTML - Art Direction and Density Switching
Responsive Images in HTML - Density and Resolution Switching
Responsive Images in CSS
Testing for Browser Support with @supports
Setting up a Simple Build Process with NPM Scripts
Wrapping up the Natours Project: Final Considerations
22 Topics
Section Intro
Why Flexbox: An Overview of the Philosophy Behind Flexbox
A Basic Intro to Flexbox: The Flex Container
A Basic Intro to Flexbox: Flex Items
A Basic Intro to Flexbox: Adding More Flex Items
Project Overview
Defining Project Settings and Custom Properties
Building the Overall Layout
Building the Header - Part 1
Building the Header - Part 2
Building the Header - Part 3
Building the Navigation - Part 1
Building the Navigation - Part 2
Building the Hotel Overview - Part 1
Building the Hotel Overview - Part 2
Building the Description Section - Part 1
Building the Description Section - Part 2
Building the User Reviews Section
Building the CTA Section
Writing Media Queries - Part 1
Writing Media Queries - Part 2
Wrapping up the Trillo Project: Final Considerations
16 Topics
Section Intro
Why CSS Grid: A Whole New Mindset
Quick Setup for This Section
Creating Our First Grid
Getting Familiar with the fr Unit
Positioning Grid Items
Spanning Grid Items
Grid Challenge
Grid Challenge: A Basic Solution
Naming Grid Lines
Naming Grid Areas
Implicit Grids vs. Explicit Grids
Aligning Grid Items
Aligning Tracks
Using min-content max-content and the minmax() function
Responsive Layouts with auto-fit and auto-fill
20 Topics
Project Overview and Setup
Building the Overall Layout - Part 1
Building the Overall Layout - Part 2
Building the Features Section - Part 1
Building the Features Section - Part 2
Building the Story Section - Part 1
Building the Story Section - Part 2
Building the Homes Section - Part 1
Building the Homes Section - Part 2
Building the Gallery - Part 1
Building the Gallery - Part 2
Building the Footer
Building the Sidebar
Building the Header - Part 1
Building the Header - Part 2
Building the Realtors Section
Writing Media Queries - Part 1
Writing Media Queries - Part 2
Browser Support for CSS Grid
Wrapping up the Nexter Project: Final Considerations
2 Topics
See You Next Time CSS Master!
My Other Courses + Updates
Advanced CSS and Sass: Flexbox, Grid, Animations and More!
Related CSS Courses
.webp)
Thank You!
Your review has been submitted successfully.