先附一张前端学习路线图
从大图中我们可以总结出：
优秀的Web前端开发工程师 要在知识体系上既要有 广度 和 深度！应该具备快速学习能力。前端开发工程师 不仅要掌握基本的Web前端开发技术，网站性能优化、SEO和服务器端的基础知识，而且要学会运用各种工具进行辅助开发以及理论层面的知识，包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持等。
那么作为前端工程师需要满足客户什么要求呢？
前端工程师至少都要满足四类客户的需求：
1、产品经理。这些是负责策划应用程序的一群人。他们会想出很多新鲜的、奇怪的、甚至是不可能实现的应用。一般来说，产品经理都追求丰富的功能。
2、UI设计师。这些人负责应用程序的视觉设计和交互模拟。他们关心的是用户对什么敏感、交互的一贯性以及整体的好用性。一般来说，UI设计师侯倾向于流畅靓丽、但并不容易实现的用户界面，而且他们经常不满前端工程师造成1px 的误差。
3、项目经理。这些人负责实际地运行和维护应用程序。项目管理的主要关注点，无外乎正常运行时间、应用程序始终正常可用的时间、性能和截止日期。项目经理追求的目标往往是尽量保持事情的简单化，以及不在升级更新时引入新问题。
4、最终用户。指的是应用程序的主要消费者。尽管前端工程师不会经常与最终用户打交道，但他们的反馈意见至关重要。最终用户要求最多的就是对个人有用的功能，以及竞争性产品所具备的功能。
好了，现在。。。。。你真的还想学前端吗？不后悔吗？
如果真的做好了准备的话，嘿嘿，那我们就一起享受学习前端的乐趣吧！
一、基础
想成为前端开发者应该先打好基础：HTML > CSS > JavaScript > jQuery >。。。> GitHub
学习了HTML、CSS就可以实现一些静态页面，不只是简单的静态页面，应该是稍微复杂一些绚丽一点的页面。
这里给大家推荐的书籍是：《CSS禅意花园》
二、JS
JS可以跟着以下几张思维导图学习（听说是一位名为“王子墨”的大师做的图）：学习 Javascript 首先要知道这门语言可以做什么，不能做什么，擅长做什么，不擅长做什么！
2.JS运算符
3.JS数组
4.JS流程语句
5.JS字符串函数
6.JS函数基础
7.JS基础DOM操作
8.JS正则表达式
深入了解Javascript，需要了解 Javascript 的原理，机制；需要知道他们的本源；需要深刻了解 Javascript 基于对象的本质；还需要深刻了解浏览器宿主下 的 Javascript 的行为、特性。他也有很多缺点，各个宿主环境下的行为不统一、内存溢出问题、执行效率低下等问题，需要深入了解、学会处理这些缺陷。
推荐书籍：
初级：
《JavaScript高级程序设计》
《JavaScript王者归来》
中级：
《JavaScript权威指南》
《JavaScript.The.Good.Parts》Douglas Crockford
《高性能JavaScript》：Nicholas C. Zakas
《Eloquent JavaScript》：
高级：
《JavaScript Patterns 》
《Pro.JavaScript.Design.Patterns》讲解JavaScript设计模式
《Developing JavaScript Web Applications》：构建富应用的好书，针对MVC模式有较为深入的讲解，同时也对一些流程的库进行了讲解。
三、后端语言
如果单纯只是学习前端编程语言、而不懂后端编程语言（Java、PHP、ASP.NET，JSP、Python），也不能算作是优秀的前端工程师。
四、学习方法建议
1.限制一次学习的量，并且不断地实践——实际编写代码。
举个例子：就像学习数据结构一样，我有个同学A学习数据结构单纯的把书带到图书馆去看，我问A为什么不带电脑，A回答说光是看就已经看不懂了。能发现问题么？有时候我们可能看不懂代码，但是动手敲一遍可能会更认真的跟着代码的思路走一遍，在运行出来结果或者跟着调试的时候
才会恍然大悟！喔喔！原来是这个样子的！同学A数据结构学了好几遍都没有学好，而另外一个同学B却对数据结构十分熟悉、笔试面试几乎难不倒他，他跟我分享学习经验的时候就告诉我，一定要动手敲！而且不止要敲一遍！
——这也是很多人会走弯路，而很多人只会走捷径的关键。
2.用正确的心态去做练习，当成玩耍或者游戏。
3.写代码的时间魔法，先告诉自己只写10分钟，然而就会陷进去乃至一下午。
4.思考得更慢，学得更快。就像你在去理解别人的代码的时候一样，不要漏掉任何一行！
5.首先用简明的语言来写复杂的代码。这是一种锻炼！
6.定期定目标，每天都看看，想想，保持敏感、紧迫感、期待感。
7.记笔记：
学习过程中搜集的资源链接；
遇到的未决的疑问；
那些很宽而我们用的很窄的知识点；
那些能进一步深入而我们浅尝辄止的知识点；
某个功能可能存在的其它实现方案的蛛丝马迹
学一门技术，就要努力放空自己，让自己归零，这样会比较容易学进去，坚持下来。坚持最重要！
希望大家能够学好前端，学会前端，学通前端。
「艾尔登法环」梅琳娜手办开订 立体手办▪
万代「艾尔登法环」白狼战鬼手办开订 立体手办▪
「夏目友人帐」猫咪老师粘土人开订 立体手办▪
「五等分的新娘∬」中野三玖·白无垢版手办开订 立体手办▪
「海贼王」乌索普Q版手办开订 立体手办▪
良笑社「初音未来」新手办开订 立体手办▪
「黑岩射手DAWN FALL」死亡主宰手办开订 立体手办▪
「盾之勇者成名录」菲洛手办登场 立体手办▪
「魔法少女小圆」美树沙耶香手办开订 立体手办▪
「咒术回战」七海建人粘土人登场 立体手办▪
「五等分的新娘」中野二乃白无垢手办开订 立体手办▪
「为美好的世界献上祝福！」芸芸粘土人开订 立体手办▪
「公主连结 与你重逢」六星可可萝手办开订 立体手办▪
「女神异闻录5」Joker雨宫莲手办开订 立体手办▪
「间谍过家家」约尔・福杰粘土人登场 立体手办▪
「街角魔族 2丁目」吉田优子手办开订 立体手办▪
「火影忍者 疾风传」旗木卡卡西·暗部版粘土人登场 立体手办▪
「佐佐木与宫野」宫野由美粘土人开订 立体手办▪
「盾之勇者成名录」第2季拉芙塔莉雅手办开订 立体手办▪
「咒术回战」两面宿傩Q版坐姿手办开订 立体手办▪
「DATE·A·BULLET」时崎狂三手办开订 立体手办▪
「狂赌之渊××」早乙女芽亚里粘土人开订 立体手办▪
「魔道祖师」魏无羨粘土人开订 立体手办▪
「新·奥特曼」奥特曼手办现已开订 立体手办▪
扫码关注我们