Matrix 新人任务

1. Web 入门：2020-3-3
   • 第一个网页
2. 学习 HTML：2020-3-5
   • 标记信件
   • 构建出有内容的网页
   • Mozilla 醒目页面
   • 构建行星数据
   • 仿制中山大学 APP / 中山大学微信企业号提供的学生健康申报表单中“个人基本信息”部分的 HTML 结构
     1. 不使用外部 CSS 库和 UI 库；可按需引入 JavaScript 库。
     2. 不要求仿制界面样式，自己看着办~
     3. 原表单中固定的表单项（如姓名、学院等）改为适合的可输入组件。
     4. 表单项“填报人联系方式”、“紧急联系人手机号”加入适当的验证（按中国内地手机号码匹配）。
     5. 表单项“培养层次”改为使用下拉框，或者在原基础上加入自动建议功能。参考值为本科生、研究生和博士生。
     6. 表单项“籍贯”仅实现单选框部分，不需要实现省市区选择。
     7. 加入表单项“曾到访省份”，使用复选框实现，可选值包括 广东省、湖北省、浙江省、河南省 这四个。
     8. 每个表单项均设置合理的 name 和 value。
3. 学习 CSS：2020-3-7
   • CSS first steps: Using your new knowledge
   • CSS building blocks: CSS 基本了解
   • CSS building blocks: 设计漂亮的信头信笺
   • CSS building blocks: 一个炫酷的盒子
   • 排版社区大学首页
   • Fundamental layout comprehension
4. 学习 JS：2020-3-9
   • 傻瓜故事产生器
   • 图库
   • 为弹跳球展示新增功能
   • 使用星球大战 API（https://swapi.co/）制作一个搜索 Widget
     1. 页面上需要有一个文本框 / 搜索框
     2. CSS 库可按需引入，不可引入 JS 库
     3. 当用户在文本框中键入时，读取文本框中用户输入的内容，向 https://swapi.co/api/people/?search=xxxx 发送请求，其中 xxxx 需要替换为文本框内容
     4. 使用 Promise / async await 来处理发送请求与读取响应内容的逻辑
     5. 服务器将返回一个 json，具体格式见 https://swapi.co/api/people
     6. 在收到服务器响应后，根据响应内容，在文本框下方展示一个自动完成列表（使用 name 来填充）
     7. 为了避免向服务器过度请求，你需要 debounce（防抖）500ms ——也就是在用户键入之后的 500ms 内，如果用户没有再次键入，才发送请求