前端測驗樣本 | FatBull Handbook

立即申請檢閱考試指示測驗分數評估

考試

請實作依照設計圖像素完美桌面及手機前端介面。

必使用React.js, Flexbox, 及 React UI 零件架構。
必使用 static page 方式（無後端）在Firebase或其他架構上架。

桌面介面

手機介面

需求規範

RWD. 桌面及手機 Responsive Web Design。
必使用JavaScript.
必使用 React.js.
必使用 **CSS Flexbox
必使用React UI framework，從以下賽選：
Material UI
Semantic UI
React Bootstrap
React Toolbox
Elemental UI
必使用 static page 方式（無後端）在雲端架構上架。
請用雲端架構 Heroku, Firebase, ZEIT, 或 Netilfy 上架 static page。
這不是後端測驗，所以網頁和使用者互動全在前端實作。

重要提醒

我們並不期望你完整開發每個功能。重點不是要全部 “做完”，是要查看有嘗試部分的能力、進度，盡力而為就可以。

請使用 GitHub/GitLab.

這份線上測驗分數會決定您的職級與薪資範圍。每個網頁功能有分數。請必定要交卷。

2.5 小時到時：

有開發多少，就交卷多少，考試並沒有所謂的 “完成”。

請必定要上架，並提供網頁 URL.

請填寫測驗完成表格 Exam Submission Form.

考題大綱

像素完美在一下狀態：
桌面（Chrome）
手機（Android, iOS）
沒設計圖的狀態
效果
Hover
Selection
Disable
鍵盤及滑鼠動作

滿分	網頁功能
50	數據輸入格
50	圈圈表格及數據介面
60	選項介面（每種選項型 20 分）
40	主頁及 Hashtags

測驗分數評估

網頁功能

請以下表單選任網頁功能實作，不用照順序。

1. 數據輸入格

限制輸入數字 (0-9), 逗點 (.), 及符號 (/)
不行用左右鍵往前後
不行用滑鼠點輸入格
鍵盤自動專注在輸入格，不需點輸入格
“Press Enter” 文字及 “Submit” 會在有輸入數字時出現

2. 圈圈表格及數據介面

桌面和手機介面像素完美
不能只是個畫面，需要跟著數據變動

桌面介面

手機介面

3. 選項介面

桌面和手機介面像素完美
三種選項
- 簡易選項
- 多選項
- 點勾選項

簡易選項

多選項

點勾選項

4. 主頁及 Hashtags

桌面和手機介面像素完美

桌面介面

手機介面