前端开发学习网站：10 个优质学习平台，从零基础到进阶完整路径

我是从零基础自学前端转行的，这条路走了差不多一年。回头看，最庆幸的事就是从对的网站学起，没在垃圾教程上浪费时间。把我这一年用过的、觉得真正有用的 10 个前端学习平台整理出来，按学习顺序聊聊。

先说说前端学习的整体路线，这个很重要，顺序搞错了事倍功半：

HTML --> CSS --> JavaScript --> 框架 --> 工程化 --> 进阶

HTML 和 CSS 差不多一个月能见到效果——你能写出像样的静态页面了。JavaScript 要久一些，两个月打底。JS 高级特性再加一个月。然后选一个框架（Vue 或 React）学一个月。整体五到六个月，每天两三个小时。

MDN Web Docs：前端的权威字典

MDN 不是用来"学"的，是用来"查"的。

这话怎么说呢。MDN 的内容是最权威的——W3C 官方出品，准确到你不需要怀疑。但它不是什么"手把手带你入门"的教程，更像是前端开发者的字典和百科全书。我每次学到新的 CSS 属性或者 JavaScript API，都会去 MDN 上看一遍完整的说明和示例。

HTML 教程、CSS 教程、JavaScript 教程、Web API、最佳实践——每个方向的内容都有。中文版翻译质量也不错，对国内用户友好。

我的使用习惯是：菜鸟教程入门一个概念 --> MDN 深入理解原理 --> 实际项目中遇到再回来查。这样反复几遍，知识就扎实了。

前端开发者的圣经，遇到问题第一反应应该是查 MDN，不是百度。

freeCodeCamp：全球 1000 万人在这里学编程

如果不是从 freeCodeCamp 开始，我的前端之路可能会曲折得多。

它最大的优势不是"教你"，而是"带你做"。不是看视频、看文章那种被动的学，而是直接在浏览器里写代码、看到即时反馈的那种。每一步都有明确要求，过了测试才能继续往下走。

它的前端学习路径分为三个阶段：响应式网页设计（HTML+CSS，300 小时，5 个实战项目）、JavaScript 算法和数据结构（300 小时，5 个项目）、前端开发库（React、Redux、Sass，300 小时，5 个项目）。完成全部 15 个项目可以拿到国际认证的证书。

说真的，这 15 个项目做下来，你的 GitHub 就有东西可以展示给面试官看了。很多公司认这个证书，不是因为它有多权威，而是因为它证明你确实动手写过代码。

零基础入门，这里起步不会错。

菜鸟教程：国内小白的第一站

我知道有些程序员看不起菜鸟教程，说它太基础。但对于纯零基础的人来说，它真的是最友好的入门材料。

讲解简单直白，每个知识点都有例子，还能在线运行代码看效果——你不需要在本 nodejs 环境，直接在网页上改代码就能看到变化，对新手来说这个体验太好了。

HTML --> CSS --> JavaScript 按顺序看，每个例子动手敲一遍，课后习题做完。不会的地方反复看，不要怕慢。我一开始就是靠菜鸟教程把 HTML 标签和 CSS 选择器这些基础搞定的。

纯粹因为简单、管用。

JavaScript.info：最好的 JS 教程，没有之一

入门之后，如果你想真正搞懂 JavaScript——不是会用，而是懂它的运行机制、理解原型链和闭包、搞清楚异步编程——JavaScript.info 是最好的选择。

教程分四大部分：JS 基础（语法、数据类型、函数）、JS 高级（原型、闭包、异步）、浏览器相关（DOM、BOM、事件）、额外专题（正则、网络、动画）。从基础到高级，体系完整。

每个章节都有习题和答案。我那时候每天在 JavaScript.info 上学一节，把答案从头敲一遍，两个月下来 JS 水平突飞猛进。

菜鸟教程入门 JS 之后，必看这个。

Vue.js 官方文档：学 Vue 只用它就够了

不要看乱七八糟的第三方教程！不要看！直接在官方文档上学！

我说真的，尤雨溪亲自参与写的中文教程，质量极高。从零开始跟着教程做，比自己看任何付费课都强。"起步"章节一步步带你搭建 Vue 项目，"教程"章节把每个核心概念都讲透了，"示例"章节给你可以直接用的代码。

直接看官方文档，真的是学 Vue 最快的路径。很多人犯了个错误——搜到网上的二手教程，版本不对不全还可能过时，浪费了大量时间。

学 Vue 的第一件事：关掉那些乱七八糟的收藏夹，打开官方文档。

React 官方文档：2023 年重写之后更好用了

React 的文档在 2023 年经过了一次全新重写，比之前好用太多了。

官方"起步"部分有一个交互教程，边看边练。然后"学习 React"章节把核心理念讲得很透——函数式组件、HOOKS、状态管理。我学 React 的时候就是跟着官方快速入门，然后做一个 TodoList 来练手，效果不错。

有一点要记住：学 React 之前一定要先搞懂 JavaScript 基础。HOOKS 的概念如果你理解了 JS 的闭包和数组方法，会觉得很自然；如果 JS 基础不牢，看 HOOKS 就像看天书。

TypeScript 支持也写进了官方文档。

LeetCode（力扣）：面试必刷，没有例外

前端面试也要考算法，这个事实让很多人意外。但我面过的几家大厂，没有一个不问算法的。

力扣中国版的好处是全中文，不用对着英文题干发懵。2000+ 道题，社区题解质量很高，不用自己想破头。

前端刷题的路线我觉得可以这样走：先刷 50 道简单题（数组、字符串为主），熟练了再刷 50 道中等题（链表、树、动态规划），有时间再挑战困难题。重点——用 JavaScript 写，面试的时候要能手写 JS 方法，这是必考题。

我那时候是每天两道，周末补进度。断断续续刷了三个月，面试的时候确实用上了。

想找前端工作，LeetCode 是绕不过去的坎。

GitHub：看别人的代码是提升最快的方式

GitHub 严格来说不是"学习网站"，但它是前端开发者最好的学校。

看优秀的开源项目代码，模仿别人的写法和项目架构，比看任何教程都有效。我做博客网站的时候，就是先看了 Element UI 的组件代码，学习它的设计思路。

几个值得关注的前端项目：

• 阮一峰的前端学习路线（GitHub 搜"惘畏/前端学习路线"那个 150K+ Stars 的仓库）：内容超级全面，覆盖前端所有方向，适合查漏补缺
• 30 天 JS 挑战（JavaScript30）：30 个不用框架的原生 JS 小项目，做完 JS 功力大涨
• Vue、React（各自的官方仓库）：想了解框架源码时可以看看
• Element UI（Element-plus）：学习组件库设计的优秀范例
• Ant Design：企业级组件库，设计体系很完整

看代码也有技巧：不要一上来就啃核心代码，先看示例和文档，然后跟着 Issue 和 Pull Request 理解开发流程，最后才深入源码。

CodePen：前端创意的游乐场

CodePen 是个在线代码编辑器（HTML+CSS+JS 实时预览），同时也是一个全球创作者社区。

我经常用它来练手小效果——写个 CSS 动画、做个按钮特效、试试新的 Layout 方案。看到社区里有人做了特别炫的效果，我会点进去看源码学习，然后自己重写一遍。

有时候遇到不确定的 CSS 效果，直接在 CodePen 上写几行代码比在本地搭环境快多了。建个小 Demo 分享给别人也非常方便。

B站：视频学习，但要注意方法

B站有很多不错的前端教程。推荐几个我自己看过的：尚硅谷 Web 前端（最系统的视频教程，从零基础到就业全套，讲解非常细致，推荐想转行的同学从头跟）、黑马程序员前端（适合零基础，例子丰富）、技术胖（Vue、React 实战，适合有基础的人专项提升）。

但视频学习有一个严重的坑：光看不练。

我见过无数人收藏了几百 G 的教程，一个也没看完。看视频觉得"懂了"是最可怕的错觉，一写代码就废。我的经验是看 10 分钟视频，停下来写 30 分钟代码。每看完一个小节，关掉视频自己复现一遍，能不能独立写出来才是真正学会了。

不同场景怎么选平台

纯零基础第一步，用菜鸟教程配合 B 站视频。菜鸟教程讲解简单直白，B 站视频能让你看到实际操作过程。

系统学习前端基础，freeCodeCamp 和 MDN 是最佳组合。freeCodeCamp 带你做项目，MDN 帮你查漏补缺。

深入理解 JavaScript，JavaScript.info 是最好的选择。讲得透彻，习题也多。

学 Vue 框架，直接看 Vue 官方文档就够了。尤雨溪亲自参与写的中文教程，质量极高。

学 React 框架，React 官方文档是首选。2023 年重写之后，教程质量提升了很多。

刷算法准备面试，LeetCode（力扣）是绕不过去的。前端面试也要考算法，这个事实很多人不知道。

学习代码和项目架构，去 GitHub 看优秀开源项目。看别人的代码是提升最快的方式。

练习小效果和代码片段，CodePen 很方便。在线编辑器，实时预览，分享也容易。

查 API 和规范问题，MDN 是权威。遇到问题第一反应应该是查 MDN，不是百度。

我的学习时间线

第一个月学 HTML 和 CSS 基础，目标是能还原任意网站的首页。菜鸟教程 HTML 和 CSS 部分从头学完，freeCodeCamp 的响应式网页设计跟着做。每天两小时，每个知识点都动手写代码。月末的时候选一个你喜欢的网站首页试着还原出来。

第二到第三个月学 JavaScript 基础，目标是能用原生 JS 写 TodoList，理解闭包和异步。JavaScript.info 系统学一遍，freeCodeCamp 的 JavaScript 课程同步推进。每天两到三小时，每天至少写 200 行代码，比什么教程都有效。

第四个月学 Web API 和浏览器，目标是能写轮播图、选项卡、懒加载这些常见交互效果。DOM 操作、事件处理、BOM、Fetch API——这部分 MDN 写得最清楚。效果实现不了的时候多去 CodePen 上看看别人的做法。

第五个月选一个框架，目标是能用框架独立完成一个完整的前端项目。建议先学 Vue（官方文档），上手更快。如果对 React 特别有兴趣也行，但建议 Vue 入门再学 React。

第六个月做项目实战和面试准备，目标是两个完整项目上线，LeetCode 刷 100 道上路。项目一定要有 GitHub 地址，最好有线上演示。LeetCode 重点刷数组、字符串、链表相关题，前端的笔试题基本就在这个范围里。

新人最容易踩的坑

坑太多了，说几个我亲历的：

视频依赖症：看视频觉得都懂了，一写就废。解决方法是看 10 分钟写 30 分钟，代码要亲手敲。

教程收集癖：硬盘里几十个 G 的教程，一个也没看完。选一个系统的教程，从头到尾看完做完，比收藏一百个教程有用。

基础没打好就急着学框架：JS 还没搞明白就去学 Vue，结果 Vue 的响应式原理完全听不懂。基础不牢地动山摇。

追求新技术：今天 Vue，明天 React，后天 Svelte，最后哪个都没学精。先把一个学通。

遇到问题马上问别人：遇到 Bug 先自己查 30 分钟——Google、MDN、Stack Overflow。问别人之前先问自己：我查过了吗？