前端工程师培训教材

昨天给另一个小伙伴推荐了自学入门的前端书籍：《Head First HTML与CSS（第二版）》

如果是作为入门的话，这本书是知了姐姐非常推荐的。代码学习是比较枯燥的，但是这本书用绝对想不到的方式带大家入门前端，大大地增加了趣味性。先入门了，考虑清楚了，再决定是不是要继续学前端。那个时候就可以开始看看其他的前端书籍了。

第1阶段：前端页面重构(4周)

内容包含了：(PC端网站布局项目、HTML5+CSS3基础项目、WebApp页面布局项目)

第2阶段：JavaScript高级程序设计(5周)

内容包含：(原生JavaScript交互功能开发项目、面向对象进阶与ES5/ES6应用项目、JavaScript工具库自主研发项目)

第3阶段：PC端全栈项目开发(3周)

内容包含：(jQuery经典交互特效开发、HTTP协议、Ajax进阶与PHP/JAVA开发项目、前端工程化与模块化应用项目、PC端网站开发项目、PC端管理信息系统前端开发项目)

第4阶段：移动端项目开发(6周)

内容包含：(Touch端项目、微信场景项目、应用Angular+Ionic开发WebApp项目、应用开发WebApp项目、应用开发WebApp项目)

第5阶段：混合(Hybrid,ReactNative)开发(1周)

内容包含：(微信小程序开发、ReactNative、各类混合应用开发)

第6阶段：NodeJS全栈开发(1周)

内容包括：(WebApp后端系统开发、一、NodeJS基础与NodeJS核心模块二、Express三、noSQL数据库)

很多人对前端工程师的岗位比较感兴趣但是却不清楚该怎么下手，是自学还是去培训课，很多人想要系统的学好前端，并且在最快的时间学会最多的知识，那么培训班是大家最好的选择。

现在市场上的IT培训机构十分多，并且很多机构都开设了web前端的课程，很多人在转行IT的时候，培训机构处于学员的自身条件参考，会对学员宣传入行门槛比较低的web前端课程，同时薪资也不是很低，这是小白，尤其是当学员学历还有资质不是很好的时候，这个是很好的推荐。

无论是在培训机构学习IT，学习前端知识，还是买书或是在网络上自己看视频学习也好，如果你想要快速入行找到就业，个人觉得时间比较宝贵，快速的找到一条正确的学习路径，方便自己快速转行才是重中之重。

看视频还是买书自学，本质上也是花钱获得别人知识积累的过程，这根培训班上课并没有什么本质上区别，但是在培训机构，可以在平时学习的同时获得大幅的实战训练，才能快速帮助自己成长，不会走偏，欢聚而言，自学如果有熟人带的话固然好，这也是相当于有培训班的便利，但是熟人毕竟也有自己的工作，很多学生在尝试了之后最后还是走上了培训班的道路。

本身来说，大学结束后才出来花钱学习也不是什么丢脸的事情，本身在就业的问题上最后还是看的大家的工资的高低，在学习办理会遇到很多的同学，有老师带着学，在以后这个行业里也会走得越来越远。

目前市面上的培训机构也是五花八门，因为很多培训机构的好坏没办法通过直接的对比看出来，当然首先从解答来考虑，面授的肯定远远好于视频的。

老实说，前端经过这几年的快速发展，网上的文章和教程还是蛮多的，有经验的人能够根据资料制定出属于自己的学习方法和路径，但对于小白来说，还是有些难度。知了姐来给大家分享前端学习路径。针对0基础，非科班，没有编程经验，想学前端，但是不知道如何入门的人群。

基础部分：

1、HTML + CSS 这部分学习，可以模仿一些网站做些页面，在实践中积累经验。做到能与UI对接，能100%重构网站静态页面的开发，为后期编写页面逻辑、动态效果打基础。

2、Javascript 要学的内容实在很多，如果没有其他编程语言的基础的话，学起来可能要费些力，这个阶段需要掌握编程基础概念，培养逻辑思维能力。能够独立完成网站的页面开发（包括合理布局，JavaScript操作DOM）

进阶部分：

有了以上基础，就可以进行一般的静态网页设计，不过对于复杂的页面还需要进一步学习。

3、JavaScript高级与服务器基础，深入面向对象编程，具备移动端开发能力，处理浏览兼容问题，深入学习ES6/ES7语法规范，前后端分离开发思想。

4、框架与服务器，数据库，前端安全的学习，深入了解Node，数据库操作，前后端分离技术，前后台协作开发。熟悉NPM（Yarn），Node模块fs，http，路由，处理请求，express4（koa）；掌握创建websocket服务，MongoDB/MySQL数据库CRUD（Mongoose）；掌握微信小程序开发，掌握基础，Vue-router，Vuex等等。

5、React与组件化开发，深入学习组件化开发思想，了解webpack使用，掌握React开发基础，Hook，create-react-app等等。

升级部分：

有了以上知识，对于大多数小型网站，你应该已经可以写出能够工作的代码了。但要想成为更专业的前端，你还需继续努力。更高的要求大概还有四方面：1）易维护，2）可测试，3）高性能，4）低流量（移动端）。

其他补充部分：

前端项目同样面临软件生命周期的各个环节，首先是代码管理，你必须学会使用Svn和Git。其次是代码的构建，如今前端代码构建已经不是简单的压缩一下了，需要进行依赖管理、模块合并、各种编译，比需要学会使用Grunt、Gulp等前端构建工具。

以上内容只是简单说了前端学习的顺序。对于前端开发，基本内容就这些了，可以根据自己的兴趣爱好选择性学习以下内容。

1、交互设计。大公司依然有专业人士搞这些，不过不懂交互的前端一定不是好前端。推荐《简约至上》。

2、后端。应该说前端工程师必须至少了解一门后端语言，不过如果爱好也可深入学习，如今NodeJs在大公司已经得到普遍的使用，推荐大家使用在Node上使用Express框架做一些后端服务的开发。

最后，有经验的程序员都知道，学习编程最有效率的方式就是把你扔到一个项目组，连滚带爬的做一两个项目下来你马上会发现所有的知识点全都连到一起了，不再是分散的，而是形成一个整体了。那种感觉是仅仅深入钻研知识点而不写真实项目的人所不能体会的。 一个项目就是一根绳子可以把大片的知识串到一起。

如果想锻炼实际开发的能力而不仅仅是背诵或者了解一些知识点，如果想成为真正的好手，那么，还是做项目吧！

整体来看的话，Web前端开发需要学习的内容还是比较多的。前端是一门涵盖面很广的学科，而且技术更新较快，优秀的Web前端开发工程师应该具备快速学习能力。如果没有快速学习能力，就跟不上Web发展的步伐，所以需要不断提升自己，不断学习新技术、新模式。

Web前端至少要学1) ， HTML2) ， CSS 关键字：选择器3) ， JavaScript 关键字：代码质量，安全，压缩，无污染4) ， 易用性5) ， 国际化 关键字： UTF-8 ， charset6) ， 性能 关键字： Yahoo 的 14 条准则7) ， 基础结构和过程 关键字：文档，注释8 ) ， 加工 关键字： 辅助工具例如： JSLint, JScript Debugger, Firebug, Debug Bar, Fiddler, Charles, HTTP Live Headers,DragonFly, Visual Studio 2008 ， YUI Logger, YUI Test, and YUI Profiler 。Web前端开发工程师是一个很新的职业，在国内乃至国际上真正开始受到重视的时间不超过7年。Web前端开发是从网页制作演变而来的，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web 时代的产物，那时网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。

如果学什么课程之前，首先考虑的难不难学，这会形成一个不好的心理暗示，因为我们很多人的内心都是喜欢去学习简单的容易的东西，而不喜欢学习复杂难的东西，我们的立足点不在是把这个专业学透彻学专业，总是在简单的道路上徘徊，也就意味着我们只能掌握一个皮毛的知识，任何学科专业，学起来都不容易，都需要你们付出心血认真研究，总想不付出努力，随便一学就一步登天的思想，是电视剧看多了吧，就像武侠电视剧里拿到一本武功秘籍，看一两天，咔咔的就学会了，从此天下无敌，然后开始拯救世界了，不好意思，武侠的世界可以这样，现实的世界不是这样的，只能踏踏实实的去努力，逢山开路，遇水架桥。什么难不难的，为了掌握这门技术，去努力就对了，这才是正确的学习态度。

关于前端学习，我一直不主张完全自学，当然自学的精神可嘉，但是自学的时间成本，精力成本太高了，明明可以跟高手学10分钟就能解决的问题， 很多人自己得折腾两三天，即便这个时候问题解决了，自己也被折腾的精疲力尽了，更何况后边还有很多的问题需要去解决，学习的过程就是一个跋山涉水，穿山越岭的过程，自学好比自己一个人走着去学习，，而且这条路你从来没走过，很容易迷路，而高手对这条路已经走了很多遍了，知道哪里有陷阱，哪里有小路可以直达，怎么灭掉路上的那些妖魔鬼怪各种拦路虎。

有些伙伴说，你说的道理确实对，但是我们去哪里找前端高手，人家为什么要带我们呢？我们也是两眼一抹黑，被迫无奈才自学的嘛，有高手带着，谁愿意一个人苦兮兮的自学呢，为了解决大家这个问题，大家可以跟我师傅学习一下，他每天晚上都在网上有免费直播课，讲的通俗易懂很有条理，也很透彻明白，听了不会让人迷迷糊糊的，而是感觉明明白白的。想听他的网上课程的同学，可以进入他的前端教程资料裙：首先位于开头的一组是：655，其次处于中间地带的一组数字是：567，最后位于尾部的一组数字是：613，把以上三组数字按照先后顺序组合起来即可。学习比拼的不仅仅是努力，还有智慧，还有谋略，学习就像是一场战斗，讲究一个输赢的，你学成了，你就赢了，你最后学的一瓶子不满，半瓶子晃悠，那你就输了。

说起前端，第一个接触到的就是我们现在每天都可以接触到的网页，而网页的构成又分为三种知识的结合

（1） HTML5：

H5给予前端的感觉就像是一个框架一样，如同建房子，而H5的作用就是将框架给架构出来。而H5其实是通过H4发展过来的，但是由于两者相差太大了，所以并没有用过H4来进行过渡学习。在学习H5的时候，刚开始就遇到了困难，因为各种各样的标签，各种各样的元素，学的我是有点儿晕头转向，不过好在，慢慢的自己也就有了那么一点点了解，基本上，H5中的元素分为行级元素以及块级元素，行级元素都在同一行，除非用到
标签，或者通过样式将其变为块级元素，而块级元素则独占一行，然后就是各种标签的使用了，基本上也可以分为几类，1.文本类，2.多媒体类，3.表格类，4.最为重要的表单类标签，标签的使用需要看情况选择，只有经过不断的练习才能逐步了解。而我自己对于标签的使用也仅限于入门阶段，所以也就不班门弄斧了，我这里所谈只是我自己的学习过程。

（2） CSS3:

css的中文解释为层叠样式表单，所以它的主要作用就是装饰，由于开始的时候已经接触到了HTML5，所以CSS的作用就是在框架上面进行装修，而这里面就涉及到了，如何去使用CSS，刚开始学习的时候其实我们可能都接触到了，在HTML的代码中，我们也可以对各种各样的标签进行样式的控制，为什么我们还要通过css来进行控制呢？首先，在HTML中对样式进行控制会影响代码的整洁度。其次，在不断的开发过程中，你会发现，其实有很多样式你以前经常使用和编写，那么通过我们学习过Java所以，首先想到的一定是封装，那么既然有了封装的想法，那就有了CSS的出现，CSS的使用有三种形式，一，外部引用，即所有的CSS样式都存在CSS文件夹中，通过link使用二，在HTML头部通过Style标签进行编写使用，三，也就是我们最不提倡的内嵌，即在标签中进行样式编写，但是这样的使用在canvor(画布标签)极为常见，讲到样式就不得不提到最为重要的选择器，选择器的使用可以通过1..+类名来使用，2.#+id进行选择，3.直接通过标签名进行选择，4.可以通过其父容器再对其进行选择，当然在我的学习中最为常见的是通过类名和id进行选择，其次是直接对标签名进行选择，不过这些选择器中，还有一个使用很多的，那就是组合选择器，因为有时两个标签具有相同的样式，所以这时就会产生两个组合选择器。说完了选择器，就要讲到css中的属性了，比如宽width，高height，颜色color都是属性，每个标签都可以设置属性。

属性学习完就是定位和浮动了以及动画，这些都是让样式更加美化的内容，所以如果需要页面更加美化，那么就要将这部分内容学好，但是很惭愧的是我自己这部分属于没有学好的。

（3）  JavaScript:

JS的作用基本上就是完成前后端的交互，JS的学习过程相对于H5以及CSS3就好了一点点，因为它是可编程性语言，所以对于有过编程语言学习的同学，理解起来还是相对来说容易一点，由于它是弱类型语言，所以对于类型的定义只有Number，String，Boolean，Object，等，而不像java中光是数字类型就有四类八种，而且它不需要编译即可运行，所以它很方便，也很轻量，而且对于变量的定义没有java中的必需声明引用，在JS中一切变量只需要一个Var就可以解决，但是在JS中也有Java中不存在的，比如匿名函数，相当于Java中的方法，即此方法没有方法名，而且可以用变量进行表示，即 var i = function(){};所以对于JS的学习还没有结束。而且还有最为重要DOM和BOM没有学习到。学习还在不断进行，而我也将一往无前。

+ css。

。不是所有的网页都必须有js，但是要想实现一些超酷的功能和界面的时候，就需要涉及到js。如果没有其他编程语言的基础的话，学起来可能要费些力，还是建议先在 w3school上学习。

、flash。熟悉会一点儿就行了，没必要全部都学得精通，当然如果你在学习的过程中，发现你ps或者flash比较感兴趣的话，也可以尝试做美工这一行。

和css3。可以先了解一下，然后再入手。毕竟IE的浏览器大多还不支持。

5.浏览器兼容。懂web标准，熟练手写 xhtml css3 并符合 符合w3c标准。代码能兼容主流浏览器Firfox，Chrome、Safari、IE、Opera。虽然IE6很多都不兼容，但现在还使用的人还是有的。

6.熟悉一门后台编程语言 asp、php、jsp等。

前端开发工程师是一个很新的职业，在国内乃至国际上真正开始受到重视的时间不超过7年。Web前端开发是从网页制作演变而来的，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web 时代的产物，那时网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。

2.前端工程师的职责是制作标准优化的代码，并增加交互动态功能，开发JavaScript以及Flash模块，同时结合后台开发技术模拟整体效果，进行丰富互联网的Web开发，致力于通过技术改善用户体验。前端工程师，我们一般也称为web前端工程师。

3.随着“互联网+”概念的普及，和移动互联网技术的成熟，越来越多的公司，需要更加智能、高效、合理、人性化的交互，对web前端的需求也会越来越大，同时由于web前端的技术框架种类繁多，更新也非常快，这样也需要大量的前端人员进行自己的技能提升。

1丶JavaScript入门《JavaScript权威指南（第六版）》 ★★★★★淘宝前端团队翻译的，看译者列表都是一堆大神。这本书又叫犀牛书，号称javascript开发者的圣经，网上对此书评价很多，大概意思都是说这本书是一本JavaScript文档手册，没有完整看过一遍此书的都不能算是一名合格的前端工程师。 我也是从这本书开始接触前端开发的，当时还是华章出版社的校园大使，免费申请到了这本书，可惜的是两年来我一直把它作为一本cookbook来查阅，一直没有好好通读一遍。个人感觉这本书还是写得枯燥了些，不过内容绝对是五颗星，无可挑剔！2丶《JavaScript高级程序设计》 ★★★★★又称红宝书，雅虎首席前端架构师，YUI的作者Zakas出品。虽然书名带了“高级”二字，但是讲得也很基础，而且行文风格很流畅，每一小节就像是一篇博客，读起来并不枯燥，个人感觉比上面那本犀牛书可读性更强。说到这里，也推荐大家多多关注作者的博客：NCZOnline - The official website of Nicholas C. Zakas ，上面也有许多高质量的博文。感觉这本书就像是作者平时的博文按照前端知识体系组织成了一本技术书。作为初学者如果觉得上面两本书作为入门书来说太厚了，也可以看看这本，不厚，评价也很高，但是由于本人没看过，就不作过多评价了。3丶《JavaScript编程精解》 ★★★★用上下班时间看完的第三本书。看起来比较吃力，第五章函数式编程和第六章的面向对象编程很多都没看懂。全书游戏式的编程教程还是很有意思的。译者tom大叔名头很大，翻译的质量也只是中规中矩吧。不过，还是get到很多技巧！这本书的推荐语说这本书用来入门很好，但是个人认为初学者并不合适看这本书入门，作者在代码示例中不自觉得使用了一些高级用法，初学者看容易晕菜。听说最近出了第二版，加入了NodeJS的内容，这本书是开源的：Eloquent JavaScript4丶《JQuery权威指南》 ★★★错误很多啊，不过其中的语法+示例的形式，确实很适合初学者。但是错误实在太多了，而且有些语句还不通顺，看着很累啊，只能说写得好代码的人，书不一定写得好。