共计 3388 个字符，预计需要花费 9 分钟才能阅读完成。
我常常会看到很多同学在学习前端的时候比拟迷茫，不晓得到底应该以怎么的学习路线来入门和进阶前端畛域。每次遇到这种问题我也会分享一下本人的学习教训，然而发现这是一个问得十分多的一个共性问题。
作为程序员，必定是不能容忍反复无味的劳动的，因而我就系统地总结分享一下我的前端学习路线，心愿对你可能有所帮忙。
前言
前端学习是一个螺旋回升的过程，既要重复地看书，也要抓紧时间进行实战。只看书，看了就会忘，所以必须将看书和写代码相结合。只有你认真学，入门前端的话三个月左右就能够了。之后我还给出了前端进阶路线，帮忙你晋升前端技能程度。我把前端入门和前端进阶一共分为六个阶段，并对相应阶段所须要的大抵的学习工夫进行了标注。
前端入门
入门前端开发次要须要学习 HTML，CSS 和 JavaScript 三大件。之后学习前端支流框架的应用，并基于已学内容开发一个小我的项目进行实战。当你把这些学习并了解透彻当前，也就算真正地入门前端了。
阶段一：HTML + CSS
前端对于入门者相当敌对，因为开始学习的时候你只须要一个浏览器，举荐 Chrome。HTML 和 CSS 能够间接运行在浏览器中，浏览器就是它们的运行环境。你也能够应用编辑器，举荐 VSCode，这是前端开发应用最多的编辑器。
HTML (HyperText Markup Language) 和 CSS (Cascading Style Sheets) 其实并不是编程语言。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 利用开发》
阶段六：计算机基础知识进阶
编程编程，万变不离其宗，那就是计算机基础知识，算法、数据结构、计算机原理、网络等内容。在这里我只举荐最经典的好书，每一本都是必读书籍。学好这些内容，大厂任你选。
数据结构和算法：
《剑指 offer》
《程序员面试金典（第 6 版）》
《编程之美》
《漫画算法》
《算法图解》
《程序员代码面试指南》
《大话数据结构》
《趣学算法》
《学习 JavaScript 数据结构与算法》
《数据结构与算法：JavaScript 形容》
计算机网络：
《HTTP/2 基础教程》
《HTTPS 权威指南》
《计算机网络：自顶向下办法》
《图解 HTTP》
《图解 TCP/IP》
《TCP/IP 详解》
《UNIX 网络编程》
操作系统：
《深刻了解计算机系统》
《古代操作系统》
《UNIX 环境高级编程》
《The Linux Programming Interface》
总结
至此，你曾经实现了前端开发从入门到进阶，未然成为了一个巨佬，之后再学什么曾经一目了然。心愿我的分享对你有帮忙，如果你感觉有用，能够珍藏本文，并分享给你有须要的敌人。让咱们一起学习，共同进步！
