網(wǎng)頁(yè)設(shè)計(jì)制作作業(yè)的任務(wù)要求
任務(wù) 1: 學(xué)會(huì)基本的HTML(5)標(biāo)簽骨架以及基本服務(wù)器概念
1.開發(fā)基礎(chǔ)百度首頁(yè)
要求：
· 學(xué)會(huì)配置開發(fā)環(huán)境
· 學(xué)會(huì)使用基本的HTML結(jié)構(gòu)搭建骨架
· 基本符合視覺上的要求
· 讓整塊在頁(yè)面大致垂直居中
· 頁(yè)面的點(diǎn)擊全部為真實(shí)點(diǎn)擊
· 并不要求CSS
2.開發(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é)過的HTML&HTML5&CSS&CSS3的知識(shí)，一些新的表單元素，重新實(shí)現(xiàn)和改良這個(gè)頁(yè)面，達(dá)到熟悉表單元素的目的（傳統(tǒng)input和H5的混用達(dá)到全部熟悉的目的）。
· 具體要制作的頁(yè)面，入口在 /member/register_1.asp（不需要做），先填寫一些資料后進(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)畫
1.CSS3開發(fā)3D魔方
要求：
· 使用CSS3開發(fā)炫酷的3D魔方效果。詳情看老師講解視頻。
2.CSS&CSS3開發(fā)簡(jiǎn)筆畫并讓簡(jiǎn)筆畫像動(dòng)畫片一樣動(dòng)起來
要求：
· CSS&CSS3開發(fā)簡(jiǎn)筆畫并讓簡(jiǎn)筆畫像動(dòng)畫片一樣動(dòng)起來。
· 測(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.開發(fā)新版極客學(xué)院首頁(yè)
要求：
· 注意對(duì)極客學(xué)院首頁(yè)整體的還原度，本任務(wù)還沒學(xué)習(xí)JS，對(duì)于一些JS的特效不做要求，主要考察HTML和CSS
· 注意代碼結(jié)構(gòu)的合理性，界面的美觀性
· 注意引用的資源是否規(guī)范
2.利用Bootstrap開發(fā)后臺(tái)登陸頁(yè)面和首頁(yè)
要求：
· 利用Bootstrap開發(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)版通過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è)為開放性作業(yè)，不對(duì)頁(yè)面作特別要求，HTML頁(yè)面（建議，作為一名前端）、圖片、word都可以。主要是總結(jié)的面試題。讓大家對(duì)于前端面試和前端基本崗位要求有個(gè)基本的了解。
要求：
· 使用markdown完成。
任務(wù) 5: JavaScript入門和基礎(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開發(fā)簡(jiǎn)易計(jì)算器
用JS開發(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打印出來
任務(wù) 6: 掌握J(rèn)avaScript DOM、BOM、事件和高級(jí)技巧
1.開發(fā)完整計(jì)算器
開發(fā)帶HTML頁(yè)面可操作的完整計(jì)算器，根據(jù)用戶的按鈕操作給出正確的計(jì)算結(jié)果，至少要適配到IE8+、Chrome。
要求：
· 綁定事件務(wù)必兼容IE8+、 FireFox、Chrome
2.hao123換膚功能-開發(fā)一個(gè)頂部帶可選顏色換膚的hao123網(wǎng)站
要求：
· 開發(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é)過的JavaScript、JQuery知識(shí)和前面學(xué)過的HTML、CSS完成極客學(xué)院二級(jí)菜單頁(yè)面-[課程庫(kù)]頁(yè)面，并完成全部動(dòng)態(tài)效果，盡量增加動(dòng)畫效果。
要求：
· 瀏覽器需兼容FireFox、Chrome、ie8+
· 課程庫(kù)頁(yè)面入口：http://www.jikexueyuan.com/course/
3.Jquery完成百度圖片瀑布流布局。
要求：
· 利用Jquery完成百度圖片完整瀑布流布局。
任務(wù) 8: 了解面向?qū)ο缶幊桃约癙HP+MySql入門
1.開發(fā)手機(jī)版本的百度新聞。
開發(fā)帶后臺(tái)的H5版本百度新聞，并用之前開發(fā)的bootstrap后臺(tái)完善作為新聞的后臺(tái)系統(tǒng)，并能用基礎(chǔ)的PHP+MYSQL開發(fā)跑通后臺(tái)。
要求：
· 加入meta標(biāo)簽開發(fā)移動(dòng)端H5頁(yè)面
· 搭建mysql+php開發(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)端開發(fā)
1.開發(fā)Nodejs版本的百度新聞系統(tǒng)。
配置好開發(fā)環(huán)境，把之前的前端百度新聞界面拉過來，后臺(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)。
· 通過本作業(yè)了解一種構(gòu)建工具使用的基本原理即可（不同企業(yè)構(gòu)建工具可能不一樣，但原理基本一樣），并學(xué)會(huì)獨(dú)立查文檔去學(xué)習(xí)新知識(shí)。
任務(wù) 11: 掌握CSS在工程中的變化
1.利用less或者sass改善極客學(xué)院首頁(yè)CSS
要求：
· 編寫Gulp或FIS腳本對(duì)Sass或者Less進(jìn)行編譯
· 符合性能優(yōu)化標(biāo)準(zhǔn)進(jìn)行壓縮合并以及充分利用Less或Sass優(yōu)勢(shì)少寫代碼
· 可查看官方API進(jìn)行更多的運(yùn)用
2.利用less或sass編寫公交站牌
要求：
· 利用less或sass編寫代碼制作出一個(gè)公交站牌的效果。
任務(wù) 12: 掌握J(rèn)avaScript常用設(shè)計(jì)模式
1.用設(shè)計(jì)模式改善百度js代碼
用簡(jiǎn)單的設(shè)計(jì)模式改寫百度代碼并加入注釋用了什么設(shè)計(jì)模式，為什么這樣寫，這樣寫的好處。
2.總結(jié)高級(jí)前端開發(fā)工程師面試題和思維腦圖
百度一下高級(jí)前端工程師面試題并總結(jié)到頁(yè)面上對(duì)這些面試題有深入的理解。如果有時(shí)間可以自己利用xmind總結(jié)前端開發(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寫好注釋修改了哪些安全漏洞，寫在了哪里有什么樣的作用。
任務(wù) 15: Linux基礎(chǔ)以及JS開發(fā)PC軟件
1.編寫管理nodejs百度新聞后臺(tái)shell腳本
要求：
· 編寫shell腳本管理你的nodejs百度新聞后臺(tái)，配合pm2啟動(dòng)監(jiān)測(cè)CPU占用重啟PM2等
· 若Nodejs的CPU進(jìn)程大于95%,則重啟node服務(wù)
