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