【修真院「善良」系列之十八】WEB程序員從零開始到就業的全資料V1.0——只看這一篇就夠了！

前言
 

這是兩年以來，修真院收集整理的學習資料順序。
以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<audio>標籤
HTML <audio> 標籤
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 表單驗證
表單驗證<AngularJs> - Halower - 博客園
angular-umeditor
dylike/meta.umeditor

 

 

 

PS，本文由修真院前學員現正式員工美麗動人的小金超整理。

 

 

 

 

 

------------------------------------------------------------------------------------------------------------------------           

「咱們相信人人均可以成爲一個工程師，如今開始，找個師兄，帶你入門，學習的路上再也不迷茫。

這裏是技能樹.IT修真院：http://www.jnshu.com，初學者轉行到互聯網行業的彙集地。"

歡迎加IT交流羣565734203與你們一塊兒討論交流