基本所有想要进入前端开发领域的人问前端开发人员如何入门的时候，得到的答案都是看 w3cschool 。就个人感觉而言，w3cschool确实是一个对前端完全没有了解的人一个好的入门去向，它主要的优点是浅显但又完整地向初学者展现了前端最需要掌握的基础知识：HTML，CSS以及javascript。打开网站以后从HTML教程进入，你就打开前端开发的大门（大坑）了。建议的是HTML,HTML5,XHTML,CSS,CSS3一次性读完下来，对基础知识的HTML和CSS有了大概的了解以后，就可以开始找找书籍来进一步学习。

HTML和CSS的书籍其实很多很多，当时在学习的时候也是东看西看的。很多人推荐的第一本HTML和CSS的书籍是《Head first HTML & CSS》，称为最好的入门书。而第二本推荐的推荐的是《CSS权威指南（第三版）》，非常权威的一本CSS的书籍，可以不断翻阅进行学习。而接下来第三本是《精通CSS》，广受前辈推荐的一本书，汇集了不少的CSS的最佳实践。而最后推荐一本比较新的书，《图解CSS3：核心技术和案例实践》，涉及到了最新的CSS3的很多新的属性。前面没有专门提到HTML的书籍，因为单纯的HTML其实在w3cschool就基本了解完毕了，最新的HTML5提供的许多新标签和新的API等等，就不是这个阶段的学习资料了。而上面提到的一些书籍年限比较久远，但是觉得那些最基本的CSS属性一直都是稳定下来了的，看这些书完全可以很好地掌握CSS。当然还有很多非常的CSS书籍。下面提供一个不错的网址，里面提供了很多前端开发书籍的下载： 前端网(W3Cfuns) - 前端开发工程师互动平台 。

接下来说说基础知识的javascript部分。这个也是这篇文章比较纠结的地方，是推荐先学javascript还是学习jquery好。原生javascript是一个前端开发人员水平的最主要的评价标准。你原生javascript厉害才能真正的登堂入室，称得上一个比较牛的前端开发工程师。它是一门编程语言，学习曲线也是比较曲折，而学好学精更是难上加难。所以想要比较快速的入门前端开发，能写得出页面和交互，不少人推荐的是jquery框架的学习，而往往很多人学习完jquery以后太过于依赖而没有回归本质学习javascript，对于闭包，原型链，浏览器兼容性问题，继承等等javascript的核心理念都没有认识到。上面说了很多，具体的学习路线就看你自己怎么想了。

Javascript的入门书籍我是比较推荐《javascript DOM编程艺术》的，很好的一本入门书籍，也有符合标准的编程理念，能让你比较轻松地入门javascript。接下来javascript的必读书籍（没有之一）就是《javascript高级编程设计》，这本书籍就是javascript界的一本圣经，非常全面完整权威的展示了javascript又有不少的实际代码可以让读者去实践。而往后的学习推荐《javascript语言精粹》，这书很薄，却是一本让你把javascript写得更完美的不可多得的好书。而学习完javascript，很重要的一点就是要去学习ajax（其实ajax也是javascript的一部分），可以看看《Head First Ajax》进行了解，以及w3cschool上面也有讲解到，它是我们和后台开发人员进行数据交互不可缺少的一门技巧。

上面提到的jquery，它的介绍就不多说了，一搜一大把。它的入门推荐书籍是《锋利的jquery》，我很喜欢的一本jquery的入门书籍，讲解的非常详细，而且也有不少的案例可以让你进行学习。但是千万别忘了原生的javascript才是前端开发工程师最重要的技能，没有之一。

经过上面几个阶段的学习，基本可以完成企业里面平常的前端开发任务了，这个时候可以去看看高性能网站建设指南及其续篇《高性能网站进阶》，两本非常不错的书籍，可以让你更好地去优化自己创建出来的前端网站。而其实到了这个阶段，你也是基本知道如何去学习和进阶自己的前端开发水平了。

接下来说说如今前端比较热门的框架，当然只是局限于我自己的认识，毕竟在前端开发领域我也只是个菜鸟，还有很多需要学习和深入的地方。后面的部分就是前端开发工程师进阶的个人建议。

Bootstrap，应该是如今最火爆的的前端框架之一了。 官网 对它的概括是：简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。它确实也是最近几年基本每个公司都要求前端开发人员掌握的框架之一。其他的就不多说了，提供了很好的兼容性，不错的UI界面以及不少的javascript组件，让一个网站建造起来非常的简单和容易。而且官网的文档非常的详细，把文档看一遍基本就会使用了。另外还有非常多的这样的前端框架，在需要的时候可以一一的去了解，它们学习曲线都很简单。

也许你会被很多重复的CSS代码以及前缀问题所烦恼，Less（SASS等）赋予了CSS动态语言的特性，如变量，继承，运算，函数等等，并且即可以在客户端运行（支持IE6+,Webkit,Firefox)，也可以借助Node.js或者Rhino在服务器运行。这也是我最近用来预处理CSS的主要工具之一，它的官网是 LESS « 一种动态样式语言 ，你会喜欢上它的。而coffeescript我仅仅是了解并编写了一些案例，它能把javascript写得非常优雅，具体的就不多说了毕竟不是非常了解，免得误人子弟。中文官网网站： CoffeeScript 中文 。

也许有时候你只是编写简单的前端开发，但是企业站等等页面代码的不断增加，开发人员的不断增多，代码逻辑方面可能越来越混乱，这个时候就需要提供模块化的开发环境了。Sea.js是本人这方面学习并且使用的框架，它的官方地址是： Sea.js - A Module Loader for the Web ，另外和它类似的就是require.js（ RequireJS 官网 ）。选择哪个你可以都充分地阅读它们的文档以后进行学习。为什么使用sea.js？正如官网所说的，追求简单、自然的代码书写和组织方式，它也具有以下的核心特性：简单友好的模块定义规范，遵守着CMD规范并且像node.js一样书写模块代码，而第二点是自然直观的代码组织方式，依赖的自动加载、配置的简洁明晰。

随着前端开发越来越多的数据处理，或者为了更好地分离页面结构和数据，或者是编写单页的应用，MVC，MVVM框架不断涌现。Backbone.js, avalon.js本人都是读了官网文档进行了解，最后选择angular.js来进行学习。毕竟还在学习阶段，这里提提也是提供一个学习方向而已，而推荐的书籍是《angular权威教程》。

而前端开发工程师的继续进阶路线可能是往全栈工程师发展，学习后台开发语言PHP，PYTHON？其实不然，完全可以继续沿用我们学习的javascript，出现了新的一门热火朝天的 node.js ，用javascript来写服务端。Nodejs的学习资源非常多，个人比较推荐的是《深入浅出node.js》

正如上面所说的，随着前端项目的文件结构越来越复杂，以及我们在一个项目完成以后需要进行不少的工作，比如javascript，css文件的合并和压缩，图片的整合和压缩，less等预处理语言的处理等等，我们非常迫切需要有工具来管理我们的文件。这里我自己进行选择的是gulp.js框架（ gulp.js - 基于流的自动化构建工具。 ），官方的说明是：用自动化构建工具增强你的工作流程。有另外一个也非常火的框架是grunt （ Grunt: JavaScript世界的构建工具 – Grunt中文网 ）。个人一开始选择gulp的理由是学习起来比较容易而功能非常强大。学习的话书籍方面的资料肯定不多，在网上进行搜索以及查看官网文档就能不错的入门了。

最后再说一些自己的想法吧。

Github 是前端学习非常好的一个地方，当然它也是很多编程语言学习的好地方。上面有非常多的开源项目，创建属于自己的一个github账号并且不断地收集不错的前端开发资源，并适当地进行模仿它们的代码编写，发展的空间非常大。个人的github是 github/cody1991 ，关注了不少的优秀项目，也有自己经常更新的个人前端项目（比如个人简历，个人博客等等）。

Codrops ( Codrops , Useful resources and inspiration for creative minds )是个人非常喜欢的一个外国前端博客。上面有非常多非常不错的前端开发项目，使用了非常多前沿的技术，页面交互也非常酷炫和友好，另外每个项目的代码也是开源的非常容易下载来学习。外国的前端开发水平是非常高的，甚至不少前端开发人员的薪水高于后端，而且很有开源的精神，存在不少非常优秀的前端博客。把英语学好，常常去阅读它们，肯定是你前端进阶非常好的一个手段。

一个前端开发大牛的博客： 豪情 - 博客园 ，感觉他在资源收集方面真的做的非常好，可以认真的看看他的博文来进行资源的收集和学习。而他所创建的 QQ群 里面的前端技术讨论氛围也是非常棒的，可以进入和同行的人交流学习。另外非常建议阅读它所创建的群的群规： 群规-v1.0 ，你可以在里面比较条例清理的收集自己想要的资源。

最后的最后，推荐一个非常不错的github库： front-end-collect ，里面真的收集了非常非常多的资源。另外就是自己最近收集的不少电子书和资料： 前端资源2015 。

这篇文章的doc版本下载地址：frontend-introduction.doc 谢谢。