自学方法：
1、作为一个初学者，你必须明确系统的学习方案，我建议一定有一个指导的人，全靠自己学，放弃的几率非常大，在你对于web前端还没有任何概念的时候，需要一个人领进门，之后就都靠自己钻研，第一步就是确定web前端都需要哪些内容，并且在多少时间内学完，建议时间6个月保底。
2、视频为主，书为辅。很多初学者在学习前端的时候非常喜欢去买书，但是最后的结果是什么？看来看去什么都不会写，所以在这里给大家提醒，书可以看，但是是在建立于你已经对于某个知识点有了具体操作的执行后，在用书去巩固概念，这样更加利于你对于知识的理解。
3、对于学习技术来讲，掌握一个学习方法是非常重要的，其实对于学习web前端来讲，学习方法确实很多都是相通的，一旦学习方法不对，可能就会造成“方法不对，努力白费”。其实关于这方面还是很多的，我就简单说个例子，有的人边听课边跟着敲代码，这样就不对，听课的时候就专心听，做题的时候就专心做题，这都是过来人的经验，一定要听。根据每个人的不同，可能学习方法也会有所出路，找到适合你自己的学习法方法是学习的前提。
4、不建议自己一个人瞎学，在我了解学习编程的这些人来看，从零基础开始学并且最后成功做这份工作的其实并没有几个，我觉得大部分原因就是因为他们都不了解web前端是干什么的，学什么的，就盲目的买书看，到处找视频看，最后看着看着就放弃了，所以我建议初学者在没有具体概念之前，还是找有经验的人请教一下，聊过之后你就会知道web前端具体是干什么的，该怎么学，这是我个人的小建议，可以不采纳。
自学路线：
第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项目、应用Vue.js开发WebApp项目、应用React.js开发WebApp项目)
第5阶段：混合(Hybrid,ReactNative)开发(1周)
内容包含：(微信小程序开发、ReactNative、各类混合应用开发)
第6阶段：NodeJS全栈开发(1周)
内容包括：(WebApp后端系统开发、一、NodeJS基础与NodeJS核心模块二、Express三、noSQL数据库)
基础书籍：
1、《Head First HTML与CSS(第2版)》，入门真的是经典书籍，手把手教学，丰富的案例让你从 0 开始学前端。
2、《CSS权威指南(第三版)》，这本书作为 CSS 的经典著作，把原理讲得非常的通透，除了 w3c 标准，算最权威的一本了，毕竟权威指南。
3、《CSS揭秘》神书，47 个 css 技巧让你在面对各种 css 问题的时候游刃有余。是 css 书籍中评分最高的了，css 进阶必备。
4、《javascript语言精粹》，这本书可以在入门之前了解一下基本语法，以及在学习之前可以了解下 JS 里面的精粹以及糟粕，虽然这本书很薄很薄，但是值得反复去读的一本书。
5、《JavaScript DOM编程艺术(第2版)》，本书在简洁明快地讲述JavaScript和DOM的基本知识之后，通过几个实例演示了专业水准的网页开发技术，透彻阐述了平稳退化等一批至关重要的 JavaScript编程原则和最佳实践。
6、《JavaScript权威指南》：犀牛书是每个FE都绕不过的一本书，可以先大致通读几遍，也可以把其当作工具书，时时翻阅。
视频教程:
自学前端，首先的你得搞懂前端是什么，要学习的内容是什么，每天能抽出多少的时间
去学习，能不能坚持的问题，很多同学可能就是三分钟的热情去学习，然后过几天就偷懒学不下去了，为了避免这样半途而废，大家选择学习的方式就是很重要的。还有就是重点的学习哪些技术。
以下就给大家分享一下web前端开发中需要掌握的技术：
1、学习HTML，这是很简单，基本的是要掌握div，formtable、Ulli、P、跨度、字体这些标签，这些都是常用的，尤其是DIV和表格，DIV，表也可以用于布局，但不灵活，和用于基本表处理数据。
如果你想要学好web前端最好加入一个好的学习环境，可以来这个Q群，首先是132，中间是667，最后是127，这样大家学习的话就比较方便，还能够共同交流和分享资料
2、学习CSS，CSS这里说的不包括CSS3 Web前端开发工程师里面我们看到的，一个可以使用HTML或CSS + CSS+DIV的界面布局，所以CSS是用来协助HTML布局和显示，我们称之为“CSS样式”，为什么说DIV+CSS？因为我说div是HTML主要用于布局的，所以div是这个东西的核心！CSS必须配合部。CSS必须掌握浮、位置、宽度和高度，以及较大值和小值，以100%，溢出，边缘、填充等。这些都是与布局相关的样式。
3、然后就是JS的学习。JS入门很简单，不需要很多东西，只要根据ID或名称DOM或”风格或价值，然后以一个ID或名称元标签，或额外的数据，在HTML，这是对数据的操作有关系，那么数据逻辑的影响，无非是一个跳跃，弹框，隐藏什么，这一切都是结合其他应用，代码一点都不难，将这些基本的JS。百度其他好。然后多看一些，不是什么问题。
4、学习jQuery相当于封装一组JS插件的JS。其目的是操作更方便，编写更少的代码，jQuery条目也非常简单。这些都是切入点，要学会像JS，只是改变了JQ代码。剩下的就跟百度一样。
5、较好是指出背景语言，如java，php，为什么？因为我们是前台接口数据，从后台到点，如果后台代码，你知道如何与后台数据交互是好的，它节省了时间，也可以使前端代码更加规范。否则，可能是因为你回来了，无法忍受的数据，然后前端代码再次重写，这将是可怕的。
6、研究CSS3 + HTML5，为什么放在后面呢？因为现在对于前端人员来说，复合型且不断提升能力的人是企业很看中的，所以，如果你准备从事专业战线，学习一下会更好。
以上6点，基本上是一个web前端开发工程师掌握的技术，对于一个新手小白来说，掌握以上技能基本就能入职web前端职位了。
用语义化的HTML标签配合CSS百分百还原设计稿，并使用JavaScript完成各种交互逻辑，这是前端的基本功。当然，如果你想掌握扎实的理论知识，除了通过教材、视频等渠道学习外，在学习过程中做大量的实践，通过不断写代码去应用所学知识，获得快速成长。
二、熟练掌握一门Mvvm框架
随着前端的日益复杂，大部分应用场景都已经离不开它们了。因此，你应该清楚的了解框架出现的意义以及框架的职责边界，这样你才能轻松应用框架提供的各种能力辅助开发工作。除了在应用中投入更多的心思外，你还可以去主动去学习一些框架源码，进一步了解框架的实现原理。
以上所介绍的是前端工程师应该掌握的部分技术能力，除了技术能力外，一名优秀的前端工程师还应该具有业务能力。
首先，就是要有责任意识。如果你不甘心只当一颗螺丝钉，你就需要有责任意识，对产品和项目负责。一般来说，从产品的需求、设计、开发、测试到最终的上线都是由工程师在主导，并协调各个角色成员，这对工程师提出了很高的要求。因此，在学习阶段你应该按照严格的工程师标准来要求自己。
其次，要有产品思维。当你接到一个需求的时候，也要思考这个需求解决了什么问题，有什么价值和意义。作为一个工程师，最好能参与到需求早期的讨论中，充分理解业务，这样你对需求的把握和理解会更准确，而不是产品说什么你就做什么，有些时候你会找到一条既能满足需求又能节约开发成本的路。
最后，良好的沟通能力。作为前端工程师不可避免的就是需要和不同岗位的人进行沟通，充分的沟通可以避免走一些弯路，提升工作效率。