Advanced CSS and Sass: Flexbox, Grid, Animations and More!

سرفصل های دوره

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

01 - Welcome, Welcome, Welcome!

001 Welcome to the Most Advanced CSS Course Ever!

002 READ BEFORE YOU START!.html

003 Setting up Our Tools

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

001 Section Intro

002 Project Overview

003 Building the Header - Part 1

004 Building the Header - Part 2

005 Creating Cool CSS Animations

006 Building a Complex Animated Button - Part 1

007 Building a Complex Animated Button - Part 2

external-links.txt

03 - How CSS Works A Look Behind the Scenes

001 Section Intro

002 Three Pillars of Writing Good HTML and CSS (Never Forget Them!)

003 How CSS Works Behind the Scenes An Overview

004 How CSS is Parsed, Part 1 The Cascade and Specificity

005 Specificity in Practice

006 How CSS is Parsed, Part 2 Value Processing

007 How CSS is Parsed, Part 3 Inheritance

008 Converting px to rem An Effective Workflow

009 How CSS Renders a Website The Visual Formatting Model

010 CSS Architecture, Components and BEM

011 Implementing BEM in the Natours Project

external-links.txt

04 - Introduction to Sass and NPM

001 Section Intro

002 What is Sass

003 First Steps with Sass Variables and Nesting

004 First Steps with Sass Mixins, Extends and Functions

005 A Brief Introduction to the Command Line

006 NPM Packages Lets Install Sass Locally

007 NPM Scripts Lets Write and Compile Sass Locally

008 The Easiest Way of Automatically Reloading a Page on File Changes

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

001 Section Intro

002 Converting Our CSS Code to Sass Variables and Nesting

003 Implementing the 7-1 CSS Architecture with Sass

004 Review Responsive Design Principles and Layout Types

005 Building a Custom Grid with Floats

006 Building the About Section - Part 1

007 Building the About Section - Part 2

008 Building the About Section - Part 3

009 Building the Features Section

010 Building the Tours Section - Part 1

011 Building the Tours Section - Part 2

012 Building the Tours Section - Part 3

013 Building the Stories Section - Part 1

014 Building the Stories Section - Part 2

015 Building the Stories Section - Part 3

016 Building the Booking Section - Part 1

017 Building the Booking Section - Part 2

018 Building the Booking Section - Part 3

019 Building the Footer

020 Building the Navigation - Part 1

021 Building the Navigation - Part 2

022 Building the Navigation - Part 3

023 Building a Pure CSS Popup - Part 1

024 Building a Pure CSS Popup - Part 2

06 - Natours Project Advanced Responsive Design (Part 3)

001 Section Intro

002 Mobile-First vs Desktop-First and Breakpoints

003 Lets Use the Power of Sass Mixins to Write Media Queries

004 Writing Media Queries - Base, Typography and Layout

005 Writing Media Queries - Layout, About and Features Sections

006 Writing Media Queries - Tours, Stories and Booking Sections

007 An Overview of Responsive Images

008 Responsive Images in HTML - Art Direction and Density Switching

009 Responsive Images in HTML - Density and Resolution Switching

010 Responsive Images in CSS

011 Testing for Browser Support with @supports

012 Setting up a Simple Build Process with NPM Scripts

013 Wrapping up the Natours Project Final Considerations

07 - Trillo Project Master Flexbox!

001 Section Intro

002 Why Flexbox An Overview of the Philosophy Behind Flexbox

003 A Basic Intro to Flexbox The Flex Container

004 A Basic Intro to Flexbox Flex Items

005 A Basic Intro to Flexbox Adding More Flex Items

006 Project Overview

007 Defining Project Settings and Custom Properties

008 Building the Overall Layout

009 Building the Header - Part 1

010 Building the Header - Part 2

011 Building the Header - Part 3

012 Building the Navigation - Part 1

013 Building the Navigation - Part 2

014 Building the Hotel Overview - Part 1

015 Building the Hotel Overview - Part 2

016 Building the Description Section - Part 1

017 Building the Description Section - Part 2

018 Building the User Reviews Section

019 Building the CTA Section

020 Writing Media Queries - Part 1

021 Writing Media Queries - Part 2

022 Wrapping up the Trillo Project Final Considerations

external-links.txt

08 - A Quick Introduction to CSS Grid Layouts

001 Section Intro

002 Why CSS Grid A Whole New Mindset

003 Quick Setup for This Section

004 Creating Our First Grid

005 Getting Familiar with the fr Unit

006 Positioning Grid Items

007 Spanning Grid Items

008 Grid Challenge

009 Grid Challenge A Basic Solution

010 Naming Grid Lines

011 Naming Grid Areas

012 Implicit Grids vs. Explicit Grids

013 Aligning Grid Items

014 Aligning Tracks

015 Using min-content, max-content and the minmax() function

016 Responsive Layouts with auto-fit and auto-fill

09 - Nexter Project Master CSS Grid Layouts!

001 Project Overview and Setup

002 Building the Overall Layout - Part 1

003 Building the Overall Layout - Part 2

004 Building the Features Section - Part 1

005 Building the Features Section - Part 2

006 Building the Story Section - Part 1

007 Building the Story Section - Part 2

008 Building the Homes Section - Part 1

009 Building the Homes Section - Part 2

010 Building the Gallery - Part 1

011 Building the Gallery - Part 2

012 Building the Footer

013 Building the Sidebar

014 Building the Header - Part 1

015 Building the Header - Part 2

016 Building the Realtors Section

017 Writing Media Queries - Part 1

018 Writing Media Queries - Part 2

019 Browser Support for CSS Grid

020 Wrapping up the Nexter Project Final Considerations

external-links.txt

10 - Thats It, Everyone!

001 See You Next Time, CSS Master!

002 My Other Courses + Updates.html

53,700 تومان

خرید اشتراک افزودن به سبد خرید

خرید دانلودی فوری

در این روش نیاز به افزودن محصول به سبد خرید و تکمیل اطلاعات نیست و شما پس از وارد کردن ایمیل خود و طی کردن مراحل پرداخت لینک های دریافت محصولات را در ایمیل خود دریافت خواهید کرد.

تولید کننده: Udemy