Create lab-FE-study-way.md

这是前端学习路线，仅供参考！

lab-FE-study-way.md

@@ -0,0 +1,390 @@
+##FE1-基础1
+
+####html-基础1
+* [html-w3cschool基础教程](http://www.w3school.com.cn/html/index.asp)
+
+####[css-基础1](http://www.w3school.com.cn/css/index.asp)
+
+* css-选择器
+* css-层叠规则
+* css-布局
+* css-样式
+* css-框模型
+* css-定位
+
+####[javascript-基础1](http://www.w3school.com.cn/js/index.asp)
+
+* JS 简介
+* JS 实现
+* JS 输出
+* JS 语句
+* JS 注释
+* JS 变量
+* JS 数据类型
+* JS 对象
+* JS 函数
+* JS 运算符
+* JS 比较
+* JS If...Else
+* JS Switch
+* JS For
+* JS While
+* JS Break
+* JS 错误
+* JS 验证
+
+
+---
+
+---
+
+
+
+####html-基础2
+
+* [html-w3cschool中HTML 高级教程](http://www.w3school.com.cn/html/index.asp)
+
+
+
+####[css-基础2](http://www.w3school.com.cn/css/index.asp)
+
+* CSS 对齐
+* CSS 尺寸
+* CSS 分类
+* CSS 导航栏
+* CSS 图片库
+* CSS 图片透明
+* CSS 媒介类型
+
+####[javascript-基础2](http://www.w3school.com.cn/js/index.asp)
+
+* JS对象
+* JS Window
+
+
+
+
+---
+
+---
+
+##FE1.1-基础2
+
+
+####[html5](http://www.w3school.com.cn/html5/index.asp)
+* html语义化
+* 表单
+* 拖放
+* 视频
+* 音频
+
+####[css3](http://www.w3school.com.cn/css3/index.asp)
+
+* CSS3 边框
+* CSS3 背景
+* CSS3 文本效果
+* CSS3 字体
+
+####JQuery
+* jQuery HTML
+* jQuery 遍历
+
+
+
+
+
+
+---
+
+---
+##FE1.2
+
+####浏览器
+
+主要是在开发中前端在浏览器中的解决方式
+
+* [浏览器解析原理](http://kb.cnblogs.com/page/129756/)
+* [HTML解析原理](http://www.cnblogs.com/NetSos/archive/2010/11/29/1891194.html)
+
+####[html5](http://www.w3school.com.cn/html5/index.asp)
+* HTML5 画布
+* HTML5 SVG
+* HTML5 画布 vs SVG
+
+####[css3](http://www.w3school.com.cn/css3/index.asp)
+* CSS3 2D 转换
+* CSS3 3D 转换
+* CSS3 过渡
+* CSS3 动画
+* CSS3 多列
+* CSS3 用户界面
+
+####[bootstrap](http://www.runoob.com/bootstrap/bootstrap-tutorial.html)
+* Bootstrap CSS
+
+
+####JQuery
+* JQuery链式结果
+* 动画队列
+* jQuery AJAX
+* jQuery 效果
+
+
+
+##FE1.3
+
+
+####javascript
+推荐javascript高级程序设计
+
+* 正则表达式
+* 引用类型
+* 使用Canvas绘图
+* HTML5脚本编程
+* JSON
+* AJax
+
+
+####[bootstrap](http://www.runoob.com/bootstrap/bootstrap-tutorial.html)
+
+* Bootstrap 布局组件
+* Bootstrap 插件
+
+
+
+##FE2.0-基础1
+
+### angluarjs基础
+
+* angular简介
+* MVVM
+* 迭代器过滤
+* 双向数据绑定
+* 依赖注入
+* 路由
+* 指令
+
+### html5与css3 熟练掌握
+
+#### css3
+
+* 常见bug及其修复方法
+* 布局-弹性布局
+
+#### html5
+
+* HTML5 地理定位
+* HTML5 Web 存储
+* HTML5 应用缓存
+* HTML5 Web Workers
+* HTML5 服务器发送事件
+* HTML5 websocket
+* webComponent
+
+
+
+---
+
+---
+##FE2.2-基础2
+
+#### 了解ReactJS（入门）
+
+* 本地安装reactjs安装包
+* HTML模板
+* ReactDOM.render()
+* JSX语法
+* 组件
+* this.props.children
+* PropTypes
+* 获取真实的DOM节点
+* this.state
+* 表单
+* 组件的生命周期
+* Ajax
+* [入门参考链接](http://http://www.ruanyifeng.com/blog/2015/03/react.html)
+
+#### 了解Zepto（入门）
+
+* 参考资料  
+ zepto官网：[http://www.zeptojs.cn/](http://www.zeptojs.cn/) 
+ zepto介绍：[http://www.w3cfuns.com/article-5594019-1-1.html](http://www.w3cfuns.com/article-5594019-1-1.html)
+
+#### 响应式设计开发（了解）
+* 响应式设计要素  
+
+  1、媒体查询；  
+  2、流式布局；  
+  3、弹性图片；
+
+* 响应式开发总结 [http://www.cnblogs.com/flash3d/archive/2013/09/28/3343877.html]( http://www.cnblogs.com/flash3d/archive/2013/09/28/3343877.html) 
+
+
+
+---
+
+---
+
+##FE2.3-基础3
+
+#### git入门
+
+* git简介
+* 安装git
+* 创建版本库
+* 回退、管理修改、撤销修改、删除文件
+* 远程仓库
+* 分支管理
+* 标签管理
+* 使用github
+* 自定义git
+* 参考网站：  
+
+[阮一峰](http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000)  
+[github常见操作和常见错误](http://blog.csdn.net/god_wot/article/details/10522405)
+
+
+#### angularJS实战
+
+##### 核心原理解析
+
+* angularjs启动过程
+* provider与injector
+* 指令执行的过程分析
+* $scope与双向数据绑定机制分析
+* 参考网站：[http://www.imooc.com/course/list?c=angularjs](http://www.imooc.com/course/list?c=angularjs)
+
+
+
+
+
+
+---
+
+---
+
+
+##FE3终极之战
+
+
+####http标准
+* http头部信息
+* http请求过程
+* https
+* http状态码
+
+####javascript
+
+* javascript设计模式
+* 闭包
+* 原型链
+* javascript面向对象
+* 了解ESCMScript5
+
+
+#### nodejs
+
+* 安装配置
+* npm使用介绍
+* REPL
+* 回调函数
+* 事件循环
+* EventEmitter
+* buffer
+* Stram
+* 函数
+* 路由
+* 全局对象
+* 常用工具
+* 文件系统
+* get/post请求
+* 工具模块
+
+####测试
+
+* 掌握gulp或者grunt
+
+
+
+---
+
+---
+
+##FE3.1
+
+####w3c标准
+* 熟悉w3c标准，如html(5),css(3),javascript,Json,xml,websocket等
+
+####html
+* 封装html公用组件，并提供给实验室使用
+
+####css
+* 了解css预编译SASS或Less
+
+
+#### nodejs进阶
+* web模块
+* Express框架 	
+* RESTful API
+* 多进程
+* JXcore 打包
+
+####web安全
+
+* CSRF/XSS 
+* ADSafe/SandBox 
+
+
+---
+
+---
+##FE3.2
+
+####css
+* 封装自己的css库
+
+####javascript
+* 封装自己的js库
+* 了解ESCMScript6
+
+####web性能
+* HTTPWatch
+* chrome console
+
+
+
+---
+
+---
+##FE3.3
+
+* 热爱前端并有自己独特的见解
+* 愿意<i><b>分享</b></i>自己的知识
+* 当你到这里的时候，你已经在前端这条路上，相信你也有自己的知识体系。接下来的就需要你自己了，加油！！！
+
+
+##FE3加分项
+* github上有自己的项目，并过10星
+* 参与其他的github项目开发
+* 自己的博客，技术总结
+* 活跃在stackoverflow等IT社区
+* 翻译国外文章，并得到同学们的认可
+
+
+##前端学习网站
+* [w3c标准](http://www.w3.org/)
+* [w3cmark](http://www.w3cmark.com/)
+* [http://www.w3school.com.cn/](http://www.w3school.com.cn/)
+* [http://www.w3cfuns.com/](http://www.w3cfuns.com/)
+* [http://www.w3cplus.com/](http://www.w3cplus.com/)
+* [前端乱炖](http://www.html-js.com/)
+* [慕课网](http://www.imooc.com/)
+* [stackoverflow](http://stackoverflow.com/)
+* [Mozilla Foundation_火狐组织](https://developer.mozilla.org/zh-CN/docs/Web)
+* [javascript秘密花园](http://bonsaiden.github.io/JavaScript-Garden/zh/)
+* [html5rocks](http://www.html5rocks.com/zh/tutorials/)
+
+
+<b>下面链接需要科学上网</b>
+* [tutorialzine](http://tutorialzine.com/)
+* [gotoandlearn](http://gotoandlearn.com/index.php)