前端资料（备用）

前端学习路线

成长路线：

 

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/）

转载来源​​​​​​​