tmbp95/udemy-natours

website

Udemy - Advanced CSS Course (NATOURS)

Course - Link

Inside <-> Advanced CSS And Sass Take Your CSS To The Next Level!

01 - Welcome, Welcome, Welcome!

• 001 Welcome to the Most Advanced CSS Course Ever!
• 003 Setting up Our Tools

02 - Natours Project — Setup and First Steps (Part 1)

• 004 Section Intro
• 005 Project Overview
• 006 Building the Header - Part 1
• 007 Building the Header - Part 2
• 008 Creating Cool CSS Animations
• 009 Building a Complex Animated Button - Part 1
• 010 Building a Complex Animated Button - Part 2

03 - How CSS Works: A Look Behind the Scenes

• 011 Section Intro
• 012 Three Pillars of Writing Good HTML and CSS (Never Forget Them!)
• 013 How CSS Works Behind the Scenes: An Overview
• 014 How CSS is Parsed, Part 1: The Cascade and Specificity
• 015 Specificity in Practice
• 016 How CSS is Parsed, Part 2: Value Processing
• 017 How CSS is Parsed, Part 3: Inheritance
• 018 Converting px to rem: An Effective Workflow
• 019 How CSS Renders a Website: The Visual Formatting Model
• 020 CSS Architecture, Components and BEM
• 021 Implementing BEM in the Natours Project

04 - Introduction to Sass and NPM

• 022 Section Intro
• 023 What is Sass?
• 024 First Steps with Sass: Variables and Nesting
• 025 First Steps with Sass: Mixins, Extends and Functions
• 026 A Brief Introduction to the Command Line
• 027 NPM Packages: Let's Install Sass Locally
• 028 NPM Scripts: Let's Write and Compile Sass Locally
• 029 The Easiest Way of Automatically Reloading a Page on File Changes

05 - Natours Project — Using Advanced CSS and Sass (Part 2)

• 030 Section Intro
• 031 Converting Our CSS Code to Sass: Variables and Nesting
• 032 Implementing the 7- [ ] 1 CSS Architecture with Sass
• 033 Review: Basic Principles of Responsive Design and Layout Types
• 034 Building a Custom Grid with Floats
• 035 Building the About Section - Part 1
• 036 Building the About Section - Part 2
• 037 Building the About Section - Part 3
• 038 Building the Features Section
• 039 Building the Tours Section - Part 1
• 040 Building the Tours Section - Part 2
• 041 Building the Tours Section - Part 3
• 042 Building the Stories Section - Part 1
• 043 Building the Stories Section - Part 2
• 044 Building the Stories Section - Part 3
• 045 Building the Booking Section - Part 1
• 046 Building the Booking Section - Part 2
• 047 Building the Booking Section - Part 3
• 048 Building the Footer
• 049 Building the Navigation - Part 1
• 050 Building the Navigation - Part 2
• 051 Building the Navigation - Part 3
• 052 Building a Pure CSS Popup - Part 1
• 053 Building a Pure CSS Popup - Part 2

06 - Natours Project — Advanced Responsive Design (Part 3)

• 054 Section Intro
• 055 Mobile-First vs Desktop- First and Breakpoints
• 056 Let's Use the Power of Sass Mixins to Write Media Queries
• 057 Writing Media Queries - Base, Typography and Layout
• 058 Writing Media Queries - Layout, About and Features Sections
• 059 Writing Media Queries - Tours, Stories and Booking Sections
• 060 An Overview of Responsive Images
• 061 Responsive Images in HTML - Art Direction and Density Switching
• 062 Responsive Images in HTML - Density and Resolution Switching
• 063 Responsive Images in CSS
• 064 Testing for Browser Support with @supports
• 065 Setting up a Simple Build Process with NPM Scripts
• 066 Wrapping up the Natours Project: Final Considerations