这是两年以来，修真院收集整理的学习资料顺序。
以 CSS15 个任务，JS15 个任务为基础，分别依据要完成任务的不同的技能点，我们整理出来了这么一篇在学习的时候需要看到的资料。
这是 Version 1.0，接下来会优化和更新到 2.0.
现在只有 WEB，接着会推出 Java。
任务地址在这里。
任务体系是从简单到难，官网提供了更多更详细的资料。
资料
css 部分
任务 1:九宫格——用 html+css 制作一个网页
通过这个任务能学到：1.网页是由什么组成的；2.如何生成一个网页；3.如何访问一个网页；4.html 和 css 如何搭配工作；5.页面基础的布局方式；6.如何用一行代码兼容不同浏览设备；7.页面和想象的不一样时如何进行调试
HTML 基本知识
【图文】第 1 章 HTML 的基本概念_百度文库
CSS 概念
CSS 教程
盒子模型，浮动
对 CSS 中的 Position、Float 属性的一些深入探讨 - CoffeeDeveloper - 博客园
chrome 开发者工具
神器--Chrome 开发者工具(一) - Just For Fun - SegmentFault
媒体查询
Media Queries 详解 - lines - 博客园
任务 2:认识开发必备工具
通过这个任务能学到：1.学习版本管理工具; 2.学习使用服务器; 3.学习如何将自己的代码放到网上去
nginx
windows 上 nginx 配置代理服务，配置多域名，以及最简单实现跨域配置
git
Git 教程
github
知乎 - 知乎
svn
SVN 服务器搭建和使用（一） - xjbest - 博客园
任务 3:魔镜介绍页——一个最简单的移动端页面
通过这个任务能学到：1.如何运用布局知识进行更复杂的布局；2.如何让布局更好地适应移动端；3.如何合理使用 rem 作长度单位；4.如何使用 photoshop 切图；5.如何处理不同 dpi 下的图片
PhotoShop
http://jingyan.baidu.com/article/19020a0a149b71529d2842bb.html
absolute
CSS 深入理解之 absolute-慕课网
自适应单位
彻底弄懂 css 中单位 px 和 em,rem 的区别 - leejersey - 博客园
css 类选择器
CSS 类选择器详解
任务 4:登录页——一个最常见的移动端页面
通过这个任务能学到： 1.处理常见的移动端页面； 2.学会改变表单元素样式
input
了解 HTML 表单之 input 元素的 30 个元素属性 - 推酷
Smart checkbox and radio
绝对定位和相对定位
CSS 中的绝对定位与相对定位 - TBHacker - 博客园
任务 5:护工个人主页——一个最常见的移动端页面
通过这个任务能学到： 1.处理更复杂的移动端页面； 2.同样是左中右的布局，可以用很多不同的方法来完成； 3.用 css3 的方法更好地拉伸背景图
自适应布局总结
这可能是史上最全的 CSS 自适应布局总结
Html，CSS 代码规范
NEC : 更好的 CSS 样式解决方案
任务 6:护工列表页——一个最常见的移动端页面，需要使用 bootstrap
1.解决垂直居中； 2.模拟下拉选框； 3.做出复杂的列表页
雪碧图
background-position 和雪碧图(CSS Sprites)用法
bootstrap 栅格系统
Bootstrap 栅格系统的精妙之处
bootstrap 官方文档
Bootstrap 中文网
任务 7:桌游精灵——一个完整的 webApp，以 bootstrap 为基础满足更多不同的需求
收获什么： 1.HTML5 的 audio 定义音频流； 2.处理半透明； 3.CSS3 动画
input range 的样式设置
使用 CSS 来扩展增强 Input Range 的示例
html5web 存储
HTML 5 Web 存储
html 标签
HTML 标签
css3 动画
CSS3 Animation_Animation, css3 属性详解 教程_w3cplus
css 处理半透明
CSS 属性小结之--半透明处理 - 子纯不语 - 博客园
任务 8:修真院——一个 PC 端的企业网站，以 bootstrap 为基础满足更多不同的需求
收获什么： 完成一个比较完整的 PC 端项目
html 和 css 实现常见布局
利用 HTML 和 CSS 实现常见的布局 - 眼睛大大的 - SegmentFault
任务 9:修真院——一个响应式的企业网站
收获什么： 增加网站布局开发的熟练度； 获得一个响应式的网站
meta 标签中 http-equiv 属性使用介绍
meta 标签中的 http-equiv 属性使用介绍_HTML/Xhtml_网页制作_脚本之家
任务 10:51 包装——一个常见的表单页面
收获什么： CSS 制作流程图； CSS 模拟表单元素； 熟练响应式布局
css 改变 select 下拉列表样式
用纯 css 改变下拉列表 select 框的默认样式 - OurJS
任务 11:基于 css 的更高级语言——使用 less/sass 重写任务 4（登录页），并编译
收获什么： 使用 SASS 或 LESS
sass 入门
sass 入门 - sass 教程
less 文档
Less 中文网
任务 12:标准化——阅读 html 和 css 规范，不使用 bs 重写任务 5 和 6（护工）
收获什么： 使用 SASS 或 LESS 重构页面
css 重置样式表
css 重置样式表 - 前端小白 - 博客频道 - CSDN.NET
任务 13:组织样式表——按照任务 12 的标准，不使用 bs 重写任务 7 样式，并且阅读样式表组织规范，拆分样式表
收获什么：css 架构
如何进行 css 架构（张鑫旭）
http://www.zhangxinxu.com/wordpress/2010/07/我是如何对网站 css 进行架构的/
任务 14:自己的组件库——将修真院拆出属于自己的组件库
收获什么： 提取 PC 端的组件库
前端为什么要组件化
前端为什么一定要做组件化
css 画三角
css3 画三角形的原理 - 这算什么艾迪 - 博客园
任务 15:综合性的总结——按照任务 12，13 学到的规范，重写一遍任务 9，不用其他框架，使用 less/sass 并编译
收获什么：综合能力
综合之前所学
js 部分
基础语法积累
菜鸟教程
JavaScript 教程 | 菜鸟教程
w3c
浏览器脚本教程
阮一峰
JavaScript 标准参考教程（alpha）
廖雪峰
JavaScript 教程
js 秘密花园
JavaScript 秘密花园
选一个刷一遍
jq 教程
jQuery 教程 | 菜鸟教程
angular 插件集合
angular 好用的插件集合（持续更新中） - angular - SegmentFault
任务 1:九宫格
收获什么： javascript 是什么？ 掌握 javascript 的基本语法； 了解 javascript 的全局函数； 学习使用 javascript 的自定义函数； javascript 如何操作 DOM； javascript 如何修改 CSS；
js 字符串转数字
js 字符串转换成数字的三种方法 - 疯狂的胖鱼 - 博客频道 - CSDN.NET
js 随机数
JS 产生随机数的几个用法！ - banbu - 博客园
任务 2:桌游精灵身份发放
收获什么： 如何使用 JS 进行页面跳转和传参； 使用 JS 对 input 等页面元素进行更复杂的操作； 进一步理解 JS 的数组； 了解 JS 正则表达式
dom 操作
JavaScript 的 DOM 操作(节点操作) - 西西爸 de 札记 - 博客频道 - CSDN.NET
正则（RegExp 对象）
JavaScript 标准参考教程（alpha）
控制台调试
Chrome 控制台 console 的用法
任务 3:桌游精灵查看身份
收获什么： 进一步学习页面间数据传递； 如何根据需要显示和隐藏视图； JS 对 DOM 样式和内容进行更复杂的操作
Json
JSON_百度百科
localStorage 和 sessionStorage 详解
HTMl5 的存储方式 sessionStorage 和 localStorage 详解_html5 教程技巧_脚本之家
任务 4:桌游精灵法官日志和游戏结果
收获什么： 综合运用 jquery 完成更复杂的业务逻辑； 使用有限状态机来存放对象的不同状态
js 有限状态机
JavaScript 与有限状态机 - 阮一峰的网络日志
任务 5:ajax 登录/退出
ajax
JavaScript 标准参考教程（alpha）
rest
深入浅出 REST_知识库_博客园
json 和 jsonp
【原创】说说 JSON 和 JSONP，也许你会豁然开朗，含 jQuery 用例 - 随它去吧 - 博客园
任务 6:后台系统--angular 初尝
收获什么： 单页应用开发； 学习使用框架开发项目
angularjs 中文网
AngularJS 中文网
angular 常用功能
AngularJS 最常用的八种功能
angular ui-router
AngularJS ui-router (嵌套路由)
任务 7:后台系统--angular 登录和列表
收获什么： 用 angular 进行数据交互； 双向绑定； 表单验证
理解 angularjs 的作用域 scope
AngularJS 中文社区
http 服务
简介 AngularJS 中 $http 服务的用法_AngularJS_脚本之家
$http 服务细节设置
AngularJs $http 请求服务
任务 8:后台系统--angular 传参和指令
收获什么： 在单页应用里如何通过 url 传参； angular 的指令是什么； 如何去自定义一个指令
angular 中几种传参
Angular 中几种参数传递方式
angular 自定义指令
AngularJS 中的指令全面解析(必看)_AngularJS_脚本之家
angular 服务
AngularJS 之 Factory vs Service vs Provider
任务 9:后台系统--angular 图片上传
收获什么： 基于 HTML5 的图片预览和上传
angular 实现图片上传（参考实现）
AngularJS 图片上传功能的实现 - OPEN 开发经验库
ng-file-upload 的使用
angularJs 中上传图片/文件功能：ng-file-upload - csdnmmcl 的博客 - 博客频道 - CSDN.NET
任务 10:后台系统--angular 表单验证交互
收获什么： 进一步熟悉表单验证； 学习使用三方插件：富文本编辑器
angular 表单验证
表单验证 - Halower - 博客园
angular-umeditor
dylike/meta.umeditor
PS，本文由修真院前学员现正式员工美丽动人的小金超整理。
对修真院有兴趣的，请点击这个链接去注册，首页 | IT 修真院 | 更快更高效的免费 Java,CSS,JS,运维技术培训 必须用这个链接，拿我做推荐人可是有好处的~
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于