[Last updated 11/2023] Advanced CSS and Sass: Flexbox, Grid, Animations and More! (Udemy – Vietsub and Engsub)
About Course
Views
:
What you’ll learn:
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
Advanced responsive design: media queries, mobile-first vs desktop-first, em vs rem units, etc.
Using Sass in real-world projects: global variables, architecting CSS, managing media queries, etc.
Responsive images in HTML and CSS for faster pageloads
SVG images and videos in HTML and CSS: build a background video effect
able lectures, code and design assets for all projects
The NPM ecosystem: development workflows and building processes
Get friendly and fast support in the course Q&A
Time video:
28 hours (126 Lessons + Documents)
Teacher:
Jonas Schmedtmann
Total weight:
20.46 GB
Original link:
https://www.udemy.com/course/advanced-css-and-sass/
Link :
Below The Post
Chú ý:
Course Content
01 – Welcome, Welcome, Welcome!
02 – Natours Project — Setup and First Steps (Part 1)
-
001 Section Intro.mp4
00:44 -
002 Project Overview.mp4
05:42 -
002 Project Overview.mp4
05:42 -
003 Building the Header – Part 1.mp4
24:23 -
004 Building the Header – Part 2.mp4
17:06 -
005 Creating Cool CSS Animations.mp4
19:19 -
006 Building a Complex Animated Button – Part 1.mp4
15:56 -
007 Building a Complex Animated Button – Part 2.mp4
12:51
03 – How CSS Works A Look Behind the Scenes
-
001 Section Intro.mp4
01:38 -
002 Three Pillars of Writing Good HTML and CSS (Never Forget Them!).mp4
04:21 -
003 How CSS Works Behind the Scenes An Overview.mp4
04:32 -
004 How CSS is Parsed, Part 1 The Cascade and Specificity.mp4
12:33 -
005 Specificity in Practice.mp4
05:55 -
006 How CSS is Parsed, Part 2 Value Processing.mp4
15:44 -
007 How CSS is Parsed, Part 3 Inheritance.mp4
04:05 -
008 Converting px to rem An Effective Workflow.mp4
14:00 -
009 How CSS Renders a Website The Visual Formatting Model.mp4
12:45 -
010 CSS Architecture, Components and BEM.mp4
09:17 -
011 Implementing BEM in the Natours Project.mp4
05:14
04 – Introduction to Sass and NPM
-
001 Section Intro.mp4
01:02 -
002 What is Sass.mp4
04:58 -
003 First Steps with Sass Variables and Nesting.mp4
25:22 -
004 First Steps with Sass Mixins, Extends and Functions.mp4
17:05 -
005 A Brief Introduction to the Command Line.mp4
11:21 -
006 NPM Packages Let’s Install Sass Locally.mp4
13:48 -
007 NPM Scripts Let’s Write and Compile Sass Locally.mp4
13:10 -
008 The Easiest Way of Automatically Reloading a Page on File Changes.mp4
06:22
05 – Natours Project — Using Advanced CSS and Sass (Part 2)
-
013 Building the Stories Section – Part 1.mp4
19:40 -
024 Building a Pure CSS Popup – Part 2.mp4
16:55 -
023 Building a Pure CSS Popup – Part 1.mp4
25:13 -
022 Building the Navigation – Part 3.mp4
15:36 -
021 Building the Navigation – Part 2.mp4
13:13 -
020 Building the Navigation – Part 1.mp4
29:37 -
019 Building the Footer.mp4
15:57 -
018 Building the Booking Section – Part 3.mp4
23:10 -
017 Building the Booking Section – Part 2.mp4
18:37 -
016 Building the Booking Section – Part 1.mp4
18:18 -
015 Building the Stories Section – Part 3.mp4
13:49 -
014 Building the Stories Section – Part 2.mp4
14:14 -
001 Section Intro.mp4
00:55 -
012 Building the Tours Section – Part 3.mp4
16:36 -
011 Building the Tours Section – Part 2.mp4
31:00 -
010 Building the Tours Section – Part 1.mp4
25:28 -
009 Building the Features Section.mp4
30:19 -
008 Building the About Section – Part 3.mp4
17:30 -
007 Building the About Section – Part 2.mp4
21:51 -
006 Building the About Section – Part 1.mp4
23:25 -
005 Building a Custom Grid with Floats.mp4
37:03 -
004 Review Responsive Design Principles and Layout Types.mp4
07:48 -
003 Implementing the 7-1 CSS Architecture with Sass.mp4
17:33 -
002 Converting Our CSS Code to Sass Variables and Nesting.mp4
11:17
06 – Natours Project — Advanced Responsive Design (Part 3)
-
001 Section Intro.mp4
01:00 -
002 Mobile-First vs Desktop-First and Breakpoints.mp4
17:35 -
003 Let’s Use the Power of Sass Mixins to Write Media Queries.mp4
28:08 -
004 Writing Media Queries – Base, Typography and Layout.mp4
26:39 -
005 Writing Media Queries – Layout, About and Features Sections.mp4
12:33 -
006 Writing Media Queries – Tours, Stories and Booking Sections.mp4
20:26 -
007 An Overview of Responsive Images.mp4
05:41 -
008 Responsive Images in HTML – Art Direction and Density Switching.mp4
10:14 -
009 Responsive Images in HTML – Density and Resolution Switching.mp4
17:21 -
010 Responsive Images in CSS.mp4
11:42 -
011 Testing for Browser Support with @supports.mp4
21:42 -
012 Setting up a Simple Build Process with NPM Scripts.mp4
20:55 -
013 Wrapping up the Natours Project Final Considerations.mp4
13:58
07 – Trillo Project — Master Flexbox!
-
012 Building the Navigation – Part 1.mp4
11:36 -
022 Wrapping up the Trillo Project Final Considerations.mp4
14:45 -
021 Writing Media Queries – Part 2.mp4
16:27 -
020 Writing Media Queries – Part 1.mp4
19:27 -
019 Building the CTA Section.mp4
16:54 -
018 Building the User Reviews Section.mp4
22:52 -
017 Building the Description Section – Part 2.mp4
19:38 -
016 Building the Description Section – Part 1.mp4
12:53 -
015 Building the Hotel Overview – Part 2.mp4
15:26 -
014 Building the Hotel Overview – Part 1.mp4
15:18 -
013 Building the Navigation – Part 2.mp4
16:50 -
001 Section Intro.mp4
01:03 -
011 Building the Header – Part 3.mp4
12:26 -
010 Building the Header – Part 2.mp4
14:48 -
009 Building the Header – Part 1.mp4
17:59 -
008 Building the Overall Layout.mp4
12:00 -
007 Defining Project Settings and Custom Properties.mp4
13:40 -
006 Project Overview.mp4
07:14 -
005 A Basic Intro to Flexbox Adding More Flex Items.mp4
06:14 -
004 A Basic Intro to Flexbox Flex Items.mp4
10:33 -
003 A Basic Intro to Flexbox The Flex Container.mp4
15:08 -
002 Why Flexbox An Overview of the Philosophy Behind Flexbox.mp4
06:31
08 – A Quick Introduction to CSS Grid Layouts
-
001 Section Intro.mp4
00:59 -
002 Why CSS Grid A Whole New Mindset.mp4
05:15 -
003 Quick Setup for This Section.mp4
02:11 -
004 Creating Our First Grid.mp4
12:15 -
005 Getting Familiar with the fr Unit.mp4
10:00 -
006 Positioning Grid Items.mp4
07:26 -
007 Spanning Grid Items.mp4
09:48 -
008 Grid Challenge.mp4
02:48 -
009 Grid Challenge A Basic Solution.mp4
11:08 -
010 Naming Grid Lines.mp4
09:40 -
011 Naming Grid Areas.mp4
11:03 -
012 Implicit Grids vs. Explicit Grids.mp4
10:39 -
013 Aligning Grid Items.mp4
09:57 -
014 Aligning Tracks.mp4
12:59 -
015 Using min-content, max-content and the minmax() function.mp4
16:19 -
016 Responsive Layouts with auto-fit and auto-fill.mp4
10:57
09 – Nexter Project — Master CSS Grid Layouts!
-
011 Building the Gallery – Part 2.mp4
12:27 -
020 Wrapping up the Nexter Project Final Considerations.mp4
06:44 -
019 Browser Support for CSS Grid.mp4
08:35 -
018 Writing Media Queries – Part 2.mp4
18:38 -
017 Writing Media Queries – Part 1.mp4
17:12 -
016 Building the Realtors Section.mp4
11:22 -
015 Building the Header – Part 2.mp4
09:51 -
014 Building the Header – Part 1.mp4
16:15 -
013 Building the Sidebar.mp4
05:08 -
012 Building the Footer.mp4
12:33 -
001 Project Overview and Setup.mp4
11:31 -
010 Building the Gallery – Part 1.mp4
15:24 -
009 Building the Homes Section – Part 2.mp4
18:51 -
008 Building the Homes Section – Part 1.mp4
15:45 -
007 Building the Story Section – Part 2.mp4
11:38 -
006 Building the Story Section – Part 1.mp4
18:00 -
005 Building the Features Section – Part 2.mp4
20:27 -
004 Building the Features Section – Part 1.mp4
13:01 -
003 Building the Overall Layout – Part 2.mp4
24:31 -
002 Building the Overall Layout – Part 1.mp4
15:33
10 – That’s It, Everyone!
-
001 See You Next Time, CSS Master!.mp4
02:28
Student Ratings & Reviews
No Review Yet