给正在进WEB前端坑的小白和已经进坑的老牛们进阶的完整学习资源及学习路线

前端学习路线：

1、HTML、CSS基础、JavaScript语法基础。学完基础后，能够仿照电商网站（例如京东、小米）作首页的布局。

2、JavaScript语法进阶。包括：做用域和闭包、this和对象原型等。相信我，JS语法，永远是面试中最重要的部分。

3、jQuery、Ajax等。jQuery没有过期，它仍然是前端基础的一部分。

4、ES6语法。这部分属于JS新增的语法，面试必问。其中，关于promise、async等内容要尤为关注。

5、HTML5和CSS3。要熟悉其中的新特性。

6、canvas。面试时，有的公司不必定会问canvas，靠运气。若是时间不够，这部分的内容能够先不学。但若是你会，绝对属于加分项。

7、移动Web开发、Bootstrap等。要注意移动开发中的适配和兼容性问题。

8、前端框架：Vue.js和React。这两个框架至少要会一个。入门时，建议先学Vue.js，上手相对容易。但不管如何，同时掌握 Vue 和 React 才是合格的前端同窗。

9、Node.js。属于加分项，若是时间不够，能够先不学，但至少要知道 node 环境的配置。

10、自动化工具：构建工具Webpack、构建工具 gulp、CSS 预处理器 Sass 等。注意，Sass 比 Less 用得多，gulp 比 grunt 用得多。

11、前端综合：HTTP协议、跨域通讯、安全问题（CSRF、XSS）、浏览器渲染机制、异步和单线程、页面性能优化、防抖动（Debouncing）和节流阀（Throtting）、lazyload、前端错误监控、虚拟DOM等。

12、编辑器相关。Sublime Text是每一个学前端的人都要用到的编辑器。另外，前端常见的IDE有两个：WebStorm 和 Visual Studio Code。WebStorm什么都好，可就是太卡顿；VS Code就相对轻量不少。我的总结一下：新手通常用 WebStorm，入门以后，用 VS Code 的人更多。

十3、TypeScript（简称TS）。ES 是 JS 的标准，TS 是 JS 的超集。TS属于进阶内容，建议把上面的基础掌握以后，再学TS。

十四,前端框架知识 vue  react angular，三选一，必需要掌握熟，其他两个能够了解，但取决于你面试的公司

关于学习web前端的误区和学习建议：

1.只看教程，不动手实战

这个能够说是学习的最大的一忌，也是提醒过最多的一个注是事项！网上的教程有许多许多，各个语言，各个知识点，各方面的都有，javascript，html5，css3等的一些，随便一搜就一大把，毕竟互联网最大的优点之一就是资源共享！可是不少人看教程就只是看教程，不动手实操。即便博客的教程，视频教程再好，本身不动手实操，写代码，这样的学习方式，记忆根本不深入，容易遗忘，到头来，可能什么都没学会！并且有些教程，若是没有跟着动手实操，可能会蒙圈。

我的建议：要挑以为适合本身的教程，也要动手实操，写代码。即便不是边看教程编写代码！在看完了教程以后，必定要本身动手实操！过程当中，可能会遇到些问题，可是这样才会学习到更多，记忆也更加牢固！

2.只学框架或者库

这个状况，针对javascript如今没有之前严重了，在之前仍是jquery傲视群雄的时候。不少人会在聊天的时候会说：有了jquery，为何还要学js？有了vue，为何还要学js？面对这样的提问，我那时候没有回答，内心想：jquery或者vue就是用js实现的，不会js，学jquery或者vue第一学得吃力，第二学jquery或者vue确定不会很深刻。并且，万一有时候，项目不容许用jquery或者vue，那就基本不会写代码了。这时候，若是学习其它的框架或者库，基本又等于从新学一门语言了。

我的建议：先把基础（html+css+js）打牢，再学其余框架或者库。虽然在会js的状况下，我不敢说学js的框架或者库就是查文档，查API。但至少学js框架或者库能够不会那么吃力！

3.只顾着写代码

这个就是我以前的一个习惯，只顾着写代码，不知道：耦合，实例化，继承等专业术语，和别人交流，无限蒙圈！根本不知作别人在说什么！互联网的技术更新的速度很是的快，隔三差五就发布一个框架，一个库，一个工具。虽然不是每个更新的技术都须要学习。可是若是只顾着写代码，不了解新的技术。这样很容易使本身中止不前，失去竞争力。

我的建议：在写代码之余，要确保本身是否是了解代码，对代码有没有一个认识。以及多点留意消息，看下有没有什么技术更新！若是以为更新的技术很实用，或者本身有兴趣，能够多了解下！毕竟互联网是一个作到老，学到老的一个领域，技术更新的很快，若是跟不上流行的趋势，说不定本身会被淘汰呢！

4.太早接触复杂项目

这个状况，比较广泛，不管是在学校或者是如今的培训机构。不少学习前端的人，基础没打牢，就在那里扬言要作一个大项目，我听到的有的人想作知乎，有的人想作世纪佳缘等等一些伟大的目标！可是所有人都是连网站的业务流程和逻辑都没弄清，最后越搞越乱，就放弃了！以前的伟大目标都成了烂尾楼，做用最多就是一个代码练习的做用！花了大量的时间，作了一件没很大的实际意义的事情！

我的建议：从简单到复杂，复杂的网站，都是有不少简单的模块。不妨先从简单的功能作起，作完了一个功能再往里面加功能！如今所处的公司就是这样，开发的后台管理系统，开发几个月了，从一个只有员工的登陆注册的功能，而后再逐一加功能，到如今项目逐渐完善！

5.好高骛远，急于求成

这个状况就是多见于培训机构出来的人。我不知道是否是全部城市都是这样，可是广州这边，给个人感受就是这样。就是目标不切实际，对本身也不够认识！以前在群聊的时候，在金三银四那段时间，不少人找工做，聊天的时候也遇到过不少培训机构的人。简历上是各类精通，刚毕业在培训机构培训几个月，要么就是自带两三年工做经验，要么就是说本身培训了几个月，技术水平和市面上两三年的人差很少。总之就是把本身吹得无所不能！可是一出题，就十问九不知。问闭包是什么，不知道；问原型是什么，不知道。问继承是什么，仍是不知道。

上面所说的，只是一个表面的现象，更重要的就是，好高骛远这个状况，颇有可能会致使本身难以找到工做！由于一些企业认为最高只能给你4000工资，可是你本身却认为本身有实力拿到9000以上的工资。这样状况，很难找到工做！给人的印象也很差！更重要的是，这可能会影响本身的职业选择！

我的建议：从实际出发，评估本身。想下本身会什么，能给企业带来什么！也能够停下别人的建议，和对比下别人的技术水平和工资，或者是上网找一些面试题，看下本身能不能完成那些面试题！最后评估下本身，认为本身处于什么位置！一我的学习会有迷茫，动力不足。这里推荐一下个人前端学习交流秋秋裙600610151，里面都是学习前端的，若是你想制做酷炫的网页，想学习编程。本身整理了一份2019最全面前端学习资料，从最基础的HTML+CSS+JS【炫酷特效，游戏，插件封装，设计模式】到移动端HTML5的项目实战的学习资料都有整理，送给每一位前端小伙伴，有想学习web前端的，或是转行，或是大学生，还有工做中想提高本身能力的，正在学习的小伙伴欢迎加入学习。

6.看到难点就逃避

这一点，相信不少人都有感触，就在开发上，遇到上一个或者几个本身以为没办法实现的需求或功能。想方设法地想着逃避，好比：这个功能不是很重要，不作能够吗？这个功能我历来没弄过，搞不定的。这个功能外包给别人作吧，咱们作不了！不少一些逃避话语。你们能够想下，若是每次都是逃避，那么时间一久，本身技术水平是否是还停留在基础那个阶段？之后要怎么提高本身的技术水平。

我的建议：迎难而上。在web前端开发这块，若是赶上了难题是正常的，若是没遇到难题就是见了鬼！面对难题，咱们应该是挑战难题，而不是逃避！你们都想提高本身的技术水平，挑战难题不就是一个很好的提高技术水平的实战机会吗？若是完成了以前认为不可能完成的难题，这样就是一个技术水平提高的见证！不是吗？我也以为，天天就写简单的业务代码，不探索新知识，不挑战难题，这样作开发也没多少意思！

7.能用就行

不想优化这个也是一个很常见的状况，不少人认为写的代码能用就行，能实现需求就行！根本无论往后的优化。在开发项目或者开发插件上，虽然我也是提倡:先实现，再优化这个方式！可是并不表明我开发完了就完了，不会再想优化！若是不试着去优化本身的代码，不探索写代码的更好方式，之后别说编写高质量，简洁的代码了，由于本身把学习编写高质量，简洁的代码的一个重要途径给封锁了。还有一个就是，项目上，有些问题多是潜在的，就是如今看着项目没出现什么问题，但并不表明之后不会出现问题。反而在项目开发完了以后，试着去优化本身的代码，探索更好的实现方式，试着编写出高质量，简洁的代码。这样难道不是一个很好的学习过程吗？至于优化代码的方式，不少不少（好比常说的：代码过于重复，是否引入设计模式？网站性能通常，能否进行优化？），优化这一块，也不是说一步就优化到最好的，而是至少不会比之前差！关于优化，我以前也发过一些资源。很容易找到，网上的资源更是不少！你们挑着看即是！

8.不懂不问和不懂马上问

不懂不问，这个你们都知道，就是遇到问题，从不问同事或者经过其余方式咨询别人。就是本身在那里苦思冥想，尝试各类解决方案。这样的方式，最坏的结果就是最终仍是解决不了问题，让同事来询问开发状况。最好的结果问题解决了，可是解决问题所花的时间会确定不少。

不懂马上问，这个就是词面的意思。遇到问题立刻问别人。本身没怎么思考或者根本不思考。这样能解决问题，可是这样会致使本身可能会频繁的问同事，会搞得同事很不耐烦。若是把同事的耐心磨没了，可能回答的语气可能不会很好。这样不只影响同事之间的关系，还会让本身以后不敢再请教同事，有让本身处于上面所说的不懂不问的风险。

我的建议：适时请教。遇到不懂的问题，先本身结合上下文思考下，想下之前有没有遇到这个问题，解决不了去网上找解决方案，若是尚未解决问题，这个时候再问别人，问同事或者经过其它渠道问别人。这样本身有了思考，解决问题的时候记忆也很深入，也不会频繁的打扰同事！

9.不懂装懂

这个次面上跟上面的差很少，但实际上不同！不懂装懂就是去问别人的时候，实际上别人的讲解并无彻底听懂，多是碍于面子或者是由于很差意思打扰别人那么久，或者担忧打扰别人过久，因此装做很懂。可是这样可能忽悠得了一时，很快又会露出马脚。这样会搞得隔一会又要去问别人一样的问题，这样反而会搞得别人更加尴尬，更加为难！本身也会打扰别人更多的时间！

我的建议：若是有问题去问别人，只要你问的人不是一个很是没有耐心的人。他都会耐心的解答你的问题！因此，当问别人问题的时候，必定要确保本身是已经弄懂了问题的原因，同事一遍没解释清楚，本身直接回答不明白，相信不少人都会再详细的解释一遍。若是担忧同事工做忙或者其它缘由，能够挑一个合适的时间！我如今问同事就是，要么不问，要问就切底弄懂！固然了，个人同事都颇有耐心，每次我有什么问题，他们都会耐心解答，甚至是扩展开来说！

10.没理清楚需求就写代码

不少人在接到需求以后，第一反应就是写代码，即便是在本身没把需求理清楚以前也是照样写代码。另外一种状况就是，不少人是边写代码，边想需求。这个开发方式，万一本身对需求理解有误！可能会致使本身写的代码，很大一部分都要修改，甚至是所有删除重写。没理清楚需求就写代码这个状况，发生的几率应该挺大的，可是通常来讲很难发现这个状况，毕竟程序员对代码的增删改查是再正常不过了！我自己也不知道，就是在一次的技术分享中，老大提出来的，他的建议就是对于一些稍微复杂一点的需求，先理清楚需求，简单画个流程图，而后在代码里面，先写上一点注释，再开始动手写代码！对于这一点，我如今就是在执行当中！除非需求真的很简单，不然我都会在草稿本上简单画一下流程图。好比下面这个，这个已是我画的流程图里比较简单的一个了。根据流程图，写好注释，再写代码，这样会比较有条理，代码也清晰，往后的返工也可能会有，可是不会像之前那么多！在开发时间上，效率上，都获得了一个提高！

最后奉献出最新学习资源，若有想要领取请关注公众号加我微信备注领取资料！

结尾彩蛋

欢迎关注前端之阶公众号，获取更多前端知识，加入前端大群，与知名互联网大佬作朋友，开启共同窗习新篇章！