帅气小哥哥整理的前端学习路线（有被秀到）
前言
最近有很多粉丝私信问我如何学习前端？说自己在学习前端路上有些迷茫？遇到了瓶颈，不知道该如何突破？技术太多，新旧技术更迭变化太快，我到底该先学什么，再学什么？那这期视频就和大家聊聊前端的一个学习路线。
整体路线
首先大家发一张“神图”,github上有个112k star的项目，这个项目通过一个路线图展示了在你学习前端开发的过程中你应该需要去学习那些技术，并且作者也给出自己的建议，哪些是他推荐去学习，哪些不推荐，总结的非常详细。
项目地址：点我点我
直接给大家展示这张图，对于新手来说可能是一脸懵逼我到底该怎么入门，这么多技术到底该先学什么？所以这张图对刚入门的同学来说并不是很友好，很容易迷茫。
所以结合我自己的学习经验和工作经验，我将该路线图进行了拆分，把它拆分为多个学习阶段，并且结合国内前端开发的技术背景补充了一些技术点，然后做了一个新的开源项目，并在github上部署了一个静态站点。在这个网站上，你可以选择学习的阶段，来生成不同的路线，同时在路上也有我自己的一些标注，如果你觉得标注的不好，可以选择关掉。
最重要的是，路线上的卡片都可以点击，然后进入一个文档页，在这个页面上罗列了掌握这项技术或者知识点应该学哪些东西，有推荐的博客文章，视频，书籍等等。是不是很贴心！因为是开源项目，所以欢迎大家来贡献代码和学习资料，来一起完善这个项目。还有别忘记star一下，让更多的人看到这个项目。
项目地址：点击我哦
接下来，我们把这个路线拆开了讲，把前端学习分为5个阶段。这里需要注意下，这五个阶段和学习路线网站上的阶段并不是一致的。为了方便我讲解和让大家更容易理解，在视频里我分为更细致的5个阶段。这里你要认真的听，好，我们开始！
拆开了讲，结合我的学习与工作经验
第1个阶段
首先你应该先学习HTML和CSS，你可以在菜鸟教程网上很快的学会html和css的基本使用。
html掌握一些常用的标签的使用方法就可以了，css要比html稍微复杂一些，知识点更零碎一些。除了基本的css属性，那你需要重点掌握如何使用css来灵活布局你的节点，就会用到float,定位，盒模型，栅格，flex等。
这时，有些初学者可能就会偷懒，拿起Bootstrap或者类似的css框架就开始使用，css还没怎么学会，UI库用的也不怎么样，这样很容易导致基础不扎实，这就像你还没学好26个英文字母，就想造句写文章一样。所以这时不要觉得自己的css写的多烂，页面多难看，要坚持下去，打好基础，你可以随便找个网站去模仿，比如淘宝的首页，这会让你的css熟练度提升很快。
对了，在这之前你应该选一款代码编辑器，市面上比较好用的有：WebStorm/Atom/Sublime/VSCode，我推荐VSCode，不要问为什么，问就是好用！
接着你该学习JavaScript也就是js，JavaScript是我们最常使用到的编程语言，你大部分时间写代码都是在使用JavaScript。所以，一定要好好掌握它。**首先你需要掌握JavaScript的基本语法：数据类型，操作符，变量函数声明，DOM编程，如何使用ajax发送网络请求等等。**这里我推荐两本书，一本是JavaScript高级程序设计，俗称红宝书，这本书基本涵盖了大部分你应该掌握的基础知识，一定要反复阅读。另一本是DOM编程艺术，这本书会以写一个网页作为案列，来教你dom编程，全程高能无废话，书里面的每一行代码，你都要自己敲一遍，相信我，写完你会有很大的收获。你可能会疑问，为什么js中的DOM编程还要单独出一本书，这是因为JS大部分的操作都是与页面元素的操作有关，那修改页面元素其实就是对DOM的各种增删改查。所以DOM编程对学好JS来说是十分重要的。那这阶段你会接触到像JQuery或者react、vue这类能帮助你更简单的去操作dom的js库，切记，不要着急去使用他们，先掌握好基础，稳稳的走好每一步。在视频的结尾我会列出一些我推荐的js学习相关的书籍，或者你去访问前端学习路线的网站，点击javascript卡片也能看到推荐的博客和书籍。
然后你可以尝试着去开发一个静态的博客网站，并将代码上传到github上。为什么要上传到github，因为通过这种方式你可以初步了解版本控制工具git的使用方法。git这个工具在你之后的工作中，基本天天都会用到。通过这个方式，你也算是正式加入全世界最gay的交友网站。
这个阶段整体建议：打好基础，不要着急去学抽象封装好的库和框架。不要去学Jquery,vue,react,而是去学好DOM编程，不要去学Bootstrap，学会使用css来实现界面效果，不要学TypeScript,学好js的基本语法。不要跳步！不要跳步！不要跳步！还有一定要多看！多写！多看！多写！多看！多写！
我觉得你们是幸福的，当初我在入门学习的时候就没有人告诉我这些，这个up主真好，感动。
第2个阶段
此时你写代码的效率应该还是比较低，写了一个html，然后手动在html中引入了本地的css和js文件，每次代码更新都要手动刷新页面。
这时候你就可以尝试提升你的开发环境。首先你要在本地安装nodejs，在成功安装node后，包管理工具npm也同时安装好了。接着你应该去了解npm常用的命令，以及package.json里常用的几个属性值是干什么用的。
学会如何安装全局module包，和安装本地module包。在这个阶段，你很容易跑偏，装好了node，打开node文档，然后各种教程文档视频一通乱学！打住！千万别这样。
我在大学自学前端的时候，刚接触node，就很激动，哇，我也可以写后端了，就开始各种乱学，expressjs，koa，mongodb, redis, mysql，什么牛批学什么。后面你会发现这些东西很多时候你都用不到，长时间不使用，很快就会忘掉。并且这些东西你要是学不会，还会给你很大的挫败感，这样对导致你学习失去动力。所以学习不能迷茫，拣了芝麻丢了西瓜。我的建议是，对于初学者来说，先把nodejs当成辅助你学习前端的工具使用，一开始没有必要深入去学习。
了解如何起服务，如何用nodejs提供的fs包读写本地文件就差不多了。当然如果你的能力够强，你可以去学这些，你会对整个后端以及数据库运维的流程有个比较完整的了解。
我更推荐你去了解打包工具webpack。打开webpack的官网的指南页面，按照官方的教程去学习，在学习过程中，你可能会对其中的一些语法感到很陌生，比如import export， 那你需要配合着阮一峰老师的es6教程一起食用，重点去看下Module的语法这一章节。webpack官网的指南教程看到“开发”这一章节结束就可以了，后面就比较复杂，而且你也不一定会用到，你可以大致浏览下后面讲了什么，有点印象，之后需要用到时候再回过头来看，如果实在看不懂，没关系的，不用怀疑自己，你现在的水平就应该看不懂。
根据你学到的webpack知识，你可以试着去升级一下的你的开发环境，最终的效果就是你写的网页可以在localhost:8080被访问，js、css资源加载正常， 并且当你修改css或者js代码时，网页会动态刷新。接着你可以在webpack中引入sass或者less css预处理器，通过学习sass或者less来提升写css的效率。
第3个阶段
熬过前两个阶段后，进入第三阶段，你会发现你的世界不一样了，原来编程也可以快乐。在前两个阶段，你应该会体会到DOM编程是多么痛苦的一件事，为了实现一个效果，往往需要写大量的dom操作，为了提升了开发效率，还得配置webpack。那库或者框架的出现就是为解决这些问题，他把这些繁琐的逻辑进行抽象封装，提供简单易用的api给开发者，有的还会提供脚手架工具来帮助开发者创建项目。所以框架对于初学者来说，就像是一个贴身保姆，什么都帮你做了，表面上你的开发效率提升了，但往往也会导致基础不扎实的情况。所以不要太着急的去使用框架，请先学好基础。
当你有一定的基础能力后，你可以选择一个框架开始深入学习，比如react、vue、angular。
对于新手我更推荐去学习vue。一是比较容易入手，二是官方文档写的比较详细，中文文档翻译质量也比较高。学习React的话建议看英文文档，中文文档翻译的有点差，我感觉就是直接用的google翻译。react、vue、angular都提供工具包来帮助你创建项目工程，无需你自己去配置webpack，省去了很多麻烦。在这个阶段你可能会在短时间内学会很多东西，因为严格来说，React、Vue并不是一个框架，它们是一个操作视图UI的lib库，它们需要配合路由、状态管理工具库等一起使用才称的上为框架，比如react+react-dom+react router+ redux+axios, vue+vue-router+vuex+axios，另外你可能还会引入组件库，比如ant design、elementUI等。所以在一个项目的开发中，你可能需要额外去学很多的库。
那这个阶段有个建议就是：多读官方文档！多读官方文档！多读官方文档！你在平时开发中遇到的大部分问题，通过阅读文档都能够解决。多读，多想，多练是你掌握一个框架最快的方式。
第3.5个阶段
为什么会有个3.5阶段，这个阶段我希望你能回到路线的开头，回顾你学过的知识，查漏补缺。比如网络相关的知识，互联网是如何运作的？HTTP、HTTPs、DNS工作原理？浏览器是如何渲染页面的？什么是重绘和重排？HTML如何做SEO?
JavaScript的es6语法，promise的使用？set map的使用？这个阶段我推荐你总结出自己的知识库，被动输入进来的知识并不能代表你学会了这项知识或技能，你需要主动输出，输出的方式有很多种，写博客，在团队内部和大家分享，甚至你可以对着你桌子上的小鸭子讲讲你学到的知识？你(小鸭子)知道浏览器是怎么工作的吗？？？
第4个阶段
这个阶段，你应该去提升的你的技术的深度和广度。依然是回顾你的现在的技术栈，在你的学习过程中，很多技术栈都有相应的替代品，
那么他们之间有什么差异呢？
在什么情况你应该选择这一个，而不是另外其他的？
比如在使用css预处理器时为什么选择使用sass，而不是使用less，postcss和另外两个又有什么区别呢？
然后你通过阅读这三个技术各自的文档，了解他们之间的区别差异后，就能比较清晰的知道，在什么样的场景下，或者遇到什么样的问题时，需要使用哪一个技术，没必要说去掌握每个技术的语法和如何使用。
比如你知道了postcss是一个可以通过编写js插件来转译样式的工具，假设你需要实现一个把css里的px都转化rem的功能，sass和less是不能帮你实现的，那你就会想到是不是可以写一个postcss插件来实现这个功能呢。
那这时就可以去深入了解postcss，通过阅读他的api文档来编码实现这个功能。css的新方案有了解吗？什么是styled Component?CSS module解决了css的什么问题？
其他很多都是这样的。比如webpack，rollup也是个打包工具，什么时候你会用rollup，而不用webpack呢？webpack在打包时会生成很多冗余的代码。而rollup则不会，所以rollup更适合打包一些lib包。那最近火热的snowpack和vite又是做什么的呢？和他们又有什么区别。
react、vue、angular之间又有什么区别，你是选择函数式编程的redux做状态管理呢，还是用响应式编程的mobx？
那还有更多前端技术等你去探索，为了统一团队的编码和代码格式化风格，去学习使用ESLint和Prettier。为了更好的编程体验以及更少的代码错误，类型校验typescript和flow出现了。
为了代码质量更可控，你学习使用js测试框架来写测试用例帮助你测试代码。为了可以使app加载更快并且支持离线，你开始学习什么是PWA，为了解决SPA的首屏渲染时长问题，你选择使用服务端渲染，比如react的nextjs，vue的nuxtjs。
在移动端优先的时代，为了提供更好的用户体验，大公司都争先恐后的开始使用React native提供了基本和原生无差别的页面。
接着微信小程序的推出，为了享受微信带来的流量红利，小程序开发变得火热，为了在多个平台都能运行自己项目，就引发了开发多套代码的问题，接着各种多端开发解决方案涌现，比如Taro, uni-app等，做的最好应该是基于React的Taro，可以将一套代码编译出可以在各种小程序、快应用、H5、React-Native上运行的代码。
关于typescript我想多说两句，前端圈内对ts的态度褒贬不一，有人说学习ts增加了学习成本，丢失了js弱类型的好处，有人用后说真香。
但我还是极力推荐使用ts，不论是新项目的开发和老项目的重构上，ts带来的收益价值完全是大于你的学习成本的。
我在之前的团队也是推广使用ts，基本重要的项目都使用ts重构了，新项目也都使用ts，后面也会出一期视频来讲如何将大型项目使用ts重构？
我刚才说了一堆技术，并不是让大家都去学，都去掌握。处于这个阶段一般情况来说，你应该开始工作或者工作几年了，你可以根据自己所做的业务的场景去选择相应的技术，并深入的去学习。
总结来说就是不要给自己的技术能力设限。去尽可能多的拓宽自己的视野，但也不能把所有技术的了解都只停留在表面，跟自己业务相关的技术需要深入去学习，不相关的你要尽可能的去拓宽。stay hungry, stay foolish ~
第5个阶段
并不是说你按照这上面的路线学习了，你就是前端大神，或者就能拿到高级前端或者资深前端这样的Title。这就像你打英雄联盟或者王者荣耀一样，每个人使用同一个英雄，拥有的技能都是一样的，那为什么有的人玩的那么好，可以打上王者段位，有的人还在青铜黑铁挣扎，当守门员？很简单，王者段位的人，基础十分扎实，对每个技能的伤害值，cd时间，什么时候使用什么技能，使用技能的顺序都是烂熟于心的。
那只有这些也并不能保证能上大师王者段位，你还要其他各种软实力来帮助你，比如对战局的把握，敌我克制关系，视野控制等等。那对比到前端来说，路线上的技能就是你的硬实力，大 家只要努力去学，基本都能学会，那你们之间的差距就是对技能的熟练度。
那你的软实力是什么？
我认为有三点：
抽象思维，视野，影响力和人脉。
抽象思维有两部分，一是对代码的抽象，二是对业务的抽象。
代码的抽象就是对自己写的代码有深入的思考，将常写的代码抽象封装成工具库，将复杂的代码逻辑抽象简单化，然后提供给团队使用。
业务的抽象指的是寻找业务场景中的共性，或者一些机器可替代的工作，然后将其抽象成工具。这么说可能不太容易理解，举个真实的列子：
我之前的公司经常需要在页面展示一些用户协议，用户协议还有很多变量，比如身份证，手机号。那之前的工作流程是这样的，产品给一个保存了协议文案的word文档，文档里标注了那些地方要动态注入用户的信息，然后前端把这个文档改成html，并添加各种变量，改完之后再和后端联调。可以看出，这个工作是多么的无趣，而隔一段时间就会新的用户协议要添加，每次添加都要花至少半个小时，这个需求排给谁，谁都不想做。那我们能开发个工具来解决这个问题吗，让前端可以不参与这项无聊的工作。那我们可以开发个可视化文档编辑界面，并在界面的旁边提前提供好需要使用到的变量。然后整个流程就是产品复制word文档上的内容，然后在编辑器上编辑，选择自己要注入的变量，最后点击提交上传即可。但整体的实现并没有我说的这么简单，通过实现这个工具，提升了生产力。
视野：其实在第四个阶段讲解了技术相关的视野，你还需要去拓宽业务解决方案的视野，比如如何为你们公司搭建一个稳定高效的前端埋点收集系统？如何做一个自动化生成页面的系统？这些东西在业内都有成熟的解决方案，那他们是怎么做的？如何实现的？他们踩了哪些坑，他们的方案有什么缺陷？我能不能实现一个更好的？这都是需要去了解的。
影响力和人脉：影响力包括公司和业内的影响力，在公司有好的影响力，能有助你推动技术项目的实施和落地，公司也会更多的同事与你交流技术和方案，这样就进一步提升你的影响力。通过写博客，做开源项目来提升业内的影响力和人脉，这能带来更多的好处，方便找工作、与其他大牛交流互换经验。那如何快速提升你的人脉呢？哈哈，有个最简单最快速的方法，关注我呀！关注我之后，我就是你前端学习路上的小伙伴。哈哈哈，有点尬。
第6个阶段
还有最后一个阶段，这个阶段十分重要！十分重要！是最容易忽略的！
享受生活，多锻炼身体，好好休息，不要熬夜，拥有个好的向上的心态，
垫高你的显示器，把显示器中心和你的视线齐平，保护好你的颈椎。身体是革命的本钱！
最后保护好你的头发。