如何学习Web开发

这篇文章（如何学习 Web 开发）最初发布在Sargalias上。

第 1 部分：开始前端开发

想学习 Web 开发？这篇文章将尝试为初学者介绍学习 Web 开发的最佳方法。它提供了学习 Web 开发的指南，包括学习哪些主题、学习顺序以及学习原因，以及一些学习的通用原则。此外，它还提供了建议的学习途径和资源。

编程领域

在开始之前，请注意编程有不同的领域。以下是一些示例：

Web 开发
游戏开发
数据科学
系统编程
以及更多

具体选择哪一种取决于你的目标和兴趣。如果你还没有明确的目标，那么 Web 开发是一个不错的入门选择。

为什么要进行 Web 开发？

有几个原因可以说明为什么 Web 开发可能是最好的入门编程领域：

人们普遍认为，Web 开发比游戏开发和数据科学等其他领域更容易。
Web 开发和其他类型的开发一样，都能教会你编程。无论你最终从事哪个领域，它都能成为你职业生涯的良好开端。
Web 开发如今正风靡一时。应用程序开发也越来越多地转向 Web 技术。我们拥有的渐进式 Web 应用 (PWA) 正日益流行，并在许多企业中取代了原生应用。此外，还可以使用 Electron、React Native 等技术开发原生应用。这些应用是跨平台的，并且使用 Web 技术。简而言之，Web 开发现在是一个非常好的领域。
Web 开发是一个很棒的职业。你很可能很快就能找到第一份前端开发人员的工作。有些工作只需要 HTML 和 CSS，学起来很快。

什么是 Web 开发？

顾名思义，Web 开发就是创建网站。但正如上文所述，Web 开发中使用的技术用途远不止于此。它们可以用来开发渐进式 Web 应用程序、原生应用程序、数据可视化、游戏等等。

Web 开发的组成部分

Web 开发（以及一般编程）大致可分为 3 个主要部分：

前端开发
后端开发
开发运营

前端开发

前端开发基本上就是网站的外观和交互性。

它包括 HTML、CSS 和 JavaScript。

HTML 是网站的结构和内容。

CSS 是网站的样式，表示网站的外观。

JavaScript 会影响网站的交互性。例如，你可以使用 JavaScript 让网站在用户点击按钮时执行一些特殊操作。

后端开发

后端开发在服务器上进行。后端的常见功能如下：

处理表格和付款（例如，当您在网站上进行购买并提交付款详情时）。
返回搜索结果（例如当您在亚马逊上搜索产品时）。
创建帐户（例如当您注册一个新网站时）。
并且还将网页提供给网络浏览器。

开发运营

Dev Ops 是 Web 开发和其他提升开发效率的“外围设备”。例如 Web 托管、源代码控制等。

您应该从哪一个开始？

在我看来，除非你对后端开发有强烈的偏好，否则你应该从前端开发开始。

Dev Ops 并不是真正的开发，它更像是开发的外围设备，所以你不能从它开始。

那么剩下的就是后端和前端了。你可以从其中任何一个开始，但是从前端开发开始有几个好处。

有一些优秀的第三方后端开发解决方案，例如 Google Firebase。您可以使用它们来构建完整的应用程序。您甚至可以创建一个静态网站或应用程序，除了一个用于发送页面的基本服务器之外，甚至不需要任何后端。然而，除了使用模板或请别人帮您完成之外，您几乎无法避免前端开发。
前端开发比后端开发更容易。HTML 和 CSS 绝对比 JavaScript 或其他编程语言更容易掌握。
学习前端开发后，学习后端开发会容易得多。JavaScript 是一门完整的编程语言。了解任何一门编程语言都能让你学习第二门语言变得更容易、更快。此外，如果你选择 Node 作为后端语言（这是一个不错的选择），那么你学习的就是 JavaScript，因为你已经学过了。

如何学习 Web 开发

要学习任何东西，最重要的事情就是投入时间。根据我的经验，投入时间似乎比制定一个好的学习计划更重要。

但当然，有一个好的学习计划可以大大加快这一进程。

下面，我列出了根据我的经验，学习 Web 开发的最佳途径以及最佳资源。

但首先，让我们来谈谈学习 Web 开发的错误方法。

糟糕的计划

如果你在论坛之类的地方搜索学习 Web 开发的最佳方法，你会得到很多答案，告诉你“直接构建东西就好”。这当然是好事，但对于一个完全的初学者来说，仅仅构建东西并边学边做是不够的。

首先，作为初学者，你不知道自己不知道什么。除非你偶然遇到某个事物，否则你不会知道它的存在，你的知识也会存在空白。

因此，您还需要通过全面的课程来学习，这些课程将使您了解所有需要知道的知识。

并且还随之构建一些东西。

迭代学习

你不会在第一次遇到时就学到所有东西

要成为一名优秀的 Web 开发者，你需要了解很多东西。刚开始的时候，仅仅深入了解某些东西是不够的，你需要对很多东西有所了解。你需要拥有完整的知识基础。

这就是为什么迭代学习是最好的。例如，当你第一次学习 JavaScript 时，你会学习它的基础知识。虽然你可能对某些功能背后的工作原理存有疑问，但并非所有问题都应该立即得到解答。如果没有扎实的基础知识，你只会浪费太多时间去学习那些晦涩难懂的功能。

最有效的学习方式是迭代。学习一门技术的基础知识，练习一段时间，并构建一些成果。然后过一段时间（几周或几个月）再回来学习。下次你就能更深入地学习它。如此反复。

别担心，一段时间后，这会感觉像是一个自然而然的过程。你基本上会学到越来越多的东西，但你不会一下子就完全掌握一个主题，而是会随着时间的推移逐渐加深对它的了解。

Web开发学习计划

Web 开发简介

我建议从以下课程开始：前端大师 - Web 开发完整入门

这是一门 11 小时的课程（按照 Web 开发课程标准来说并不算太长），简要介绍了前端 Web 开发的所有重要主题。

完成这门课程后，你会成为一名专业的 Web 开发者吗？不会。但这门课程的优势在于，它会向你展示所有你需要了解的技术，这样当你学习后续课程时，你就能更轻松地理解它们。因为你之前已经接触过这些技术，它们对你来说很有意义，而且你能够比以往更深入地学习它们。

这就是上面提到的迭代学习原则。

不要试图 100% 地学习本课程，它只是为您提供快速介绍和接触，以学习一些基础知识。

学习HTML和CSS

前端开发的第一步是学习HTML。HTML是HTML、CSS、JavaScript这三个语言中最简单的。

HTML 本质上就是根据你想要实现的功能使用正确的元素。就是这样。例如，如果你要写一个段落，就使用段落标签。如果你要写一个标题，就使用标题标签，等等。

CSS 稍微难一点，但也不算太难。CSS 基本上就是声明 HTML 的样式，以及它在视觉上的表现。例如，声明“color: red;”会使文本颜色显示为红色。总的来说，CSS 的基础知识也相当容易学习。

您需要的三种资源

另外，遇到问题时一定要记得用谷歌搜索。谷歌是程序员最好的朋友。

Web 开发人员训练营

这可能是 Web 开发初学者最好的课程。

它教你HTML、CSS、JavaScript的基础知识，然后进一步讲解后端和更多主题。总的来说，这是一门很棒的课程，我强烈推荐。这是我的入门课程，它帮助我找到了第一份工作。它还包含项目，老师和助教随时准备解答你的任何问题。

MDN

这可能是有史以来学习 Web 开发（尤其是 HTML）的最佳网站。它几乎涵盖了你所需的所有 HTML、CSS、JavaScript 以及其他内容。虽然 Web 开发者训练营非常适合入门学习和快速入门，但 MDN 的课程更加全面，并且会提供极其详细的讲解。

需要注意的是，MDN 的内容非常详细，你不应该试图一次性学会所有内容。第一次学习时，我建议直接浏览教程，然后查找遇到困难的地方。大多数情况下，可以忽略参考资料。第二次学习 HTML 和 CSS 时，或者遇到困难时，再回头看看这些资料。

免费代码营

在这里，你基本上可以练习你所学的知识。虽然练习的内容可能不全，但效果还不错。挑战环节能够很好地巩固你所学的知识，项目环节尤其精彩。

如何浏览资源

我建议把这三项内容一起做。具体来说，先完成 Web 开发者训练营的 HTML 部分，然后学习 MDN 上的 HTML 教程，最后完成 Free Code Camp 上的 HTML 部分。

我推荐这种方式的原因是，Web 开发者训练营课程采用视频授课，学习起来既轻松又便捷。之后，MDN 教程非常详尽，会详细讲解 HTML。最后，Free Code Camp 更注重实践而非学习，所以也值得一试。通过 Free Code Camp，您可以开始学习“响应式网页设计认证”并完成“基础 HTML 和 HTML5”。

完成每个资源的 HTML 部分后，重复此过程以完成 CSS 部分。对于免费代码营，请完成“响应式网页设计认证”。

奖励资源

当你用 Google 搜索某些内容时，这些资源会经常出现：

CSS Tricks 是一份很棒的 CSS 资源。如果你正在寻找 CSS 相关的资源，它值得一看。

Stack Overflow 是一个关于开发的资源网站。在这个网站上，人们可以提问并得到其他开发者的解答。如果你有问题，很可能之前有人也遇到过类似的问题，并且已经在那里得到解答。

JavaScript

我推荐的一门 JavaScript 课程是：由 Andrew Mead编写的《现代 JavaScript 训练营》

Andrew Mead 是最棒的。我上过他的其他一些课程，我可以自信地说，它们是我这辈子上过的最好的课程。我给他留下了五星好评。我还可以自信地说，他可能是我作为一名初级程序员找到一份好工作并取得优异成绩的最大原因。我知道我听起来可能像个狂热粉丝，但事实确实如此。

这门课程最棒的地方在于，它不仅是市面上最好的 JavaScript 课程之一，而且内容远不止 JavaScript。它还会教你如何正确设置你的机器以及如何使用命令行。命令行非常容易学习，对程序员来说也非常有帮助，但不幸的是，有些人因为觉得太难而永远学不会。这门课程解决了这个问题，并为你的 Web 开发者生涯提供了宝贵的工具。课程还涉及 Webpack 和 Babel，这些都是你将来肯定会接触到的东西，所以在这个阶段对它们进行初步了解是很好的。

最后，使用这三个资源重复对 HTML 和 CSS 执行的过程，这次从中执行 JavaScript 部分。

继续学习 Web 开发者训练营课程的剩余内容，直到完成所有 JavaScript 章节。学习到“后端基础”章节后即可停止。我们以后会再讲解该章节。
通过免费代码营，坚持下去，直到完成“JavaScript 算法和数据结构认证”。

下一步，准备工作

完成课程后，您将拥有非常扎实的知识水平，并且还将获得一些很好的实践。

接下来的步骤是通过做更多的项目来进行更多的练习，并创建一个作品集。

作品集对你获得第一份工作非常有帮助。事实上，雇主并不了解你本人或你的技能。他们只能通过你的作品集来判断你是否能胜任这份工作。所以作品集至关重要。

为你的投资组合建立一个网站

您需要一个网站来托管您的投资组合。

建立网站的方法有很多种：

静态网站（使用静态网站生成器（如 Jekyll、 Hugo或其他基于 JavaScript 的生成器）构建）。
具有自定义主题的 CMS（例如具有自定义主题的 WordPress）。
具有高级主题的 CMS。
带有页面构建器和主题构建器的 CMS（例如带有 Elementor Pro 的WordPress ）。
使用网站构建器，例如 Wix 或 Squarespace。

还有更多选择，其中大多数都相当不错。

我的建议：带有页面构建器和主题构建器的 WordPress 网站

我个人建议使用Elementor Pro 页面构建器和主题构建器以及 Astra 主题来构建 WordPress 网站。因为这可能是创建个人作品集网站最简单、最快捷的方法。

构建一个完全定制的网站固然很好，但可能需要很长时间。定制开发本身就需要花费大量时间。但有了 Elementor Pro这样的工具，你就有了现成的模板和组件来帮你。你几乎可以在几天内就拥有一个网站。

当然，如果您愿意接受挑战，也可以创建一个自定义网站。虽然可能需要更长的时间，但最终结果将是为您量身定制的，而且这也是一次很好的练习。

构建一个基本的静态网站是免费的，然后你可以将其托管在 GitHub Pages 或 Netlify上（我推荐 Netlify）。为此，你肯定想使用静态网站生成器，例如 Jekyll 或 Hugo。我推荐 Jekyll。不用这些工具也可以构建网站，但效率会低得多，除非你不用学习如何使用静态网站生成器。