以下文章转载自知乎,暗灭-京华九月秋近寒，浮沉半生影长单.

【修真院“善良”系列之十八】WEB程序员从零开始到就业的全资料V1.0——只看这一篇就够了！

暗灭

京华九月秋近寒，浮沉半生影长单

已关注

134 人赞了该文章

前言

这是两年以来，修真院收集整理的学习资料顺序。

以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修真院

        “我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。

        这里是技能树.IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。快来与我一起学习吧~

我的邀请码：17742750，或者你可以直接点击此链接：http://www.jnshu.com/login/1/17742750