考試
請實作依照設計圖像素完美桌面及手機前端介面。
- 必使用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
- 桌面和手機介面像素完美