结合个人经历总结的前端入门方法（这才是真的入门经典）

结合个人经历总结的前端入门方法，总结从零基础到具备前端基本技能的道路、学习方法、资料。由于能力有限，不能保证面面俱到，只是作为入门参考，面向初学者，让初学者少走弯路。

互联网的快速发展和激烈竞争，用户体验成为一个重要的关注点，导致专业前端工程师成为热门职业，各大公司对前端工程师的需求量都很大，要求也越来越高，优秀的前端工程师更是稀缺。个人感觉前端入门相对容易，但是也需要系统地认真学习，在打好基础后坚持学习，成为优秀前端工程师也只是时间问题。

学习任何知识最重要的都是兴趣，如果经过一段时间的学习感觉不喜欢，那可能强迫自己学习是很痛苦的，效果也不会好，毕竟这很可能就是以后很多年生存的技能。不过随着互联网行业的发展，前端必然是Web开发人员需要学习的知识，有时候是没有专业前端工程师一起合作的，所以即使不做专门的前端工程师，掌握基本的前端技能为工作带来方便。

后期邀请了一些同学分享学习经历。如果有同学愿意分享,欢迎push

必备基础技能

前端技能汇总这个项目详细记录 了前端工程师牵涉到的各方面知识。在具备基本技能之后可以在里面找到学习 的方向，完善技能和知识面。

rontend-dev-bookmarks是老外总结的前端开发资源。覆盖面非常广。包括各种知识点、工具、技术，非常全面。以下是个人觉得入门阶段应该熟练掌握的基础技能：

1.HTML4，HTML5语法、标签、语义

2.CSS2.1，CSS3规范，与HTML结合实现各种布局、效果

3.Ecma-262定义的javascript的语言核心，原生客户端javascript，DOM操作，HTML5新增功能

4.一个成熟的客户端javascript库，推荐jquery

5.一门服务器端语言：如果有服务器端开发经验，使用已经会的语言即可，如果没有服务器端开发经验，熟悉Java可以选择Servlet，不熟悉的可以选PHP，能实现简单登陆注册功能就足够支持前端开发了，后续可能需要继续学习，最基本要求是实现简单的功能模拟，

6.HTTP

在掌握以上基础技能之后，工作中遇到需要的技术也能快速学习。

基本开发工具

恰当的工具能有效提高学习效率，将重点放在知识本身，在出现问题时能快速定位并 解决问题，以下是个人觉得必备的前端开发工具：

1.文本编辑器：推荐Sublime Text，支持各种插件、主题、设置，使用方便

2.浏览器：推荐Google Chrome，更新快，对前端各种标准提供了非常好的支持

3.调试工具：推荐Chrome自带的Chrome develop tools，可以轻松查看DOM结构、样式，通过控制台输出调试信息，调试javascript，查看网络等

4.辅助工具：PhotoShop编辑图片、取色，fireworks量尺寸，AlloyDesigner对比尺寸，以及前面的到的Chrome develop tools，

5.翻墙工具：lantern, 壁虎漫步

学习方法和学习目标

方法：

入门阶段反复阅读经典书籍的中文版，书籍中的每一个例子都动手实现并在浏览器中查看效果

在具备一定基础之后可以上网搜各种教程、demo，了解各种功能的实际用法和常见功能的实现方法

阅读HTML，CSS，Javascript标准全面完善知识点

阅读前端牛人的博客、文章提升对知识的理解

善用搜索引擎

目标：

熟记前面知识点部分的重要概念，结合学习经历得到自己的理解

熟悉常见功能的实现方法，如常见CSS布局，Tab控件等。

入门之路

以下是入门阶段不错的书籍和资料

1.HTML先看《HTML & CSS: Design and Build Websites》1-9章，然后《HTML5: The Missing Manual》1-4章。

2.CSS先看《CSS: The Missing Manual》，然后《CSS权威指南》

3.javascript先看《javascript高级程序设计》，然后《javascript权威指南》

4.HTTP看HTTP权威指南

在整个学习过程中HTML CSS JavaScript会有很多地方需要互相结合，实际工作中也是这样，一个简单的功能模块都需要三者结合才能实现。

动手是学习的重要组成部分，书籍重点讲解知识点，例子可能不是很充足，这就需要利用搜索引擎寻找一些简单教程，照着教程实现功能。以下是一些比较好的教程网址

可以搜索各大公司前端校招笔试面试题作为练习题或者他人总结的前端面试题还有个人总结的面试题（带参考答案）

1.http://code.tutsplus.com有各种各样的教程

2.MDN也有很多教程，更重要的是里面有详细的文档，需要查找某个功能时在Google搜索：xxx site:https://developer.mozilla.org

3.http://www.html5rocks.com/zh/也有很多优质教程

4.http://www.sitepoint.com/

5.http://alistapart.com/

6.原生javascript是需要重点掌握的技能，在掌握原生javascript的基础上推荐熟练掌握jQuery，在实际工作中用处很大，这方面的书籍有《Learning jQuery》或者去jQuery官网

7.建一个https://github.com/账号，保存平时学习中的各种代码和项目。

8.有了一定基础之后可以搭建一个个人博客，记录学习过程中遇到的问题和解决方法，方便自己查阅也为其他人提供了帮助。也可以去http://www.cnblogs.com/或者http://www.csdn.net/这样的网站注册账号，方便实用

9.经常实用Google搜索英文资料应该经常找到来自http://stackoverflow.com/的高质量答案，与到问题可以直接在这里搜索，如果有精力，注册一个账号为别人解答问题也能极大提高个人能力。

经典书籍熟读之后，可以打开前面必备基础技能部分的链接。认真读对应标准，全面掌握知识