Advanced CSS and Sass: Flexbox, Grid, Animations and More!
0% Completed
01 – Welcome, Welcome, Welcome!
02 – Natours Project — Setup and First Steps (Part 1)
Download Attachment
Reading
Lesson 001 Section Intro
Video - 00:00:45 mins
Lesson 002 Project Overview
Video - 00:5:42 mins
Lesson 003 Building the Header - Part 1
Video - 00:24:23 mins
Lesson 004 Building the Header - Part 2
Video - 00:17:6 mins
Lesson 005 Creating Cool CSS Animations
Video - 00:19:19 mins
Lesson 006 Building a Complex Animated Button - Part 1
Video - 00:15:57 mins
Lesson 007 Building a Complex Animated Button - Part 2
Video - 00:12:51 mins
03 – How CSS Works A Look Behind the Scenes
Download Attachment
Reading
Lesson 001 Section Intro
Video - 00:1:38 mins
Lesson 002 Three Pillars of Writing Good HTML and CSS (Never Forget Them!)
Video - 00:4:21 mins
Lesson 003 How CSS Works Behind the Scenes An Overview
Video - 00:4:32 mins
Lesson 004 How CSS is Parsed, Part 1 The Cascade and Specificity
Video - 00:12:33 mins
Lesson 005 Specificity in Practice
Video - 00:5:55 mins
Lesson 006 How CSS is Parsed, Part 2 Value Processing
Video - 00:15:44 mins
Lesson 007 How CSS is Parsed, Part 3 Inheritance
Video - 00:4:5 mins
Lesson 008 Converting px to rem An Effective Workflow
Video - 00:14:1 mins
Lesson 009 How CSS Renders a Website The Visual Formatting Model
Video - 00:12:45 mins
Lesson 010 CSS Architecture, Components and BEM
Video - 00:9:17 mins
Lesson 011 Implementing BEM in the Natours Project
Video - 00:5:15 mins
04 – Introduction to Sass and NPM
Lesson 001 Section Intro
Video - 00:1:2 mins
Lesson 002 What is Sass
Video - 00:4:59 mins
Lesson 003 First Steps with Sass Variables and Nesting
Video - 00:25:22 mins
Lesson 004 First Steps with Sass Mixins, Extends and Functions
Video - 00:17:5 mins
Lesson 005 A Brief Introduction to the Command Line
Video - 00:11:21 mins
Lesson 006 NPM Packages Let's Install Sass Locally
Video - 00:13:48 mins
Lesson 007 NPM Scripts Let's Write and Compile Sass Locally
Video - 00:13:10 mins
Lesson 008 The Easiest Way of Automatically Reloading a Page on File Changes
Video - 00:6:23 mins
05 – Natours Project — Using Advanced CSS and Sass (Part 2)
Lesson 001 Section Intro
Video - 00:00:55 mins
Lesson 002 Converting Our CSS Code to Sass Variables and Nesting
Video - 00:11:17 mins
Lesson 003 Implementing the 7-1 CSS Architecture with Sass
Video - 00:17:34 mins
Lesson 004 Review Responsive Design Principles and Layout Types
Video - 00:7:48 mins
Lesson 005 Building a Custom Grid with Floats
Video - 00:37:3 mins
Lesson 006 Building the About Section - Part 1
Video - 00:23:25 mins
Lesson 007 Building the About Section - Part 2
Video - 00:21:52 mins
Lesson 008 Building the About Section - Part 3
Video - 00:17:30 mins
Lesson 009 Building the Features Section
Video - 00:30:20 mins
Lesson 010 Building the Tours Section - Part 1
Video - 00:25:28 mins
Lesson 011 Building the Tours Section - Part 2
Video - 00:31:00 mins
Lesson 012 Building the Tours Section - Part 3
Video - 00:16:36 mins
Lesson 013 Building the Stories Section - Part 1
Video - 00:19:40 mins
Lesson 014 Building the Stories Section - Part 2
Video - 00:14:14 mins
Lesson 015 Building the Stories Section - Part 3
Video - 00:13:49 mins
Lesson 016 Building the Booking Section - Part 1
Video - 00:18:19 mins
Lesson 017 Building the Booking Section - Part 2
Video - 00:18:37 mins
Lesson 018 Building the Booking Section - Part 3
Video - 00:23:10 mins
Lesson 019 Building the Footer
Video - 00:15:57 mins
Lesson 020 Building the Navigation - Part 1
Video - 00:29:38 mins
Lesson 021 Building the Navigation - Part 2
Video - 00:13:13 mins
Lesson 022 Building the Navigation - Part 3
Video - 00:15:36 mins
Lesson 023 Building a Pure CSS Popup - Part 1
Video - 00:25:14 mins
Lesson 024 Building a Pure CSS Popup - Part 2
Video - 00:16:55 mins
06 – Natours Project — Advanced Responsive Design (Part 3)
Lesson 001 Section Intro
Video - 00:1:00 mins
Lesson 002 Mobile-First vs Desktop-First and Breakpoints
Video - 00:17:35 mins
Lesson 003 Let's Use the Power of Sass Mixins to Write Media Queries
Video - 00:28:8 mins
Lesson 004 Writing Media Queries - Base, Typography and Layout
Video - 00:26:39 mins
Lesson 005 Writing Media Queries - Layout, About and Features Sections
Video - 00:12:33 mins
Lesson 006 Writing Media Queries - Tours, Stories and Booking Sections
Video - 00:20:26 mins
Lesson 007 An Overview of Responsive Images
Video - 00:5:41 mins
Lesson 008 Responsive Images in HTML - Art Direction and Density Switching
Video - 00:10:15 mins
Lesson 009 Responsive Images in HTML - Density and Resolution Switching
Video - 00:17:21 mins
Lesson 010 Responsive Images in CSS
Video - 00:11:43 mins
Lesson 011 Testing for Browser Support with @supports
Video - 00:21:43 mins
Lesson 012 Setting up a Simple Build Process with NPM Scripts
Video - 00:20:55 mins
Lesson 013 Wrapping up the Natours Project Final Considerations
Video - 00:13:58 mins
07 – Trillo Project — Master Flexbox!
Download Attachment
Reading
Lesson 001 Section Intro
Video - 00:1:3 mins
Lesson 002 Why Flexbox An Overview of the Philosophy Behind Flexbox
Video - 00:6:31 mins
Lesson 003 A Basic Intro to Flexbox The Flex Container
Video - 00:15:8 mins
Lesson 004 A Basic Intro to Flexbox Flex Items
Video - 00:10:34 mins
Lesson 005 A Basic Intro to Flexbox Adding More Flex Items
Video - 00:6:14 mins
Lesson 006 Project Overview
Video - 00:7:14 mins
Lesson 007 Defining Project Settings and Custom Properties
Video - 00:13:40 mins
Lesson 008 Building the Overall Layout
Video - 00:12:00 mins
Lesson 009 Building the Header - Part 1
Video - 00:17:59 mins
Lesson 010 Building the Header - Part 2
Video - 00:14:48 mins
Lesson 011 Building the Header - Part 3
Video - 00:12:26 mins
Lesson 012 Building the Navigation - Part 1
Video - 00:11:36 mins
Lesson 013 Building the Navigation - Part 2
Video - 00:16:50 mins
Lesson 014 Building the Hotel Overview - Part 1
Video - 00:15:19 mins
Lesson 015 Building the Hotel Overview - Part 2
Video - 00:15:26 mins
Lesson 016 Building the Description Section - Part 1
Video - 00:12:53 mins
Lesson 017 Building the Description Section - Part 2
Video - 00:19:38 mins
Lesson 018 Building the User Reviews Section
Video - 00:22:52 mins
Lesson 019 Building the CTA Section
Video - 00:16:54 mins
Lesson 020 Writing Media Queries - Part 1
Video - 00:19:27 mins
Lesson 021 Writing Media Queries - Part 2
Video - 00:16:27 mins
Lesson 022 Wrapping up the Trillo Project Final Considerations
Video - 00:14:45 mins
08 – A Quick Introduction to CSS Grid Layouts
Lesson 001 Section Intro
Video - 00:00:59 mins
Lesson 002 Why CSS Grid A Whole New Mindset
Video - 00:5:15 mins
Lesson 003 Quick Setup for This Section
Video - 00:2:11 mins
Lesson 004 Creating Our First Grid
Video - 00:12:15 mins
Lesson 005 Getting Familiar with the fr Unit
Video - 00:10:00 mins
Lesson 006 Positioning Grid Items
Video - 00:7:26 mins
Lesson 007 Spanning Grid Items
Video - 00:9:49 mins
Lesson 008 Grid Challenge
Video - 00:2:48 mins
Lesson 009 Grid Challenge A Basic Solution
Video - 00:11:8 mins
Lesson 010 Naming Grid Lines
Video - 00:9:40 mins
Lesson 011 Naming Grid Areas
Video - 00:11:3 mins
Lesson 012 Implicit Grids vs. Explicit Grids
Video - 00:10:39 mins
Lesson 013 Aligning Grid Items
Video - 00:9:57 mins
Lesson 014 Aligning Tracks
Video - 00:12:59 mins
Lesson 015 Using min-content, max-content and the minmax() function
Video - 00:16:19 mins
Lesson 016 Responsive Layouts with auto-fit and auto-fill
Video - 00:10:57 mins
09 – Nexter Project — Master CSS Grid Layouts!
Download Attachment
Reading
Lesson 001 Project Overview and Setup
Video - 00:11:31 mins
Lesson 002 Building the Overall Layout - Part 1
Video - 00:15:34 mins
Lesson 003 Building the Overall Layout - Part 2
Video - 00:24:32 mins
Lesson 004 Building the Features Section - Part 1
Video - 00:13:1 mins
Lesson 005 Building the Features Section - Part 2
Video - 00:20:27 mins
Lesson 006 Building the Story Section - Part 1
Video - 00:18:00 mins
Lesson 007 Building the Story Section - Part 2
Video - 00:11:38 mins
Lesson 008 Building the Homes Section - Part 1
Video - 00:15:46 mins
Lesson 009 Building the Homes Section - Part 2
Video - 00:18:51 mins
Lesson 010 Building the Gallery - Part 1
Video - 00:15:24 mins
Lesson 011 Building the Gallery - Part 2
Video - 00:12:27 mins
Lesson 012 Building the Footer
Video - 00:12:33 mins
Lesson 013 Building the Sidebar
Video - 00:5:8 mins
Lesson 014 Building the Header - Part 1
Video - 00:16:16 mins
Lesson 015 Building the Header - Part 2
Video - 00:9:51 mins
Lesson 016 Building the Realtors Section
Video - 00:11:22 mins
Lesson 017 Writing Media Queries - Part 1
Video - 00:17:12 mins
Lesson 018 Writing Media Queries - Part 2
Video - 00:18:38 mins
Lesson 019 Browser Support for CSS Grid
Video - 00:8:35 mins
Lesson 020 Wrapping up the Nexter Project Final Considerations
Video - 00:6:44 mins
10 – That’s It, Everyone!
Download Vietnamese subtitle: Click here
Download English subtitle: Click here
Finish Course Early?
You have not completed all required lessons and assessments.
Your Progress
0%
