前言

這是兩年以來，修真院收集整理的學習資料順序。 以CSS15個任務，JS15個任務為基礎，分別依據要完成任務的不同的技能點，我們整理出來了這麼一篇在學習的時候需要看到的資料。

這是Version 1.0，接下來會優化和更新到2.0. 現在只有WEB，接著會推出Java。

任務體系是從簡單到難，官網提供了更多更詳細的資料。

資料

css部分 任務1:九宮格——用html+css製作一個網頁 通過這個任務能學到：1.網頁是由什麼組成的；2.如何生成一個網頁；3.如何訪問一個網頁；4.html和css如何搭配工作；5.頁面基礎的佈局方式；6.如何用一行程式碼相容不同瀏覽裝置；7.頁面和想象的不一樣時如何進行除錯

任務2:認識開發必備工具 通過這個任務能學到：1.學習版本管理工具; 2.學習使用伺服器; 3.學習如何將自己的程式碼放到網上去

任務3:魔鏡介紹頁——一個最簡單的移動端頁面 通過這個任務能學到：1.如何運用佈局知識進行更復雜的佈局；2.如何讓佈局更好地適應移動端；3.如何合理使用rem作長度單位；4.如何使用photoshop切圖；5.如何處理不同dpi下的圖片

任務4:登入頁——一個最常見的移動端頁面 通過這個任務能學到： 1.處理常見的移動端頁面； 2.學會改變表單元素樣式

任務5:護工個人主頁——一個最常見的移動端頁面 通過這個任務能學到： 1.處理更復雜的移動端頁面； 2.同樣是左中右的佈局，可以用很多不同的方法來完成； 3.用css3的方法更好地拉伸背景圖

任務6:護工列表頁——一個最常見的移動端頁面，需要使用bootstrap 1.解決垂直居中； 2.模擬下拉選框； 3.做出複雜的列表頁

任務7:桌遊精靈——一個完整的webApp，以bootstrap為基礎滿足更多不同的需求 收穫什麼： 1.HTML5的audio定義音訊流； 2.處理半透明； 3.CSS3動畫

任務8:修真院——一個PC端的企業網站，以bootstrap為基礎滿足更多不同的需求 收穫什麼： 完成一個比較完整的PC端專案 html和css實現常見佈局 利用HTML和CSS實現常見的佈局 - 眼睛大大的 - SegmentFault

任務9:修真院——一個響應式的企業網站

任務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

任務14:自己的元件庫——將修真院拆出屬於自己的元件庫 收穫什麼： 提取PC端的元件庫 前端為什麼要元件化 前端為什麼一定要做元件化 css畫三角 css3畫三角形的原理 - 這算什麼艾迪 - 部落格園

任務15:綜合性的總結——按照任務12，13學到的規範，重寫一遍任務9，不用其他框架，使用less/sass並編譯 收穫什麼：綜合能力 綜合之前所學

任務1:九宮格 收穫什麼： javascript是什麼？ 掌握javascript的基本語法； 瞭解javascript的全域性函式； 學習使用javascript的自定義函式； javascript如何操作DOM； javascript如何修改CSS；

任務2:桌遊精靈身份發放 收穫什麼： 如何使用JS進行頁面跳轉和傳參； 使用JS對input等頁面元素進行更復雜的操作； 進一步理解JS的陣列； 瞭解JS正則表示式

任務3:桌遊精靈檢視身份 收穫什麼： 進一步學習頁面間資料傳遞； 如何根據需要顯示和隱藏檢視； JS對DOM樣式和內容進行更復雜的操作 Json JSON_百度百科 localStorage和sessionStorage詳解 HTMl5的儲存方式sessionStorage和localStorage詳解_html5教程技巧_指令碼之家

任務4:桌遊精靈法官日誌和遊戲結果 收穫什麼： 綜合運用jquery完成更復雜的業務邏輯； 使用有限狀態機來存放物件的不同狀態

任務6:後臺系統--angular初嘗 收穫什麼： 單頁應用開發； 學習使用框架開發專案 angularjs中文網 AngularJS中文網 angular常用功能 AngularJS 最常用的八種功能 angular ui-router AngularJS ui-router (巢狀路由)

任務7:後臺系統--angular登入和列表 收穫什麼： 用angular進行資料互動； 雙向繫結； 表單驗證

任務8:後臺系統--angular傳參和指令 收穫什麼： 在單頁應用裡如何通過url傳參； angular的指令是什麼； 如何去自定義一個指令

任務9:後臺系統--angular圖片上傳 收穫什麼： 基於HTML5的圖片預覽和上傳

任務10:後臺系統--angular表單驗證互動 收穫什麼： 進一步熟悉表單驗證； 學習使用三方外掛：富文字編輯器

=====廣告時間，不喜歡的可以到此為止了=====================

推薦一個web前端學習 QQ群606721798，歡迎大家加入，每天晚上在騰訊課堂都有一個技術學習課,會有老師分享乾貨,幫助大家分析解答問題

“我們相信人人都可以成為一個工程師，現在開始，找個師兄，帶你入門，學習的路上不再迷茫。這裡是，初學者轉行到網際網路行業的聚集地，只有實戰，沒有演練。只要加入我們，開始線上學習，就會有一對一的師兄貼心輔導，完全免費~"