今天接到一个咨询：

对话中这位同学提到的技能图谱，应该类似于这个：

相信大多数准备或者已经在学习前端开发的同学，都看到过或者正在按照这个类似的技能树学习。

这种技能图谱，通常是把关于前端的所有技术都罗列出来，然后把需要展示的前端技术点按层次画在一张思维导图上。各种分枝技术，各种知识点，大而全，仿佛一生都学不完。

当然，这并不是说技能图谱没有用，但是对新手来讲，真心用处不大。一个新人，一个0基础的小白，一个连java和Javascript都分不清的初学者，看到这类图谱，一定被前端的覆盖面惊呆了，从入门到精通，到最后一定演变成从入门到放弃。

其实呢，只要你把JS搞定，那么至少一半的前端技术都搞定了。说句很俗但非常贴切的话：一切不以JavaScript为核心的前端开发都是耍流氓！但是这只是搞定了一半，要达到“找到一份不错的前端工作”的条件，其他知识面的覆盖也很重要。

那么，前端开发，应该学什么呢？

结合智游近年来辅导学生的经验以及公司中实际项目的需求，智游的全栈前端开发工程师课程（又称HTML5）将前端的学习分为了以下几个阶段，具体的学习路线如下所示。

初级阶段：从零基础到网页大师

• HTML5标签
• HTML5表单
• CSS3页面美化
• CSS3页面布局
• CSS3动画
• 浏览器兼容和SEO
• Bootstrap响应式框架
• 项目管理和原型设计
• UI设计及切图技巧
• JavaScript入门

HTML 相当于盖房子的原材料。学习了HTML之后，我们只是掌握了各种“原材料”的制作方法，要想盖一幢楼房就还需要把这些“原材料”按照我们设计的方案组合布局在一起并进行一些样式的美化。

而css就是做这些工作的。

CSS是英文Cascading Style Sheets的缩写，叫做层叠样式表，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言其样式是可以复用的，这样就极大地提高了我们开发的速度，降低了维护的成本。

学完css，我们就可以顺利完成“一幢楼房”的建设。

“楼房”建设完成之后，我们可以交给用户使用，但是如果想让用户获得更佳的体验，我们还可以对“楼房”进行更深一步的“装修”，让它看起来更“豪华”一些。就要我们就用到了JavaScript。

基础阶段：从网页大师到前端开发工程师

• JavaScript语言基础
• JavaScript核心对象
• DOM、BOM、事件驱动编程
• 闭包、原型、面向对象编程
• jQuery、插件、Underscore
• Promise、Defferred异步编辑
• Ajax、RESTful
• SVG、Chart图表
• Node.JS服务端和应用接口设计
• GIT源代码管理

JavaScript是一种在客户端广泛使用的脚步语言，在JavaScript当中为我们提供了一些内置函数、对象和DOM操作，借助这些内容我们可以来实现一些客户端的特效、验证、交互等，使我们的页面看起来不那么呆板，屌丝瞬间逆袭高富帅!

刚学会JavaScript，你会沉浸在JavaScript给你带来的惊喜之中不能自拔，产生一种“天下你有”的错觉。但这个时候你去找一份工作，你的项目经理会经常对你大吼道：

“这个效果在××浏览器下不兼容，重新搞……”

“不兼容?”瞬间石化！“我擦，坑爹啊!那可是花了我一个晚上写了几百行代码搞定的啊，吐血了都!”

JavaScript的兼容性和复杂性有时候的确让我们头疼，还好有“大神”帮我们做了封装。

jQuery 是一个免费、开源的轻量级的JavaScript库，并且兼容各种浏览器(jQuery2.0及后续版本放弃了对IE6/7/8浏览器的支持)，同时现在有很多基于jQuery的插件可供选择，这样在我们实现一些丰富的动态效果时更方便快捷，大大节省了我们开发的时间，提高了开发速度，这也充分体现了其 write less,do more的核心宗旨。这个Feel倍儿爽!有么有?

“豪华大楼”至此拔地而起，但是每天这样日复一日，年复一年的盖楼，好繁琐！能不能将大楼里面每一个单独部件模块化，当需要盖楼时就像堆积木一样组合在一起，这样岂不是爽歪歪？

可以实现吗？答案是肯定的。

这种思想在Web前端开发中也是适合的，于是乎就出现了各种前端框架。在项目开发过程中，我们可以借助框架提供的CSS样式、组件、JavaScript插件等快速的完成页面布局和样式设置，然后再有针对性的微调样式，这样基于框架进行开发大大缩短了开发周期。站在巨人的肩膀上就是爽！

进阶阶段：前端高级开发工程师

• HTML5存储、多线程
• HTML5 Canvas
• PHP服务端
• SUI、HTML模版化
• HTML模板化引擎
• AMD、RequireJs模块化
• 设计模式与MVC架构
• Backbone高级编程
• Angular高级编程
• 自动化构建、测试、缺陷管理

基础的东西以完成，到了本阶段，就是量变到质变的过程。学完本阶段可以掌握大型网站、管理系统、Web应用的整体架构体系，能够独立完成或带领团队完成中大型前端项目的研发工作。

项目实施：经验丰富的业界高手

• Java及.NET服务端技术
• 新浪微博/腾讯第三方OAuth登录
• 百度地图 JS SDK
• 支付宝在线支付集成
• Web Socket即时通讯
• React高级编程
• 微信平台、微网站开发
• HTML5游戏开发
• 项目管理技术
• 全栈综合项目实战

学完本阶段可以极大地丰富前端开发经验、掌握到当前前端开发领域中最热门、最具商业价值的前沿技术和高端技术，在前端开发方面达到专家级别，成为市场上炙手可热的高端人才。

以上每个阶段均会有1~2个真实项目实操训练，帮助同学熟练掌握并运用所学知识，以解决具体项目、具体问题出发，在见招拆招中提高。

当然，从菜鸟到大牛，路很长。前端是一个看似入门门槛不高，但要学好很难的领域。前端的知识体系庞杂又松散，技术演进快，如果摸不清脉络的话很容易陷入盲人摸象的困境甚至跑偏。

经常在前端的论坛上看到有人说，“前端都是自学的，一点都不难”。我毫不怀疑，95% 的想学前端的人都可以通过网络组建自己的关于前端的“超级无敌”学习资料包。用不了多久你的网页收藏夹里就会堆满互联网上丰富的前端学习资源，你的购物车里也会多出几本待付款的经典教材，你甚至还会兴冲冲地跑去注册一些在线课程。

提前恭喜你，即将从“编程小白”成功蜕变为“准程序员”。

但是，如果你没有掌握正确的学习方法和循序渐进的学习路线，你将处于并将长期处于「学习前端」的阶段。所以，我更期待剩余的5% 的人，能够体会到上文一直在强调的方法：以解决某个具体问题为出发点，直接上手一个小项目，在见招拆招的过程中提高学习的效率。

掌握了正确的方法，「学习前端」和「学好前端」就只是个时间问题。