CSS 布局大师班：构建响应自适应网站
学习并掌握响应式、自适应和移动优先的布局，以使用 Flexbox、Grid 和 Sass 构建真实世界的网站
讲师：Muslim Helalee
口袋资源独家Udemy付费课程，独家中英文字幕，配套资料齐全！
用不到1/10的价格，即可享受同样的高品质课程，且可以完全拥有，随时随地都可以任意观看和分享。
你会学到什么
- 每个想要学习使用最新技术创建真实世界布局和网站的最佳实践的人的首选资源
- 一种基于实际问题的学习方法，用于学习 CSS Flexbox 和 CSS Grid 以创建响应式和自适应网站
- 如何利用基于问题的学习来激发和提高您解决问题的能力
- 了解创建现代和复杂的响应式和自适应布局的最佳实践
- 如何提出真实世界的项目工作流程或开发人员设置以创建令人惊叹的响应式和自适应网站
- 如何利用尖端的 Sass 创建可扩展和可维护的网站
- 您将成为使用 CSS Flexbox 和 CSS Grid 创建布局的大师
- 您将创建 2 个桌面优先的响应式网站
- 您将创建 1 个移动设备优先的自适应网站
- 奠定 Web 开发基础的关键 HTML 和 CSS 概念
- 将您的 HTML 和 CSS 技能提升到一个新的水平
- 如何使用 CSS Flexbox 和 CSS Grid 创建任何类型的布局
- 如何使用 CSS Flexbox 和 CSS Grid 起草布局
- 学习如何使用 CSS Flexbox 和 CSS Grid 绘制布局
- 您将使用 CSS Flexbox 和 CSS Grid 创建 20 个布局
- 您将使用 CSS Flexbox 和 CSS Grid 练习解决 20 个布局
- 如何优化网站以更快地加载
- 如何免费将网站部署到互联网
本课程包括：
- 49.5 小时视频点播
- 14 个可下载资源
- 终身访问
- 在手机和电视上访问
要求
- 无需事先了解 HTML 和 CSS
- 我从头开始，涵盖了您掌握创建真实世界的响应式和自适应桌面优先和移动优先网站所需的一切
- 只要有一台电脑，剩下的交给我:)
描述
欢迎来到 CSS 布局大师班
我很高兴向您介绍这个全面的、面向现实世界的大师班。这个大师班是多年研究和经验的产物，它将教给您成为真正的 HTML和CSS 大师的所有来龙去脉、所有秘密和技巧。您还将学习如何使用CSS 预处理器Sass创建现代开发人员工作流程。
突出的大师班特色
- 10 个 CSS Flexbox 布局
- 10 个 CSS 网格布局
- 10 个 CSS Flexbox 练习
- 10 个 CSS 网格练习
- 2 个完整的真实世界响应式网站
- 1 个完整的真实世界自适应网站
- 现代 Sass 工作流程
大师班说明
我从 HTML 和 CSS 的基础知识开始这个大师班。我将通过创建我们的第一个作品集网站来教您 HTML 和 CSS 的所有基本知识，而不是枯燥的理论方法。在 HTML 基础知识和 CSS 基础知识部分的末尾还有练习，以强化概念并让您参与其中。
之后，您将以基于问题和实用的方式学习使用CSS Flexbox 和 CSS Grid创建 20 个布局。不仅如此，您还将有 20 个练习来使用Flexbox 和 Grid 来解决。
Flexbox 和 Grid是帮助我们创建令人惊叹的网站的技术。在本大师班中，您将通过解决和编码布局来学习Flexbox 和 Grid。我不会遵循一种无聊的方法，即只浏览Flexbox 和 Grid而不考虑它们的任何实际方面。相反，我将以两种方式教您每种布局。
*-*-*-*-*-*-* 使用 Flexbox 和网格的白板布局
首先，你会看到我在白板讲座中提出布局的想法，只有我和一块白板，没有电脑，也没有 vs 代码。我将教您如何为您的布局设计 HTML 结构，以及如何区分元素以设计出在 Flexbox 或 Grid 上下文中发挥重要作用的战略元素。然后，我会在白板上写下 CSS 代码，并教你如何使用 Flexbox 或 Grid 来解决特定的布局。
*-*-*-*-*-*-* 使用 Flexbox 和网格编码布局
完成白板讲座后，我将跳入 vs 代码并教您该布局的所有 HTML 和 CSS 代码。因此，您将在白板讲座中学习提出布局想法的思维过程，并且您将在编码讲座中学习如何对其进行编码。
现在您已经了解了Flexbox 和 Grid，我们将编写我在 HTML 和 CSS 基础部分教过的投资组合网站的 UI。我还将教给您所有的秘诀和捷径，让网站看起来非常棒，并且可以在各种大小的设备上访问。
*-*-*-*-*-*-* Flexbox 和 Grid 练习
仍然缺少一些东西，那就是给你更多的时间来练习和磨练你的 Flexbox 和 Grid 布局创建技能。
您将拥有 20 个独特的主要电子商务布局来练习 Flexbox 和 Grid。
在整个练习部分，您将有机会在真实世界中将Flexbox 和网格提升到一个新的水平。为了让挑战值得您一试，我提供了Flexbox 和 Grid的所有练习的屏幕截图，您无需播放任何视频。只需下载资源文件并完成练习即可。每个练习布局还有一个视频解决方案供您参考，以防您遇到困难。
在大师班的这一点上，你可能认为你已经完成了，你学会了使用Flexbox 和 Grid创建布局，你知道如何创建一个响应式网站，你也有大量的练习和练习。
*-*-*-*-*-*-* 更多项目
但是，为了让你的技能达到绝对的MONSTER水平，我还有两个项目要考虑。我们的重点将不再是学习Flexbox 和 Grid ，因为您已经掌握了这些技术，而是更多的面向现实世界的技能集。
我将教授响应式网站和自适应网站的思维过程。是的，你没看错，自适应网站。这很可能是您第一次阅读有关自适应网站的信息，因为关于它的在线内容非常有限。
*-*-*-*-*-*-* 现代开发人员工作流程
在第二个和第三个项目中，您将学习如何启动现代开发人员工作流程以及项目的可维护性和可扩展性。我将教您项目组织、自定义属性和变量、函数、实用程序类以及使用 Sass 预置您的 CSS。
*-*-*-*-*-*-* 第二个项目
这个大师班的第二个项目是创建一个多页面的用户界面，真实世界和一个真正成熟的网站，离成为一个全栈应用程序只有一步之遥。这个项目称为EventGrids，是一个响应式、桌面优先的项目，网站的创建和设计过程从大屏幕开始，因此屏幕尺寸缩小了。它是大师班中最大的网站，您不仅可以在其中学到很多新技术，还可以将您的反应能力提升到绝对的MONSTER水平。
*-*-*-*-*-*-* 第三个项目
这个大师班的第三个项目是一个名为ZeaL的自适应网站。它是一个单页、移动设备优先的自适应网站。在整个项目中，我将教您如何从小屏幕开始设计网站。 这种方法称为移动优先设计方法，也受到公司的追捧。之所以对这项技能有很高的需求，是因为从移动屏幕尺寸开始，让网站在所有设备上看起来都可读和可访问的过程变得更容易、更具战略意义。由于大多数用户都在他们的智能手机上访问网站，因此对这项技能的需求已经飙升。
*-*-*-*-*-*-* 第三个项目特点
ZeaL 项目在教授您尖端技能方面尚未完成。通过设计和编码这个项目，您还将学习自适应设计。自适应设计经常与响应式设计混淆或混合。但是，这两种技术截然不同。
*-*-*-*-*-*-* 响应式设计
在响应式设计中，单位值是动态的。它们随着视口单位的缩小或扩大而不断变化。这使得响应式设计的启动变得极其困难。
*-*-*-*-*-*-* 自适应设计
另一方面，自适应设计不包含任何动态单位值。这都是关于静态单位值的。静态单位相对于动态单位的优势在于静态单位在视口尺寸方面不会发生变化。
这是一个非常广泛的主题，我专门针对它进行了 3 个项目。通过完成这些项目，您不仅会了解响应式设计和自适应设计之间的区别，还会掌握任何类型的布局和网站的设计过程。
我相信您将学到大量新的和现实世界的技能，这些技能将成为下一代 Web 开发人员。
所以，跟我来，让我教你 HTML 和 CSS 可以做的所有很酷的事情。
迫不及待想在大师班见到你
本课程适合谁：
- 每个想要成为创建响应式和自适应网站的真正大师的人
- 希望尽快开始使用 HTML 和 CSS 并获得有关如何创建响应式和自适应网站的实际生产蓝图的初学者
- 想要使用 You will create 20 layouts with CSS Flexbox and CSS Grid 的中级 HTML 和 CSS 开发人员
- 高级 HTML 和 CSS 开发人员，他们希望将自己的技能提升到一个新的水平并创建响应式和自适应网站
- 每个想在真实环境中学习 CSS Flexbox 和 CSS Grid 的人
- 每个人都想提高他们解决问题的能力
- 每个人都想学习创建现代生产就绪网站和布局的所有最佳实践
