成长路线：
1.熟悉开发环境
a.前端工具：
- Git
- 廖雪峰Git教程(https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/)
- Git简明指南（http://www.bootcss.com/p/git-guide/）
- Git基础教程（http://www.shouce.ren/api/view/a/7484）
- Git教程（https://www.w3cschool.cn/git/）
- Github
- Github学习–慕课网（http://www.imooc.com/learn/390）
- Github简明教程（http://www.runoob.com/w3cnote/git-guide.html）
- sublime/WebStorm/Visual Studio Code
- Sublime Text前端必备插件（根据自己需要安装）（https://www.jianshu.com/p/edbc2a13494b）
- Sublime使用手册（https://www.w3cschool.cn/sublimetext/）
- WebStorm的配置和使用（https://www.jianshu.com/p/f72dfac254ac）
- Visual Studio Code简明教程（https://wenku.baidu.com/view/58c64e3ff02d2af90242a8956bec0975f465a43b.html）
- Visual Studio Code插件（https://segmentfault.com/a/1190000006697219）
- Chrome DevTools
- Chrome开发者工具不完全指南（http://web.jobbole.com/82558/）
- Chrome开发者工具指南（https://www.w3cschool.cn/chromedevtools/）
- 扩展：Markdown和SVN
- Markdown–入门指南（https://www.jianshu.com/p/1e402922ee32/）
- Github上README写法暨markdown语法解读（https://www.tuicool.com/articles/zIJrEjn）
- SVN教程（http://www.runoob.com/svn/svn-tutorial.html）
2.熟悉页面切图：
a.前期准备（PS切图）
- i.慕课网切图学习（http://www.imooc.com/learn/506）
- ii.PS切图教程（https://blog.csdn.net/obkoro1/article/details/69817571）
b.HTML基础、CSS基础
i.HTML
1.学习目标：
a.熟悉HTML文档结构和文档类型 b.熟悉块级元素和内联元素以及之间区别 c.熟悉html表单元素及使用 d.熟悉HTML注释 e.熟悉代码规范：
- HTML规范（http://www.runoob.com/w3cnote/html-css-guide.html#html）
- 勤奋蜂前端编码规范（转载https://proyang.gitbooks.io/codeguide/）
- HTML页面渲染机制、重绘和回流（http://blog.codingplayboy.com/2017/03/29/webpage_render/）
g.自主学习HTML基础
2.参考资料
a.HTML+CSS基础课程（http://www.imooc.com/learn/9） b.W3CSchool HTML教程（http://www.w3school.com.cn/html/index.asp） c.更多参考学习资料可自行网上查询
3.练习
a.百度前端学院任务一：零基础HTML编码（http://ife.baidu.com/2016/task/all）
ii.CSS
1.CSS相关知识及学习目标
a.熟悉CSS样式的语法 b.熟悉内联样式、嵌入样式、外部样式、以及优先级 c.熟悉CSS继承、层叠，样式 d.熟悉CSS选择器 e.熟悉CSS盒子模型 f.熟悉CSS定位和浮动 g.熟悉常用CSS样式的表现 h.熟悉基本的布局方式 i.Grid，Flexbox等布局方式 j.熟悉使用CSS3 transform、transtion、animation k.熟悉厂商前缀
2.参考资料
- 张鑫旭的CSS教程（http://www.imooc.com/u/197450/courses?sort=publish）
- W3CSchool-CSS教程（http://www.w3school.com.cn/css/index.asp）
- MDN盒模型(https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Getting_started/Boxes)
- 学习CSS布局（http://zh.learnlayout.com/no-layout.html）
- 双飞翼布局介绍-始于淘宝UED（http://www.imooc.com/wenda/detail/254035）
- 那些年我们一起清除过的浮动（http://www.iyunlu.com/view/css-xhtml/55.html）
- BFC和hasLayout（http://www.cnblogs.com/pigtail/archive/2013/01/23/2871627.html）
- 熟悉CSS规范（http://www.runoob.com/w3cnote/html-css-guide.html#css）
- …..其余可自行百度
3.练习
- 百度前端学院任务二–任务八（http://ife.baidu.com/2016/task/all）
iii.前端切图总结—综合练习
- 完善自身，总结并做百度任务九（http://ife.baidu.com/2016/task/all）
- 附加（有兴趣可以做）：百度前端学院任务十–十二
- 在学习过程中最好不写JavaScript，当然控住不住，还是可以适当写一下的。
c.附加：
- Sass和Less学习视频（http://www.imooc.com/course/list?c=sassless）
- 游戏化学习display：flex（http://flexboxfroggy.com/#zh-cn）
- css弹性Flex布局（http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html）
- Flexbox属性大全（https://note.youdao.com/share/?id=71219e0def4cb6ca5afbb69c7c408c76&type=note#/）
3.JavaScript
a.JavaScript基础
学习目标：
- 熟悉js基础
- 常见的DOM树操作
- 熟悉window下的常用全局对象
- 熟悉json数据
- 熟悉ES6语法
- 熟悉代码规范
参考资料
- 阮一峰的es6(http://es6.ruanyifeng.com/)和js(http://javascript.ruanyifeng.com/#toc1)
- 慕课网js基础（https://www.imooc.com/learn/36）
参考书籍
- JavaScript DOM编程艺术
- JavaScript高级程序设计（链接: https://pan.baidu.com/s/1fONBCOeS30rkHBU0mR8NdQ 密码: qriq）
- JavaScript精粹
- 你不知道的JavaScript
- JavaScript忍者秘籍
- JavaScript函数式编程
- 高性能JavaScript（链接: https://pan.baidu.com/s/1UsDTSBuBDngCcuMsZKWXEw 密码: pw3s）
- 自主学习，网上诸多资料
必做练习
- 百度前端学院任务十四–十七
- JavaScript基本特效
- 轮播图
- 弹出层、手风琴菜单
- 瀑布流布局
- ….等
JavaScript高级特性
- 正则表达式
- JavaScrip原型和闭包（http://www.cnblogs.com/wangfupeng1988/p/3977924.html）
- JavaScript内存泄漏（http://www.ruanyifeng.com/blog/2017/04/memory-leak.html）
- JavaScript的this用法和指向（http://www.ruanyifeng.com/blog/2010/04/using_this_keyword_in_javascript.html）
- JavaScript的作用域（http://www.cnblogs.com/kikiwu/p/4474074.html）
必做练习
- 百度前端学院任务十九—二十一
- 下拉菜单
- 分页组件
- 倒计时效果
- 简易计算器
- tab选项卡切换
HTTP和Ajax编程
学习目标
- web基础知识
- http极少
- ajax基本原理
JavaScript面向对象进阶
参考书籍
- JavaScript面向对象编程指南（链接: https://pan.baidu.com/s/1PSswVssDsn6tfLXkRd1nqA 密码: zdmt）
- JavaScript设计模式（链接: https://pan.baidu.com/s/18gF0hzC9xcmyBwHcKydAZA 密码: mgd2）
- 一张图理解prototype、proto和constructor的三角关系（http://www.cnblogs.com/xiaohuochai/p/5721552.html）
- JavaScript高级程序设计相关章节
JavaScript运动/动画
参考资料
- js动画效果（http://www.imooc.com/learn/167）
- 自行网上查阅并学习
jQuery基础
参考资料
- 书籍：锋利的jQuery（最好必看吧）（链接: https://pan.baidu.com/s/19Y-aUqFvHykakWCiBoH7Vg 密码: ajs2）
- 慕课网jQuery（http://www.imooc.com/course/list?c=jquery&type=1）
- 李炎恢老师jQuery视频教程（http://study.163.com/course/introduction.htm?courseId=501006）
模块化组件开发
参考资料
- require.js官网（http://requirejs.org/）（https://blog.csdn.net/sanxian_li/article/details/39394097）
- sea.js官网（http://www.zhangxinxu.com/sp/seajs/）
- JavaScript中的模块化之AMD和CMD（https://blog.csdn.net/tyro_java/article/details/51314674）
总结练习
实战
- 响应式网页制作实战项目（链接: https://pan.baidu.com/s/1vsvuj6MYNMVXQeXeFPlxIg 密码: swfe）
- webapp书城开发（链接: https://pan.baidu.com/s/1vQHBm0zTEbbQycwEDs59SQ 密码: mqt9）
- 初级开发工程师实战（链接: https://pan.baidu.com/s/133-pJKChi_OePmql6Xx87w 密码: hj8e）
- 中级实战（链接: https://pan.baidu.com/s/1dZr-g-j6RozQTVMu6C4Vzw 密码: h5vf）
扩展掌握
- canvas和svg
- React和redux（http://www.runoob.com/react/react-tutorial.html）
- vue（饿了么开发（http://www.runoob.com/react/react-tutorial.html））
- 7天搞定nodejs微信公众号开发（链接: https://pan.baidu.com/s/12VVtyZIKTSnazA-cJueMYg 密码: wudg）
- ….等自主网上学习
- 学习视频
- 链接: https://pan.baidu.com/s/1HxJH6Y6fYblkf9hQcmEXXg 密码: i6fd
- 链接: https://pan.baidu.com/s/1e49NOJVwgd7XMCo-odHFdw 密码: ymad
- 链接: https://pan.baidu.com/s/1B0Kn2t50kLlZcxVYWPqgsg 密码: c9ks
- 链接: https://pan.baidu.com/s/1ouJqfv2qIE0x_AQ6BlKEtg 密码: twrv
扩展学习资料汇总
- https://github.com/jsfront/src/blob/master/qq.md（学习资料汇总）
- https://github.com/airyland/Jsource（学习图谱）
- https://zhuanlan.zhihu.com/p/23968878?refer=full-stack（面向未来的跨界开发技术）
基本学习视频网站
- 慕课网（https://www.imooc.com/）
- 极客学院（http://www.jikexueyuan.com/）
- 网易云课堂（http://study.163.com/category/it）
- W3CSchool（https://www.w3cschool.cn/）
- 菜鸟教程（http://www.runoob.com/）
- 牛客网（https://www.nowcoder.com/）
- 火狐开发社区（https://developer.mozilla.org/zh-CN/）
- 自强学堂（https://code.ziqiangxuetang.com/）
- 妙味课堂（https://miaov.com/）
