基础 (三件套)
🔑 萌新需要知道的前置知识
前端入门到入土
不同于后端语言的多样化，前端语言较为统一。在萌新阶段，你需要先掌握 HTML、CSS、JS 三种语言（人称前端三剑客件套）
三者关系可以简单理解为：HTML 是骨架，CSS 是衣服装饰，JS 则控制交互行为
以下提供一些可供参考的学习资料，你也可以按兴趣在 b 站大学搜索相关学习视频。在学习中遇到无法解决的问题，或者学习路径上的迷茫，也可以参考提问的智慧向群里的前端学姐们提问噢～
HTML & CSS
JavaScript
🎈
快速上手的参考建议
HTML 可以先认知常用标签（body /div/span /a/img 等）及其常用属性
CSS 了解常见的颜色属性（字体颜色 / 背景颜色 / 边框颜色 等）、字体相关属性（字号 / 字重 / 行高 等）、盒子模型（padding /border/margin）、用于布局的属性（float /flex/grid）、单位（px /rem/em /vh/vw 等）、选择器（id 选择器 / 类选择器 等）
JS 了解基本语法（变量定义 / 判断 / 循环 / 函数定义 /etc）与 DOM 操作
涉及前后端交互的部分可以了解 fetch 的使用
其他诸如 HTML5 / CSS3 / ES6+ 的知识可以暂时跳过，任务要用到再查
基本全部前端开发资料都可以在 MDN 中找到
🥂 助手介绍网页的重写
设计部姐姐给了前端部一个助手介绍网页的设计稿，但是 psyq 觉得目前的助手介绍网页写得不是很还原，你可以帮 psyq 重写一个更好看的网页吗？
设计稿如下：
可能需要用到的图片资源
基本要求
大致还原设计稿的基础上可以自由发挥，要求美观
- 设计稿内容的大致布局
- 背景颜色 / 样式 & 文字颜色 / 样式
- 文字与容器的位置关系
- ……
额外发挥
- 各处样式的细节（圆角 / 阴影 / 渐变）
- 对不同设备屏幕尺寸进行适配
- 为显示内容增加一些动态效果
- 无法一页显示所有内容时，试试在下滑页面时显示一个
返回顶部的按钮
可能涉及的知识点
使用 HTML 构建页面的基础布局
了解常用的 HTML 标签
- HTML 引入外部图片文件（
<img>）
- HTML 引入外部图片文件（
如何让 HTML / CSS / JS 相互配合
- HTML 中书写 css 使用
<style> - 引入 css 等资源使用
<link> - 书写 / 引入 js 使用
<script>
- HTML 中书写 css 使用
使用 CSS 为页面赋予样式
JS 添加交互行为
- 监听用户下滑网页的行为并改变
返回顶部按钮的可见状态（scroll 滚动事件，DOM 操作入门）
- 监听用户下滑网页的行为并改变
🎫TodoList
或许你也曾是一名时间管理大师，在各种效率类 app 立下自己要做的 flag。然而现成的工具难免无法满足自己的所有需求，那么不妨来编写一个自己的 TodoList 吧～
基本要求
- 可以对 todo 进行增删改查
- 至少存在 待完成 / 已完成 两种不同的状态，Todo 应该能够在不同状态间切换。更进一步，你也可以设计一个 进行中 状态。
额外发挥
- 页面刷新后数据不丢失
参考实现方案：
- 使用浏览器提供的储存功能实现本地存储（localStorage、IndexedDB）
- 通过请求后端 api 实现云端存储
- 删除待办时弹出操作不可逆的提示
- 在交互时适当添加缓动效果
- 设计定时 todo，可在用户设定的时间点对用户进行提醒
- 实现不同设备屏幕尺寸的自适应
- 添加任务热力图 (可以参考一下 GitHub 个人主页哦 🤔)
可能涉及的知识点
使用 HTML 构建页面的基础布局
了解常用的 HTML 标签
- HTML 引入外部图片文件（
<img>）
- HTML 引入外部图片文件（
如何让 HTML / CSS / JS 相互配合
- HTML 中书写 css 使用
<style> - 引入 css 等资源使用
<link> - 书写 / 引入 js 使用
<script>
- HTML 中书写 css 使用
使用 css 为页面赋予样式
JS 添加交互行为
- 获取网页中的待办项（查阅 DOM 操作入门）
- 添加新的待办项（查阅 DOM 操作入门）
- 删除网页中的待办项（查阅 DOM 操作入门）
- 监听待办项的点击事件，以改变待办项的状态（查阅 click 单击事件）
- 将当前待办项列表存储在本地（查阅 localStorage (较简单)、IndexedDB 文档）
- 远程请求后端接口（了解 fetch 和 js 异步）
- 定时提醒用户待办的时间（查阅 setTimeout/ setInterval）