经常看到很多同学在学习前端的时候很迷茫，不知道在前端领域应该用什么学习路线来入门和进阶。每次遇到这种问题，我都会分享我的学习心得，但是我发现这是一个普遍的问题，问的也很多。作为程序员，不能容忍重复无味的劳动，所以我将自己的前端学习路线进行系统总结分享，希望对大家有所帮助。前言前端学习是一个螺旋上升的过程，既需要反复阅读，也需要实战。如果只看书，看完就会忘记，所以一定要结合看书和写代码。只要你好好学习，前端入门大概需要三个月的时间。之后我也给了一个前端进阶路线，帮助大家提升前端技能。我把前端入门和前端进阶分为六个阶段，并标注了对应阶段大概需要的学习时间。前端入门入门前端开发主要需要学习HTML、CSS和JavaScript。之后学习前端主流框架的使用，根据所学内容开发一个小项目进行实战。当你把这些学习和理解透彻的时候，你就可以真正的入门前端了。Phase1：HTML+CSS前端对初学者非常友好，因为开始学习只需要一个浏览器，推荐Chrome。HTML和CSS可以直接在浏览器中运行，浏览器就是它们的运行环境。也可以使用编辑器，推荐VSCode，前端开发用的最多的编辑器。HTML（超文本标记语言）和CSS（层叠样式表）实际上并不是编程语言。HTML的中文名称是超文本标记语言，其实就是一些标签。CSS中文名称是层叠样式表，就是一些样式的配置。首先学习HTML，非常简单。HTML有很多标签，刚开始的时候不要沉浸在记住这些标签中，你也记不住。你只需要整体浏览一下，知道里面有哪些标签，它们的作用是什么，有个整体印象就可以了。在学习css的过程中，不要剥离HTML的学习。你什么时候明白html的重要性的（从页面开发的角度来说，可以看作是以后实现好的css和js编码的基础，相当于程序中的数据结构，而设计能让你事半功倍），你才称得上是合格的页面开发人员。对于新手，我建议除了布局、盒模型、单元等几个关键概念外，不要花太多的细节，甚至背书背诵，浏览学习才知道有这么个东西，实际应用时再加深记忆。第二阶段：JavaScript学习完HTML和CSS之后，就可以开始学习JavaScript了。这也是一个关键的阶段。JavaScript主要包括三个部分：语言基础（ECMAScript）、DOM和BOM。如果你是初学者，你会想这是什么，怎么返回这三个东西。然后开始学，学了就知道，其实并没有那么难。JavaScript这几年变化很快，但是对于初学者来说，还是要摒弃浮躁的氛围，静下心来打好基础。记住：我是初学者，玩的东西是：JavaScript和jQuery。这些工具仅使用编辑器和浏览器。这些就够了，别的什么都别碰。打好大树的基础之后，就可以开始展开技能树，开始学习前端框架了。目前主流的前端框架主要有React、Vue和Angular。选择哪个框架？可以去知乎或者其他网站搜索，然后根据个人喜好选择。一般选择React和Vue中的一种。React的开发体验更类似于编写原生JavaScript，需要你有良好的JavaScript基础。Vue引入了模板并将许多实现封装到API中。开发需要记住和调用API，因为很多都是封装好的，所以学起来比较容易，但是编程的感觉稍微弱一些。这两个都是优秀的框架。新手不用纠结选择哪个框架。学完一个，另一个就容易学了。如果你不知道选择哪个，我建议你先学习React。前端进阶前端开发入门成功后，就该开始进阶部分了，主要是加深对各种知识的理解，打好计算机领域基础知识的基础，拓展技能树，提高项目开发和宏观把握和调控能力。高级前端需要终身学习，活到老学到老第四阶段：高级语言基础这个阶段是加深对编程语言的理解，阅读更多的高级书籍。进阶必读书籍：《你不知道的 JavaScript 上/中/下卷》：必买书籍，JavaScript的所有疑难问题和知识详解。原版是GitHub上的开源电子书，英文水平高的可以阅读英文原版。《JavaScript 忍者秘籍》：深入讲解JavaScript核心知识点，必买书籍。《了不起的 JavaScript 工程师》：从宏观角度，推荐阅读JavaScript语言和前端工程师需要掌握的一些技能。《JavaScript 函数式编程指南》：学习函数式编程思想《JavaScript 函数式编程》：也是一本函数式编程思想的好书《JavaScript 设计模式》：学习JavaScript设计模式，推荐阅读《JavaScript 设计模式与开发实践》：另一本同等分量的设计模式书籍，推荐阅读《锋利的 jQuery》:jQuery现在很少用了，除非是很老的项目或者写小东西。但是这本书值得买。你可以学习到jQuery的优秀思想和它的源码，对你的进阶很有帮助。第五阶段：高级框架和学习边界通过第三阶段后，你已经掌握了前端框架的基本使用和开发一个完整项目的过程。然后在框架和学习边界的进阶阶段，可以：学习围绕框架的生态，社区总结出来的优秀组件，各种好用的工具库。自己造轮子，用框架搭建自己的开源项目，学习Webpack、Gulp、Babel、ESLint等工具的用法、思路和原理，带着问题阅读框架源码，学习性能优化，养成良好的编程习惯，并扩大技术边界。学习Node.js等后端相关技能...推荐阅读书籍：下面推荐的书籍都是比较知名的书籍。你可以根据你的技能树选择你需要阅读的书籍。这不是逐字阅读整本书，而是从每本书中学习你需要的东西。很多都是非常有名的好书，如果你有精力，不妨买来好好研究一下。Webpack相关:《深入浅出 Webpack》《Webpack 实战：入门、进阶与调优》React相关:《深入 React 技术栈》《深入浅出 React 和 Redux》《Redux 实战》《React 学习手册》《React 快速上手开发》《React 设计模式与最佳实践》Vue相关:《Vue.js 实战》《Vue.js 开发实战》《深入浅出 Vue.js》《Vue.js 权威指南》《Vue.js 从入门到项目实战》《Vue.js 前端开发基础与项目实战》《Vue.js 项目开发实战》《Vue.js 快速入门》《Vue.js 前端开发》Node.js相关:《狼书卷1》《狼书卷2》《Node 学习指南》《了不起的 Node.js》《深入浅出 Node.js》《Node.js 实战》《Node.js 开发指南》《Node 即学即用》《Node 与 Express 开发》样式和布局相关:《Bootstrap 实战》《Bootstrap 用户手册》《响应式 Web 设计：HTML5 与 CSS3 实战》性能相关:《Web 性能权威指南》《高性能网站建设指南》PWA相关:《PWA 开发实战》《PWA 实战：面向下一代的 Progressive Web APP》其他:《SVG 精髓》《深入理解 SVG》《前端架构设计》《重构：改善既有代码的设计》《同构 JavaScript 应用开发》Phase6:Basiccomputerknowledge,advancedprogramming,andprogrammingalwaysthesame,即计算机基础知识，算法，数据结构，计算机原理，网络等。这里我只推荐最经典的书籍，每一本都是必读。学好这些内容，大厂就是你的选择。数据结构和算法：《剑指offer》《程序员面试金典（第 6 版）》《编程之美》《漫画算法》《算法图解》《程序员代码面试指南》《大话数据结构》《趣学算法》《学习 JavaScript 数据结构与算法》《数据结构与算法：JavaScript 描述》计算机网络：《HTTP/2 基础教程》《HTTPS 权威指南》《计算机网络：自顶向下方法》《图解 HTTP》《图解 TCP/IP》《TCP/IP 详解》《UNIX 网络编程》操作系统：《深入理解计算机系统》《现代操作系统》《UNIX 环境高级编程》《The Linux Programming Interface》综上所述，你完成了前端开发，从入门到高级，你已经成为了一个巨人，之后你就知道该学什么了.希望我的分享对你有所帮助。如果觉得有用，可以将本文收藏为书签，分享给有需要的朋友。让我们一起学习，一起进步！
