去面试了两次的web前端工程师，都问到了相同的一个问题：你所理解的前端。开始以为，这个概念性的问题，应该不会问到的，问的应该都是一些技术性的问题才是，觉得这个问题很没有技术含量，经过了两次的哑口无言才发现，我错了！对于一门技术的理解程度，个人觉得首先是从概念开始，理解并熟悉了概念后才能更好的运用起来。
 
 
 

  所谓的前端就是：
 
 
 

  用互联网来做比喻,凡是通过浏览器到用户端计算机的统称为前端技术.相反存贮于服务器端的统称为后端技术.
  前端技术包括JavaScript、ActionScript、CSS
  、xHTML
  等“传统”技术与Adobe AIR、Google Gears,以及概念性较强的交互式设计,艺术性较强的视觉设计等等。
  前端开发工程师（或者说“
  网页制作”、“网页制作工程师”、“前端制作工程师”、“
  网站重构工程师”），这样的一个职位的主要职责是与交互设计师、 视觉设计师协作，根据设计图用HTML和CSS完成页面制作。同时，在此基础之上，对完成的页面进行维护和对网站前端性能做相应的优化。另外，一名合格的前端开发工程师，应该具有一定的审美能力和基础的美工操作能力，能很好的与交互及视觉协作。
 
 
 

  刚开始接触前端时，以为前端就只是学学html，css等等简单的语言，其实不然，在慢慢深入学习的过程中，前端是很忙的，需要学习的知识很多，同时，你还要稍微的了解后台等等！！！
 
 

一直想说点什么，直到前段时间开通了博客，一直在忙忙碌碌，却不知道都忙了些什么，我需要记住我走过的路，我需要了解我人生的每一步，不管是生活是技术，今天终于有时间静静的坐在电脑边，随便聊聊我对Web前端的认识和体会。
 
 Web前端工程师是一个特别的岗位，只存在于互联网领域。最近几年随着互联网产业的火爆，对前端工程师的需求量暴增，兵源几近枯竭。各大公司技术掌门一定都有过类似的苦恼：“招一个靠谱的前端工程师、难于上青天”。
 
 我想，一部分原因是，当前不少入道的前端工程师大都是转行而来，毕竟，正儿八经的学校里也不会教这玩意，觉得“切页面”有啥好教的，甚至不觉得html/css是一门语言。转行这事自不必详说，大家也各自瞄准当前市场需求，造成的现象是，初级前端工程师堆成山，中高级人才却一将难求。
 
 起初的入行者无一例外对“视觉”的关注超过了对“内容”的重视，先让页面看起来漂亮，去关注html/css，沿着“视觉呈现”的思路，继续深入下去。因此，这类人是被“视觉”所吸引，从切页面入行，着迷于结构化的html和书写工整的css，喜欢简洁优雅的UI和工整的页面设计，之后开始接触视觉特效，并使用jQuery来实现视觉特效，以此为线索，开始深入研究Dom、Bom和浏览器的渲染机制等，html/css在这些人手中就像进攻兵器，而JavaScript则更如防守的盾牌。
 
 还有另外一群人从另一条道路接触Web前端，即工程师转行做前端，他们有较多的后台语言开发背景，从读写数据开始，渐渐触及浏览器端，接触JavaScript库，起初是在html代码上加js逻辑，后来开始涉及html和css，他们喜欢OO、逻辑清晰、结构悦目的代码，更关注界面背后的“程序语言”和数据逻辑。html/css在这些人手中则更像盾牌，而JavaScript更如进攻的兵器。
 
 应当说这两类人是互补的，他们各自了解浏览器本质的一部分，一拨人对渲染引擎了如指掌，另一拨人则将JS引擎奉为至宝，其实任何一部分的优势发挥出来都能做出精品。大部分前端工程师都能从这两条渊源中找到自己的影子。但，这两类人的思维模式和观点是如此不同，以至于形成了一些不必要的对抗，比如在某些公司，干脆将Web前端技术一分为二，“切页面的”和“写js的”。这样做看上去明确了分工提高了效率，但他对员工的职业发展带来巨大伤害。
 
 
 对于很多Web前端工程师来说，初尝禁果的快感无法持续很久，就陷入一轮又一轮的迷惘，思索自己的职业规划，试图寻找到适合自己的成长道路、看清自身技能的瓶颈，寻找突破。但遗憾的是，Web前端技术被广泛接纳时日尚短，没有多少励志的成功样板可供遵循。然而情况不总是这么糟，毕竟Web前端技术是一门“技术”，和计算机科学系出同门，只是因为互联网的高速崛起而被蒙上了迷雾，遮住了双眼，让我们傻傻看不清时局。
 
 那么，如何定义Web前端技术岗位边界？Web前端技术的价值体现在何处？前端工程师的价值仅仅体现在物以稀为贵吗？前端工程师的初级、中级、高级和专家之间到底如何界定？当前“我”处在什么位置？接下来的路子应当怎样走？何谓前端技术之“道”？
 
 第一，梳理知识架构
 
 我们知道知识积累有两种思路，第一种是先构建知识面、建立技术体系的大局观，即构建树干，然后分别深入每一个知识点，即构建枝叶，最终形成大树。第二种是先收集知识点，越多越好，最后用一根线索将这些知识点串接起来，同样形成大树。第一种方法比较适合科班秀才，第二种方法则更适合转行作前端的人，即实践先行，理论升华在后。比如对“IE6怪异模式“这条线索来说，要首先将遇到的IE6下的样式bug收集起来，每个bug都力争写一个简单的demo复现之，等到你收集到第100个bug的时候，再笨的人都能看出一些规律，这时就会自然的理解IE的hasLayout、BFC和各种bug的原因、你就成为了IE6的hack专家了，当你成为100个知识线索的专家的时候，你已经可以称得上“资深”的水平了。我们知道，10个人中有9个是坚持不下来的，他们会以项目忙等各种理由万般推托，将自己硬生生的限制在草根一族，坐等被淘汰。所以，对于立志作前端的人来说，这种点滴积累和梳理知识非常重要。
 
 
 第二，分解目标
 
 将手头的工作分解为几部分来看待，1，基本技能，2，项目经验，3，沟通能力，4，主动性和影响力。想清楚做一件事情你想在哪方面得到历练，比如，我之前在作第一次875常规性重构的时候（正好是一次视觉和交互上的全新设计），我清楚的明白这次重构的目的是锻炼自己在架构准富应用时的模块解偶能力，寻找在其他项目中架构的共通之处，所以我宁愿加班或花更多精力做这个事情，当然更没打算向业务方多解释什么，这件事情对我来说纯粹是技能的锻炼。而经过这一次重构之后，我意外的发现对业务的理解更透彻深入、更清晰的把握用户体验上的瓶颈所在。如果一开始就把这次常规改版当成一个普通的项目按部就班的做，我只能说，你也能按时完成项目，按时发布，但真真浪费了一次宝贵的锻炼机会，项目总结时也难有“动心忍性”的体会。
 
 所以，每个项目的每个事情都应当认真对待，甚至要超出认真的对待，想清楚做好每件事对于自己哪方面有所提升？哪怕是一个bug的解决，即便不是自己的问题也不要草草踢出去了事，而是分析出问题原因，给出方案，有目的involve各方知晓……，正规的对待每个不起眼的小事，时间久了历练了心智，心有城府自然淡定万倍，而这种淡定的气场对身边浮躁的人来说也是一种震慑和疗伤，影响力自然而然就形成了。
 
 第三，作分享
 
 有心的人一定要逼着自己做分享，而且要做好。首先，自己了解的知识不叫掌握，只有理解并表达出来能让别人理解才叫掌握，比如如果你解释不清楚hasLayout，多半说明自己没理解，如果你搞不懂双飞翼的使用场景，可能真的不知道布局的核心要素。再者，作分享绝对锻炼知识点的提炼能力和表达能力，我们作为工程师不知道多少次和强硬的需求方pk，被击败的一塌糊涂。也反映出工程师很难提炼出通俗易懂的语言将技术要点表述清楚。而做ppt和分享正是锻炼这种能力，将自己的观点提炼出要点和线索，分享次数多了，自然熟能生巧,档次也再慢慢提高。
 
 
 勤于思考，轻装上阵，大胆实践，勇于创新，发掘问题所在，实打实的解决（潜在）问题，这才是我们真正需要的能力。热爱你的工作。热爱跨浏览器开发带来的挑战、热爱互联网技术的种种异端，热爱业内的同行，热爱你的工 具。互联网发展太快了，如果你不热爱它的话，不可能跟上它的步伐。这意味着你必须多阅读，多动手，保证自己的才能与日俱增。下了班也不能闲着，要做一些对自己有用的事儿。可以参与一些开源软件的开发，读读好书，看看牛人的博客。经常参加一些会议，看看别人都在干什么。要想让自己快速成长，有很多事儿可以去做，而且付出一定会有回报。“
 
 
 
 
 

前端技术路线
 

 第一阶段：
 JS基本特效：tab、导航、整页滚动、轮播图、JS制作幻灯片、弹出层、手风琴菜单、瀑布流布局、滚动事件、滚差视图。
 

 JS高级特征：
 
正则表达式、排序算法、递归算法、闭包、函数节流、作用域链、基于距离运动框架、面向对象基础
 

 JQuery：基础使用
 
悬着器、DOM操作、特效和动画、方法链、拖拽、变形、JQueryUI组件基本使用。
 
第二阶段：HTML5和移动Web开发
 
HTML5：
 
HTML5新语义标签、HTML5表单、音频和视频、离线和本地存储、SVG、Web Socket、Canvas.
 
CSS3:
 
CSS3新选择器、伪元素、脸色表示法、边框、阴影、background系列属性改变、Transition、动画、景深和深透、3D效果制作、Velocity.js框架、元素进场、出场策略、炫酷CSS3网页制作。
 
Bootstrap:
 
响应式概念、媒体查询、响应式网站制作、删格系统、删格系统原理、Bootstrap常用模板、LESS和SASS。
 
移动Web开发：
 
跨终端WEB和主流设备简介、视口、流式布局、弹性盒子、rem、移动终端JavaScript事件、手机中常见JS效果制作、Zepto.js、手机聚划算页面、手机滚屏。
 
第三阶段：HTTP服务和AJAX编程
 
WEB服务器基础：
 
服务器基础知识、Apache服务器和其他WEB服务器介绍、Apache服务器搭建、HTTP介绍。
 
PHP基础：
 
PHP基础语法、使用PHP处理简单的GET或者POST请求、
 
AJAX上篇：
 
Ajax简介和异步的概念、Ajax框架的封装、XMLHttpRequest对象详细介绍方法、兼容性处理方法、Ajax框架的封装、Ajax中缓存问题、XML介绍和使用。
 
AJAX下篇：
 
JSON和JSON解析、数据绑定和模板技术、JSONP、跨域技术、图片预读取和lazy-load技术、JQuery框架中的AjaxAPI、使用Ajax实现爆布流案例额。
 
第四阶段：面向对象进阶
 
面向对象终极篇：
 
从内存角度到理解JS面向对象、基本类型、复杂类型、原型链、ES6中的面向对象、属性读写权限、设置器、访问器。
 
面向对象三大特征：
 
继承性、多态性、封装性、接口。
 
设计模式：
 
面向对象编程思维、单例模式、工厂模式、策略模式、观察者模式、模板方法模式、代理模式、装饰者模式、适配器模式、面向切面编程。
 
第五阶段：封装一个属于自己的框架
 
框架封装基础：
 
事件流、冒泡、捕获、事件对象、事件框架、选择框架。
 
框架封装中级：
 
运动原理、单物体运动框架、多物体运动框架、运动框架面向对象封装。
 
框架封装高级和补充：
 
JQuery框架雏形、可扩展性、模块化、封装属于传智自己的框架。
 
第六阶段：模块化组件开发
 
面向组件编程：
 
面向组件编程的方式、面向组件编程的实现原理、面向组件编程实战、基于组件化思想开发网站应用程序。
 
面向模块编程：
 
AMD设计规范、CMD设计规范、RequireJS，LoadJS、淘宝的SeaJS。
 
第七阶段：主流的流行框架
 
Web开发工作流：
 
GIT/SVN、Yeoman脚手架、NPM/Bower依赖管理工具、Grunt/Gulp/Webpack。
 
MVC/MVVM/MVW框架：
 
Angular.js、React.js、Vue.js、Backbone.js、Knockout/Ember。
 
常用库：
 
JQuery、Zepto.js。
 
第八阶段：HTML5原生移动应用开发
 
Cordova：
 
WebApp/NativeApp/HybirdApp简介、Cordova简介、与PhoneGap之间的关系、开发环境搭建、Cordova实战（创建项目，配置，编译，调试，部署发布）。
 
Ionic：
 
Ionic简介和同类对比、模板项目解析、常见组件及使用、结合Angular构建APP、常见效果（下拉刷新，上拉加载，侧滑导航，选项卡）。
 
React Native：
 
React Native简介、React Native环境配置、创建项目，配置，编译，调试，部署发布、原生模块和UI组件、原生常用API。
 
HTML5+：
 
HTML5+中国产业联盟、HTML5 PlusRuntime环境、HBuilder开发工具、MUI框架、H5+开发和部署。
 
第九阶段：   Node.js全栈开发：
 
快速入门：
 
Node.js发展、生态圈、Io.js、Linux/Windows/OS X环境配置、REPL环境和控制台程序、异步编程，非阻塞I/O、模块概念，模块管理工具、开发流程，调试，测试。
 
核心模块和对象：
 
全局对象global，process，console，util、事件驱动，事件发射器、加密解密，路径操作，序列化和反序列化、文件流操作、HTTP服务端与客户端、Socket.IO。
 
Web开发基础：
 
HTTP协议，请求响应处理过程、关系型数据库操作和数据访问、非关系型数据库操作和数据访问、原生的Node.js开发Web应用程序、Web开发工作流、Node.js开发Blog案例。
 
快速开发框架：
 
Express简介+MVC简介、Express常用API、Express路由模块、Jade/Ejs模板引擎、使用Express重构Blog案例、Koa等其他常见MVC框架。
 
Node.js开发电子商务实战：
 
需求与设计、账户模块注册登录、会员中心模块、前台展示模块、购物车，订单结算、在线客服即时通讯模块。
 ~~~
 
## 原始路线
 
第一阶段：
 
HTML+CSS:
 
HTML进阶、CSS进阶、div+css布局、HTML+css整站开发、
 
JavaScript基础：
 
Js基础教程、js内置对象常用方法、常见DOM树操作大全、ECMAscript、DOM、BOM、定时器和焦点图。
 
JS基本特效：
 
常见特效、例如：tab、导航、整页滚动、轮播图、JS制作幻灯片、弹出层、手风琴菜单、瀑布流布局、滚动事件、滚差视图。
 
JS高级特征：
 
正则表达式、排序算法、递归算法、闭包、函数节流、作用域链、基于距离运动框架、面向对象基础、
 
JQuery：基础使用
 
悬着器、DOM操作、特效和动画、方法链、拖拽、变形、JQueryUI组件基本使用。
 
第二阶段：HTML5和移动Web开发
 
HTML5：
 
HTML5新语义标签、HTML5表单、音频和视频、离线和本地存储、SVG、Web Socket、Canvas.
 
CSS3:
 
CSS3新选择器、伪元素、脸色表示法、边框、阴影、background系列属性改变、Transition、动画、景深和深透、3D效果制作、Velocity.js框架、元素进场、出场策略、炫酷CSS3网页制作。
 
Bootstrap:
 
响应式概念、媒体查询、响应式网站制作、删格系统、删格系统原理、Bootstrap常用模板、LESS和SASS。
 
移动Web开发：
 
跨终端WEB和主流设备简介、视口、流式布局、弹性盒子、rem、移动终端JavaScript事件、手机中常见JS效果制作、Zepto.js、手机聚划算页面、手机滚屏。
 
第三阶段：HTTP服务和AJAX编程
 
WEB服务器基础：
 
服务器基础知识、Apache服务器和其他WEB服务器介绍、Apache服务器搭建、HTTP介绍。
 
PHP基础：
 
PHP基础语法、使用PHP处理简单的GET或者POST请求、
 
AJAX上篇：
 
Ajax简介和异步的概念、Ajax框架的封装、XMLHttpRequest对象详细介绍方法、兼容性处理方法、Ajax框架的封装、Ajax中缓存问题、XML介绍和使用。
 
AJAX下篇：
 
JSON和JSON解析、数据绑定和模板技术、JSONP、跨域技术、图片预读取和lazy-load技术、JQuery框架中的AjaxAPI、使用Ajax实现爆布流案例额。
 
第四阶段：面向对象进阶
 
面向对象终极篇：
 
从内存角度到理解JS面向对象、基本类型、复杂类型、原型链、ES6中的面向对象、属性读写权限、设置器、访问器。
 
面向对象三大特征：
 
继承性、多态性、封装性、接口。
 
设计模式：
 
面向对象编程思维、单例模式、工厂模式、策略模式、观察者模式、模板方法模式、代理模式、装饰者模式、适配器模式、面向切面编程。
 
第五阶段：封装一个属于自己的框架
 
框架封装基础：
 
事件流、冒泡、捕获、事件对象、事件框架、选择框架。
 
框架封装中级：
 
运动原理、单物体运动框架、多物体运动框架、运动框架面向对象封装。
 
框架封装高级和补充：
 
JQuery框架雏形、可扩展性、模块化、封装属于传智自己的框架。
 
第六阶段：模块化组件开发
 
面向组件编程：
 
面向组件编程的方式、面向组件编程的实现原理、面向组件编程实战、基于组件化思想开发网站应用程序。
 
面向模块编程：
 
AMD设计规范、CMD设计规范、RequireJS，LoadJS、淘宝的SeaJS。
 
第七阶段：主流的流行框架
 
Web开发工作流：
 
GIT/SVN、Yeoman脚手架、NPM/Bower依赖管理工具、Grunt/Gulp/Webpack。
 
MVC/MVVM/MVW框架：
 
Angular.js、React.js、Vue.js、Backbone.js、Knockout/Ember。
 
常用库：
 
JQuery、Zepto.js。
 
第八阶段：HTML5原生移动应用开发
 
Cordova：
 
WebApp/NativeApp/HybirdApp简介、Cordova简介、与PhoneGap之间的关系、开发环境搭建、Cordova实战（创建项目，配置，编译，调试，部署发布）。
 
Ionic：
 
Ionic简介和同类对比、模板项目解析、常见组件及使用、结合Angular构建APP、常见效果（下拉刷新，上拉加载，侧滑导航，选项卡）。
 
React Native：
 
React Native简介、React Native环境配置、创建项目，配置，编译，调试，部署发布、原生模块和UI组件、原生常用API。
 
HTML5+：
 
HTML5+中国产业联盟、HTML5 PlusRuntime环境、HBuilder开发工具、MUI框架、H5+开发和部署。
 
第九阶段：   Node.js全栈开发：
 
快速入门：
 
Node.js发展、生态圈、Io.js、Linux/Windows/OS X环境配置、REPL环境和控制台程序、异步编程，非阻塞I/O、模块概念，模块管理工具、开发流程，调试，测试。
 
核心模块和对象：
 
全局对象global，process，console，util、事件驱动，事件发射器、加密解密，路径操作，序列化和反序列化、文件流操作、HTTP服务端与客户端、Socket.IO。
 
Web开发基础：
 
HTTP协议，请求响应处理过程、关系型数据库操作和数据访问、非关系型数据库操作和数据访问、原生的Node.js开发Web应用程序、Web开发工作流、Node.js开发Blog案例。
 
快速开发框架：
 
Express简介+MVC简介、Express常用API、Express路由模块、Jade/Ejs模板引擎、使用Express重构Blog案例、Koa等其他常见MVC框架。
 
Node.js开发电子商务实战：
 
需求与设计、账户模块注册登录、会员中心模块、前台展示模块、购物车，订单结算、在线客服即时通讯模块。
 
最后，一个人不可能把所有的知识完全学完。所以根据自己的主要业务确定自己的学习方向。

hi，大家好！
 
 
 
我的第一篇文章：【web前端到底是什么？有前途吗？】，在我没想到如此 ‘HOT’ 的情况下 得到很多好评和有效传播。
 
 
也为我近期新开的 个人前端公众号：前端你别闹（webunao）
 
 
 
直接增加了几百粉（果然，帅的人大家都喜欢。）
 
 
 
 
被国内著名技术博客 CSDN 推上博客首页，并且经过我授权在其他公众号也转载了不少。
 
 
我觉得我这片入门文章可以小火，究其原因 有以下几点
 
 
web前端是如此的火热，关注度也逐年升高
 
 
由于前端开发的火热 和 一些IT巨头公司 对 web前端开发 人员的需求旺盛，让越来越多的孩子转入前端
 
 
前端开发领域 是it技术语言领域唯一一个 男女老少都可以快速入门并快速提升兴趣的领域（嘿嘿：妹子那绝对是最多的！）
 
 
我文风实在是太逗比了，我颜值实在是太帅了
 
 

 ![](https://imgconvert.csdnimg.cn/aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTYwODA3MjE0MjIyNjQx?x-oss-process=image/format,png) 

 

  不知不觉，我废话又多了起来，段子手的天性就是改不了？ ![](https://imgconvert.csdnimg.cn/aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTYwODA3MjE0NDM4Nzg1?x-oss-process=image/format,png) 

ok ,我们切入今天的正题 ：
 
web前端到底怎么学？
 
 
那么在讲 web前端怎么学 这个大命题之前呢，依据我本人的尿性，还是得先把你拉入坑，让你在坑里好好学 O(∩_∩)O
 
由于第一篇文章，有说到
 
 
 
O(∩_∩)O 好了，我们已经相识了，我们进入相知的阶段（我擦，太快了吧？）
 
 
web前端的历史渊源 和一些出处，童鞋们大概都有所了解了。
 
下面我们进入【相爱】阶段（我都不认识你，就tm相爱了？）
 
  歌词云：* 想说爱你不容易 *!    
 
但是我会想方设法让你爱上她（web前端开发）。
 
 
一般据我经验，在喜欢并且决定和她恋爱之前，我都会做一下充分准备和调查，有必要了解和研究清楚 ‘她’ 的几个特性和习惯
 
 
 
web前端的基本工作职责 和基础技能（要清楚）
web前端的分类和门派（简要概述，武林 实在是太大啦）
前端开发 必看的书籍资料（干货重点）
 
 
如果 你已经了解清楚以上前2点并思路清晰，那就直接 和她相爱吧-直接跳入 【前端开发 必看的书籍资料】
 
 
1.web前端的基本工作职责（要清楚）
 
 
“ 入一行，要先知一行 ”；我们来看看web前端开发职位 无论什么门派都要做到的一些基本工作职责。
 
首先，你必须是一个合格的“页面仔”，这个叫法不好听，但很生动；
 我们都知道，所有呈现的内容都是基于HTML 网页的。
 如果你的html、css（包括现在的HTML5+CSS3）基础不会，或者不够扎实，都很难在有大的进步，或者你的JS 很好，但布局基础不行，还是不能算合格的web前端。
 
 
其次，前端主要负责实现视觉和交互功能，以及与后端服务器通信，完成业务逻辑。现在前端的核心价值在于对用户体验的极致追求。
 那么我们靠什么来提升用户体验和人性化操作，让用户觉得体验牛x、舒服呢？（当然细分厉害的公司，会有专门的 用户体验攻城狮）
 当然是我们自始自终的主角 JavaScript了，毕竟它最初就是为浏览器而生的脚本语言。
 
 
然而，JS这门语言并不是一种强类型语言，更像是一种解释型语言，所以很多属性，在不同的浏览器环境解释有很大不同导致，效果和性能千差万别，而且很多属性之长，之多，之巨都很有工作量。
 
 
之后，就出现了Jquery 这种的框架神器，由于其好用，简单，效果多样，兼容完美，高效率等特性，迅速席卷全世界，所以如果想入门，jquery 这个东西你是逃不掉的，而且利用它简单的语法，你会很快将一些效果实现出来，迅速提升兴趣。
 
 
再后，既然涉及到视觉 和用户体验，那么UI 设计知识，你肯定要涉及或者懂一些设计方面的技能和基本素养，比如PS的一些基本操作，切图，和颜色值（比如会改个字，隐藏个图层，改个尺寸，变个颜色什么滴），屏幕适配方案等，讲道理说：平时并不需要我们做，但技能包里绝对要有。
 
 
最后，服务器知识+后端语言基础，这个职责和话题就比较hight了，到后面我们会一一解释。
 
 
总之，web前端同样是程序员，由于前端是位于后端程序和界面设计师之间的岗位，相当于中间桥梁，要完成三者的对接，涉及到广泛 的知识，规模大到工程级，也就有了前端工程师的说法（某人总结，很是到位）。
 
 

 ![](https://imgconvert.csdnimg.cn/aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTYwODA3MjIwNzA3NTUy?x-oss-process=image/format,png) 

web前端工程师，是一个要精通本职html,css,javascript，也要了解后端编程，了解界面设计，了解软件工程的综合人才。
 
（卧擦！这才入门，web前端就这么多职能 和掌握的基本技能，不开森了 ，哼！）
 
哈哈，看到这一大篇的职责和技能，你并不要害怕，因为这些就像小孩子，会走路，会说话。
 只要你有兴趣，只要有人领路，有教程自然而然就能掌握的技能，至于一些设计素养，反正你不是UI，有最好，没有又有什么所谓呢？
 
 
2.web前端的分类和门派（简要概述，武林 实在是太大啦）
 
 
根据web前端的细分工种 和 业务不同，我无耻的把她比拟出来几个门派，供大家参考，也让无比庞大的前端划分变得有趣一些，不然下面我放一张图， 你看了会晕菜。
 这里我先简单说几种，我们常常熟知的几个门派
 比如：
 
 
【少林派】：七十二般武艺样样精通 - web网站开发
 
 
【武当派】：以柔克刚 - 移动APP开发
 
 
【峨嵋派】：倾国倾城 - canvas 数据可视化
 
 
【华山派】：剑法精湛 - nodejs开发
 
 
【逍遥派】：潇洒飘逸 - HTML5游戏
 
 
 
 
让你晕菜的技能树 ，客观您感受一下先
 
 
 
由于web前端知识体系 实在是太庞大，这是另一个话题，三言两语是描述不清的，我们后面会专门开一个专题文章，来讲解和讨论这个话题。
 

 ![](https://imgconvert.csdnimg.cn/aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTYwODA3MjE1NzA4NDkx?x-oss-process=image/format,png) 


 好累，我们赶紧去看干货 

 
3.前端开发 必看的书籍资料（干货重点-入门篇）
 
 
一、 html + css 这部分建议在 w3school 在线教程 上学习，边学边练，每个属性后还有在线测试。 然后过一遍之后可以模仿一些网站做些页面。记住这个一定要多练 多练 多练 ，最重要的事儿 还得我说三遍？
 
 
二、 javascript 要学的内容实在很多，如果没有其他编程语言的基础的话，学起来可能要费些力，还是建议先在 w3school上学习一些基本语法 和定义。
 然后你必须要看书，然后实践（好多人问 有没有快速捷径，我只能告诉你：如果有捷径，码农们就不用天天如此苦逼了吧）。
 
 
 
忍得住寂寞枯燥，才能拿得到高薪
 
 
对于习惯看视频学习的同学，以上内容也可以在 慕课网 这个在线学习网站上去搜，现在里面基础课程讲解都还不错。跟着敲一边，确实可以避免看书查资料的枯燥
 
 
 

 下面多图预警，多书预警。 

以下内容都是经过我自己本身的学习路线经验，还有网络各路大神共同整理的资料 汇总，帮助源源不断入坑的新人更好的学习。
 
前端书籍必读、必买（本帅认为）
 ★★ 越多，推荐等级越高，和难度无关。最好按照我给的顺序入门，这样不会让你枯燥，想放弃，如果先推荐经典的厚的，满篇定义，我估计是害你们放弃。
 
#【JavaScript】
 
 
 
先说 JavaScript,因为前面说了，css最好跟着视频练习，毕竟都是可视化的，像做艺术。
 
 

 【第一本】《JavaScript DOM编程艺术》★★★★★ 

 
最好的JS入门书籍，最让人有兴趣读完的那种书。
 它通过一个 幻灯片 案例，从头到尾教你实现出来，最后效果实现的同时，基本的JS常用属性，你也就滚瓜烂熟了，很有成就感。（个人很偏向这种风格书籍，此书让我彻底爱上前端js）
 一目了然地告诉你如何用JS操作DOM（这是浏览器端编程的基本功），还灌输了最符合标准的编程理念。可惜有点老，最新一版是2010年的。不过不影响阅读和实现，全部按照最新ES5属性就行了。
 
 
【第二本】《JavaScript高级程序设计》 ★★★★
 
 
又称红宝书，（我喜欢叫 望眼镜）
雅虎首席前端架构师，YUI的作者Zakas出品。虽然书名带了“高级”二字，但是讲得都很基础的属性内容，事无巨细。
关键一点是翻译的也很到位，并不是如嚼蜡一般，这很重要。看此书，我建议配着下面的犀牛书一起 看效果更佳。
 
 
【第三本】《JavaScript权威指南》 ★★★★★
 
 
著名的淘宝前端团队翻译的，看译者列表都是一堆前期大神。
 
这本书又叫犀牛书，被国人誉为：javascript开发者的圣经。网上对此书评价很多很好，大概意思是说这 本书是一本JavaScript文档手册，更适合当作字典和备忘录查询来使用。
 我也是对这本书有很厚的感情和依赖（忘了属性就拿来翻翻，总有收获），个人感觉这本书还是写得枯燥了些，毕竟是工具性质，不适合当作第一本入门来看，不过内容绝对是五颗星，无可挑剔！神书
 
 

 【第四本】《JavaScript语言精粹》 ★★★★★ 

 
作者是大名鼎鼎的 【老道】，我的JS 偶像，我github第一个关注的就是这个大胡子叔叔。
他是 JSON格式的发明和维护者，也有很多著作和对JS 这门语言的超多贡献，可见此人功力绝对顶级！
这本书，属于稍微入门以后看的，了解了一些中高级概念 比如：闭包、原型链、作用域链、继承封装等以后，
看此书有如神助，看一页相当于犀牛书几十页的讲解（不吹牛逼，当时我是这感觉的）
 
【CSS】
 
 
 
【CSS】类， 如果视频看完了，练习的熟练了，你还需要一些书的推荐和查询，也是有必要的，我再来给你罗列几本经典的收藏书，买不买均可的。
 
 
【第一本】《Head first HTML&CSS》 ★★★
 
 
好的入门书。看两遍就对HTML & CSS 有个大概印象了。
此时把w3cschool作为备查手册收藏起来，结合此书，事半功倍，成就感爆棚。
 
 

 【第二本】《CSS权威指南（第三版）》 ★★★★ 

 
最权威的CSS书籍，除了阅读W3C的文档外的不二选择（就是翻译太操蛋，可能有的词你以为是火星语，不过不影响阅读）。
有时间可以反复看，有css3内容，并当做字典随时查。类似犀牛书
 
 
【第三本】《图解CSS3：核心技术与案例实践》 ★★★
 
 
这本书讲解的是最新的CSS3（前几本书停留在CSS2.1时代，2.1是基础），CSS3也是必学的，不然真的跟不上时代了。
 
 

 【第四本】《CSS禅意花园》 ★★★★ 

 
这本书很值得期待，我看过PDF版本的，那时候还没翻译出来，翻译的也一般，不过作者是巨牛逼的，听说对css理解的就像自己的左右手，光靠写CSS 他年薪就轻松百万了。。汗颜！思路清晰，图文并茂，还解决一些疑难杂症和高级技巧，类似于JS的语言精粹了，大神级别。
 
 
好了，差不多就推荐到这里，CSS这基本是基于情怀，罗列一下，买不买都没必要，想当年我学CSS 是挨着几个仅有的视频，一个属性一个属性的练习，还有IE6 各种兼容问题，虐到爆，那酸爽（现在你们是性福的，基本不用兼容IE6 这个老东西了，）。
 
真正起到决定作用的，还是JS语言的掌握和实践，JS能力越强 基础越稳固，你的前端能力就会越好， 自然薪资越高，所以现实点说大家，大家一起努力吧，让money 都到碗里来
 
 
 
（有些童鞋认为：从来不需要买纸质书，我全程PDF就行了嘛，不过我建议有些书还是要纸质的，这样有感觉，也可以做笔记，甚至随时当工具书字典来查询，由于前端的特殊性和js语言的属性之繁多庞杂，我建议你还是要买纸质的书。帮助很大，而且我告诉你有了钱要补上正版呃）
 
那么PDF截图奉上，嘿嘿 如果需要请到此大神网站 网盘下载，应有尽有，此处应该有掌声！
 
地址：http://www1.w3cfuns.com/feres.php?do=picture&listtype=book
 

 ![](https://imgconvert.csdnimg.cn/aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTYwODA3MjIwODAwMDA2?x-oss-process=image/format,png) 

####本篇最后（我真的很累，原创很累的，所以我得结尾了，后一篇在介绍更多的干货）
 我总结了部分一些知乎大神举荐的书评连接（微信不可外链，可查看我博客） 和我自己觉得要看的书，罗列如下，供君参考（嘿嘿！是不说我正经起来，很不习惯？）
 
★ 越多，难度越高。
 
 
 
CSS
 
 
 
 
 
CSS权威指南 （第3版）★★
 精通CSS★★★
 HTML & CSS设计与构建网站★
 
 
 
 
 
JavaScript
 
 
 
 
 
JavaScript & jQuery交互式Web前端开发★
 JavaScript DOM编程艺术 （第2版）★
 JavaScript高级程序设计（第3版）★★
 锋利的jQuery★★
 高性能JavaScript★★★
 JavaScript语言精粹★★★
 JavaScript权威指南★★★
 编写可维护的JavaScript★★★
 JAVASCRIPT语言精髓与编程实践★★★
 Effective Javascript★★★
 Secrets of the JavaScript Ninja★★★
 JavaScript模式★★★
 JavaScript设计模式★★★★
 基于MVC的JavaScript Web富应用开发★★★
 
 
 
 
 
性能实践(不是本篇重点)
 
 
 
 
 
高性能网站建设指南★
 
 
 
 
 
这个文章花费了我不少时间整理收集，然而还是不到冰山一角，至少入门够用了，所以请看到的同学，尽心收藏并帮助传播，可以帮到更多的新人和疑惑中的转型的从业者，我将会非常高兴和欣慰，也将有更大的动力和精神来继续更新和贡献微薄之力。
 
 
有人问我：又没人给你钱，你何必这么辛苦，还得工作，还得写文章。然而我说我不在乎钱那是不可能的。
 
我还告诉你们，这真的是我的兴趣和责任，因为我经历了前端洪荒的年代和苦楚，所以我很愿意分享和帮助新来者，少走弯路和浪费时间。
 
到最后：兴趣都会变成钱！坚持下来就好。也希望大家支持
 
 
能在江湖混迹多年的，肯定不是靠工具和潮流。绝对是靠的不断提升的内功
 
 
希望大家明白，趁年轻 一定要忍住枯燥，打好基础!
 
 
在最后，特别感谢，贺贺妹子（傻），辛苦整理提供一些资料和配图，让我的文章更加生动和有趣。我想她一定是被我的颜值折服了吧！
 

 ![](https://imgconvert.csdnimg.cn/aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTYwODA3MjIwOTA2MzU2?x-oss-process=image/format,png) 

 
 
入坑方式： 欢迎加入~！气氛热情，欢乐多，妹子多！
 
 
 
 
 
扫描屏二维码或直接搜索，可以关注 我的前端公众号 ： 前端你别闹
 及时更新一些前端解惑和段子
 
 
 
如果未留言就转载，或者转载不署我名字的，你将会越来越丑！很准的呃