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

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

要求：

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

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

· 基本符合視覺(jué)上的要求

· 讓整塊在頁(yè)面大致垂直居中

· 頁(yè)面的點(diǎn)擊全部為真實(shí)點(diǎn)擊

· 并不要求CSS

2.開(kāi)發(fā)課程表

要求：

· HTML&HTML5標(biāo)簽及表格table的使用；

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

· HTML5語(yǔ)義的使用

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

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

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

要求：

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

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

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

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

要求：

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

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

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

要求：

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

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

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

要求：

· 正常盒子與怪異盒子對(duì)比

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

· 舊版彈性盒子居中布局

· 美觀程度

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

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

要求：

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

2.CSS&CSS3開(kāi)發(fā)簡(jiǎn)筆畫(huà)并讓簡(jiǎn)筆畫(huà)像動(dòng)畫(huà)片一樣動(dòng)起來(lái)

要求：

· CSS&CSS3開(kāi)發(fā)簡(jiǎn)筆畫(huà)并讓簡(jiǎn)筆畫(huà)像動(dòng)畫(huà)片一樣動(dòng)起來(lái)。

· 測(cè)試瀏覽器需要支持H5及CSS3, 默認(rèn)必須至少支持Chrome（想拿高分請(qǐng)支持firefox）。

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

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

要求：

· CSS Hack應(yīng)用

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

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

要求：

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

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

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

要求：

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

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

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

2.利用Bootstrap開(kāi)發(fā)后臺(tái)登陸頁(yè)面和首頁(yè)

要求：

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

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

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

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

要求：

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

· 利用真實(shí)手機(jī)或者Google Chrome的模擬器，進(jìn)行調(diào)試和測(cè)驗(yàn)

4.完成初級(jí)前端面試題

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

要求：

· 使用markdown完成。

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

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

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

要求：

· Switch或者ifelse等的使用

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

2.用JS開(kāi)發(fā)簡(jiǎn)易計(jì)算器

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

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

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

要求：

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

任務(wù) 6: 掌握J(rèn)avaScript DOM、BOM、事件和高級(jí)技巧

1.開(kāi)發(fā)完整計(jì)算器

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

要求：

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

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

要求：

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

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

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

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

1.完成百度首頁(yè)登陸之后完整版。

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

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

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

要求：

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

· 課程庫(kù)頁(yè)面入口：http://www.jikexueyuan.com/course/

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

要求：

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

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

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

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

要求：

· 加入meta標(biāo)簽開(kāi)發(fā)移動(dòng)端H5頁(yè)面

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

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

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

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

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

要求：

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

· 利用Ajax配合請(qǐng)求。

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

1.利用Gulp或者FIS重組百度首頁(yè)

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

要求：

· 安裝Gulp或者FIS

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

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

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

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

要求：

· 編寫(xiě)Gulp或FIS腳本對(duì)Sass或者Less進(jìn)行編譯

· 符合性能優(yōu)化標(biāo)準(zhǔn)進(jìn)行壓縮合并以及充分利用Less或Sass優(yōu)勢(shì)少寫(xiě)代碼

· 可查看官方API進(jìn)行更多的運(yùn)用

2.利用less或sass編寫(xiě)公交站牌

要求：

· 利用less或sass編寫(xiě)代碼制作出一個(gè)公交站牌的效果。

任務(wù) 12: 掌握J(rèn)avaScript常用設(shè)計(jì)模式

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

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

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

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

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

1.搭建自己的GitHub倉(cāng)庫(kù)

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

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

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

要求：

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

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

1.編寫(xiě)管理nodejs百度新聞后臺(tái)shell腳本

要求：

· 編寫(xiě)shell腳本管理你的nodejs百度新聞后臺(tái)，配合pm2啟動(dòng)監(jiān)測(cè)CPU占用重啟PM2等

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