https://github.com/qiu-deqing/FE-learning前端入门方法总结，助初学者少走弯路

网址：

根据个人经验梳理的前端学习路径，涵盖从入门到掌握基础技能的进程、方式及资源，因水平所限，无法做到详尽无遗，仅作初学者借鉴之用，旨在帮助新人减少摸索时间。

网络技术迅猛进步，市场竞争日益加剧，用户感受变得极为关键，使得精通网页设计的人才备受青睐，众多机构对这类专家的渴求不断攀升，标准也随之提升，卓越的网页设计专家更是凤毛麟角，难得一见，个人认为虽然入门门槛不高，但依然需要系统性地深入学习，在夯实根基的前提下持续钻研，最终成长为杰出的网页设计专家只是时间上的问题而已。

掌握任何学问，首要条件是志趣，倘若经过一段时间的学习，发觉并不喜爱，那么勉力钻研将会非常煎熬，成效也必定不佳，因为这种技能很可能决定今后多年的生活。然而，伴随网络产业的进步，网页构建的知识对于从事网络开发的人员来说，是必须掌握的内容，偶尔会缺少专业的前端技术人员共同参与项目，因此即便不是专职的前端工作者，熟悉基础的前端技术，也能让工作更加顺利。

后来邀请了部分同窗讲述求学心得。若有同窗乐意倾诉，敬请鼓励

必备基础技能

前端能力集合这个计划全面记载了前端从业者涉及到的所有领域内容。拥有基础能力后，可以在其中寻得提升路径，健全能力与知识结构。

frontend-dev-bookmarks是一个由外国人整理的前端开发资料库，其内容范围十分宽广，涵盖了各类知识要点、实用工具以及前沿技术，资料收录得相当周全。

以下是个人觉得入门阶段应该熟练掌握的基础技能：

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

基本开发工具

高效的学习方法能够显著增强学习成效，将注意力集中于知识内容，一旦遇到困难能够迅速找出症结并加以解决，以下列出个人认为不可或缺的前端开发工具：

学习方法和学习目标

方法：

刚开始时需要经常研读权威著作的汉文译本，每本中的所有范例都要亲手编写并借助网络浏览器来观察其运行情况

达到相应水平后，能够通过互联网搜寻各类指南、实例，掌握各项技能的实际操作以及常规技术的构建途径。

通读HTML，CSS，JavaScript的规范文档，系统梳理并补充相关理论要点

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

善用搜索引擎

目标：

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

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

入门之路

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

先研读《HTML & CSS: Design and Build Websites》的前九章内容，接着阅读《HTML5: The Missing Manual》的第一至四章部分。

先阅读《CSS: The Missing Manual》，再学习《CSS权威指南》

先阅读《javascript高级程序设计》，再研读《javascript权威指南》

HTTP看HTTP权威指南

学习期间，HTML CSS JavaScript经常需要联合运用，实际工作亦是如此，即便是基础的功能单元，也必须依赖这三者的配合才能完成。

实践是掌握技能的关键环节，书本侧重阐释理论要点，其中附带的范例或许不够完备，因此必须借助网络检索来获取若干基础指南，按照指南来构建具体应用。此处列举若干值得参考的指导链接

可以查找众多企业前端招聘的笔试和面试题目当作练习素材，或者参考别人归纳的前端面试题，以及个人整理的面试题（附有参考答案）

有各种各样的教程

MDN网站收录了诸多教学资源，其核心价值在于提供了详尽的官方资料，若要查询特定功能，可通过Google进行检索，搜索指令为：xxx site:

也有很多优质教程

精通JavaScript是必须的，同时建议熟练运用jQuery，它在实际工作中非常实用，相关的书籍有《Learning jQuery》，或者可以直接访问jQuery的官方网站

建一个账号，保存平时学习中的各种代码和项目。

积累了一定经验，能够建立个人网站，用来记录学习期间碰到的情况和应对措施，既便于自身回顾，也能给他人带来益处。还可以前往类似平台开设账户，既便利又好用。

频繁使用谷歌查询英文信息时，往往能获得优质回应，遇到疑问可在此地进行检索，若有余力，加入账号为他人提供解答，亦可显著增强个人素养。

读完名著，便能够访问前面必备基础技能部分的网址。仔细研读相关规范，务必精通相关知识

继续提高

掌握了初步知识，前端大致算是初步掌握了，此刻可能每个人心中都形成了一些学习目标，倘若尚未明确，能够借鉴前面必备技能部分提到的那两个项目，从中挑选部分内容进行深入钻研，以下列举了若干值得关注的领域，

一些个人经历

LingyuCoder的学习经历

上面的大神都总结得差不多了，我这里就胡扯一些吧

工具

network：抓包查看每个请求，非常重要，前后端联调必备

渲染流程、JavaScript运行等环节，都是提升效率的关键手段

模拟手机使用情形，针对移动网页的制作不可或缺

一些插件:

Sublime Text 2，输入编码很便捷，安装插件种类丰富，运行速度快，运行效率高。

IntelliJ IDEA和WebStorm是集成开发环境，它们融合了多种功能，编程体验比Sublime更便捷，不过它们对系统资源消耗较大

Mark Men是进行测量、挑选色彩、进行标记的得力工具，在拿到视觉设计图样后，它通常是第一个被启动的软件

GFW Fucker：借助红杏，若条件允许，可购置虚拟服务器作为通道

iHosts堪称出色的hosts维护工具，能够便捷地调整hosts文件，对于程序构建和测试工作十分关键

Charles：Mac 平台最好用的抓包分析工具

Rythem是AlloyTeam开发的一款代理抓包工具，它体积小巧，部署便捷，对于移动设备（真实硬件）的程序调试工作十分有效

Wunderlist是一款优秀的待办事项清单工具，当需要处理大量任务和事项时，它能够提供便捷的管理体验

技能

前端技术并不仅限于JavaScript（含NodeJS）、HTML和CSS，其他技能同样重要。前端技术领域相当宽广，仅列举一些我在开发过程中接触到的技术进行说明。

语言基础

JavaScript：

CSS：

HTML：

进阶

JavaScript:

常用框架使用及其原理

CSS和HTML涉及CSS3的功能和HTML5的功能，同时包含浏览器处理过程和渲染机制

flex box布局方式

icon fonts的使用

常用NodeJs的package：

一些理念：

性能优化：

项目

自动化构建主要涉及对less、模板、coffee等文件进行预处理，同时还包括代码的压缩以及合并操作

预处理和模板引擎

环境准备：需要将云端程序关联到本地设备，接着在本地开启一个示范性质的运行平台，至于虚拟信息的模仿，看法因人而异。

自动化检测：当作业状态比较稳固时，能够借助自动化检测来降低检测的频次，不过，在作业量大时，维修检测案例的开销会很大，也许运用自动化检测反而会产生不良影响

生态系统

搭建一个属于自己的博客

未来

移动端原生开发方面，同样有必要掌握，未来前端人员将频繁与webview互动，同时需熟悉原生开发技术

其他

部分事宜并非仅凭敲击键盘即可解决，我在实习期间有深刻体会，其中涉及到的方面，既是我遭遇的困境，也是我自身存在不足之处。

入门书

开始学习可以阅读书籍，不过书里的内容大多已经过时了，在阅读的同时，也要不断留意技术方面的最新进展。以下列举几本我认为还不错的书籍：

一些不错的网站

历程

曾经从事Java SSH相关工作，后来转行做前端开发，因此能力相对欠缺，遇到难题时也经常感到棘手。主要依靠阅读书籍和W3C School提供的指南，以及参考一些前端博客，比如汤姆大叔的网站来学习。过去仅限于使用jQuery，对原生JavaScript的探索也不够深入，直到后来开始大量阅读编程类书籍，例如老道的语言精粹等。从这些书籍中习得了诸多语言层面的学问。然而这显然不够充分，因此我时常会去社区上观察大家讨论的内容，随后查阅相关的文献资料，若感兴趣便会进一步搜集更多材料进行研读，或者动手编写一些示例程序。学习CSS主要就是运用这种方法。后来转而留意众多资深人士的网志和若干有深度的著作，同时留意一些新兴的技术和架构，并且持续实践将代码上传至github，由此也收获了丰硕的学识。在实习期间，亲身介入实际项目的构建，能够领会许多在校期间无法接触的理念和思路，这对个人成长大有裨益。行罢，我须去参与项目以争取工作机会了…

MrRaindrop的学习经历

应qiu神的约请，我来谈谈前端学习心得，不过关于前端知识框架的梳理，各位高手的见解已经非常全面了，我就提供几个个人觉得有价值的资源供大家参考，接下来主要讲述我在前端学习时碰到的难题和汲取的教训，希望能对那些刚开始接触FE的初学者有所帮助，让他们在学习过程中少些弯路，每前进一步都清楚接下来该怎么做。各位高手的归纳和传授，请参考qiu神汇编的FE-learning资料。

首先，前端技术每个人都有可以找到的个性化学习路径，这篇文章只是提供一些参考，内容组织得比较随意，请大家谅解。

缘起

我偶然进入了前端领域，原本一直朝着游戏开发的方向努力，曾参与过游戏网站的制作，也使用过unity、unreal这类商业游戏引擎，并独立完成了几个游戏模型的开发，但在研究生一年级进入实验室后，直接被导师安排编写javascript代码，导师给了我半个月时间来创建一个运用百度地图api的数据展示网页，虽然这个时间跨度算比较充裕，但由于之前几乎没接触过javascript，也不熟悉地图api的使用，因此我就一边研读《Javascript权威指南》（犀牛书），一边借鉴实验室前辈们留下的代码，最终总算实现了所有功能。那个页面算我的js入门作了，也是我前端学习路线的开始。

回想起来，尽管被安排负责前端工作，但持续开展并精通这门技艺，关键在于个人热忱的支持，诚然前端技术圈子充满无穷魅力，并且相关社群始终保持着高度的活跃状态。

项目，下一个项目

我认为前端入门时不必依赖书本，可以纯靠项目来学习。虽然我本人是看犀牛书入门的，但若时间不够用，或者觉得读大部头很枯燥，就不必像我这样。不过若选择看书的话，最好把书中的实例都亲手实践一遍。我在研究生入学前对JavaScript毫无了解，四月份学校尚未开学时，导师就突然交给我一个基于百度地图API的项目任务，随后又接连处理各种ERP系统开发、地图信息可视化呈现的工作，尽管这些任务形式多样各有不同，但核心内容几乎都是网页前端相关的开发，SSH框架和安卓应用开发也略微涉猎过，令人惊讶的是整个实验室中只有我一人负责前端编程工作富客户端单页应用时期，后端仅提供restful接口，几乎全部代码都在客户端实现，我独自完成开发，内心无比畅快，难以言表……那时跟随导师体验了创业过程，每天从早上7点持续到晚上10点，确实经历了一段飞速发展的阶段。

先了解一项技能的整体结构，构思一个可实施的点子，做一个基础可用的原型，再逐步优化它的细节，等原型完成后，对该技能形成直观了解，然后深入钻研相关书籍，这样效果会更好。我从最初使用原生JavaScript，逐步过渡到学习jQuery，随后又掌握了ExtJS，最终转向AngularJS，这一过程从遵循导师的建议，到独立进行技术选择，通过一个又一个项目的实践不断积累，感觉如同经历了一场场挑战升级。若缺少实际项目机会，我也会主动构思并开发个人项目，亲手将创意变为现实，这种实践过程既充满乐趣，也能带来显著的满足感。

收集癖和知识管理

前端掌握存在一个特性，众多知识点呈现零散状态，需要独立进行梳理、归纳和提炼。关注了微博、知乎上许多专家，并非仅为了获取消息，他们偶尔提及的片段往往蕴含深远启示，或许某个不经意点出的词汇会转化为后续钻研的方向。持续汇集这些资讯，充分运用搜索引擎，积极参与探讨，勤于反思。如同游戏中的搜集环节，前端学习同样是一个充斥着搜集环节的“过程”，只不过你需要一个知识管理工具来充当收藏夹和存储柜，我所了解的资深人士无一例外都是知识管理工具的频繁使用者。过去使用的是OneNote，那时还没有与云存储对接，现在基本上采用Evernote，笔记已经累积到1200多篇。书签原本想用美味作为分类方式，因为它依靠标签进行组织，但始终没有付诸实践。其实关键并非这些应用本身，不过得心应手的软件确实能提升学习成效。最核心的还是持续拥有强烈的学习热情，你的目的在于掌握前端领域的所有知识（当然不必全部精通，毕竟精力有限，现实中也无法完全做到）。

跟对神

这种掌控力好像不太强，关于如何应对领导的事情就不详细讲了，很大程度上取决于运气。不过话说回来，多和周围技艺精湛的人沟通是关键，这些人不必非要非常厉害，但一定要对技术充满兴趣。研究生一年级时我兴致勃勃，每天早上七点就进入实验室，结果发现有个家伙比我来得更早。后来才知道这个人上午就离开了，下午又重新出现，导师对此毫不在意，原来他晚上不休息整夜编写程序，上午才赶回去休息。后来常常和这位非凡之人探讨疑难，每次都感觉自己的能力迅速提升。实验室里另有一位令人敬佩的同事，被那位通宵达旦的同事评价为“始终难以企及，不断努力，却始终未能并肩”。这两位同事的共同之处在于知识面广泛，因此无论什么话题都能与之深入交流。我某个阶段制定了一份学习方案，涵盖了从C/C++到VC/MFC，再到Unix网络编程，最终延伸至Java核心技术以及MSDN上的C#编程手册，与这些令人敬佩的同事探讨时，总能畅谈甚欢。

归根结底是这两位神仙把我拖入了困境，或者说从一处泥潭跌入了另一处泥潭，尽管两位神仙并非从事前端开发，但技术领域往往存在共通点。

读书

阅读，要大量阅读，要读优质书籍。在刘未鹏的个人网站上，曾提及一个观点，即首月收入与先前购入的（已阅读的）专业书籍总价值相等同（所指专业书籍，系指那些备受推崇的经典之作）。探讨这一观点的准确性或许并无太大价值，然而其内在逻辑确凿无疑，核心在于应当广泛涉猎权威性的专业著作。最令人震惊的一个事例，谷歌的徐宥在他就读的大学里声称他阅读了图书馆里所有TP312书架上的书籍……关于前端领域的经典著作，我整理了一份前端书籍清单（倘若还有遗漏的前端必读佳作，敬请留言告知），具备条件的话可以尝试通读这些书籍，我也在寻找完整的时间来阅读它们。先前提及的，关于前端领域的知识较为零散，需要不断汇集，通过博客快速获取等，这些仅是前端学习过程中的一个环节，假如希望透彻掌握某个知识领域，明晰其发展脉络，形成整体性的认知，那么研读权威著作是不可或缺的。

我从头开始研读犀牛书，随后涉猎了若干与前端关联不大的经典技术书籍，后来借助实验室的项目以及个人开发的小项目，逐步对前端技术有了较为深入的理解，接着阅读了《JavaScript模式》、《JavaScript设计模式》以及《编写可维护的JavaScript》，在接触Node后，我开始用它来制作一些小应用，并阅读了《NodeJS up and run》和《Mongodb权威指南》，但觉得前者的内容存在一些不足。那个时期朴灵的书《深入浅出（晒书么么哒）》尚未出版，等它问世之后就去图书馆借来阅读完毕，这样阅读下来觉得挺有收获的，不过感觉读的还是不够多，还得接着看（可以参考前面列出的书目）。

前端的定位

前端的岗位性质决定了你需要掌握哪些领域的知识和技能，也影响着你在技术领域中应该关注哪些方面。如果仅仅将前端工作理解为页面制作和实现基本交互，那么对前端的了解还比较浅显。在阿里巴巴的最终面试环节，我向面试官提出了这样一个疑问：前端技术发展迅速，其覆盖范围不断拓宽，相关规范日益完善，仿佛能够延伸到各个角落。如何为前端设定恰当的角色？评判者详细阐述了许久，最终凝练为一句，即它是用户与平台之间的桥梁，也是体验感受的缔造者。换言之，前端的根本任务在于打造感受，优化感受，始终以感受为出发点。无论你是从界面交互设计入手，还是从系统性能提升着手，抑或是优化工作流程增强运作效能，所有努力的根本目的都是打造并优化用户感受，所有成果的最终落脚点都在于用户的使用体验。我觉得这个概括很有见地，不过“用户体验”这个概念过于笼统，并且不单单是前端开发人员的责任，例如在开发服务器端时，如果改进了某个数据处理环节，从而增强了整体效率，这也算是对用户体验的一种改善。

现阶段的前端开发者在职业发展过程中迟早会面对比单纯制作页面、达成视觉设计、完成交互功能更为复杂的技术挑战，例如自动化测试、图形处理、效率提升等议题，而更进一步的职业路径则可能涉及PHP/JSP/ASP/nodeJs等后端技术，传统上属于后端工作范畴的模板设计，由于前端体系的进步，现在可能需要开发者负责编写后端模板代码，并且运用后端编程语言（PHP/Java/C#等），这就是所谓的全栈开发（这种角色的转变并不与前端职业的初衷相违背，全栈开发专注的领域依旧是用户交互界面，其核心目标同样是改善用户的使用感受）。最普遍或者议论较多的当属node，实际上这些技术方案都可以，据说百度倾向于PHP，而阿里则偏爱node。

玉伯在个人日志中阐述过所谓全端是平行的，全栈是垂直的。全端就是说所有终端其实都是前端，因为都关系到用户感受，直接面对用户。适配多种设备环境，需要在网页界面开发能力之上，或许还需增加安卓平台和苹果平台的技术储备，幸运的是，随着混合式开发模式的普及，对使用平台原语编程的能力，不再有过于严苛的掌握需求。

全栈可以算作初创企业最适宜的一种技术路径，通常理解为涵盖从前端到后端，从开发到运维的完整流程，这一点无需赘述，多数人或许不会选择这个方向，立志成为此类全能工程师的，大概也不必再关注本文；而特定含义的全栈则专指运用JavaScript完成从前端到部署在NodeJs环境中的后端开发，实现前后端语言和编程范式的一致性，甚至可能共享同一套代码库。更多了解全栈开发可以看看玉伯这篇说说全栈工程师。

关于前端以及由此派生出的技术脉络，我有一些粗浅的看法，认识到一个学科的整体发展脉络和未来动向相当关键，想要全面了解前端的学习规划以及职业发展轨迹，不妨参考一下拔赤梳理的前端开发十日谈。

最后

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

byr论坛yiyizym的建议

与grunt相比，学习gulp会比较简单

实施SPA开发时，建议选用backbone.js以及backbone.marionette.js

翻墙不用折腾，花十块钱买一个月的 红杏。

把基础打扎实了再学这些都没问题。

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

css应当多查阅官方文档，许多中文内容存在不同说法，频繁参考容易造成混淆。

有一个平台能够查询各种网页元素特性在众多浏览器的兼容性表现，非常实用。

学习javascript可以参考javascript高级程序设计这本书。但是这么厚的书籍读过后容易忘记内容。关于javascript核心知识点的说明包括对象和原型链，构造函数，执行上下文，作用域链，闭包以及this。可以找到一篇很好的文章来了解这些内容。

若有闲暇时光，不妨研读 ecmascript 6，预计明年六月便将问世。阮一峰的主页备有基础教程。

jQuery 提供了丰富的接口，这个平台能够便捷地查询相关信息。待有空闲时，需深入掌握 jQuery deferred 的运用方式。

多安装一些 sublimetext 的扩展程序,比如用于检测代码问题的,用于创建新文件夹的,以及用于整理代码结构的。

【今日微信公号推荐↓】