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

动手实践是学习的重要部分。书籍侧重于讲解知识点，示例可能不够充分。这时你需要使用搜索引擎找到一些简单的教程，并按照教程实现功能。以下是一些不错的教程网站

可以搜索各大公司前端校园招聘笔试面试题作为练习题或者别人总结的前端面试题和自己总结的面试题（有参考答案）

有各种教程

MDN 上也有很多教程，更重要的是有详细的文档。当你需要查找某个函数时，搜索：xxx site:

还有许多高质量的教程

是一门需要掌握的技能，建议在掌握 的基础上熟练掌握，在实际工作中很有用，这方面的书籍有《》或者去官网

创建一个帐户来保存您日常学习中的各种代码和项目。

等你有了一定的基础之后，可以建一个个人博客，记录学习过程中遇到的问题和解决方法，方便自己查阅和给别人提供帮助。也可以去这样的网站或者注册一个账号，方便又实用

经常实际地搜索英语资料应该经常能从网上找到高质量的答案。你可以直接在这里搜索你的问题。如果你有精力，注册一个账号来为别人解答问题也可以大大提高你的个人能力。

阅读完经典书籍后，可以打开必备基本技能部分的链接，仔细阅读对应标准，全面掌握知识。

继续改进

有了前面的基础，前端基本算是入门了，这时候大家心里可能已经有了一些学习方向，如果还是没有的话，可以参考前面必备技能部分提到的两个项目，选择一些进行开发学习，下面是一些不错的方面：

一些个人经历

学习经验

上面的大神们已经总结的差不多了，我就废话一点吧

工具

：抓包查看每个请求，这对于前后端联调非常重要且必要

：分析渲染、js执行等阶段，性能优化工具

：模拟移动环境，页面开发必备

一些插件：

text2：编码简单，插件多，速度快，性能好

IDEA和：集成开发环境，集成了各种功能sublime text 压缩js，开发起来更加方便，但是对性能要求会比较高

Mark Men：一款强大的测量、选色、标记工具，是我收到视觉稿后打开的第一个软件。

GFW：我用的是鸿星的，如果可以的话，我也买个虚拟服务器当梯子。

：非常好的hosts管理软件，方便修改hosts，开发调试必备

：Mac平台最佳的数据包捕获和分析工具

：出品的代理抓包软件，非常轻量，安装简单，对于移动端（真机）开发调试非常有用

：非常好的Todo List，当任务和需求较多的时候管理起来非常方便。

技能

其实除了（包括）HTML、CSS之外，前端的技能还有很多，其实前端的技能树非常庞大，这里我只能列举一些我在开发中见过的。

语言基础

：

样式表：

HTML：

先进的

：

常见框架的使用及原则

CSS与HTML：主要是CSS3与HTML5的特点，以及浏览器处理的流程和绘制原理

弹性框布局

图标字体的使用

常见的：

一些想法：

性能优化：

项目

自动化构建：主要是less、模板等的预处理，以及代码的压缩与合并

预处理和模板引擎

环境搭建：主要是将线上代码映射到本地，本地启动一个demo服务器，至于模拟数据的mock，就看你自己的想法了。

自动化测试：当业务比较稳定时，可以采用自动化测试，减少测试事件数量，但当需求较多时，维护测试用例的成本会很高，而且自动化测试可能会起到反作用。

生态系统

建立自己的博客

未来

移动开发：这个也是需要了解的，前端工程师以后经常会打交道，也需要了解开发

其他

有些事情不是光靠写代码就能做到的，我在参加实习的时候感受很多，这些都是我遇到的，也是我觉得自己做的不好的。

入门

你可以从读书开始，但书中的很多内容已经过时了。在读书的同时，你也应该不断关注技术的新发展。以下是几本我认为不错的书：

一些不错的网站

课程

我之前是做 Java SSH 的，后来转到了前端开发，所以技术比较弱，遇到的问题也比较多。基本都是通过看书和 W3C 的教程，以及一些前端的博客来学习，比如汤姆叔叔的博客。之前只是会用，并没有过多的去深究原生的 js。后来慢慢的看了很多动物书，比如老道的语言精粹等等，从这些书里学到了很多语言知识。但是这显然是不够的，所以我经常会去社区看看大家都在讨论什么，然后看看相关的资料，感兴趣的话就会找更多的资料来看，或者写个 demo 什么的。我学习 CSS 主要就是通过这种方式。后来我开始多去关注各种大牛的博客和一些比较有深度的书籍，以及一些新的知识和框架，不断的去练习和提交代码给他们，所以也学到了很多知识。 实习期间亲自参与了实际的项目开发，学到了很多在学校上学不到的概念和思维，也很有帮助。 不说了，我要搬砖去求offer了……

学习经验

应qiu的邀请，我想分享一下我的前端学习经验，这里就不总结前端知识体系架构了，各位大佬的总结已经比较全了，我就贡献几个个人认为有用的链接，供大家学习。然后主要分享一下我在前端学习过程中遇到的问题和得到的教训。如果能给想要入门的FE初学者（我会假设他们就是本文的读者）一点帮助，让他们少走点弯路，每走一步都知道自己下一步的方向，这就是最好的了。各位大佬的总结分享请看qiu整理的FE--。

首先，对于前端的学习每个人都可以有自己的方法，本文仅供参考，有些乱，还请见谅。

起源

我接触前端纯属偶然，之前一直做游戏，做过游戏网站，做过游戏引擎，比如商业引擎 Unity，鼓捣过好几个游戏原型。但因为研究生一年级进实验室，导师直接给我安排写 js，导师给了我半个月时间，让我基于百度地图 API 写一个数据展示页面。虽然这个时间还算充裕，但我之前从来没有写过 js，也不懂如何使用地图 API。于是一边看《权威指南》（犀牛书），一边参考实验室前辈们留下的“代码”，最终把所有功能都写出来了。那个页面就是我接触 js 的入口，也是我前端学习路线的开始。

现在想想，虽然被分配做前端，但是还是要靠兴趣坚持做下去，做好的，当然前端是个很有趣的技术领域，社区每天都很“热闹”。

项目，下一个项目

我个人觉得在学习前端的初期，完全可以脱离书本sublime text 压缩js，以项目驱动。虽然我个人是从犀牛书开始的，但是如果你时间不够，或者觉得看大部头的书很无聊，就不要像我一样了。当然，如果你决定看书，最好把书上的例子全部打一遍。我读研之前根本没接触过js，四月份开学前，导师直接把一个百度地图api的项目扔到我脸上。然后就是各种ERP，地图数据展示，虽然都不一样，但基本都是前端的工作，我还充当了SSH和开发的角色。你能相信整个实验室就我一个人写前端吗？富客户端SPA时代的后端，只是一个界面，代码量基本都在前端。 我一个人写着怎么会这么开心呢……这段时间，我跟着导师体验创业，每天从早上7点工作到晚上10点，也算是快速成长的一段时间。

掌握一门技术，首先要掌握它的大框架，想一个可以实现的想法，做出一个可以跑起来的demo，然后完善它的细节。等demo做完了，对技术有了感性的认识，再看书，收获会更多。一开始是写原生js，然后是extjs，然后，从导师指定的技术到自己选技术，一个项目一个项目地练习，就像打怪升级一样。当然，如果没有项目，也可以自己创建项目，把自己的想法实现出来，很有趣也很有成就感。

收集和知识管理

前端学习有个特点，很多东西都是碎片化的、散乱的，需要自己去整理、总结、归纳。微博、知乎上大咖很多，你不是随便听八卦的，大咖们的话语有时候会让人回味无穷，很可能不经意间提到的一句话，就成为了你下一个学习目标。把这些信息收集起来，好好利用，提出问题，思考。就像游戏中的收藏元素一样，前端学习也是一个充满收藏元素的“游戏”，但你需要一个知识管理工具来充当库存和仓库。我认识的大咖都是知识管理工具的重度用户，之前用过，那时候还没有绑定云存储，现在基本都在用，笔记积累到1200多篇了。一直打算用书签，因为它是基于标签管理的，但一直没用过。当然重点不在这些工具上，但合适的工具能提高你的学习效率。 最重要的当然是随时保持旺盛的学习欲望，你的目标是了解前端的一切（当然并不是必须掌握一切，因为你的精力毕竟有限，而且现实地讲，这也是不太可能的）。

跟随正确的神

这个好像不太可控……跟对了boss我就不多说了，一定程度上要看运气。不过话说回来，多跟身边的高手交流才是最好的办法。这个高手不一定要很厉害，但一定要对技术充满热情。我读研究生一年级的时候，干劲十足，每天七点进实验室门，然后发现有个哥们比我到得早。后来发现这哥们早上走，下午才回来，导师也习惯了。原来这哥们晚上不睡觉通宵写代码，早上回去睡觉。后来我经常跟这个大神讨论问题，每次都感觉自己的经验值在上升。然后实验室又来了个大神，被之前的通宵大神形容为“只仰望他，永远追不上，永远追不上”。 两位大神的特点就是什么都懂一点，所以什么都可以跟你讨论，我一度制定了读书计划，从c/c++到vc/mfc再到unix网络编程，最后在MSDN上看到Java核心技术与C#编程指南，跟大神们的对话水平很高。

总之就是这两位大神把我拉进坑里，或者说是从一个坑跳到另一个坑，虽然两位大神都不是什么搞前端开发的，但是技术上总有相似之处。

读

读书，多读书，读好书。我在刘伟鹏的博客里看到一个公式，你第一个月的工资等于你之前买过（读过）的技术书的价格总和（这里的技术书指的是那些经典的、公认的好书）。讨论这个公式的正确性似乎毫无意义，但它的合理性是毋庸置疑的，那就是多读经典的技术书。最极端的例子就是许友在我大学的时候说他包揽了图书馆整个TP312书架……对于前端的经典书籍，我列出了一个我后来收藏的前端书籍清单（如果有什么前端经典好书遗漏了，请留言告诉我），有条件的可以试着刷刷这些书，我也在找一个完整的时间把它们刷完。前面也说过，前端知识点比较松散，收集零散的知识点，从博客中快速学习等等，这些只是前端学习的一个方面。 想要深入了解一个知识体系，了解它的来龙去脉，建立对它的系统性认识，阅读经典书籍还是必不可少。

我一开始是看完了Rhino那本书，然后又看了一些其他的经典的和前端无关的技术书。后来通过实验室项目和自己做的一些小项目慢慢熟悉了前端领域之后，又看了《模式》、《设计模式》、《可维护的写作》。后来又了解了node，开始用node做一些小东西。《启动运行》和《权威指南》也看了，但感觉前者有点坑。当时蒲凌的《深入浅出易懂》（炫耀书）还没出，出后我就去图书馆借了看，看完之后觉得还不错，但还是觉得看的太少，需要继续看下去（参考上面的书单）。

前端定位

前端的定位关系到你需要吸收什么样的知识和技能，决定了你在技术的世界里需要对什么特别敏感。如果你认为前端只停留在切页面，实现交互和可视化的需求，那你对前端的理解还处于初级阶段。在阿里的期末面试时，我问过考官这样一个问题：前端技术日新月异，范围越来越广，标准越来越丰富，好像任何触角都能伸得很远。如何给前端一个合适的定位？考官给我分析了很久，然后用一句话总结，就是用户和网站的连接器，用户体验的创造者（原文不是这样的，但大致就是这个意思）。也就是说，前端的最终目标其实是创造用户体验，提升用户体验，关注用户体验。 不管是从交互设计、性能优化入手，还是改进工作流以提高工作效率，最终的目的都是为了打造和提升用户体验，最终都要体现在用户体验上。我觉得这个总结很有道理（当然“用户体验”这个词太宽泛了，不只是前端工程师的范畴，比如在开发后端的时候，优化一个数据处理流程，可以提升整体的性能，这也是用户体验的提升）。

如今的前端工程师到了一定阶段必然会接触到很多比切页面、实现视觉需求、实现交互更深入的问题，比如前端自动化、图片编程、性能优化等等，再往前追溯，PHP/JSP/ASP/。以前后端模板一般都属于后端的范畴，现在随着前端架构的演进，可能会被要求写后端模板的代码，这就需要用到后端语言（PHP/Java/C#等），这就是所谓的大前端（不过这并不违背前端的定位，大前端处理的还是跟用户接触的部分，还是对用户体验的一个优化）。可能最常见或者说讨论最多的就是node了，其实这些技术选择都是可以的，据说三家bat公司中百度用PHP比较多，阿里巴巴用node比较多。

余波在博客中提到，所谓全端是横向的，全栈是纵向的。所有的端都是前端，因为都是跟用户体验有关，直接跟用户接触的。要适应多端的开发，可能需要在 Web 前端的基础上拓展开发、iOS 开发的知识。好在由于开发方式的普及，语言开发所需要的技能没那么深入。

全栈可以说是最适合创业公司的开发类型了，广义上来说算是从前端到后端，从开发到运维，这个我就不说了，大部分人可能都不想往这个方向发展，如果你想成为这个意义上的全栈开发者，可能就不需要看我这篇文章了。狭义上的全栈，具体是指从前端到后端都用js语言，语言统一，编程模型统一，甚至代码都是同一套。想了解更多关于全栈开发的内容，可以看余波的全栈工程师的文章。

以上是我对前端的粗浅理解以及由此衍生的技术路线。掌握一个领域的整体方向和趋势非常重要。另外如果想对前端的学习方向和职业成长路径有一个整体的了解，推荐阅读八爪鱼总结的这篇文章《前端开发十天》。

终于

贡献几个对前端学习和面试有帮助的链接：

byr 论坛建议

相比 grunt，学习 gulp 更容易

对于 SPA，建议使用 .js 和 ..js。

不用费力翻墙，只要花十块钱就能买一个月的红星流量。

基础打好了以后学这些是没有问题的。

html没什么好说的，有空就学html5吧。

尽量多看css文档，因为很多中文资料有不同的看法，读太多只会让你感到困惑。

有一个网站可以帮你了解各个浏览器对HTML/CSS标签和属性的支持情况，挺有用的。

就读了高级编程。不过这么厚的书，看完就忘了。关于核心概念的解释：对象/原型链/构造函数/执行上下文/作用域链/闭包/this，这里有一篇不错的文章。

有时间的话可以看看预计明年6月份发布的第六版，阮一峰的网站上有介绍。

API 很多，这个网站很容易找到，有时间自己研究一下怎么用。

安装更多的插件，比如检查代码错误、创建新目录文件、组织代码的插件。

【今日微信公众号推荐↓】

如有侵权请联系删除！