極客前端部分題目收集【索引】

時間 2019-11-08

標籤極客前端部分題目收集索引简体版

原文原文鏈接

任務 1: 學會基本的HTML(5)標籤骨架以及基本服務器概念

1.開發基礎百度首頁

要求：

學會配置開發環境
學會使用基本的HTML結構搭建骨架
基本符合視覺上的要求
讓整塊在頁面大體垂直居中
頁面的點擊所有爲真實點擊
並不要求CSS

2.開發課程表

要求：

HTML&HTML5標籤及表格table的使用；
代碼結構的處理
HTML5語義的使用
提早學習，使用了css進行美化。

任務 2: 學會HTML5新增元素及CSS核心技術

1.製做一個由5個100*100DIV組成的十字架

要求：

製做一個由5個100*100DIV組成的十字架（如➕），
中間放一張icon（本身喜歡的64*64的小圖片）在DIV裏垂直水平居中，
十字架頁面垂直居中水平居中,每個DIV要有邊框陰影儘可能的讓其漂亮。
可在此尋找對應的圖片。

2.製做青島家教網註冊頁面

要求：

青島家教網註冊頁面是一個N年前很是傳統的老式頁面，很陳舊，須要你們用本身新學過的HTML&HTML5&CSS&CSS3的知識，一些新的表單元素，從新實現和改良這個頁面，達到熟悉表單元素的目的（傳統input和H5的混用達到所有熟悉的目的）。
具體要製做的頁面，入口在 http://www.qdjj.net/member/register_1.asp（不須要作），先填寫一些資料後進入下一個頁面http://www.qdjj.net/member/register_2.asp就是咱們須要製做的。

3.讓百度首頁樣式徹底與官網樣式徹底一致

要求：

試着使用HTML5元素改良百度首頁且樣式儘量徹底與官網徹底一致（僅要求谷歌瀏覽器）。
本題難點在於百度首頁頂部菜單鼠標懸浮下拉菜單的效果，當前階段未學JS, 能夠參考使用僞類:hover儘量去實現，但不作太多要求。

4.實戰盒子模型與彈性盒模型。

要求：

正常盒子與怪異盒子對比
彈性盒子水平分欄，垂直分欄，排序(flex)，cloumn分欄
舊版彈性盒子居中佈局
美觀程度

任務 3: 學會CSS經常使用佈局技巧以及繪製特殊圖形和動畫

1.CSS3開發3D魔方

要求：

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

2.CSS&CSS3開發簡筆畫並讓簡筆畫像動畫片同樣動起來

要求：

CSS&CSS3開發簡筆畫並讓簡筆畫像動畫片同樣動起來。
測試瀏覽器須要支持H5及CSS3, 默認必須至少支持Chrome（想拿高分請支持firefox）。

3.讓百度首頁適配IE等全部瀏覽器

CSS Hack技能是衡量一個前端工程師經驗和技能功底的重要知識點之一，也是前端比較痛苦的一個技能點。所以這個做業，咱們須要尋找CSS Hack並反饋到一個單獨的百度首頁HTML頁面上（上次百度首頁做業基礎上），讓你的百度首頁適配IE以及市面上的主流瀏覽器（IE8+系列、Google Chrome、Firefox）。javascript

要求：

CSS Hack應用
瀏覽器兼容性處理(兼容Webkit內核的Chrome、Moz內核的Firefox和IE 八、9以上便可，實現了IE六、7等其它爲加分項)

4.理解並完成雙飛翼佈局

要求：

理解並完成雙飛翼佈局(CSS浮動、定位、佈局、自適應等)。

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

1.開發新版極客學院首頁

要求：

注意對極客學院首頁總體的還原度，本任務還沒學習JS，對於一些JS的特效不作要求，主要考察HTML和CSS
注意代碼結構的合理性，界面的美觀性
注意引用的資源是否規範

2.利用Bootstrap開發後臺登錄頁面和首頁

要求：

利用Bootstrap開發一個後臺管理系統的後臺登錄頁面和後臺首頁
熟悉對Bootstrap響應式框架的使用；

3.響應式的百度首頁

用一個頁面，把百度首頁pc版和移動版經過media query技術作響應式適配，達到熟悉media query實現響應式佈局的目的；可利用真實手機或者Google Chrome的模擬器，進行調試和測驗。php

要求：

media query技術作響應式適配
利用真實手機或者Google Chrome的模擬器，進行調試和測驗

4.完成初級前端面試題

本做業爲開放性做業，不對頁面做特別要求，HTML頁面（建議，做爲一名前端）、圖片、word均可以。主要是總結的面試題。讓你們對於前端面試和前端基本崗位要求有個基本的瞭解。css

要求：

使用markdown完成。

任務 5: JavaScript入門和基礎

1.將0~100分學員以10分爲界，分爲十段，而後計算出該生爲數字幾等生

將0-100分學員分已10爲分界,10分爲一段，而後計算出該生爲數字幾等生，如98分爲90-100爲1等生，65分爲60-70爲4等生。html

要求：

Switch或者ifelse等的使用
根據傳入的值，進行運算和返回

2.用JS開發簡易計算器

用JS開發簡易計算器，輸入 x 、y 以及操做符能夠計算出數值，如函數計算器輸入 4，5，* 能夠返回20，輸入3 ，8，+能夠等於11。前端

3.JS找到數組中出現次數最多的字母，並給出個數和每個所在的位置

找到對象{「a「，」x「，」b「，」d「，」m「，」a「，」k，「m」，「p」，「j」，「a」}出現最多的字母並給出個數和每個所在的順序。html5

要求：

作成HTML界面的形式，也能夠在瀏覽器console打印出來

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

1.開發完整計算器

開發帶HTML頁面可操做的完整計算器，根據用戶的按鈕操做給出正確的計算結果，至少要適配到IE8+、Chrome。java

要求：

綁定事件務必兼容IE8+、 FireFox、Chrome

2.hao123換膚功能-開發一個頂部帶可選顏色換膚的hao123網站

要求：

開發一個頂部帶可選顏色的hao123網站
點擊這些顏色可換膚改變網站主題，能記住用戶本次點擊的換膚操做，下次進入網站可直接應用到上次主題
可切換顏色包括頂部banner以及背景顏色等等

任務 7: 掌握jQuery使用和深刻JavaScript

1.完成百度首頁登錄以後完整版。

利用Jquery完成百度右側下拉, 並註冊帳號登錄完成所有頁面切換效果。包括換膚和下面的切換Tab.node

2.極客學院官網二級菜單頁面-課程庫頁面

利用學過的JavaScript、JQuery知識和前面學過的HTML、CSS完成極客學院二級菜單頁面-[課程庫]頁面，並完成所有動態效果，儘可能增長動畫效果。mysql

要求：

瀏覽器需兼容FireFox、Chrome、ie8+
課程庫頁面入口：http://www.jikexueyuan.com/course/

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

要求：

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

任務 8: 瞭解面向對象編程以及PHP+MySql入門

1.開發手機版本的百度新聞。

開發帶後臺的H5版本百度新聞，並用以前開發的bootstrap後臺完善做爲新聞的後臺系統，並能用基礎的PHP+MYSQL開發跑通後臺。react

要求：

加入meta標籤開發移動端H5頁面
搭建mysql+php開發環境，交做業的時候記得帶上sql腳本+php代碼
配合ajax 技能點: (1)後臺是否能夠正常的增刪改查;(2)前臺是否能夠完整調用請求接口;(3)完成頁面的渲染結果是否在手機端展現正常

任務 9: 學習NodeJS(含EcmaScript6)和移動端開發

1.開發Nodejs版本的百度新聞系統。

配置好開發環境，把以前的前端百度新聞界面拉過來，後臺改爲Nodejs版本，能夠作成Express渲染模板形式亦能夠作成rest格API形式搭載mysql,記得導出sql腳本文件。

要求：

安裝Express或者rest框架或者Nodejs
利用Ajax配合請求。

任務 10: 掌握前端工業化框架

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

利用Gulp或者FIS從新組織你的百度首頁樣式和JS，而後達到工程化可編譯狀態。

要求：

安裝Gulp或者FIS
按照框架要求編譯百度首頁達到性能最優狀態。
經過本做業瞭解一種構建工具使用的基本原理便可（不一樣企業構建工具可能不同，但原理基本同樣），並學會獨立查文檔去學習新知識。

任務 11: 掌握CSS在工程中的變化

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

要求：

編寫Gulp或FIS腳本對Sass或者Less進行編譯
符合性能優化標準進行壓縮合並以及充分利用Less或Sass優點少寫代碼
可查看官方API進行更多的運用

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

要求：

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

任務 12: 掌握JavaScript經常使用設計模式

1.用設計模式改善百度js代碼

用簡單的設計模式改寫百度代碼並加入註釋用了什麼設計模式，爲何這樣寫，這樣寫的好處。

2.總結高級前端開發工程師面試題和思惟腦圖

百度一下高級前端工程師面試題並總結到頁面上對這些面試題有深刻的理解。若是有時間能夠本身利用xmind總結前端開發思惟腦圖。

任務 13: 熟悉版本操做工具Git、SVN等以及AngularJS、Cordova

1.搭建本身的GitHub倉庫

搭建本身的GitHub倉庫並將全部做業按照目錄規範所有提交到Git

任務 14: 熟悉網絡安全以及React、ReactNative

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

要求：

完善百度新聞安全性漏洞，並新建文件readme.txt寫好註釋修改了哪些安全漏洞，寫在了哪裏有什麼樣的做用。

任務 15: Linux基礎以及JS開發PC軟件

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

要求：

編寫shell腳本管理你的nodejs百度新聞後臺，配合pm2啓動監測CPU佔用重啓PM2等
若Nodejs的CPU進程大於95%,則重啓node服務

任務 16: 學習HTML5遊戲開發準備進入畢業設計與答辯

1.開發一款小遊戲

要求：

利用Cocos2d-JS開發一款小遊戲用chrome模擬是否順暢運行。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。