前端开发人员的完整学习路径（在线课程）

嘿！👋

结论

荣誉提名

嘿！👋

我是一名前端（React）开发人员，也是CoderDojo的 IT 导师。经常有人问我如何成为一名开发人员，有哪些资源推荐，以及学习这些技术的正确顺序是什么。作为一个经常在线观看课程并从中获益良多的人，我想我能给出一个相当不错的答案。

那么，让我来和大家分享一下那些对我的职业生涯影响巨大的课程。顺便说一句，我要特别感谢这些课程的作者，因为如果没有他们，我可能就成了一个卖菜的了。这不是广告，虽然我希望它是……

首先：HTML + CSS

由于这是你接触的第一个主题，互联网上有很多关于HTML和CSS基础知识的信息。但我发现有一个资源非常不错。我喜欢Jonas Schmedtmann的课程，不仅因为它内容全面。Jonas是一位优秀的设计师，通过这门课程，你将能够创建出看起来非常棒的网页！我们都知道，在学习初期保持动力是多么困难，但我保证，你通过这门课程创作的网页作品会立即给你带来满足感。相信我，你会为自己所做的感到自豪 :)

使用 HTML5 和 CSS3 构建响应式真实世界网站，作者 Jonas Schmedtmann

第二件事：高级 CSS

试着问后端开发人员“你为什么不选择前端？”，你很可能会听到类似“我讨厌 CSS。我就是做不到”之类的话。不知何故，很多人认为使用 CSS 的能力是上帝的恩赐。但事实并非如此😊。这种错觉可能是因为 CSS 入门很容易，但要精通它却需要花费大量时间。再次强调，我认为 Jonas Schmedtmann 的另一门课程是入门的最佳选择。作者深入探讨了 Flexbox、CSS-Grid、预处理器、项目结构、BEM 方法论等重要主题。我强烈推荐这门课程！

高级 CSS 和 Sass：Flexbox、Grid、动画等等！作者：Jonas Schmedtmann

热度越来越高：JavaScript

毫无疑问，JavaScript 是前端开发人员最重要的技能。我支持一个不太流行的观点：掌握 JavaScript 最快、最有效的方法如下：

1. 学习 JavaScript 基础知识
2. 学习 React（或其他框架/库）
3. 了解你不了解 JavaScript 的基础知识
4. 真正学习 JavaScript

不要试图从头开始学习 JavaScript 的每一个细节。如果你已经有一些实践经验，理解和优先考虑很多事情会容易得多。但不要被对基础知识的肤浅理解所迷惑。

在你开始学习 JavaScript 的时候，我推荐你参加以下课程之一：

完整的 JavaScript 课程：构建真实项目！作者：Jonas Schmedtmann

JavaScript - 完整指南（初学者 + 高级）作者：Maximilian Schwarzmüller

是时候选择你的命运了：React、Angular、Vue

现在你已经准备好学习如何掌握真正的力量了。没必要全部学习。至少在开始阶段，你最好选择一个框架/库。我非常喜欢 React，但我不想挑起关于哪种技术更好的圣战（尽管 React 是最好的😊）。我尝试了所有 React 技术，可以自信地说，Academind（Maximilian Schwarzmüller）提供了关于这三个技术的优秀课程：

React - 完整指南（包括 Hooks、React Router、Redux）作者：Maximilian Schwarzmüller

Angular - 完整指南（2020 版）作者：Maximilian Schwarzmüller

Vue JS - 完整指南（包括 Vue Router 和 Vuex）作者：Maximilian Schwarzmüller

“T字”：单元测试

我知道你讨厌它，我也讨厌它。但我们必须接受现状。当你因为缺乏知识而试图想出奇怪的 hack 时，测试过程尤其痛苦。获取这些知识的最佳途径可能是Kent C. Dodds的单元测试课程，这门课程非常棒。社区里的每个人都认识他。他确实值得信赖。毕竟，他给了我们 react-testing-library。这绝对是我见过的关于单元测试（不仅仅是单元测试）的最佳资源：

学习Kent C. Dodds 撰写的智能、高效测试 JavaScript 应用程序的方法

强化版 JavaScript：TypeScript

Maximilian Schwarzmüller 的另一门优秀课程。如果你真正掌握了 TypeScript，你的代码质量将得到显著提升！很多人对 TypeScript 的理解只是皮毛……请不要成为他们中的一员。这门课程（以及大量的练习）将帮助你成为 TypeScript 的尤达大师。

Maximilian Schwarzmüller 撰写的《理解 TypeScript》

打破思维定式：Node.js

什么？它不是后端的吗？！严格来说，它不仅适用于 BE，但我确实想谈谈后端部分。在你的职业生涯的某个阶段，你很可能会想要（或者需要？）尝试后端部分，甚至成为一名全栈开发人员。我上过一些关于这个主题的课程，我最喜欢的一门是由 Andrew Mead 创建的：

Andrew Mead 的完整 Node.js 开发人员课程

没有 REST 适合你：GraphQL

尽管 GraphQL 并非新技术（前端开发领域瞬息万变，很可能本文结束时就会出现一个新奇的框架），但 REST 仍然更受欢迎。但我相信你会想要（或需要）尝试一下。毕竟，正如一位好人曾经说过的：“没有一个理智的人会选择 REST 而不是 GraphQL。” 很难找到关于这个主题的课程还不过时。就目前而言，我认为这个课程相当不错：

Andrew Mead 的现代 GraphQL 训练营（包含 Node.js 和 Apollo）

什么？又是 JavaScript？：难点

正如我之前所说，我们绝大多数开发者在某个时候都必须意识到“我们什么都不知道”。我从心底里喜欢 Will Sentance 的课程，因为他深入探讨了你在第一次学习基础知识时可能忽略的非常重要的主题。作者只用白板来解释概念。我非常喜欢这门课程，甚至在我所在的公司也为实习生开设了类似的课程。这对面试准备很有帮助。

《JavaScript：难点》（作者：Will Sentance）

结论

如果你看过所有提到的课程，我相信你是一位相当不错的专家。在结束之前，我想提一下前端开发者面临的一个陷阱。我们的 JS 世界可能是业内变化最快的世界之一。几乎不可能掌握所有新技术。你可能和我一样，也因此感受到“害怕错过”的恐惧。我最近偶然发现了 Kitze 的精彩演讲，主题是如何“在炒作驱动的前端开发世界中保持清醒”。请享受你正在做的事情，过上平衡的生活。

和平。

再次感谢这些精彩课程的所有作者，也感谢各位读者。欢迎在 Twitter 上关注我@DenisVeleaev。我的博客之路才刚刚起步。希望你们会喜欢。

另外，我想看看您的建议。

荣誉提名

• MongoDB - 完整的开发人员指南
• React Native - 实用指南
• JavaScript 中的设计模式
• 全栈高级 React 和 GraphQL
• JavaScript 算法和数据结构大师班
• NodeJS - 完整指南（MVC、REST API、GraphQL、Deno）