• 投稿

【Udemy排名第一的高级CSS课程】Advanced CSS and Sass - 高级 CSS 和 Sass:Flexbox、网格、动画(中英文字幕)

11.5万
746
2022-04-19 16:50:36
2203
1377
6864
620
----- Advanced CSS and Sass: Flexbox, Grid, Animations and More! ----- 网站:https://www.udemy.com/course/advanced-css-and-sass/ 作者:Jonas Schmedtmann Udemy评分:4.8 学生数:35519 官网售价:US$ 119.99 ----- 欢迎来到“Advanced CSS and Sass”,互联网上最先进、最现代、最完整的 CSS 课程。这是您在高级 CSS 课程中想要的一切,等等。 您将学习复杂的 CSS 动画、高级响应式设计技术、flexbox 布局、Sass、CSS 架构、基本 CSS 概念等等。 就像在我的所有课程中一样,您将构建精美且精心设计的项目,这将使您为自己感到自豪,并为自己构建复杂的项目做好准备。 完成本课程后,您将: 1) 跟上最现代和最先进的 CSS 属性和技术; 2) 掌握前沿布局技术Flexbox和CSS Grid; 3) 准备好为各种设备和情况构建响应式布局; 4) 真正了解CSS在幕后是如何工作的; 5) 能够使用 Sass 构建大型 CSS 代码库以实现可重用性和可维护性。 请注意,本课程不适合绝对的初学者,因此您应该已经处于 HTML 和 CSS 的中级水平(如果不是这样,请查看我的其他课程)。   这门课程很庞大,需要 28 小时以上。这正是您将学到的: 大量现代尖端 CSS 技术可创建令人惊叹的设计和效果:剪辑路径、背景剪辑、蒙版图像、背景混合模式、外部形状、过滤器、背景过滤器、对象拟合、变换、列-count、连字符、透视、calc() 和自定义 CSS 属性; 具有@keyframes、动画和过渡的高级 CSS 动画; 现代 CSS 开发所需的高级 CSS 选择器、伪类和伪元素; CSS如何在幕后工作:级联、特异性、继承、值处理、视觉格式化模型、盒子模型、盒子类型、定位方案和堆叠上下文; CSS 架构: 7-1 规则、基于组件的设计、BEM 方法、编写可重用、可维护和可扩展的代码; Sass 简介:变量、嵌套、部分、导入、混合、函数、扩展等; 在实际项目中使用 Sass:设置全局变量、构建可重用性、构建 CSS 和管理媒体查询; NPM 生态系统:建立一个开发过程来编译 Sass 和自动浏览器重新加载,并创建一个构建过程来连接、前缀和压缩 CSS 文件; 现代响应式设计:流畅的网格、布局类型、灵活的图像,使用媒体查询来测试不同的屏幕宽度、像素密度和触摸功能; 高级响应式设计工作流程:移动优先与桌面优先策略、选择断点、em 与 rem 单位以及功能查询以测试浏览器支持; HTML 和 CSS 中的响应式图像可加快页面加载速度:分辨率切换、密度切换、艺术指导; HTML 和 CSS 中的 SVG 图像:如何以及为什么使用 SVG、生成 SVG 精灵、在 CSS 中更改 SVG 颜色和最佳实践; HTML 和 CSS 中的视频:构建背景视频效果; 弹性盒布局:主要概念,弹性容器和弹性项目特定属性的介绍,应用于大型现实世界项目的高级定位技术; CSS 网格布局:主要概念、CSS 网格与 flexbox 以及应用于实际项目的布局技术。仅这一部分就可能是一整门课程! ----- ******************************************************************** ✔ 对于正常学习的同学,三连之后,可以私信UP要配套资料 ✔ 其他需求的同学,(配套资料,中英文字幕和原版视频)可以到网站自助领取:  https://www.koudaizy.com/tutorials/advanced-css-and-sass/ *********************************************************************
精选全球优质课程,独家中英字幕,帮你少走弯路、高效学习|koudaizy.com
视频选集
(1/124)
001 Welcome to the Most Advanced CSS Course Ever!
03:55
003 Setting up Our Tools
02:53
004 Section Intro
00:46
005 Project Overview
05:43
006 Building the Header - Part 1
24:24
007 Building the Header - Part 2
17:07
008 Creating Cool CSS Animations
19:20
009 Building a Complex Animated Button - Part 1
15:58
010 Building a Complex Animated Button - Part 2
12:52
011 Section Intro
01:39
012 Three Pillars of Writing Good HTML and CSS (Never Forget Them!)
04:23
013 How CSS Works Behind the Scenes_ An Overview
04:34
014 How CSS is Parsed, Part 1_ The Cascade and Specificity
12:34
015 Specificity in Practice
05:56
016 How CSS is Parsed, Part 2_ Value Processing
15:45
017 How CSS is Parsed, Part 3_ Inheritance
04:06
018 Converting px to rem_ An Effective Workflow
14:02
019 How CSS Renders a Website_ The Visual Formatting Model
12:46
020 CSS Architecture, Components and BEM
09:18
021 Implementing BEM in the Natours Project
05:16
022 Section Intro
01:03
023 What is Sass_
05:00
024 First Steps with Sass_ Variables and Nesting
25:23
025 First Steps with Sass_ Mixins, Extends and Functions
17:06
026 A Brief Introduction to the Command Line
11:22
027 NPM Packages_ Let's Install Sass Locally
13:49
028 NPM Scripts_ Let's Write and Compile Sass Locally
13:11
029 The Easiest Way of Automatically Reloading a Page on File Changes
06:24
030 Section Intro
00:56
031 Converting Our CSS Code to Sass_ Variables and Nesting
11:18
032 Implementing the 7-1 CSS Architecture with Sass
17:35
033 Review_ Responsive Design Principles and Layout Types
07:49
034 Building a Custom Grid with Floats
37:04
035 Building the About Section - Part 1
23:27
036 Building the About Section - Part 2
21:53
037 Building the About Section - Part 3
17:31
038 Building the Features Section
30:21
039 Building the Tours Section - Part 1
25:29
040 Building the Tours Section - Part 2
31:01
041 Building the Tours Section - Part 3
16:37
042 Building the Stories Section - Part 1
19:41
043 Building the Stories Section - Part 2
14:15
044 Building the Stories Section - Part 3
13:50
045 Building the Booking Section - Part 1
18:20
046 Building the Booking Section - Part 2
18:39
047 Building the Booking Section - Part 3
23:11
048 Building the Footer
15:58
049 Building the Navigation - Part 1
29:39
050 Building the Navigation - Part 2
13:14
051 Building the Navigation - Part 3
15:37
052 Building a Pure CSS Popup - Part 1
25:15
053 Building a Pure CSS Popup - Part 2
16:56
054 Section Intro
01:01
055 Mobile-First vs Desktop-First and Breakpoints
17:36
056 Let's Use the Power of Sass Mixins to Write Media Queries
28:09
057 Writing Media Queries - Base, Typography and Layout
26:40
058 Writing Media Queries - Layout, About and Features Sections
12:34
059 Writing Media Queries - Tours, Stories and Booking Sections
20:28
060 An Overview of Responsive Images
05:43
061 Responsive Images in HTML - Art Direction and Density Switching
10:16
062 Responsive Images in HTML - Density and Resolution Switching
17:22
063 Responsive Images in CSS
11:44
064 Testing for Browser Support with @supports
21:44
065 Setting up a Simple Build Process with NPM Scripts
20:56
066 Wrapping up the Natours Project_ Final Considerations
13:59
067 Section Intro
01:04
068 Why Flexbox_ An Overview of the Philosophy Behind Flexbox
06:32
069 A Basic Intro to Flexbox_ The Flex Container
15:09
070 A Basic Intro to Flexbox_ Flex Items
10:35
071 A Basic Intro to Flexbox_ Adding More Flex Items
06:15
072 Project Overview
07:15
073 Defining Project Settings and Custom Properties
13:41
074 Building the Overall Layout
12:01
075 Building the Header - Part 1
18:00
076 Building the Header - Part 2
14:49
077 Building the Header - Part 3
12:27
078 Building the Navigation - Part 1
11:37
079 Building the Navigation - Part 2
16:51
080 Building the Hotel Overview - Part 1
15:20
081 Building the Hotel Overview - Part 2
15:27
082 Building the Description Section - Part 1
12:54
083 Building the Description Section - Part 2
19:40
084 Building the User Reviews Section
22:53
085 Building the CTA Section
16:55
086 Writing Media Queries - Part 1
19:28
087 Writing Media Queries - Part 2
16:28
088 Wrapping up the Trillo Project_ Final Considerations
14:46
089 Section Intro
01:01
090 Why CSS Grid_ A Whole New Mindset
05:16
091 Quick Setup for This Section
02:12
092 Creating Our First Grid
12:17
093 Getting Familiar with the fr Unit
10:01
094 Positioning Grid Items
07:27
095 Spanning Grid Items
09:50
096 Grid Challenge
02:49
097 Grid Challenge_ A Basic Solution
11:09
098 Naming Grid Lines
09:41
099 Naming Grid Areas
11:04
100 Implicit Grids vs. Explicit Grids
10:40
101 Aligning Grid Items
09:58
102 Aligning Tracks
13:00
103 Using min-content, max-content and the minmax() function
16:20
104 Responsive Layouts with auto-fit and auto-fill
10:58
105 Project Overview and Setup
11:32
106 Building the Overall Layout - Part 1
15:35
107 Building the Overall Layout - Part 2
24:33
108 Building the Features Section - Part 1
13:02
109 Building the Features Section - Part 2
20:28
110 Building the Story Section - Part 1
18:01
111 Building the Story Section - Part 2
11:39
112 Building the Homes Section - Part 1
15:47
113 Building the Homes Section - Part 2
18:52
114 Building the Gallery - Part 1
15:25
115 Building the Gallery - Part 2
12:28
116 Building the Footer
12:34
117 Building the Sidebar
05:10
118 Building the Header - Part 1
16:17
119 Building the Header - Part 2
09:53
120 Building the Realtors Section
11:23
121 Writing Media Queries - Part 1
17:13
122 Writing Media Queries - Part 2
18:39
123 Browser Support for CSS Grid
08:36
124 Wrapping up the Nexter Project_ Final Considerations
06:45
125 See You Next Time, CSS Master!
02:29
客服
顶部
赛事库 课堂 2021拜年纪