2020 年 Web 开发者路线图第 2 步：学习 HTML 和 CSS

本视频是系列视频的一部分。如果您喜欢，请观看本系列视频的第一部分，了解如何设定您的远大目标并始终将其放在首位。然后，继续观看第三部分，了解如何学习 JavaScript。

视频笔记

我不会在这个视频中教你 HTML 和 CSS，但我会给你一些很棒的资源和技巧，帮助你自己开始学习。

如果您想了解如何利用“大目标”推动您迈向新的职业生涯，请观看路线图中的上一个视频。

我推荐的两门课程（尽管它们有点过时）：

• ⭐学习编写 HTML 和 CSS，作者：Shay Howe
• ⭐ 30 天学习 HTML 和 CSS（Envato 提供）

视频中提到的链接（主要按提及顺序）：

• 弹性盒青蛙
• Flexbox CSS技巧指南
• Wes Bos 的 CSS Grid 课程
• CSS-Tricks CSS 网格指南
• Google 对 HTML 验证的算法立场
• MDN Web 技术参考

感谢观看！欢迎提问或在评论区留下你的想法。点击此处关注我或在 YouTube 上订阅我，这样你就不会错过接下来的路线图内容了！（为什么不两者兼顾呢？😉）

抄本

嗨，我是 Devon，我们现在正处于我的 Web 开发者路线图的第二步。以下是我 2020 年学习 HTML 和 CSS 的计划。

在本路线图系列的上一个视频中，我们探讨了如何选择一个大目标，以及如何将其牢记在心，以便即使在困难时期也能始终保持动力，继续前进。在本视频中，我们将深入探讨一些技术层面的内容。

你需要从学习 HTML 和 CSS 开始。它们是 Web 的基础技术，我这样说的原因如下。如果你看看像 React 这样非常流行的前端框架，你会发现只有四分之一（1%）的网站使用了它。如果你放眼更广阔的世界，你会发现大多数网站（95%）都在使用 JavaScript。但 HTML 却被互联网上的每个网站所使用。CSS 与 HTML 紧密结合，共同实现了我们在互联网上看到的各种不同的外观。

我努力追踪市面上最好的课程，这样当有人告诉我他们想学习这些东西时，我就能为他们指明正确的方向。我最喜欢的两门课程。第一门是Shay Howe的《学习HTML和CSS编程》。这本书有实体书，但也有免费的在线版本。它嵌入了书中讨论概念的代码示例，这些示例都嵌入在CodePen中，你可以点击CodePen上的“编辑”，然后进入这些示例，亲自尝试不同的方法。我认为这是真正理解这些知识运作方式的有效方法。

这本书对盒子模型的解释非常透彻，这对于理解如何布局页面至关重要。书中还有一章关于良好编码实践的精彩内容，从长远来看会对你有所帮助。

这本书在讲解如何实现不同的布局时，开始显得有些过时了。它使用了浮动，我觉得有点过时了。你或许应该参考一些其他资源，学习一些实现不同页面布局的替代方法。我建议你研究一下 Flexbox 和 CSS Grid。这些都是比较现代的页面布局工具。

我发现了一款​​非常酷的游戏，叫做“Flexbox Froggy”，它教你如何使用各种 Flexbox 属性。在我看来，这些属性并不直观，所以这是一个学习这些属性的好方法。游戏会教你如何通过使用 Flexbox 属性来设置青蛙的样式，让它们回到荷叶上。

直到今天，每当我使用 Flexbox 时——实际上相当频繁——我仍然会参考 CSS Tricks Flexbox 指南，这是一本非常棒的参考书。我认为，一旦你学完了 Flexbox Froggy 教程，对它的工作原理有了基本的了解，CSS Tricks 指南会是一个非常有用的工具。当你需要快速复习一下时，它也会是一个很好的参考。

想要学习 CSS 网格布局，可以看看 Wes Bos 的 CSS 网格布局课程。这是一个免费的视频课程，它将带你了解使用 CSS 网格布局进行页面布局所需的一切知识。

网格布局是一项较新的技术，所以它可能不会对大家一开始就有用。Internet Explorer 不支持 CSS 网格布局，所以如果你需要构建能在 Internet Explorer 中运行的网站，你可能需要等待一段时间，直到它逐渐被人们所接受。

但对于其他浏览器来说，CSS Grid 的支持很好，而且它是一个非常实用的布局工具。就像 Flexbox 一样，CSS Tricks 指南也是 CSS Grid 的绝佳参考指南。它是一个很好的参考，展示了你需要了解的所有属性，而且当你需要快速复习的时候，很容易就能回头参考。

有时我喜欢通过书籍（比如我之前提到的Shay Howe的书）来学习新的Web技术，但其他时候我觉得视频更好一些。我喜欢书籍是因为你可以轻松浏览并找到你需要参考的部分。我喜欢视频是因为它更容易捕捉所有步骤。当我真正从零开始的时候，我可能更喜欢视频。

我能找到的最好的视频课程是 Envato 的 30 天学习 HTML 和 CSS 视频课程。它在 YouTube 上免费提供。它的效果非常好。我让你在很短的时间内从一无所知到对这些基础技术有了基本的了解。

我最喜欢的一点是它中间有一个作业——基本上是一个项目，可以让你锁定部分学习内容。这两门课程都有些过时了，但幸运的是，HTML 和 CSS 并没有太大变化。唯一不同的是，我们现在需要支持的浏览器不一定和五六七年前这些课程刚推出时一样。此外，我们用来开发网站的工具也不一定一样。这些工具已经成熟了一些。

我会对视频课程做一些调整。首先，我会放弃使用 Sublime Text 2（它甚至已经不是 Sublime Text 的最新版本了），我可能会选择 Visual Studio Code 之类的工具。

自从这门课程发布以来，Visual Studio Code 也发布了。它是开源的，而 Sublime Text 是专有软件，需要购买。我记得它的价格大概是 80 美元，或者说很多年前我买的时候是这个价，而且它的功能不如 Visual Studio Code 那么多。我写了一篇短文，解释了为什么 Visual Studio Code 是我推荐给新开发者的，我会在下面的描述中发布链接。

本课程中有一些视频我觉得你可以考虑跳过。第22天重点讲解了HTML代码验证。我现在已经很少听到有人讨论这个话题了。我做了一些研究，只是想看看这是否仍然值得关注，而且谷歌显然不会根据网页是否验证来排名，所以我觉得现在应该没人在乎了。我会用linter工具来确保你写的HTML代码质量良好，并尽量遵循良好的编码习惯，但我认为用HTML验证器来运行代码并不一定重要。

第25天是关于CSS框架的。还有一件事我现在已经很少听到人们谈论了。尤其是他选择的那个。我记得是960网格，在看这个视频系列之前我从未听说过。我觉得在很多情况下，这些技术已经被我之前提到的技术——Flexbox和CSS网格——所取代了，所以我可能会用快速自学Flexbox和CSS网格来代替那一天。

第27天是关于如何将PSD文件切片并转换成网页，这是另一种工作流程，我认为现在很多人或很多工作室都不再这么做了。有些人会这么做，你也可能遇到想这么做的客户，所以学习一下肯定没坏处。只是现在不像这些视频发布时那么常见了。

如果你把这两门课程结合起来，你会对如何使用HTML和CSS构建基本网页有一个相当不错的介绍。我会从你感兴趣的课程开始学习。所以，如果你对视频课程最感兴趣，那就从视频课程开始吧。如果你更喜欢看书，那就从Shay Howe的书开始吧。如果你对某个概念不太理解，可以尝试换到另一门课程，看看它是如何解释这个概念的，看看它是否更符合你的学习方式。

学完这些课程后，如果你忘记了某些内容需要复习，或者你正在使用一些你了解的 HTML 或 CSS 内容，但从未真正使用过，你需要一份可以参考的参考资料，看看它们是如何使用的。为此，我总是会去 MDN。MDN 拥有你能找到的最好的 HTML、CSS 和 JavaScript 文档。我经常参考它来理解各种 CSS 属性，理解不同 HTML 元素的属性以及如何使用它们……诸如此类的事情。我几乎每天都会参考它并搜索它。

这应该能为你提供学习HTML和CSS所需的所有工具。我想给你留个挑战。阅读这些书籍，观看这些视频……会非常有趣。你会学到新东西。你将能够创造一些东西，当你完成书中或视频中的内容时，你会获得一丝内啡肽的刺激，这会让你感觉很棒。你的挑战是，一旦你有能力，你就需要开始突破这些资源为你设置的围墙。

我说我很喜欢这个视频有个作业，确实如此。我觉得这是一种很酷的学习方式，但那个作业基本上已经准备好了。它已经装箱送到你手里了，随时可以开始学习。真正的学习发生在你真正走进前沿的时候。

想象一个你很感兴趣但目前尚未解决的项目，然后开始将你学到的知识应用到这个项目中。在课程中，你可以安排一些独立工作，运用你学到的知识，将你学到的知识运用到课程内容之外的领域，从而巩固你所获得的知识。

完成课程后，创建一个项目，将你学到的所有知识整合在一起。项目规模要小，不要太长。它必须是你感兴趣的，能够在你遇到瓶颈时帮助你坚持下去，而且不能是照本宣科。不应该是“我找到了一个关于如何构建另一个待办事项列表应用的教程，所以我就做了”。它应该是你自己的项目。

您可能决定要建立自己的投资组合，或者您可能想要开始从事一个您真正感兴趣的激情项目，或者也许您有一个商业想法，这就是您学习这个的原因，也是您想要开始构建的。

如果你在寻找灵感方面遇到困难，我会给你一个链接，里面列出了我整理的10个Web开发项目创意。你可以从中挑选一个，也可以把它当作灵感，推动你自己的想法。你可以稍微修改一下，也可以直接提取其中的核心内容，围绕它构建你自己的想法。

你可以尝试独立完成一些项目，比如直接拿一个现有的网页，然后尝试重建它。当我真正认真学习这方面知识并开始专业化地做这件事时，我做的第一个项目就是谷歌。我直接拿了谷歌的主页，用 HTML 和 CSS 重建了它。

如果你打开谷歌主页看看，它看起来超级简单，确实如此。但当你真正开始尝试自己构建它时，无论它看起来多么简单，你都会遇到一些障碍，这对你来说是好事。这正是你需要的。你需要克服这些障碍，并想办法绕过它们。一旦你成为一名 Web 开发者，这基本上就是你的工作。

以上就是 HTML 和 CSS 的内容。在路线图的下一步中，我们将讨论如何学习 JavaScript。感谢您观看视频。订阅后您就不会错过路线图的其余部分，我们下期再见。