2023最全高质量前端资源分享

75% of my life is programming, 5% is debugging, 10% is sleep, 5% eating meals, 1% socializing, 3% snacking, 1% wondering the meaning of life

写这篇文章的目的在于分享一些个人觉得质量比较高的前端资源，可以减少初学者面对学习资源的信息差，保持输入的是流行和前沿的技术，资源不限于 知名开发者 / 博主，文档，视频，书籍，演示网站，工具 等，除了书籍外，资源都是免费 / 开源的，同时尽量保证资源是支持中英文的 ，如果只有英文但啃得费劲，可以借助类似沉浸式翻译之类的工具提高阅读效率和理解文章。

文字很容易被误解，所以写作时，最好写得友好一点，笔者这里只是抛砖引玉，初探行业的一角，如有未提及的领域，欢迎各位看官在评论区补充其他高质量资源，这样文章也可以持续不断更新。 文章篇幅较长，建议结合目录跳转使用。

题外话

作为一名初入行的开发者，深刻体会到这行业不仅有较高的门槛，即便是入行之后，也需要不断保持学习来适应技术的进步和提高自身的竞争力，以下是个人参加工作以来的一些体会：

问别人前要先问问自己，学会如何提问，不要做伸手党 - 提问的智慧
培养自学能力，没有自学能力的人是没有未来的
代码不能写的太烂吧，不然会被同事鄙视的 (别骂了，别骂了，这坨屎是我写的，大佬带带💔)，感到吃力要及时弥补差距
学习需要持之以恒，半途而废最可耻，先有学习的习惯，再谈学习的效果。想维持长期的热情，需要给自己找到持续的正向反馈。
学好英语，因为先进的生产力工具掌握在英文区，打破信息差

善于发现问题，解决问题, 从问题中成长 是每位开发者需要锻炼的能力，善于使用 Google , StackOverflow ，和 ChatGPT 能帮助你定位和解决许多问题，

如果只会使用某度和某SDN ，值得考虑纠正这种犹如在垃圾堆中刨食的不良行为，它们是污染整个中文互联网的环境的罪魁祸首之一，如果你搜寻一个问题许久都没有答案，不妨换个思路，使用英文在Google上试试，从内心上来说，当然希望中文互联网的氛围能变得越来越好，作为受害者之一，我痛恨中文互联网巨头的不作为，它们绝对不是没有能力整治，但我没有能力改变，只能逃离。至少从目前来说，不要过于期待中文能给你高质量的答案，花点时间学学英文看人家英文的官网会少走很多弯路。

前端学习路线

体系化的知识比零散的更容易记忆和理解

碎片时间适合学习简单孤立的知识点，比如数组某个方法的实现。

学习复杂的知识，需要大段习连续时间，比如 React 的渲染机制。

前端因为上手简单和较短的 feed back loop , 通过编码实现直观的页面能迅速给予你反馈，许多人都选择通过前端来入行，但如果没有系统的学习前端知识的方向, 很可能会原地踏步或停滞不前，所以个人是非常推荐初学者把时间花在系统的学习方法和学习路线上， 因为这样可以分阶段学习并在每个阶段检验自己的成果。

比较主流的学习路线有这些(建议参考，而不是照搬，每个人都有自己的方向)：

这个学习路线没有所谓的最佳实践 ，因为随着技术的不断更新以及不同方向所需要深入的技术和领域不同，它们之间可以是天差地别的。比如都是程序员，但从事 web开发的 和 客户端开发的 以及做 嵌入式的 大多数知识技能是不交叉的，即便都是 web前端，做图形开发/协作软件和写UI的又完全是不同的赛道，哪个路线才是最适合你的，自己应该是最清楚的，而且这个其实网上一搜都大差不差，根据技术品味和实际需要酌情甄选。

前端网站

前面推荐的是主要是阅读为主 的，后半部分则主要是编码练习 为主。因为编程嘛，Talk is cheap. Show me the code, 不敲代码是学不到东西的。推荐的资源也主要是文档和网站为主，主要是视频资源周期比较长，而且前端的技术更新还是比较快的，很容易时效性就失效。

JavaScript

前两者是 React官方 推荐的 2个 JavaScript 教程, 特别是《现代 JavaScript 教程》，对初学者非常友好，也不乏深度，可谓真正地涵盖从入门到高阶。其他的也同样是比较知名且质量得到认可的，非常值得一看。除了阮一峰的ES6外，其他都是英文原著，后人再翻译成中文，也许到这里你或许明白为什么我之前一直在强调英语的重要性，建议有能力阅读英文原版，或者读中文感觉不对劲回去翻看英文，这样能确保准确无误。

javascript.info/ - 中文：现代 JavaScript 教程
 developer.mozilla.org/en-US/ - 中文：Web 开发技术 | MDN
Deep Dive Into Modern Web Development - 中文：全栈公开课
 Microsoft - Web Dev for Beginners - 中文：微软官方 - 初学者的 Web 开发课程
 Google - web.dev - 中文：Google官方 Web 教程 - web.dev
ES6 入门教程 - 阮一峰
 jsconf

TypeScript

TS 的话除了微软官方的文档和 handbook 外，个人觉得最好的 Tutorial 就是 Type-Level ，不过需要付费的，前四章免费，值得上手体验一下，你就能明白我给它这么高评价的原因。中文的话相关的教程还是很多的，官方文档和 handbook 的中文翻译非常滞后，建议阅读英文, 尤其考虑到时效性，就推荐一个相对来说更新时间比较接近的阮一峰 TypeScript 教程。个人更喜好 handbook 一点，查阅非常方便。最后的 TypeScript 类型体操是给那些想对 TS 类型系统有更深刻理解的进阶选手准备的，不适合初学者, 如果暂时不会做，是很正常的事情，不用被打击到。

TypeScript Documentation - 无及时中文
The TypeScript Handbook - 无及时中文
type-level-typescript.com/ - 无中文
TypeScript 教程 - 阮一峰
 type-challenges: Collection of TypeScript type challenges - 中文：类型体操

Node.js

其实就是 JavaScript，不过换了个运行时，有区别的地方再具体看官方文档，因为Node.js 每半年固定发一次大版本，更新速度是比较快的，如果看视频的话要注意版本。

Node.js - 中文：Node.js 中文网
框架：

Vue

官方文档不必多提，主要是加入一些其他进阶相关的文章/书籍。如果是学习框架的话，没有什么比官方文档的说明更详细了。当然，如果你不喜欢看文档，也可以看视频，个人喜好问题，有的人就是看文档学得更快，有的人就是看视频学得更快，无优劣之分，合适就好。但对大多数人来说，视频入门，进阶文档，因为当你知识学习到一定程度，你就会觉得视频啰嗦，明明文档几句话就解释清楚的事情。

vuejs.org/ - 中文：cn.vuejs.org/
其他：

React

react.dev/ - 中文：zh-hans.react.dev/
其他:

文章:

react.gg 以一种可视化互动 的方式学习React, Build Your Own: React 则是手把手带你从0实现React的方式来学习 React/Redux 等，也是质量非常高的互动教程。 React re-renders guide 则是关于 React 重新渲染机制描述得最好的文章，没有之一, 如果啃不动英文可以看拾一大佬关于React性能优化的博客。 React 技术揭秘 则是中文圈内探究 React 底层不可多得的优质材料。

编码练习资源

以下大多数编码练习都可以集成到你的编辑器或者 IDE 中，根据需要自行在插件市场中寻找。

30-Days-Of-JavaScript

非常知名且实用的一个项目，这个项目是免费开源的，且有中英视频版，顾名思义这是一个30天练习javascript的项目，每天花十分钟练习其中一个案例，总计30个，绝对是不容错过的高质量项目。

type-challenges

大名鼎鼎的类型体操了，如果你觉得日常使用 TS 没啥意思却又感觉对类型系统掌握不是信心满满，那么不妨做点体操，感受 TS 图灵完备的类型系统的魅力🤩。

vuejs-challenges

Vue 核心团队成员 @webfansplz 主导的项目，打造了一个 Vue.js 在线挑战平台，内置单元测试，针对练习 Vue.js 每一个对应的知识点，非常适合结合 Vue 文档和 Exmaple 搭配使用。

codewars

Leetcode 主要考察算法，基本针对的是面试题，而如果只是练习日常编码，Codewars 更加合适，从最基本的语言特性题，简单到复杂的算法题，设计模式题，系统设计题，编译器题都有包含，题目非常广泛，而且许多题目都是来自社区原创，也就是实际中工作中会遇到的问题。

综合来说，codewars 更偏实际应用，很多语言特性，最佳实践。LC练习算法更好，更讲究效率。如果你能刷到 3ku，题目难度基本就是 LeetCode 到 Hard 级别。个人也就偶尔刷刷也到 5ku 了，刷题就像闯关一样，还可以和社区互动，还是蛮有意思的。

leetcode

对于大部分场景，前端不需要太过于深入算法，因为真正涉及到算法的地方已经很好地被框架或者库所隐藏，你只需要关注如何使用即可。但如果想去更大的平台发展，即使是前端的岗位，在面试时（甚至每一轮）也会考验一些算法题目。在面试时候，优秀的算法能力能让你在众多候选人中脱颖而出，用力扣的刷题量这一指标来衡量算法能力似乎已成为行业潜规则。

codesandbox

codesandbox 是一个浏览器端的沙盒运行环境，也就是云 IDE，这里有许多别人录制课程分享出来的代码实例，可以直接通过一个链接打开练习。

stackbliz

codepen

没有灵感就逛逛 codepen 绝对没错，学习别人的优秀 Demo ，感叹 CSS/JS 还能这么写！

前端书籍推荐

说实话，我看的书基本都是在学生时代，毕业后前往别的城市工作，实体书没法带走，又不喜欢读电子书，更偏爱阅读纸质书，所以这块的知识可能稍微落后，不过我又重新调研了一下，似乎依然是那些经典书籍，有些只是出了新版稍微更新而已 😂。篇幅有限，不会全部列进来，书评也懒得写了

有些书出版时间比较老，但是有时候阅读学的其中的思想，个人认为还是有阅读的价值的，也可以看到这个行业是怎么样一步步发展到现在的。

《JavaScript 高级程序设计》

《你不知道的 JavaScript》

《JavaScript 权威指南》

《JavaScript DOM 编程艺术》

《JavaScript 忍者秘籍》

《Vue.js 设计与实现》

《图解 HTTP》

UI 库 / 设计

UI 组件库

因为这个选择实在太多了，且不同框架不一定通用，工作中也可能使用内部私有的组件库，这里只是尽可能列举一些社区比较流行的选择而已，个人就不评价了。

icones

icones 是一个具有即时搜索功能的图标资源管理器，拥有数量丰富的图标库，而特别之处在于 icones 可以一键生成 svg 代码 / jsx 代码 / Vue 组件 ..等，无论使用哪个生态都可以接入，好评！

Figma

2022年 Adobe 以 200 亿美元收购 Figma 足以证明它的成功，作为比较，微软 2018 年收购 GitHub 的价格是75亿美元。

作为 web 的传奇， Figma 自然不可缺席。曾经的 CTO Evan Wallace 是 Esbuild 的作者, 而 Figma 作为一个能够多端协同的设计工具，大胆地采取基于Web 的策略。尽管 Figma 是 web 应用，但却不是用 JavaScript 写，而是使用 Rust 编写，再编译成浏览器能理解的 WebAssembly 字节码格式，从而达到接近原生应用的性能。