考试
请实作依照设计图像素完美桌面及手机前端介面。
- 必使用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
- 桌面和手机介面像素完美