先附上一张网上广为流传的前端知识体系图：前端知识体系
 
从大图中我们总结出：
 
 
 
优秀的Web前端开发工程师 要在知识体系上既要有 广度 和 深度！应该具备快速学习能力。
 
 
前端开发工程师 不仅要掌握基本的Web前端开发技术，网站性能优化、SEO和服务器端的基础知识，而且要学会运用各种工具进行辅助开发以及理论层面的知识，包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持等。
 
 
 
前端工程师至少都要满足四类客户的需求：
 
 
　　1、产品经理。这些是负责策划应用程序的一群人。他们会想出很多新鲜的、奇怪的、甚至是不可能实现的应用。一般来说，产品经理都追求丰富的功能。 
 　　2、UI设计师。这些人负责应用程序的视觉设计和交互模拟。他们关心的是用户对什么敏感、交互的一贯性以及整体的好用性。一般来说，UI设计师侯倾向于流畅靓丽、但并不容易实现的用户界面，而且他们经常不满前端工程师造成 
 1px 的误差。 
 　　3、项目经理。这些人负责实际地运行和维护应用程序。项目管理的主要关注点，无外乎正常运行时间、应用程序始终正常可用的时间、性能和截止日期。项目经理追求的目标往往是尽量保持事情的简单化，以及不在升级更新时引入新问题。 
 　　4、最终用户。指的是应用程序的主要消费者。尽管前端工程师不会经常与最终用户打交道，但他们的反馈意见至关重要。最终用户要求最多的就是对个人有用的功能，以及竞争性产品所具备的功能。
 
 
好了，列举了这么多…… 你真的还想学前端么？不后悔吧？ 如果真的做好了准备的话，哈哈，那我们就一起享受学习前端的乐趣吧！
 
一、基础
 
想成为前端开发者应该先打好基础：
 
HTML > CSS > JavaScript > jQuery >。。。> GitHub
 
 
 
不要担心以后会做什么决策，先好好深入学习。 
 在增值的方向上投资自己，才是最明智的。
 
 
学习了HTML、CSS就可以实现一些静态页面，不只是简单的静态页面，应该是稍微复杂一些绚丽一点的页面。
 
推荐书籍：《CSS禅意花园》
 
二、JS
 
JS可以跟着以下几张思维导图学习（听说是一位名为“王子墨”的大师做的图）：学习 Javascript 首先要知道这门语言可以做什么，不能做什么，擅长做什么，不擅长做什么！
 
1.JS变量 
 
 
2.JS运算符 
 
 
3.JS数组 
 
 
4.JS流程语句 
 
 
5.JS字符串函数 
 
 
6.JS函数基础 
 
 
7.JS基础DOM操作 
 
 
8.JS正则表达式 
 
 
9.JS数据类型 
 
 
深入了解Javascript，需要了解 Javascript 的原理，机制；需要知道他们的本源；需要深刻了解 Javascript 基于对象的本质；还需要深刻了解浏览器宿主下 的 Javascript 的行为、特性。他也有很多缺点，各个宿主环境下的行为不统一、内存溢出问题、执行效率低下等问题，需要深入了解、学会处理这些缺陷。
 
推荐书籍：
 
　　初级： 
 　　《JavaScript高级程序设计》 
 　　《JavaScript王者归来》 
 　　 
 　　中级： 
 　　《JavaScript权威指南》 
 　　《JavaScript.The.Good.Parts》Douglas Crockford 
 　　《高性能JavaScript》：Nicholas C. Zakas 
 　　《Eloquent JavaScript》： 
 　　 
 　　高级： 
 　　《JavaScript Patterns 》 
 　　《Pro.JavaScript.Design.Patterns》讲解JavaScript设计模式 
 　　《Developing JavaScript Web Applications》：构建富应用的好书，针对MVC模式有较为深入的讲解，同时也对一些流程的库进行了讲解。
 
三、后端语言
 
如果单纯只是学习前端编程语言、而不懂后端编程语言（Java、PHP、ASP.NET，JSP、Python），也不能算作是优秀的前端工程师。
 
四、学习方法建议
 
1.限制一次学习的量，并且不断地实践——实际编写代码。
 
举个例子：就像学习数据结构一样，我有个同学A学习数据结构单纯的把书带到图书馆去看，我问A为什么不带电脑，A回答说光是看就已经看不懂了。能发现问题么？有时候我们可能看不懂代码，但是动手敲一遍可能会更认真的跟着代码的思路走一遍，在运行出来结果或者跟着调试的时候 
 才会恍然大悟！喔喔！原来是这个样子的！同学A数据结构学了好几遍都没有学好，而另外一个同学B却对数据结构十分熟悉、笔试面试几乎难不倒他，他跟我分享学习经验的时候就告诉我，一定要动手敲！而且不止要敲一遍！
 
——这也是很多人会走弯路，而很多人只会走捷径的关键。
 
2.用正确的心态去做练习，当成玩耍或者游戏。
 
3.写代码的时间魔法，先告诉自己只写10分钟，然而就会陷进去乃至一下午。
 
4.思考得更慢，学得更快。就像你在去理解别人的代码的时候一样，不要漏掉任何一行！
 
5.首先用简明的语言来写复杂的代码。这是一种锻炼！
 
6.定期定目标，每天都看看，想想，保持敏感、紧迫感、期待感。
 
7.记笔记：
 
学习过程中搜集的资源链接；
遇到的未决的疑问；
那些很宽而我们用的很窄的知识点；
那些能进一步深入而我们浅尝辄止的知识点；
某个功能可能存在的其它实现方案的蛛丝马迹
 
 
还有些好书：
 
《Developing Large Web Applications》：不仅有JavaScript方面的介绍，还有CSS、HTML方面的介绍，但是介绍的内容却都非常不错，真正考虑到了一个大型的Web程序下，如何进行JavaScript架构设计，值得一读。　
《高性能网站建设指南》
《Yahoo工程师的网站性能优化的建议》
《网站重构》
《Web开发敏捷之道》
 
 
 
　　最好的资料就是某项技术的官方SDK，一般技术都有文档，API，Quick Start，Guide，Tutorial，Demo，Example……结合书看效果最好。
 
 
其他：
 
“YSLOW”性能优化建议
“ jQuery 库”
“前端框架”
“HTML5”
“CSS3” 深入研究
 
这儿还有不知道自己何时收藏的“前端有关的语言”: 
  
 
 
网站：
 
前端大神 
 A Single Div 
 腾讯ISUX 
 WEB开发者 
 SegmentFault
 
 
 
有经验的人，新学一门技术，就要努力放空自己，让自己归零，这样会比较容易学进去，坚持下来。坚持最重要！
 
 
 
参考： 
 更快学习JavaScript的6个思维技巧 
 怎样新学一门技术 
 如何成为优秀的前端工程师

前端学习路线是螺旋上升的，前端学习需要耗费的时间和精力不比其他编程的少，由于前端稳健性的特点，使其成为大多数企业开发的刚需编程语言。
 
在网上看到有很多的前端学习路线图，但大部分的前端学习路线图是很零碎的，没有系统的前端学习目标和重点知识，也不知道学到什么程度可以找工作。黑马程序员的前端学习路线图是根据主流企业的前端要求不断更新的，黑马程序员的视频库能为你提供各个阶段的自学教程。
 
前端入门小白在网上搜到前端学习路线图后，傻了，要学习这么多，也没有重点，算了放弃吧。小白也不知道目前哪些技能是市场需要的，哪些技能正在被市场所淘汰掉。在学习的过程中没有重点，就像大学期末考试老师没有划重点一样，经常是芝麻豆子一把抓。
 
企业对于前端人才最核心的需求并不是对单纯掌握某种应用型技术，而是希望前端开发者能够通过自己的经验帮助企业解决项目中随时出现的问题。
 
 
根据二八定律，我们应该用80%的有限精力去学20%的重点知识，这样学习效果是最优的。话不多说，上学习路线图。
 
 
第一阶段：HTML5 + CSS3
 
此阶段的学习目标：
 
能够独立把美工提供的PSD效果图还原成PC端静态代码页面。
 
此阶段的市场价值：
 
具备PC端静态网页开发的能力，还达不到企业用人标准。为后面学习网页编程阶段打下坚实基础。
 
此阶段的重点知识：
 
掌握 HTML5 常用标签；
掌握 CSS 语法及使用技巧；
掌握CSS3新增选择器；
掌握CSS3新增样式属性；
掌握 DIV+CSS 布局方式；
掌握常见网页布局技巧；
掌握企业级、电商级网页开发基本的流程、规范；
掌握语义化、模块化、兼容性的PC端网页开发；
掌握 Photoshop 切图以及插件切图；
熟练使用调试工具进行页面调试；
掌握基本的动画效果。
 
第二阶段：移动Web网页开发
 
此阶段的学习目标：
 
能够独立开发移动端页面，并适配不同移动端终端。
 
此阶段的市场价值：
 
具备移动端页面开发，但是还不能达到企业的用人标准。为后面学习网页编程阶段打下坚实基础。
 
此阶段的重点知识：
 
掌握CSS32D、3D变换、动画效果；
了解移动端屏幕、移动端浏览器、操作系统的不同；
掌握主流移动端调试方法；
掌握常用移动端适配方案（流式布局、flex布局、rem适配）；
掌握主流移动端页面开发技术选型与解决方案；
掌握CSS预处理器less的使用；
掌握常用移动端框架使用方法；
掌握常见移动端页面开发流程与规范；
掌握响应式布局开发；
掌握Bootstrap开发响应式页面；
掌握适配不同终端的移动端页面开发。
 
第三阶段：JavaScript网页编程
 
此阶段的学习目标：
 
能够使用JavaScript/jQuery开发网页特效/网页应用。
 
此阶段的市场价值：
 
具备网页开发的基础能力(网页布局和网页应用开发)，但是无法和服务器交互，还达不到企业用人的标准。
 
此阶段的重点知识：
 
掌握JavaScript基本语法；
掌握常见JavaScript算法；
掌握DOM的各种操作；
熟练使用面向对象思想进行DOM编程；
掌握JavaScript的高级语法；
熟练使用jQuery操作DOM；
熟练使用和编写jQuery插件；
独立完成电商网站的页面搭建（包括HTML结构、CSS样式、JavaScript特效）；
掌握应对业务编程的能力；
掌握JavaScript常见兼容性方案；
掌握团队合作开发流程。
 
第四阶段：Node.js与AJAX
 
此阶段的学习目标：
 
能够具备开发具有简单交互能力的网站，能够使用源代码管理工具。
 
此阶段的市场价值：
 
具备基本的网站开发能力，满足企业对初级前端开发的要求。
 
此阶段的重点知识：
 
能够建立客户端服务器交互模型，熟悉网络通信相关概念；
能够使用Node.js进行Web服务端开发；
能够掌握JavaScript异步编程模型；
能够掌握JavaScript模块化编程方式；
能够使用Node.js操作MySQL数据库；
能够理解HTTP协议；
熟悉原生Ajax请求流程与细节，并掌握常见跨域技巧；
能够基于jQuery的Ajax相关API熟练开发常见的前端功能；
能够独立开发基于后台接口的动态网站、Ajax数据交互的项目；
能够独立完成企业网站从前台到后台的基本开发工作。
 
第五阶段：Vue.js项目实战
 
此阶段的学习目标：
 
使用Vue技术栈开发企业级项目
掌握前后端分离的开发方式
掌握项目的打包和发布
 
此阶段的市场价值：
 
理解Vue的开发理念、内部运行原理，梳理使用Vue组件开发常见功能。满足前端开发行业中的常见需求。
 
此阶段的重点知识：
 
掌握使用Vue技术栈进行项目开发；
掌握源代码管理工具的使用；
熟练掌握前后端分离开发模式；
掌握使用主流框架开发门户网站、管理系统、移动Web等客户端；
掌握Webpack项目构建配置流程；
掌握Web项目的部署与发布模式；
掌握常见网站业务模块开发。
掌握使用echarts/d3.js进行大数据可视化交互开发；
 
第六阶段：微信小程序
 
此阶段的学习目标：
 
掌握整个小程序开发和传统web开发的区别；
掌握企业小程序开发、发布和上线的整体流程；
拥有解决和实现市场上主流小程序的功能需求。
 
此阶段的市场价值：
 
掌握前端行业的小程序发展趋势，熟悉小程序项目的整体运作流程，并且具备独立开发企业级小程序的能力，既可以使用原生小程序也可以使用小程序框架来完成项目。
 
此阶段的重点知识：
 
掌握小程序的开发基础；
能够独立开发小程序项目；
掌握小程序的部署与发布；
掌握微信支付的使用；
掌握小程序开发框架的使用；
掌握第三方AI平台的使用。
 
第七阶段：React.js项目实战
 
此阶段的学习目标：
 
具备使用React开发能力，配合React内部原理，增强解决项目中复杂业务问题的能力，从项目搭建到项目开发再到项目部署上线，让学员可以完成常见企业级项目的开发。
 
此阶段的市场价值：
 
理解React的开发理念、内部运行原理，熟练运用React组件完成项目常见功能开发，配合常用组件库解决项目中的一些共性问题，满足前端开发行业中的常见需求。
 
此阶段的重点知识：
 
理解React的开发理念；
掌握React的基本使用；
理解React的内部原理；
使用React及其常用组件库进行项目开发；
使用React封装项目中用到组件实现复用；
掌握React项目中常见问题的解决方案；
掌握React-Redux进行状态管理；
掌握声明式编程的思想；
掌握组件化开发的思想；
掌握React项目优化、部署。

 
 

 
互联网时代，只要公司有开发互联网产品的需要，包括网站、网页、H5、小程序、APP等，就一定少不了前端开发工程师岗位。如今的“大前端时代”，前端也已不限于传统PC端和移动手机端，随着VR、可穿戴设备、车载系统、智能投影等设备的出现， Web前端直接进入了各个垂直领域，前端开发将有更⼴阔的发展空间。

 

 
那么该如何学习前端技术呢？网上攻略很多，本文从自学前端该阅读什么书的角度为你解惑。首先送上前端学习阅读路线图：
 

 
高清大图下载：关注华章计算机，在后台对话框回复前端
 
章老师口解版
 
夯实前端基础
 
入门前端开发主要需要学习 HTML，CSS 和 JavaScript 三大件。之后学习前端主流框架（React/Vue）的使用，并基于已学内容开发一个小项目进行实战。当我们把这些学习并理解透彻以后，就算入门前端了。
 
 
 
阶段一：HTML + CSS
 
前端对于入门者相当友好，开始学习的时候只需要一个浏览器。HTML 和 CSS 可以直接运行在浏览器中，浏览器就是它们的运行环境。我们也可以使用编辑器，推荐 VSCode，这是前端开发使用最多的编辑器。
 
 
 
对于初学者，在这个阶段最适合系统的去学习基础知识，首先就是把前端三大件HTML+CSS+JavaScript的基础教程学完。这“三大件”是每个前端人都逃不开的，下面这本书可以帮我们快速搞定HTML、CSS，以及初识JS：
 
 
 
《Web前端工程师修炼之道（原书第5版）》
 
想零基础入门前端？从这本书开始吧！阅读本书不需要任何预备知识。不需要以前制作过网页，也不需要知道在哪里可以获得代码编辑器。本书从头带你学前端！是一本完整的Web 设计（网站的视觉设计）和开发（网站的前台代码实现）的“敲门砖”：包含Web开发的重要概念、基本原理，HTML、CSS和JavaScript的具体使用方法与技巧，以及Web图像制作等。
 
Web前端开发敲门砖 ——《Web前端工程师修炼之道》
 
阶段二：JavaScript
 
前端三大件中JavaScript是重中之重。JavaScript是Web前端之本，也是进阶全栈的基石。它的知识点非常繁杂，是前端开发知识体系中比较难的区域。
 
 
 
对JavaScript理解的深度决定了未来的发展前景。这就很需要一本大而全的书来巩固JS知识，帮我们更好的深入理解JS。那该如何全面掌握JavaScript的知识呢！自然是绕不开前端圈公认的两大宝典之一的“犀牛书”。 
 

 
《JavaScript权威指南 原书第7版》
 
犀牛书”凭着完整的内容、细致的讲解以及海量针对性的示例而受到读者的一致好评，已经成为JavaScript程序员心中公认的权威指南。这本巨著主要讲述的内容涵盖JavaScript语言本身，以及Web浏览器所实现的JavaScriptAPI。初学者读完本书，将会对JS有全面的认识，快速掌握JS最核心的技术。而有经验的开发者读完本书，会让你对JS的理解有从量变到质变的深层次飞跃。如今，全球畅销25年的JS犀牛书全新升级，新版涵盖了ES2020特性，同时删去了已过时的内容。
 
大咖发声 | 聊聊火爆前端圈的“犀牛书”
 
新版犀牛书该不该入手？来一次开箱评测！
 
值得注意的是，作者在前言中已经明确指出了本书的适读人群：
 

 
所以，犀牛书不是一本零基础入门的书，如果阅读犀牛书时感到吃力，又不想“从入门到放弃”那么不妨先阅读前面那本《Web前端工程师修炼之道（原书第5版）》。
 

 
（感谢掘金原创作者--清秋制作导图）
 
JavaScript的基础知识点非常多，新版犀牛书即使瘦身后还有600页！在入门阶段，我们不需要将整本书一字不差地看完，只需要抓住几块核心内容，将它们快速过一遍就行，太细节的内容不用记，等之后工作中遇到问题了再回来查找。
 
PS：新版犀牛书删去的知识点（如Jquery）都是已过时的内容，可以不用学；新版犀牛书增加的内容（如Node.js、迭代器、生成器、异步、元编程 等）则是必须掌握的。
 
阶段三：入门前端框架
 
学完前端三大件，打好了大树的根基，并不算真正入门，因为前端工程师不能只靠每天写页面过日子。
 
 
 
我们需要开始扩展技能树了：学习前端框架。目前国内企业主流的主要是两大框架：Vue和React。这两个框架的官方文档上有详细的讲解。
 
Vue网址：https://cn.vuejs.org/；React网址：https://react.docschina.org/。新人不必纠结于选择哪个框架，学了一个，另一个也很容易学。看官网文档太枯燥？推荐一本入门+实战书籍：
 

 
《Vue.js入门与商城开发实战》
 
本书主要面向Vue.js的初级入门者，涵盖详细的理论知识、布局分析和逻辑分析。并带你完成一个小项目实战：使用Vue.js和JavaScript的基础知识构建一个完整的Vue商城。
 
VUE.js入门与商城开发实战
 
至此我们已经成功入门前端开发了。以上都学差不多了，就可以找一些算法题，例如 LeetCode，找一些自己感兴趣的项目，找一些大厂面试题，学起来做起来，不断巩固自己知识的掌握程度。

 
阶段四：TypeScript
 
近几年随着TypeScript越来越热，现在已是是前端工程师在进阶路上必备的技能了。在GitHub2020年度项目活跃度语言分布上显示，TypeScript的排名已经跃居第三位。随着Vue3的发布，我们可以看到Vue、React都在朝TS靠拢，未来几年，TS将会是前端工程师绕不开的话题，这也将会直接体现在企业的前端招聘需求中。
 

 
TypeScript从入门到进阶
 
入门：《TypeScript入门与实战》适合正在考虑使用或已经开始使用TypeScript的读者阅读，系统、全面介绍TypeScript编程语言的基础知识及应用，从基本语法到类型系统，从参数配置到工具集成，包含大量示例代码。
 
进阶：《TypeScript项目开发实战》是一本TS进阶实践指南，通过9个实用项目，详细讲解如何使用TS和不同的JS框架开发高质量的应用程序。书中不仅介绍TS的核心概念与技术，还涵盖Angular和React的一些新功能，以及GraphQL、微服务和机器学习等相关的新技术。
 
阶段五：Webpack

 
从前那种直接在JS中写脚本。通过src嵌入到页面，然后按F5刷新页面查看结果的开发方式已经渐行渐远，如今选择一款合适的编译和资源管理工具已经成为了所有前端工程中的标配，而在诸多的构建工具中，Webpack以其丰富的功能和灵活的配置占据了垄断地位。不管使用哪种框架，都会用到它。如果是在小厂，在官网文档学会使用已经配置好的Webpack就可以应付工作中的难题。Webpack网址：https://www.webpackjs.com/
 
但如果目标是进大厂，仅仅会使用还远远不够，还要懂得如何优化Webpack。
 

 
《Webpack实战：入门、进阶与调优》
 
这是一本能指导读者零基础快速掌握Webpack并轻松进阶的实战性著作。作者在Webpack领域有深厚的积累，是知名开源打包工具YKit的主导者和核心开发者。本书从功能特性、工作原理、应用实践、性能优化4个维度对Webpack进行了全面的讲解，内容上尽力避免了网络上已经公开发表的各种资料和文档，而是从作者的实际经验出发，将更有价值的内容呈现给读者，尽量帮助读者少走弯路。

 
学习热门技术

 
此时我们便可以开始触类旁通，学习热门技术，加强实践水平。在深入学习的同时，也可以探索自己感兴趣的方向，哪里不会补哪里，为求职面试打好基础。

 
 
 
由于前端开发的入门门槛相对较低，与服务器端语言先慢后快的学习曲线相比，前端开发的学习曲线是先快后慢。经过初级接触后，深度学习成为必然，《JavaScript权威指南》需要一直放在案头，随时翻阅。
 
 
 
1、WASM
 
伴随着WebAssembly核心规范成为WorldWide Web Consortium (W3C) 的标准，继HTML、CSS和JS之后，像C/C++、Rust、Go等语言编写的高性能模块也在浏览器上运行。相信在不久的将来，Web应用的桌面客户端化，也将成为一种趋势。
 

 
《WebAssembly原理与核心技术》
 
本书是WebAssembly入门和进阶的必读书，它不仅对WebAssembly的工作原理、核心技术和规范进行了全面的剖析和解读，而且给出了实现WebAssembly解释器和AOT编译器的思路和代码。
 
WebAssembly及其 API 的完整介绍
 
2、Electron 
 
控制技术栈的复杂度，一直以来都是许多开发者和项目管理人员的追求。Electron 为我们提供了一种舒适且优雅的方案，只需要使用熟悉的开发工具、熟悉的 Web 开发语言和框架，就可以轻松开发跨平台桌面应用。
 

 
《Electron实战：入门、进阶与性能优化》
 
以实战为导向，讲解了如何用Electron结合现代前端技术来开发桌面应用。不仅全面介绍了Electron入门需要掌握的功能和原理，而且还针对Electron开发中的重点和难点进行了重点讲解，旨在帮助读者实现快速进阶。

 
 极客手中的利器Electron
 
3、WebRTC音视频
 
由于直播行业的火热，以及疫情的影响，音视频技术急速发展。在前端领域，WebRTC技术持续升温，下面两本书帮我们低学习门槛，快人一步掌握WebRTC技术：
 

 
《WebRTC从入门到进阶》
 
入门：《WebRTC技术详解：从0到1构建多人视频会议系统》详细讲解了WebRTC规范和全部API、信令系统、底层技术、移动端和服务端实现，总结了作者多年来的“踩坑”经验，助你快速入门并实战。
 
进阶：《WebRTC音视频实时互动技术：原理、实战与源码分析》深入刨析WebRTC技术原理、架构、工作流程和源代码，通过实例帮你深入理解WebRTC实现机理和应用开发方法。
 
WebRTC技术详解
 
WebRTC音视频实时传输与服务质量
 
4、低代码
 
前端开发工程师们对于如何提高研发效率也是各显神通。其中通过图形化的界面“拖拉拽”即可生成网页应用的低代码概念更是炙手可热。很多结构简单，大量重复的页面，可以通过低代码平台快速搭建，大幅减少重复劳动。
 

 
《实战低代码》
 
本书系统讲解了低代码平台的能力、价值、应用场景和实操方案，旨在帮助行业、企业及每一位数字公民快速理解低代码平台的核心价值，并实现数字化转型。

 
数字化转型时代！你一定要了解的低代码
 
计算机基础知识

 
前端技术发展日新月异，练好“内功”才能走的更远。想快速进阶到高级工程师、全栈工程师，对于计算机基础的知识(如操作系统、数据结构、算法、设计模式等）我们就要又有一定的了解。为了能更加深入的理解前端，建议从这本书开始：
 

 
《深入理解计算机系统》
 
本书是从程序员的角度来撰写，讲述应用程序员如何利用系统知识来编写出更好的程序。它告诉我们计算机是如何设计和工作的，操作系统有哪些重点，它们的作用又是什么。CSAPP的目标其实便是要讲清楚原理，但并不会把某个话题挖掘地过于深入，过于细节。看过这本书后，我们就可以对计算机系统各组件的工作方式有了理性的认识。在一定程度上，其实它是在锻炼我们的思维方式 -- 计算思维。

 
《深入理解计算机系统》漫游指南
 
前端知识体系繁杂，像小程序、React.js/Vue.js、ReactNative、Flutter框架、自动化测试、Serverless 等，都可以在实际工作中不断学习，这里就不一一介绍了。
 
如果你的目标是成为一名全栈工程师，像数据库、Linux 和 Nginx 这些知识也得掌握。 在 Node.js 出现之前，PHP 是很多前端工程师开发后端应用的首选，相比 Java、.Net 或 Golang 等语言更容易上手。对于想成为全栈工程师的前端开发者来说，PHP 仍是一个不错的选择。
 

 
《PHP和MySQL Web开发（原书第5版）》
 
这是一本经典全球畅销的软件开发宝典，书中内容丰富完备，用例简单实用。既包括PHP语言的基础知识和编程技巧，又包括MySQL数据库的使用基础和实战沉淀。对于开发安全的、适用于全球用户的Web应用来说，是一本不可多得的宝典。
 
结语
 
真正拉开我们与周围人之间差距的，是自学能力！希望看到这篇文章的朋友，都可以在前端开发学习路上找到自己的方向，越走越远，征服属于自己的星辰大海！
 

 


 
扫码关注【华章计算机】视频号
 
每天来听华章哥讲书
 

 
更多精彩回顾
 
书讯 | 9月书讯 | 秋天的第一本书，来了
 
资讯 | 什么是Serverless？有哪些应用？终于有人讲明白了
 
书单 | 10本书，帮你看清未来的科技趋势
 
干货 | Linux30岁生日：Linux 成功的真正原因
 
收藏 | 终于有人把Scrapy爬虫框架讲明白了
 
上新 | 【新书速递】“帆船书”——数据库领域殿堂级作品，全新升级第7版！
 
赠书 |【第70期】终于找到了！AI学习路线图——从零基础到就业
 
 

本人零基础已经顺利实现转行前端，很多人问我前端学习线路图是什么样的，这里分享给大家，希望能帮到你们。
 一、基础
 1、学习HTML基础
 
HTML给你的网页赋予了结构。它就像是人的骨架那样让你保持站立。首先你需要去学习语法以及它必须提供的一切。你的学习应该聚焦在下面这些东西上：
 
学习HTML基础，了解如何编写语义HTML理解如何把网页分成section（段落），以及如何正确组织DOM（文档对象模型）现在很多html5的新标签也很有用，需要进行了解
 
实践建议：
 一旦你学习了HTML基础，至少要制作5个HTML网页。我建议你随便找一个网站，比如看看Github的档案页或者Twitter的登录页。然后把焦点放在恰当地组织内容上。出来的东西可能会很难看，但是暂时别担心，把你的关注点放在恰当的结构上。
 2、学点CSS
 
现在我们已经学会了如何给网页准备好骨架，接下来就是在此基础上添加一些皮肤让它好看一点了。CSS——级联样式表就是用来美化你的HTML页面的。
 
首先要做的是学习语法，熟悉常见的CSS属性。了解盒模型（box model），掌握如何利用Grid和Flexbox准备布局一旦学习完上面的，再学习以下通过媒体查询把网站做成响应式的。
 
实践建议：
 一旦你掌握了基础，接下来就应该设计上一步制作的HTML网页。比方说如果你给Github档案编写了HTML页面的话，现在是时候应用CSS来让它的样子看起来像实际的Github资料页面一样了。前面的那5个页面都要拿来试一下。
 3、学习JavaScript基础
 
JavaScript能让你的HTML页面互动性更强。比方说你在网站上看过的所有那些幻灯片、弹出窗口以及广播通知，以及在没有重载页面的情况下重载页面的特定部分，这些都是用JavaScript做的。在这一步中，你将会学习JavaScript的基础来为后面的旅程做好准备——
 
学习这门语言的语法和基本机构。学习如何用JavaScript来操纵DOM，比方说如何从页面移除一些元素，如何增加一些元素，增加和移除类，通过JavaScript应用CSS样式等。完成之后再学习和理解诸如范围、闭包、变量提升以及事件冒泡这样的主题。学习如何用XHR或者Ajax生成HTTP调用。Ajax可以让你在不需要重载网页的情况下执行特定动作。学完之后接下来就要了解ES6+的所有新特性。ES6只是JavaScript的一个版本，里面给这门语言引入了大量有趣的更新，比如类、定义变量的多种方式，给数组增加了新的方法，字符串连接等。你们在网上找到的大部分文章都会用Babel来解析ES6，这其实是个转译器，可以将这门新的JavaScript转换为旧的JavaScript，因为有一些旧版的浏览器不支持新版的JS。不过现在先不用担心Babel，只需要了解相关概念，然后用到任何一种支持ES6的最新版浏览器上来练习一下就行。
 
现在你应该已经感觉到东西像是那么一回事了。如果你按照上面的步骤做下来的话应该鼓励一下。这些是你刚刚学到的一些最重要的东西。
 
我应该学jQuery吗？
 
曾经有一段时间每个人都对jQuery疯狂，也有充分的理由；这是一个强大的库，在JavaScript基础上提供了一个封装，让你可以用兼容浏览器的方式执行任何东西。不过那些日子已经一去不复返，现在新项目用它已经不是很多了，但是仍然还有人在用。所以其实jQuery对我们最大的用处其实看源码，它对与dom的操作和交互的源码其实对我们写js代码是有很大的启示作用的。
 
实践建议：
 你可能随时都会感觉自己已经理解了但是如果不练习的话很快就会忘掉。在按照这份路线图去学习的时候，要确保尽可能多地去上手实践。
 
继续做些响应式网站，用JavaScript增加交互性。你可以添加任何感兴趣的现有的网页上去，但记住要利用上目前学到的一切。
 
一旦你制作出了一些网站，接下来就是开始做真正的东西了。你可以到github上面找一些项目打开某些开源项目的pull请求。以下就是一些可以去尝试的pull请求：
 
增强UI，把任何演示页做成响应式或者改进设计看看有什么开放的issue是你能够解决的重构任何你认为自己可以改进的代码
 
4、其他
 
在学习基础内容之后，还需要了解一些技能，主要如下：
 
chrome浏览器的控制台调试，这个将会大大方便修改代码观察前后台交互选择适合的ide,一般来说使用的有sublime,vs,webstorm,vscode等，还有各种配合编程的插件学会git的基本操作，如果想简单也可以用git的GUI版本，但其实学会git的基本命令行很有用
 
二、进阶
 1、包管理器
 
在此之前，如果你要用到一些外部库,如插件或外部的桌面小部件的话，你得手工下载JavaScript和CSS文件并且将它们放到项目里面，然后那些库或者插件发布新版本的时候，你又得下载更新的文件再放到你的项目里面，这是极其麻烦的事情。
 
具体来说，包管理器就是可以通过命令行，帮助你把外部库和插件放到你的项目里面并在之后进行版本升级，这样就不用手工复制和更新库。现在有的包管理器主要是yarn和npm。这两个中npm先于yarn出现但yarn在包的版本管理强于npm,其具体使用几乎是一样的，一旦学会了使用其中一个，另一个自然也不成问题。
 
实践建议：
 在对包管理器有了基本了解之后，你就可以去安装一些外部库到你前面制作的一些网页上了，比如安装一些提示插件，当用户点击某个按钮时显示提示信息，或者创建一个登录表单用一些表单验证库进行表单验证，或者试试不同的选项看看如何安装不同的版本。
 
注：记得要看看语义版本控制
 2、CSS预处理器
 
预处理器以CSS默认不支持的功能丰富了后者。可选的css预处理语言包括Sass、Less、Stylus等等。我更乐意选择Sass。但是PostCSS最近的发展势头也不错，这属于一个锦上添花的东西，有点类似于CSS的“Babel”。你可以拿来独立使用或者在Sass的基础上叠加。
 
总之，我的建议是先学Sass，了解less,stylus,等后面有时间了再看看PostCSS。
 3、CSS框架
 
CSS框架其实并不是什么困难的事，边用边学就行了，推荐在Bootstrap、Materialize和Bulma里面选。如果考虑市场需求的话则是Bootstrap。
 4、CSS组织
 
随着你的应用不断膨胀，CSS也开始变得混乱难以维系。有多种手段可以对你的CSS进行组织，让它更好地应对伸缩性，比如OOCSS、SMACSS、SUITCSS、Atomic以及BEM，都是很好的css代码组织管理的指导实践。CSS组织是对于复杂庞大的css开发的一个统一固定的 CSS 代码组织和管理规范。包括 CSS 样式的命名规则，你应该了解它们之间的不同，但是我更偏好BEM。
 5、构建工具
 
工具可以帮助你进行JavaScript应用的构建/打包以及开发。这一类工具功能主要包括以下三个方面：
 
linter（代码检查） ， 是指对代码进行静态检查，如定义变量是否使用，变量命名，方法回调次数，注释是否规范等，主要对代码书写是否规范进行检查。linter有很多选项，其中包括ESLint、JSLint、JSHint以及JSCS等。但是目前主要是ESLint用得多。task runner（自动构建） ， 即是对项目代码进行自动构建编译为浏览器能够执行的东西，如对typescript和Sass进行编译，使用自动化构建工具则不需要程序员手动进行操作。这个本来是是很多选项的，包括npm脚本、gulp、grun等等。不过既然webpack能够处理gulp能做的大部分东西，所以只有自动构建中的npm脚本可以用来对webpack能做的任务进行自动化。不需要学习Gulp，如果到后面如果你有点时间的话，可以去看看它能否对你的应用有所帮助。bundler（打包工具） ， 不同的选项包括Parcel、Webpack、Rollup、Browserify等。如果你必须选一个，目前你可以闭着眼睛选Webpack就是。Rollup也很常用但是主要建议用到库上面，至于app，还是以webpack为主。所以可以先学习一下webpack，后面如果想的话再了解一下Rollup。
 
实践建议：
 恭喜你！你现在可以称自己为75%的现代JavaScript开发者了。现在继续用你学到的东西做点什么出来。也许可以做个库将来用到Sass和JavaScript上。然后用Webpack将Sass转换成CSS，用babel转换成ES6代码。一旦你做完了再把它发布到Github和npm上。
 三、再进阶
 1、框架
 
其实在一般开发中，这个部分往往是紧挨着基础部分的，之所以放在Sass、构建工具和包管理器后面，是因为在框架中你全都会用上那些东西。
 
框架也有好些选项。不过目前比较常用的是React、Vue和Angular。最近对React.js的需求越来越旺盛。然而，前面列的这几个你随便选一个都不会错。个人会选React或者Angular。不过特别说明一下，作为初学者也许会发现相对而言Angular会容易点，因为它支持几乎一切立即可用的东西，比如支持延迟加载的强大路由器，支持拦截器的HTTP客户端，依赖注入，组件CSS封装等而不需要关心选择外部库的问题。不过React在社区方面无疑更有优势，而且Facebook一直都在努力改进它。
 
一旦选择框架，当然还有其他一些东西需要你学的。
 
如学React的话，还得学Redux或者Mobx去了解状态管理，具体选学什么要取决于应用的规模。Mobx适合中小规模应用，Redux更适合大规模应用。甚至如app允许的话可能都不需要学，靠React的原生状态管理就行了。如果选择Angular，就得用TypeScript（没有它你也能开发出Angular应用，但是我们还是推荐你使用）和Rx.js，这些除了Angular应用以外在其他地方也能用得上。这都是非常强大的库，也适合于函数编程开发。如果选Vue.js的话，也许还得学习Vuex，这东西有点类似于Redux但是是给Vue用的。
 
需要注意的是，Redux、Mobx以及Rx.js都不是跟这些框架绑死到一起的，你也可以用到各种JavaScript应用里面。此外，如果选择了Angular的话，确保你用的是Angular 2+而不是Angular 1+,这里对vue也是一样的，vue2.0与vue1.0也有细微的区别。
 
实践建议：
 现在已经知道了开发现代JavaScript应用所需的一切。可以选择学习的框架做一个项目出来以便练习。
 
做完之后，再去看看如何衡量和改进性能。比方说可以看看Interactivity Time、Page Speed Index以及Lighthouse Score等。
 2、渐进式Web应用
 
一旦完成了上述所有步骤，再来学习一下service worker以及如何制作渐进式web应用。
 
渐进式web应用（PWA）是指可以在任何浏览器上执行的支持互联网的应用程序，它是由服务器端脚本(PHP和ASP)和客户端脚本(JavaScript和HTML)组成的。Service Worker则是位于客户端（浏览器）和服务器之间的代理。PWA 有以下优点：
 
渐进式 - 每个用户都可用而不管选择什么样的浏览器，因为它们是以渐进式增强为核心原则构建的。自适应 - 适应任何形态：桌面，移动设备，平板电脑或尚未出现的形式。不依赖网络连接 - Service Workers允许离线工作，或在低质量网络上工作。类似于应用程序 - 使用应用程序风格的交互和导航，感觉像一个应用程序。保持最新 - 得益于service Woker的更新进程，应用能始终保持最新状态。安全 - 借助于HTTPS，防止窥探，并确保内容没有被篡改可发现 - 受益于W3C清单和service Worker注册作用域，搜索引擎可找到它们，可以识别为“应用程序”。用户粘性 - 通过推送通知等功能让用户重返应用。可安装 - 允许用户在主屏幕上“保留”他们认为最有用的应用程序，而无需经过应用程序商店。可链接 - 通过URL轻松共享，不需要复杂的安装。
 
3、测试你的应用
 
应用测试有很多工具，各自的用途也不一样。我本人经常是组合使用Jest、Mocha、 Karma及Enzyme。然而，在开始选择工具之前，最好是首先理解有哪些不同的测试类型，看看所有的选项情况，然后从中再选择最适合需求的一个。
 
单元测试：
 JS里面有许多可以供我们选择进行单元测试的框架。比如，Mocha, Selenium, jasmine 和 QUnit。本文将重点讲述Qunit，Qunit 由开发了许多大名鼎鼎的js库，包括了的jQuery 、jQuery UI等的Jquery团队（jQuery team）开发。
 4、静态类型检查器
 
静态类型检查器帮助给JavaScript增加类型检查。你不需要学习这些，不过这些东西可以赋予你超能力，而且学习起来也很快，几个钟头就行了。这方面主要有TypeScript 和 Flow。我喜欢TypeScript ，不过可以两个都看看再选喜欢的。
 5、服务器渲染
 
目前为止，你所学到的技能应该足够你找到一个“前端工程”的位置了。但还可以在选定的任何框架内再学学服务器端渲染的知识。有不同的选项可选，这要取决于你用什么样的框架。
 
如果你决定用React，最值得关注的选项是Next.js 和 After.js。如果是Angular，可以选Universal。对于Vue.js，有 Nuxt.js。
 
四、全栈小尝试
 
学习前端的过程如果能了解后端是如何运作的将会有利于理清思路，况且现在nodejs发展日益强大，前端的MVC框架也更偏向逻辑化而不是简单的html页面，所以做一个小的全栈项目会很有意义，可以从nodejs入手，mysql数据库也比较简单轻量，然后可以尝试了解一下javaweb，或者pyhton的django框架。
 
这是国外的一篇文章，翻译过来的，希望能帮到大家。另外本人整理了一套学习的视频资料，需要的朋友可以及时加我主页联系方式。