157 lines
8.2 KiB
Markdown
157 lines
8.2 KiB
Markdown
# 基础部分
|
||
|
||
## 🔑 萌新需要知道的前置知识
|
||
|
||
### 前端入门<del>到入土</del>
|
||
|
||
不同于后端语言的多样化，前端语言较为统一。在萌新阶段，你需要先掌握 HTML、CSS、JS 三种语言（人称前端三<del>剑客</del>件套）
|
||
|
||
三者关系可以简单理解为：HTML 是骨架，CSS 是衣服装饰，JS 则控制交互行为
|
||
|
||
以下提供一些可供参考的学习资料，你也可以按兴趣在 b 站大学搜索相关学习视频。在学习中遇到无法解决的问题，或者学习路径上的迷茫，也可以参考[提问的智慧](https://learnku.com/laravel/t/2396/wisdom-of-asking-questions-chinese-version)向群里的前端学姐们提问噢~
|
||
|
||
#### HTML & CSS
|
||
|
||
[MDN Web 入门](https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web)
|
||
|
||
[ A friendly web development tutorial for complete beginners](https://www.internetingishard.com/html-and-css/)
|
||
|
||
[前端入门必会的初级调试技巧](https://zhuanlan.zhihu.com/p/145466139)
|
||
|
||
#### JavaScript
|
||
|
||
[现代 JavaScript 教程](https://zh.javascript.info/)
|
||
|
||
::: warning 🎈
|
||
<strong>快速上手的参考建议</strong>
|
||
|
||
<strong>HTML</strong><strong> </strong>可以先认知常用标签（ body / div / span / a / img 等）及其常用属性
|
||
|
||
<strong>CSS </strong>了解常见的颜色属性（字体颜色 / 背景颜色 / 边框颜色 等）、字体相关属性（字号 / 字重 / 行高 等）、盒子模型（padding / border / margin）、用于布局的属性（float / flex / grid）、单位（px / rem / em / vh / vw 等）、选择器（id 选择器 / 类选择器 等）
|
||
|
||
<strong>JS</strong><strong> </strong>了解基本语法（变量定义 / 判断 / 循环 / 函数定义 / etc）与 DOM 操作
|
||
|
||
涉及<strong>前后端交互</strong>的部分可以了解 fetch 的使用
|
||
|
||
其他诸如 HTML5 / CSS3 / ES6+ 的知识可以暂时跳过，<del>任务要用到再查</del>
|
||
|
||
基本全部前端开发资料都可以在 [MDN](https://developer.mozilla.org/) 中找到
|
||
|
||
:::
|
||
|
||
### 🥂 助手介绍网页的重写
|
||
|
||
设计部姐姐给了前端部一个助手介绍网页的设计稿，但是 psyq 觉得[目前的助手介绍网页](https://site.hduhelp.com/)写得不是很还原，你可以帮 psyq 重写一个更好看的网页吗？
|
||
|
||
设计稿如下：
|
||
|
||
|
||
|
||
#### 可能需要用到的图片资源
|
||
|
||
|
||
|
||
|
||
|
||
#### 基本要求
|
||
|
||
- 大致还原设计稿的基础上可以自由发挥，要求美观
|
||
|
||
- 设计稿内容的大致布局
|
||
- 背景颜色/样式 & 文字颜色/样式
|
||
- 文字与容器的位置关系
|
||
- ……
|
||
|
||
#### 额外发挥
|
||
|
||
- 各处样式的细节（圆角 / 阴影 / 渐变）
|
||
- 对不同设备屏幕尺寸进行适配
|
||
- 为显示内容增加一些动态效果
|
||
- 无法一页显示所有内容时，试试在下滑页面时显示一个 `返回顶部` 的按钮
|
||
|
||
#### 可能涉及的知识点
|
||
|
||
- 使用 HTML 构建页面的基础布局
|
||
|
||
- 了解常用的 HTML 标签
|
||
|
||
- HTML 引入外部图片文件（`<img>`）
|
||
- 如何让 HTML / CSS / JS 相互配合
|
||
|
||
- HTML 中书写 css 使用 `<style>`
|
||
- 引入 css 等资源使用 `<link>`
|
||
- 书写/引入 js 使用 `<script>`
|
||
- 使用 CSS 为页面赋予样式
|
||
|
||
- 了解常见网页布局（了解 [float](https://developer.mozilla.org/zh-CN/docs/Web/CSS/float)，[flex ](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)/ [grid ](https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid)布局，综合运用不同布局来完成页面）
|
||
- 使用 [css 选择器](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Selectors)选中 HTML 元素添加样式（[id 选择器](https://developer.mozilla.org/zh-CN/docs/Web/CSS/ID_selectors) / [类选择器](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Class_selectors) / etc.）
|
||
- 自适应布局（查阅 `媒体查询`）
|
||
- 交互渐变动效（查阅 css 属性： `transition`、`animation`）
|
||
- JS 添加交互行为
|
||
|
||
- 监听用户下滑网页的行为并改变 `返回顶部` 按钮的可见状态（[scroll 滚动事件](https://developer.mozilla.org/zh-CN/docs/Web/API/Document/scroll_event)，[DOM 操作入门](https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents)）
|
||
|
||
### 🎫TodoList
|
||
|
||
|
||
|
||
|
||
|
||
<center>一些参考</center>
|
||
|
||
或许你也曾是一名时间管理大师，在各种效率类 app 立下自己要做的 flag。然而现成的工具难免无法满足自己的所有需求，那么不妨来编写一个自己的 TodoList 吧~
|
||
|
||
#### 基本要求
|
||
|
||
- 可以对 todo 进行增删改查
|
||
- 至少存在 <strong>待完成</strong>/<strong>已完成</strong> 两种不同的状态，Todo 应该能够在不同状态间切换。更进一步，你也可以设计一个 <strong>进行中</strong> 状态。
|
||
|
||
#### 额外发挥
|
||
|
||
- 页面刷新后数据不丢失
|
||
|
||
参考实现方案：
|
||
|
||
1. 使用浏览器提供的储存功能实现本地存储（[localStorage](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/localStorage)、[IndexedDB](https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_API)）
|
||
2. 通过请求后端 api 实现云端存储
|
||
|
||
- 删除待办时弹出操作不可逆的提示
|
||
- 在交互时适当添加缓动效果
|
||
- 设计定时 todo，可在用户设定的时间点对用户进行提醒
|
||
- 实现不同设备屏幕尺寸的自适应
|
||
- 添加任务热力图(可以参考一下 GitHub 个人主页哦 🤔)
|
||
|
||
|
||
|
||
#### 可能涉及的知识点
|
||
|
||
- 使用 HTML 构建页面的基础布局
|
||
|
||
- 了解常用的 HTML 标签
|
||
|
||
- HTML 引入外部图片文件（`<img>`）
|
||
- 如何让 HTML / CSS / JS 相互配合
|
||
|
||
- HTML 中书写 css 使用 `<style>`
|
||
- 引入 css 等资源使用 `<link>`
|
||
- 书写/引入 js 使用 `<script>`
|
||
- 使用 css 为页面赋予样式
|
||
|
||
- 了解常见网页布局（了解 [float](https://developer.mozilla.org/zh-CN/docs/Web/CSS/float)，[flex ](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)/ [grid ](https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid)布局，综合运用不同布局来完成页面）
|
||
- 使用 [css 选择器](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Selectors)选中 HTML 元素添加样式（[id 选择器](https://developer.mozilla.org/zh-CN/docs/Web/CSS/ID_selectors) / [类选择器](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Class_selectors) / etc.）
|
||
- 自适应布局（查阅 `媒体查询`）
|
||
- 交互渐变动效（查阅 css 属性： `transition`、`animation`）
|
||
- JS 添加交互行为
|
||
|
||
- 获取网页中的待办项（查阅 [DOM 操作入门](https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents)）
|
||
- 添加新的待办项（查阅 [DOM 操作入门](https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents)）
|
||
- 删除网页中的待办项（查阅 [DOM 操作入门](https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents)）
|
||
- 监听待办项的点击事件，以改变待办项的状态（查阅[ click 单击事件](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/click_event)）
|
||
- 将当前待办项列表存储在本地（查阅 [localStorage(较简单)](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/localStorage)、[IndexedDB](https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_API) 文档）
|
||
- 远程请求后端接口（了解 [fetch ](https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch)和[ js 异步](https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Asynchronous)）
|
||
- 定时提醒用户待办的时间（查阅 [setTimeout ](https://developer.mozilla.org/zh-CN/docs/Web/API/setTimeout)/ [setInterval](https://developer.mozilla.org/zh-CN/docs/Web/API/setInterval)）
|
||
|
||
#### 小提示
|
||
|
||
可以参考 [todomvc](https://todomvc.com/examples/vanillajs/)（[source](https://github.com/tastejs/todomvc/tree/gh-pages/examples/vanillajs)[源码](https://github.com/tastejs/todomvc/tree/gh-pages/examples/vanillajs)）中关于 js 实现 todolist 的方法，不过还是得亲手实践哦~
|