以下文章轉載自知乎,暗滅-京華九月秋近寒，浮沉半生影長單.
【修真院“善良”系列之十八】WEB程序員從零開始到就業(yè)的全資料V1.0——只看這一篇就夠了！
京華九月秋近寒，浮沉半生影長單
已關注
134 人贊了該文章
前言
這是兩年以來，修真院收集整理的學習資料順序。
以CSS15個任務，JS15個任務為基礎，分別依據(jù)要完成任務的不同的技能點，我們整理出來了這么一篇在學習的時候需要看到的資料。
這是Version 1.0，接下來會優(yōu)化和更新到2.0.
現(xiàn)在只有WEB，接著會推出Java。
任務地址在這里。
任務體系是從簡單到難，官網(wǎng)提供了更多更詳細的資料。
資料
css部分
任務1:九宮格——用html+css制作一個網(wǎng)頁
通過這個任務能學到：1.網(wǎng)頁是由什么組成的；2.如何生成一個網(wǎng)頁；3.如何訪問一個網(wǎng)頁；4.html和css如何搭配工作；5.頁面基礎的布局方式；6.如何用一行代碼兼容不同瀏覽設備；7.頁面和想象的不一樣時如何進行調試
HTML基本知識
CSS概念
盒子模型，浮動
對CSS中的Position、Float屬性的一些深入探討 - CoffeeDeveloper - 博客園
chrome開發(fā)者工具
神器--Chrome開發(fā)者工具(一) - Just For Fun - SegmentFault
媒體查詢
任務2:認識開發(fā)必備工具
通過這個任務能學到：1.學習版本管理工具; 2.學習使用服務器; 3.學習如何將自己的代碼放到網(wǎng)上去
nginx
windows上 nginx 配置代理服務，配置多域名，以及最簡單實現(xiàn)跨域配置
git
github
svn
任務3:魔鏡介紹頁——一個最簡單的移動端頁面
通過這個任務能學到：1.如何運用布局知識進行更復雜的布局；2.如何讓布局更好地適應移動端；3.如何合理使用rem作長度單位；4.如何使用photoshop切圖；5.如何處理不同dpi下的圖片
PhotoShop
http://jingyan.baidu.com/article/19020a0a149b71529d2842bb.html
absolute
CSS深入理解之a(chǎn)bsolute-慕課網(wǎng)
自適應單位
徹底弄懂css中單位px和em,rem的區(qū)別 - leejersey - 博客園
css類選擇器
任務4:登錄頁——一個最常見的移動端頁面
通過這個任務能學到： 1.處理常見的移動端頁面； 2.學會改變表單元素樣式
input
絕對定位和相對定位
CSS中的絕對定位與相對定位 - TBHacker - 博客園
任務5:護工個人主頁——一個最常見的移動端頁面
通過這個任務能學到： 1.處理更復雜的移動端頁面； 2.同樣是左中右的布局，可以用很多不同的方法來完成； 3.用css3的方法更好地拉伸背景圖
自適應布局總結
Html，CSS代碼規(guī)范
任務6:護工列表頁——一個最常見的移動端頁面，需要使用bootstrap
1.解決垂直居中； 2.模擬下拉選框； 3.做出復雜的列表頁
雪碧圖
background-position和雪碧圖(CSS Sprites)用法
bootstrap柵格系統(tǒng)
bootstrap官方文檔
任務7:桌游精靈——一個完整的webApp，以bootstrap為基礎滿足更多不同的需求
收獲什么： 1.HTML5的audio定義音頻流； 2.處理半透明； 3.CSS3動畫
input range 的樣式設置
html5web存儲
html標簽
css3動畫
CSS3 Animation_Animation, css3屬性詳解 教程_w3cplus
css處理半透明
任務8:修真院——一個PC端的企業(yè)網(wǎng)站，以bootstrap為基礎滿足更多不同的需求
收獲什么： 完成一個比較完整的PC端項目
html和css實現(xiàn)常見布局
利用HTML和CSS實現(xiàn)常見的布局 - 眼睛大大的 - SegmentFault
任務9:修真院——一個響應式的企業(yè)網(wǎng)站
收獲什么： 增加網(wǎng)站布局開發(fā)的熟練度； 獲得一個響應式的網(wǎng)站
meta標簽中http-equiv屬性使用介紹
meta標簽中的http-equiv屬性使用介紹_HTML/Xhtml_網(wǎng)頁制作_腳本之家
任務10:51包裝——一個常見的表單頁面
收獲什么： CSS制作流程圖； CSS模擬表單元素； 熟練響應式布局
css改變select下拉列表樣式
用純css改變下拉列表select框的默認樣式 - OurJS
任務11:基于css的更高級語言——使用less/sass重寫任務4（登錄頁），并編譯
收獲什么： 使用SASS或LESS
sass入門
less文檔
任務12:標準化——閱讀html和css規(guī)范，不使用bs重寫任務5和6（護工）
收獲什么： 使用SASS或LESS重構頁面
css重置樣式表
css 重置樣式表 - 前端小白 - 博客頻道 - CSDN.NET
任務13:組織樣式表——按照任務12的標準，不使用bs重寫任務7樣式，并且閱讀樣式表組織規(guī)范，拆分樣式表
收獲什么：css架構
如何進行css架構（張鑫旭）
http://www.zhangxinxu.com/wordpress/2010/07/我是如何對網(wǎng)站css進行架構的/
任務14:自己的組件庫——將修真院拆出屬于自己的組件庫
收獲什么： 提取PC端的組件庫
前端為什么要組件化
css畫三角
任務15:綜合性的總結——按照任務12，13學到的規(guī)范，重寫一遍任務9，不用其他框架，使用less/sass并編譯
收獲什么：綜合能力
綜合之前所學
js部分
基礎語法積累
菜鳥教程
w3c
阮一峰
廖雪峰
js秘密花園
選一個刷一遍
jq教程
angular插件集合
angular好用的插件集合（持續(xù)更新中） - angular - SegmentFault
任務1:九宮格
收獲什么： javascript是什么？ 掌握javascript的基本語法； 了解javascript的全局函數(shù)； 學習使用javascript的自定義函數(shù)； javascript如何操作DOM； javascript如何修改CSS；
js字符串轉數(shù)字
js 字符串轉換成數(shù)字的三種方法 - 瘋狂的胖魚 - 博客頻道 - CSDN.NET
js隨機數(shù)
JS產(chǎn)生隨機數(shù)的幾個用法！ - banbu - 博客園
任務2:桌游精靈身份發(fā)放
收獲什么： 如何使用JS進行頁面跳轉和傳參； 使用JS對input等頁面元素進行更復雜的操作； 進一步理解JS的數(shù)組； 了解JS正則表達式
dom操作
JavaScript的DOM操作(節(jié)點操作) - 西西爸de札記 - 博客頻道 - CSDN.NET
正則（RegExp對象）
控制臺調試
任務3:桌游精靈查看身份
收獲什么： 進一步學習頁面間數(shù)據(jù)傳遞； 如何根據(jù)需要顯示和隱藏視圖； JS對DOM樣式和內容進行更復雜的操作
Json
localStorage和sessionStorage詳解
HTMl5的存儲方式sessionStorage和localStorage詳解_html5教程技巧_腳本之家
任務4:桌游精靈法官日志和游戲結果
收獲什么： 綜合運用jquery完成更復雜的業(yè)務邏輯； 使用有限狀態(tài)機來存放對象的不同狀態(tài)
js有限狀態(tài)機
JavaScript與有限狀態(tài)機 - 阮一峰的網(wǎng)絡日志
任務5:ajax登錄/退出
ajax
rest
json和jsonp
【原創(chuàng)】說說JSON和JSONP，也許你會豁然開朗，含jQuery用例 - 隨它去吧 - 博客園
任務6:后臺系統(tǒng)--angular初嘗
收獲什么： 單頁應用開發(fā)； 學習使用框架開發(fā)項目
angularjs中文網(wǎng)
angular常用功能
angular ui-router
任務7:后臺系統(tǒng)--angular登錄和列表
收獲什么： 用angular進行數(shù)據(jù)交互； 雙向綁定； 表單驗證
理解angularjs的作用域scope
http服務
簡介AngularJS中$http服務的用法_AngularJS_腳本之家
$http服務細節(jié)設置
任務8:后臺系統(tǒng)--angular傳參和指令
收獲什么： 在單頁應用里如何通過url傳參； angular的指令是什么； 如何去自定義一個指令
angular中幾種傳參
angular自定義指令
AngularJS中的指令全面解析(必看)_AngularJS_腳本之家
angular服務
AngularJS 之 Factory vs Service vs Provider
任務9:后臺系統(tǒng)--angular圖片上傳
收獲什么： 基于HTML5的圖片預覽和上傳
angular實現(xiàn)圖片上傳（參考實現(xiàn)）
AngularJS圖片上傳功能的實現(xiàn) - OPEN 開發(fā)經(jīng)驗庫
ng-file-upload的使用
angularJs中上傳圖片/文件功能：ng-file-upload - csdnmmcl的博客 - 博客頻道 - CSDN.NET
任務10:后臺系統(tǒng)--angular表單驗證交互
收獲什么： 進一步熟悉表單驗證； 學習使用三方插件：富文本編輯器
angular 表單驗證
angular-umeditor
PS，本文由修真院前學員現(xiàn)正式員工美麗動人的小金超整理。
今天的分享就到這里啦，歡迎大家點贊、轉發(fā)、留言、拍磚~
????????技能樹.IT修真院
????????“我們相信人人都可以成為一個工程師，現(xiàn)在開始，找個師兄，帶你入門，掌控自己學習的節(jié)奏，學習的路上不再迷茫”。
????????這里是技能樹.IT修真院，成千上萬的師兄在這里找到了自己的學習路線，學習透明化，成長可見化，師兄1對1免費指導?？靵砼c我一起學習吧~
我的邀請碼：17742750，或者你可以直接點擊此鏈接：http://www.jnshu.com/login/1/17742750
