前端学习路线
成长路线:
1.熟悉开发环境
a.前端工具:
- Git
-
- 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)
- 学习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/)
转载来源