高级CSS和Sass:Flexbox、网格、动画等等！

你将会学到的

• 大量现代 CSS 技术可创造令人惊叹的设计和效果
• 带有@keyframes、动画和过渡的高级 CSS 动画
• CSS 在幕后如何工作：级联、特异性、继承等。
• CSS架构：基于组件的设计、BEM、编写可重用代码等。
• Flexbox 布局：使用 Flexbox 构建一个巨大的现实项目
• CSS 网格布局：使用 CSS 网格构建一个巨大的现实项目
• 在实际项目中使用 Sass：全局变量、构建 CSS、管理媒体查询等。
• 高级响应式设计：媒体查询、移动优先与桌面优先、em 与 rem 单位等。
• HTML 和 CSS 中的响应式图像可加快页面加载速度
• HTML 和 CSS 中的 SVG 图像和视频：构建背景视频效果
• NPM 生态系统：开发工作流程和构建流程
• 在课程问答中获得友好和快速的支持
• 所有项目的可下载讲座、代码和设计资源

课程内容

欢迎，欢迎，欢迎！

• 欢迎来到有史以来最高级的CSS课程！
• 开始之前请先阅读！
• 设置我们的工具

Natours项目一设置和第一步（第1部分）

• 章节介绍
• 项目概况
• 构建标头-第1部分
• 构建标头-第2部分
• 创建炫酷的CSS动画
• 构建复杂的动画按钮－第1部分
• 构建复杂的动画按钮-第2部分

CSS的工作原理：幕后花絮

• 章节介绍
• 编写优秀HTML和CSS的三大支柱（永远不要忘记它们！）
• CSS在幕后如何工作：概述
• CSS是如何解析的，第1部分：级联和特异性
• 实践中的特殊性
• CSS如何解析，第2部分：值处理
• CSS是如何解析的，第3部分：继承
• 将px转换为rem：有效的工作流程
• CSS如何呈现网站：视觉格式化模型
• CSS架构、组件和BEM
• 在Natours项目中实施BEM

Sass和NPM简介

• 章节介绍
• 什么是萨斯？
• Sass的第一步：变量和嵌套
• 使用Sass的第一步：混合、扩展和函数
• 命令行简介
• NPM软件包：让我们在本地安装Sass
• NPM脚本：让我们在本地编写和编译Sass
• 文件更改时自动重新加载页面的最简单方法

Natours项目一使用高级CSS和Sass（第2部分）

• 章节介绍
• 将CSS代码转换为Sass：变量和嵌套
• 使用Sass实现7-1CSS架构
• 回顾：响应式设计原则和布局类型
• 使用浮动构建自定义网格
• 构建“关于部分-第1部分
• 构建“关于部分-第2部分
• 构建“关于部分-第3部分
• 构建功能部分
• 构建旅游部分-第1部分
• 构建旅游部分·第2部分
• 构建旅游部分-第3部分
• 构建故事部分-第1部分
• 构建故事部分-第2部分
• 构建故事部分-第3部分
• 构建预订部分-第1部分
• 构建预订部分-第2部分
• 构建预订部分-第3部分
• 构建页脚
• 构建导航-第1部分
• 构建导航-第2部分
• 构建导航-第3部分
• 构建纯CSS弹出窗口-第1部分
• 构建纯CSS弹出窗口-第2部分

Natours项目一高级响应式设计（第3部分）

• 章节介绍
• 移动优先与桌面优先以及断点
• 让我们使用SassMixins的强大功能来编写媒体查询
• 编写媒体查询－基础、排版和布局
• 编写媒体查询－布局、关于和功能部分
• 编写媒体查询-旅游、故事和预订部分
• 响应式图像概述
• HTML中的响应式图像－艺术指导和密度切换
• HTML中的响应式图像-密度和分辩率切换
• CSS中的响应式图像
• 使用@supports测试浏览器支持
• 使用NPM脚本设置简单的构建过程
• 结束Natours项目：最终考虑因素

Trillo项目－Flexbox大师！

• 章节介绍
• 为什么选择Flexbox：Flexbox背后的哲学概述
• Flexbox基本介绍：Flex容器
• Flexbox基本介绍：Flex项目
• Flexbox基本介绍：添加更多Flex项目
• 项目概况
• 定义项目设置和自定义属性
• 构建总体布局
• 构建标头-第1部分
• 构建标头-第2部分
• 构建标头-第3部分
• 构建导航-第1部分
• 构建导航-第2部分
• 建造酒店概述-第1部分
• 建造酒店概述-第2部分
• 构建描述部分-第1部分
• 构建描述部分-第2部分
• 建立用户评论部分
• 建立CTA部分
• 编写媒体查询-第1部分
• 编写媒体查询-第2部分
• Trillo项目的总结：最终考虑因素

CSS网格布局快速介绍

• 章节介绍
• 为什么选择CSS网格：一种全新的思维方式
• 本部分的快速设置
• 创建我们的第一个网格
• 熟悉fr单元
• 定位网格项目
• 跨越网格项目
• 网格挑战
• 网格挑战：基本解决方案
• 命名网格线
• 命名网格区域
• 隐式网格与显式网格
• 对齐网格项目
• 对齐轨道
• 使用min-content、max-content和minmaxO）函数
• 具有自动调整和自自动填充功能的的响应式布局

Nexter项目一掌握CSS网格布局！

• 项目概述和设置
• 构建总体布局-第1部分
• 构建总体布局-第2部分
• 构建功能部分-第1部分
• 构建功能部分-第2部分
• 构建故事部分-第1部分
• 构建故事部分-第2部分
• 建造住宅部分-第1部分
• 建造住宅部分-第2部分
• 建造画廊-第1部分
• 建造画廊-第2部分
• 构建页脚
• 构建侧边栏
• 构建标头-第1部分
• 构建标头-第2部分
• 建立房地产经纪人部门
• 编写媒体查询-第1部分
• 编写媒体查询-第2部分
• CSS网格的浏览器支持
• Nexter项目的总结：最终考虑因素

就是这样，大家！

• CSS大师，下次再见！
• 我的其他课程+更新

说明

• 嗨，我是乔纳斯！我是Udemy的顶级讲师之一，我的所有高级课程都因其出色的表现和学生满意度而赢得了最畅销的地位。
• 我是一名全栈 Web开发人员和设计师，热衷于从头开始构建漂亮的 Web 界面。我自 2010 年以来一直在构建网站和应用程序，并且还拥有工程硕士学位。
• 通过分享我在大学期间所知道的一切，我发现了自己对教学和帮助他人的热情。这种热情促使我于2015年加入Udemy，现在我有幸在 Web 开发领域培训了超过1,500,000名学习者。
• 学习者最喜欢我所有课程的一点是，我花时间以每个人都能轻松理解的方式解释每个概念。
• 那么，您想了解如何使用现代HTML和CSS构建出色的网站吗？
• 正在寻找一个完整的JavaScript课程来帮助您从零到高级开发人员？
• 或者您想使用React构建现代且强大的前端应用程序？
• 那么就不要将时间浪费在随机教程或不完整的YouTube视频上。我的所有课程都是易于学习的一体化课程，可将您的技能提升到一个新的水平。
• 这些课程正是我第一次进入Web开发时希望拥有的课程！
• 但请您亲自看看，报名参加我的一门课程，并立即加入超过 1,500,000 名快乐的学生。

此课程面向哪些人

• 想要将 CSS 技能更新到最现代水平的 CSS 开发人员
• 希望将工具集扩展到动画、flexbox、Sass、NPM、SVG 等的 CSS 开发人员
• 想要最终了解 CSS 在幕后如何工作的前端开发人员
• 一般来说：任何想要真正掌握 CSS 的人！