任務(wù) 1: 學(xué)會基本的HTML(5)標簽骨架以及基本服務(wù)器概念

1.開發(fā)基礎(chǔ)百度首頁

要求：

· 學(xué)會配置開發(fā)環(huán)境

· 學(xué)會使用基本的HTML結(jié)構(gòu)搭建骨架

· 基本符合視覺上的要求

· 讓整塊在頁面大致垂直居中

· 頁面的點擊全部為真實點擊

· 并不要求CSS

2.開發(fā)課程表

要求：

· HTML&HTML5標簽及表格table的使用；

· 代碼結(jié)構(gòu)的處理

· HTML5語義的使用

· 提前學(xué)習(xí)，使用了css進行美化。

任務(wù) 2: 學(xué)會HTML5新增元素及CSS核心技術(shù)

1.制作一個由5個100*100DIV組成的十字架

要求：

· 制作一個由5個100*100DIV組成的十字架（如），

· 中間放一張icon（自己喜歡的64*64的小圖片）在DIV里垂直水平居中，

· 十字架頁面垂直居中水平居中,每一個DIV要有邊框陰影盡量的讓其漂亮。

2.制作家教網(wǎng)注冊頁面

要求：

· 青島家教網(wǎng)注冊頁面是一個N年前非常傳統(tǒng)的老式頁面，很陳舊，需要大家用自己新學(xué)過的HTML&HTML5&CSS&CSS3的知識，一些新的表單元素，重新實現(xiàn)和改良這個頁面，達到熟悉表單元素的目的（傳統(tǒng)input和H5的混用達到全部熟悉的目的）。

· 具體要制作的頁面，入口在 /member/register_1.asp（不需要做），先填寫一些資料后進入下一個頁面/member/register_2.asp就是我們需要制作的。

3.讓百度首頁樣式完全與官網(wǎng)樣式完全一致

要求：

· 試著使用HTML5元素改良百度首頁且樣式盡可能完全與官網(wǎng)完全一致（僅要求谷歌瀏覽器）。

· 本題難點在于百度首頁頂部菜單鼠標懸浮下拉菜單的效果，當前階段未學(xué)JS, 可以參考使用偽類:hover盡可能去實現(xiàn)，但不做太多要求。

4.實戰(zhàn)盒子模型與彈性盒模型。

要求：

· 正常盒子與怪異盒子對比

· 彈性盒子水平分欄，垂直分欄，排序(flex)，cloumn分欄

· 舊版彈性盒子居中布局

· 美觀程度

任務(wù) 3: 學(xué)會CSS常用布局技巧以及繪制特殊圖形和動畫

1.CSS3開發(fā)3D魔方

要求：

· 使用CSS3開發(fā)炫酷的3D魔方效果。詳情看老師講解視頻。

2.CSS&CSS3開發(fā)簡筆畫并讓簡筆畫像動畫片一樣動起來

要求：

· CSS&CSS3開發(fā)簡筆畫并讓簡筆畫像動畫片一樣動起來。

· 測試瀏覽器需要支持H5及CSS3, 默認必須至少支持Chrome（想拿高分請支持firefox）。

3.讓百度首頁適配IE等所有瀏覽器

CSS Hack技能是衡量一個前端工程師經(jīng)驗和技能功底的重要知識點之一，也是前端比較痛苦的一個技能點。因此這個作業(yè)，我們需要尋找CSS Hack并反饋到一個單獨的百度首頁HTML頁面上（上次百度首頁作業(yè)基礎(chǔ)上），讓你的百度首頁適配IE以及市面上的主流瀏覽器（IE8+系列、Google Chrome、Firefox）。

要求：

· CSS Hack應(yīng)用

· 瀏覽器兼容性處理(兼容Webkit內(nèi)核的Chrome、Moz內(nèi)核的Firefox和IE 8、9以上即可，實現(xiàn)了IE6、7等其它為加分項)

4.理解并完成雙飛翼布局

要求：

· 理解并完成雙飛翼布局(CSS浮動、定位、布局、自適應(yīng)等)。

任務(wù) 4: 掌握HTML+CSS的基本核心技巧

1.開發(fā)新版極客學(xué)院首頁

要求：

· 注意對極客學(xué)院首頁整體的還原度，本任務(wù)還沒學(xué)習(xí)JS，對于一些JS的特效不做要求，主要考察HTML和CSS

· 注意代碼結(jié)構(gòu)的合理性，界面的美觀性

· 注意引用的資源是否規(guī)范

2.利用Bootstrap開發(fā)后臺登陸頁面和首頁

要求：

· 利用Bootstrap開發(fā)一個后臺管理系統(tǒng)的后臺登陸頁面和后臺首頁

· 熟悉對Bootstrap響應(yīng)式框架的使用；

3.響應(yīng)式的百度首頁

用一個頁面，把百度首頁pc版和移動版通過media query技術(shù)做響應(yīng)式適配，達到熟悉media query實現(xiàn)響應(yīng)式布局的目的；可利用真實手機或者Google Chrome的模擬器，進行調(diào)試和測驗。

要求：

· media query技術(shù)做響應(yīng)式適配

· 利用真實手機或者Google Chrome的模擬器，進行調(diào)試和測驗

4.完成初級前端面試題

本作業(yè)為開放性作業(yè)，不對頁面作特別要求，HTML頁面（建議，作為一名前端）、圖片、word都可以。主要是總結(jié)的面試題。讓大家對于前端面試和前端基本崗位要求有個基本的了解。

要求：

· 使用markdown完成。

任務(wù) 5: JavaScript入門和基礎(chǔ)

1.將0~100分學(xué)員以10分為界，分為十段，然后計算出該生為數(shù)字幾等生

將0-100分學(xué)員分已10為分界,10分為一段，然后計算出該生為數(shù)字幾等生，如98分為90-100為1等生，65分為60-70為4等生。

要求：

· Switch或者ifelse等的使用

· 根據(jù)傳入的值，進行運算和返回

2.用JS開發(fā)簡易計算器

用JS開發(fā)簡易計算器，輸入 x 、y 以及操作符可以計算出數(shù)值，如函數(shù)計算器輸入 4，5，* 可以返回20，輸入3 ，8，+可以等于11。

3.JS找到數(shù)組中出現(xiàn)次數(shù)最多的字母，并給出個數(shù)和每一個所在的位置

找到對象{“a“，”x“，”b“，”d“，”m“，”a“，”k，“m”，“p”，“j”，“a”}出現(xiàn)最多的字母并給出個數(shù)和每一個所在的順序。

要求：

· 做成HTML界面的形式，也可以在瀏覽器console打印出來

任務(wù) 6: 掌握JavaScript DOM、BOM、事件和高級技巧

1.開發(fā)完整計算器

開發(fā)帶HTML頁面可操作的完整計算器，根據(jù)用戶的按鈕操作給出正確的計算結(jié)果，至少要適配到IE8+、Chrome。

要求：

· 綁定事件務(wù)必兼容IE8+、 FireFox、Chrome

2.hao123換膚功能-開發(fā)一個頂部帶可選顏色換膚的hao123網(wǎng)站

要求：

· 開發(fā)一個頂部帶可選顏色的hao123網(wǎng)站

· 點擊這些顏色可換膚改變網(wǎng)站主題，能記住用戶本次點擊的換膚操作，下次進入網(wǎng)站可直接應(yīng)用到上次主題

· 可切換顏色包括頂部banner以及背景顏色等等

任務(wù) 7: 掌握jQuery使用和深入JavaScript

1.完成百度首頁登陸之后完整版。

利用Jquery完成百度右側(cè)下拉, 并注冊賬號登陸完成全部頁面切換效果。包括換膚和下面的切換Tab.

2.極客學(xué)院官網(wǎng)二級菜單頁面-課程庫頁面

利用學(xué)過的JavaScript、JQuery知識和前面學(xué)過的HTML、CSS完成極客學(xué)院二級菜單頁面-[課程庫]頁面，并完成全部動態(tài)效果，盡量增加動畫效果。

要求：

· 瀏覽器需兼容FireFox、Chrome、ie8+

· 課程庫頁面入口：http://www.jikexueyuan.com/course/

3.Jquery完成百度圖片瀑布流布局。

要求：

· 利用Jquery完成百度圖片完整瀑布流布局。

任務(wù) 8: 了解面向?qū)ο缶幊桃约癙HP+MySql入門

1.開發(fā)手機版本的百度新聞。

開發(fā)帶后臺的H5版本百度新聞，并用之前開發(fā)的bootstrap后臺完善作為新聞的后臺系統(tǒng)，并能用基礎(chǔ)的PHP+MYSQL開發(fā)跑通后臺。

要求：

· 加入meta標簽開發(fā)移動端H5頁面

· 搭建mysql+php開發(fā)環(huán)境，交作業(yè)的時候記得帶上sql腳本+php代碼

· 配合ajax 技能點: (1)后臺是否可以正常的增刪改查;(2)前臺是否可以完整調(diào)用請求接口;(3)完成頁面的渲染結(jié)果是否在手機端展示正常

任務(wù) 9: 學(xué)習(xí)NodeJS(含EcmaScript6)和移動端開發(fā)

1.開發(fā)Nodejs版本的百度新聞系統(tǒng)。

配置好開發(fā)環(huán)境，把之前的前端百度新聞界面拉過來，后臺改成Nodejs版本，可以做成Express渲染模板形式亦可以做成rest格API形式搭載mysql,記得導(dǎo)出sql腳本文件。

要求：

· 安裝Express或者rest框架或者Nodejs

· 利用Ajax配合請求。

任務(wù) 10: 掌握前端工業(yè)化框架

1.利用Gulp或者FIS重組百度首頁

利用Gulp或者FIS重新組織你的百度首頁樣式和JS，然后達到工程化可編譯狀態(tài)。

要求：

· 安裝Gulp或者FIS

· 按照框架要求編譯百度首頁達到性能最優(yōu)狀態(tài)。

· 通過本作業(yè)了解一種構(gòu)建工具使用的基本原理即可（不同企業(yè)構(gòu)建工具可能不一樣，但原理基本一樣），并學(xué)會獨立查文檔去學(xué)習(xí)新知識。

任務(wù) 11: 掌握CSS在工程中的變化

1.利用less或者sass改善極客學(xué)院首頁CSS

要求：

· 編寫Gulp或FIS腳本對Sass或者Less進行編譯

· 符合性能優(yōu)化標準進行壓縮合并以及充分利用Less或Sass優(yōu)勢少寫代碼

· 可查看官方API進行更多的運用

2.利用less或sass編寫公交站牌

要求：

· 利用less或sass編寫代碼制作出一個公交站牌的效果。

任務(wù) 12: 掌握JavaScript常用設(shè)計模式

1.用設(shè)計模式改善百度js代碼

用簡單的設(shè)計模式改寫百度代碼并加入注釋用了什么設(shè)計模式，為什么這樣寫，這樣寫的好處。

2.總結(jié)高級前端開發(fā)工程師面試題和思維腦圖

百度一下高級前端工程師面試題并總結(jié)到頁面上對這些面試題有深入的理解。如果有時間可以自己利用xmind總結(jié)前端開發(fā)思維腦圖。

任務(wù) 13: 熟悉版本操作工具Git、SVN等以及AngularJS、Cordova

1.搭建自己的GitHub倉庫

搭建自己的GitHub倉庫并將所有作業(yè)按照目錄規(guī)范全部提交到Git

任務(wù) 14: 熟悉網(wǎng)絡(luò)安全以及React、ReactNative

1.完善百度新聞PHP或Node版本安全性漏洞

要求：

· 完善百度新聞安全性漏洞，并新建文件readme.txt寫好注釋修改了哪些安全漏洞，寫在了哪里有什么樣的作用。

任務(wù) 15: Linux基礎(chǔ)以及JS開發(fā)PC軟件

1.編寫管理nodejs百度新聞后臺shell腳本

要求：

· 編寫shell腳本管理你的nodejs百度新聞后臺，配合pm2啟動監(jiān)測CPU占用重啟PM2等

· 若Nodejs的CPU進程大于95%,則重啟node服務(wù)