├── .prettierrc ├── README.md └── steps ├── 1 ├── all.jpeg ├── haimianbaobao.jpeg ├── paidaxing.jpeg ├── zhangyuge.jpeg └── 设计图.png ├── 2 ├── demo1.gif ├── demo1.html ├── demo2.gif ├── demo2.html ├── demo3.gif └── demo3.html ├── 3 ├── demo1-3-1.jpg ├── demo1-3-2.jpg ├── demo3-1-answer.html ├── demo3-1.html ├── demo3-2-answer.html └── demo3-2.html ├── 1.md ├── 2.md ├── 3.md ├── 4.md ├── 5.md └── 6.md /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "tabWidth": 2 3 | } 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 西二在线前端学习资料（2024 重置版） 2 | 3 | 这里是西二在线工作室前端方向的学习与考核指南，旨在为初学者提供一个循序渐进的前端学习路线。在完成每个阶段的学习任务后，都会布置相关作业以供练习。 4 | 5 | 旧版考核指南请在 [`main`](https://github.com/west2-online/learn-frontends/tree/main) 分支查看。 6 | 7 | ## 概览 8 | 9 | 说明：预期时长以一名零基础全日制大学生为参考，如果是全身心投入学习语言，或者已经对其他语言有一定的了解，每一阶段所需的时间会比预期时长来的短。 10 | 11 | | 阶段 | 内容 | 预期时长 | 12 | | ---------------------------------------------- | ---------------------------------------------------------- | -------- | 13 | | [网页编写基础](./steps/1.md) | HTML 的基本结构与常用标签、CSS 的常用选择器和属性 | 3 周 | 14 | | [JavaScript 入门与 DOM 基础操作](./steps/2.md) | JavaScript 的基本语法、DOM 的基本操作 | 3 周 | 15 | | [JavaScript 和 CSS 进阶](./steps/3.md) | 响应式布局、CSS 选择器进阶、JavaScript 异步入门、fetch API | 3 周 | 16 | | [前端框架入门 & 寒假合作轮](./steps/4.md) | React 或 Vue 框架入门 | 5 周 | 17 | | [TypeScript 入门](./steps/5.md) | TypeScript 的基本语法与类型系统 | 3 周 | 18 | | [Node.js 入门](./steps/6.md) | Node.js 的基本语法与常用模块、npm 包管理、Koa | 3 周 | 19 | | 前端工程化项目实战 & 暑假合作轮 | 前端工程化项目实战（根据每年需求确定内容） | 5~6 周 | 20 | 21 | ## 作业设计 22 | 23 | 对于每一个阶段，通常分为如下部分： 24 | 25 | | 名称 | 解释 | 26 | | -------- | -------------------------------------------- | 27 | | 学习目标 | 需要学习的内容 | 28 | | 学习提示 | 一些信息和小技巧 | 29 | | 概念扫盲 | 一些小知识，不需要死记硬背，但是了解会有帮助 | 30 | | 学习资料 | 通常是线上网站 | 31 | | 作业 | 通常是一些练习题或者小项目 | 32 | 33 | ## 学习目标 34 | 35 | 我们的目标是快速为初学者构建一套相对广的知识体系。也就是说，我们希望按照每一阶段的考核完成的同学可以熟悉当前前端的基础业务开发与基础工程项目能力。 36 | 37 | 但是希望参与考核的同学们注意，虽然我们的考核只和网页相关，但是现在的前端已经不仅仅局限在网页上，移动端的 React Native 和 Weex、桌面端的 Electron、后端 Node.js、脚手架 cli、小程序、数据可视化 D3 和 Three.js…… 太多太多的东西可以学习，大家要能跳出舒适圈，拥有不断学习的能力。 38 | 39 | 如果你有意深入前端，我们强烈建议认真负责的完成每一轮的全部内容。 40 | 41 | ## 版权协议 42 | 43 | 本项目遵循 GPL-3.0 License，转载请注明本项目仓库地址。 44 | -------------------------------------------------------------------------------- /steps/1.md: -------------------------------------------------------------------------------- 1 | # 网页编写基础 2 | 3 | > 千里之行，始于足下。学习前端也是如此，我们从最基础的 HTML 和 CSS 开始学习。 4 | 5 | ## 学习目标 6 | 7 | - 能够记住 HTML 的基本结构 8 | - 能够知道并简单运用 HTML 的常用标签及其属性 9 | - 知道 CSS 类选择器、ID 选择器、标签选择器的区别 10 | - 能够知道并简单运用 CSS 的常用属性 11 | - 能够依据简单的设计稿编写网页 12 | 13 | ## 概念扫盲 14 | 15 | > 以下概念了解即可，无需死记硬背。 16 | 17 | - HTML 是超文本标记语言（HyperText Markup Language）的缩写，是用来描述网页的一种语言。 18 | - CSS 是层叠样式表（Cascading Style Sheets）的缩写，是用来描述网页样式的一种语言。 19 | - HTML 负责网页的结构，CSS 负责网页的样式。 20 | - 在 CSS 中，多个指向同一个目标的样式规则会按照一定的优先级进行组合，这种机制称为「层叠」。 21 | 22 | ## 学习资料 23 | 24 | 当遇到不懂的地方时，首先要尝试自己解决，可以去使用百度、谷歌等搜索引擎寻求帮助。具备**利用搜索引擎解决自己问题**的能力非常非常重要！如果还是不会，可以直接在群里提问。 25 | 26 | ### HTML 27 | 28 | - [HTML 文档的基本结构](https://www.runoob.com/html/html-intro.html) 29 | - 请重点关注「实例解析」「什么是 HTML？」「HTML 标签」「HTML 元素」「HTML 网页结构」几个小节。 30 | - 在菜鸟教程的页面底部，会有「学习笔记」板块，可以从他人的笔记中学习到一些正文中没有的知识。 31 | - [HTML 元素](https://www.runoob.com/html/html-elements.html) 32 | - 请重点关注「HTML 元素语法」「嵌套的 HTML 元素」「HTML 实例解析」「HTML 空元素」几个小节。 33 | - 不要忘记结束标签哦！ 34 | - [HTML 标题](https://www.runoob.com/html/html-basic.html) 35 | - 主要内容：HTML 标题、HTML 水平分隔线、HTML 注释。 36 | - [HTML 段落](https://www.runoob.com/html/html-paragraphs.html) 37 | - 主要内容：HTML 段落、HTML 换行。 38 | - [HTML 文本格式化](https://www.runoob.com/html/html-formatting.html) 39 | - 主要内容：加粗（``）、斜体（``）、小号字（``）、删除线（``）、行内代码（``）、引用（`
`）。 40 | - [HTML 超链接](https://www.runoob.com/html/html-links.html) 41 | - 关注如何指定目标链接，以及如何在新标签页打开链接。 42 | - 页内跳转（锚点）：``。 43 | - [HTML 图像](https://www.runoob.com/html/html-images.html) 44 | - 关注如何插入图片，以及如何指定图片的宽、高。 45 | - [HTML 列表](https://www.runoob.com/html/html-lists.html) 46 | - 主要内容：有序列表（`
    `）、无序列表（`
      `）。 47 | - [HTML 区块](https://www.runoob.com/html/html-blocks.html) 48 | - （选读）[HTML 表格](https://www.runoob.com/html/html-tables.html) 49 | - 表格相关的标签是一类比较复杂的标签，可以先了解，不要求掌握。 50 | - [HTML 头部](https://www.runoob.com/html/html-head.html) 51 | - 此部分的内容简单了解即可。 52 | 53 | ### CSS 54 | 55 | - 浏览器会给一些 HTML 元素默认的样式，我们可以使用 CSS 来覆盖这些默认样式。 56 | - [CSS 语法](https://www.runoob.com/css/css-syntax.html) 57 | - 请重点关注「CSS 实例」「CSS 注释」两个小节。 58 | - [CSS 选择器](https://www.runoob.com/css/css-id-class.html) 59 | - 除了在「CSS 语法」中用到的标签选择器，还有类选择器（`.class`）、ID 选择器（`#id`）。 60 | - CSS 常用基础属性 61 | - _小贴士：可以使用诸如「CSS color」的关键词来在网络上搜索某个属性的用法。_ 62 | - color 63 | - background / background-color 64 | - text-align 65 | - font-size 66 | - font-weight 67 | - [border](https://www.runoob.com/css/css-border.html) 68 | - [margin](https://www.runoob.com/css/css-margin.html) 69 | - [padding](https://www.runoob.com/css/css-padding.html) 70 | - height 71 | - width 72 | - [display](https://www.runoob.com/css/css-display-visibility.html) 73 | - CSS 常用伪类 74 | - :hover 75 | - [CSS !important 规则](https://www.runoob.com/css/css-important.html) 76 | - [CSS 对齐](https://www.runoob.com/css/css-align.html) 77 | 78 | ## 作业 79 | 80 | 将 [设计图.png](./1/设计图.png) 文件还原成 HTML/CSS 文件（包括导航条、文字）。 81 | 82 | ### 要求 83 | 84 | 1. 通过自己的理解，将设计稿分解成合理的部分 85 | 2. 使用外联 CSS（即 CSS 单独放在一个文件里，不直接写进 HTML） 86 | 3. 在导航栏点击能跳转至相应位置。 87 | 4. HTML、CSS 编写规范，代码整洁，缩进正确，注释充分。 88 | 5. 不允许使用图形化工具制作界面。也就是说你必须手写 HTML 和 CSS。 89 | 90 | ### 设计稿 91 | 92 | ![](./1/设计图.png) 93 | 94 | ### 素材 95 | 96 | - [all.jpeg](./1/all.jpeg) 97 | - [haimianbaobao.jpeg](./1/haimianbaobao.jpeg) 98 | - [paidaxing.jpeg](./1/paidaxing.jpeg) 99 | - [zhangyuge.jpeg](./1/zhangyuge.jpeg) 100 | 101 | ### 提示 102 | 103 | 不必拘泥于设计图，可以根据自己的理解进行调整。 104 | 105 | 主要考察基础布局（页面主体居中对齐）和 CSS 的基本使用。 106 | 107 | ### 提交方式 108 | 109 | 请将代码提交至 [west2-online-reserve/collection-frontends](https://github.com/west2-online-reserve/collection-frontends)，提交方法可以参考该仓库中的说明。 110 | -------------------------------------------------------------------------------- /steps/1/all.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/west2-online/learn-frontend/7add269c2879659e8e5378b6cefaeac2f183ba2c/steps/1/all.jpeg -------------------------------------------------------------------------------- /steps/1/haimianbaobao.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/west2-online/learn-frontend/7add269c2879659e8e5378b6cefaeac2f183ba2c/steps/1/haimianbaobao.jpeg -------------------------------------------------------------------------------- /steps/1/paidaxing.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/west2-online/learn-frontend/7add269c2879659e8e5378b6cefaeac2f183ba2c/steps/1/paidaxing.jpeg -------------------------------------------------------------------------------- /steps/1/zhangyuge.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/west2-online/learn-frontend/7add269c2879659e8e5378b6cefaeac2f183ba2c/steps/1/zhangyuge.jpeg -------------------------------------------------------------------------------- /steps/1/设计图.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/west2-online/learn-frontend/7add269c2879659e8e5378b6cefaeac2f183ba2c/steps/1/设计图.png -------------------------------------------------------------------------------- /steps/2.md: -------------------------------------------------------------------------------- 1 | # JavaScript 入门与 DOM 基础操作 2 | 3 | > 恭喜你来到了第二站！现在我们要学会让网页「活」起来，赋予它交互能力。在这一节中，我们将学习 JavaScript 的基础知识，以及如何使用 JavaScript 操作 DOM 元素。 4 | 5 | ## 学习目标 6 | 7 | - 掌握 JavaScript 的基本语法 8 | - 了解在 JavaScript 中操作 DOM 元素的方式 9 | - 掌握如何使用 DOM API 获取页面元素、监听事件、修改元素内容属性等操作 10 | 11 | ## 学习提示 12 | 13 | 编程语言都是共通的。如果你之前学过其他编程语言，那么学习 JavaScript 会更加容易。如果你是刚开始接触编程，也不用担心，我们提供的学习资料会从基础开始，一步步带你学习。 14 | 15 | 如果你的校内课程有 C 语言课程，那么你可以参考 C 语言的学习经验，来学习 JavaScript。先学哪一个对学习另外一个都是有帮助的。 16 | 17 | 在学习前端的过程中，如果遇到不会的东西，可以去 [MDN Web Docs](https://developer.mozilla.org/zh-CN/) 上搜索一下试一试，大部分问题都能在这里找到答案。 18 | 19 | ## 概念扫盲 20 | 21 | > 以下概念了解即可，无需死记硬背。 22 | 23 | - JavaScript 是一种脚本编程语言，它可以在网页上实现复杂的功能，网页展现给你的不再是简单的静态信息，而是实时的内容更新——交互式的地图、2D/3D 动画、滚动播放的视频等等 —— JavaScript 就在其中。 24 | 25 | ## 学习资料 26 | 27 | 当遇到不懂的地方时，首先要尝试自己解决，可以去使用百度、谷歌等搜索引擎寻求帮助。具备**利用搜索引擎解决自己问题**的能力非常非常重要！如果还是不会，可以直接在群里提问。 28 | 29 | ### JavaScript 30 | 31 | - [什么是 JavaScript](https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/First_steps/What_is_JavaScript)，MDN Web Docs。 32 | - 重点关注「它到底可以做什么？」一节，其次关注「怎样向页面添加 JavaScript？」和「注释」。 33 | - 这个页面上的内容很多，无需全部理解。我们只需要了解 JavaScript 大致在干什么就行了，如果遇到不懂的地方，可以先跳过。 34 | - 选读：[JavaScript 初体验](https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/First_steps/A_first_splash)，MDN Web Docs。 35 | - 这个页面上有一份简单的 JavaScript 代码示例，可以先看一下，不要求全部理解。 36 | - 在「示例 —— 猜数字游戏」一节中，还给出了解读任务需求的方法指引，这对以后处理各种需求会有帮助。 37 | - [JavaScript 基本语法](https://wangdoc.com/javascript/basic/grammar)，网道。 38 | - 这个页面上梳理了 JavaScript 的基本语法，如果有其他编程语言基础的话，应该很快就能了解 JavaScript 的基本语法。 39 | - 如果感觉这个页面的介绍太简略，看不懂的话，这里有一些详细的说明： 40 | - [变量](https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/First_steps/Variables) 41 | - [数字和操作符](https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/First_steps/Math) 42 | - [字符串](https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/First_steps/Strings)、[字符串的相关方法](https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/First_steps/Useful_string_methods) 43 | - [数组](https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/First_steps/Arrays) 44 | - [条件语句](https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Building_blocks/conditionals) 45 | - [循环语句](https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Building_blocks/Looping_code) 46 | - [函数](https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Building_blocks/Functions) 47 | - [查找并解决 JavaScript 代码的错误](https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/First_steps/What_went_wrong)，MDN Web Docs。 48 | - 这个页面上介绍了如何解读 JavaScript 代码的报错提示。 49 | - [数据类型](https://wangdoc.com/javascript/types/)，网道。 50 | - [数据类型转换](https://wangdoc.com/javascript/features/conversion)，网道。 51 | - [console 对象与控制台](https://wangdoc.com/javascript/features/console)，网道。 52 | - 只需要掌握 `console.log` 的用法即可，其他的不必深究。 53 | - [Date 时间库](https://wangdoc.com/javascript/stdlib/date.html)，网道。 54 | 55 | ### DOM API 56 | 57 | 在这个阶段中，我们将会学到一些基础的 DOM 操作，更深层次的内容将会在后续的学习中逐渐展开。 58 | 59 | - [API 是什么？](https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Introduction) 60 | - 大致了解即可。 61 | - 链接的标题跟实际页面的标题有出入，因为笔者觉得这篇文章的科普性质更强一些。 62 | - 获取页面元素的三种主要途径 63 | - [document.getElementById()](https://developer.mozilla.org/zh-CN/docs/Web/API/Document/getElementById) 64 | - [document.getElementsByTagName()](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getElementsByTagName) 65 | - [document.getElementsByClassName()](https://developer.mozilla.org/zh-CN/docs/Web/API/Document/getElementsByClassName) 66 | - [Element 对象](https://wangdoc.com/javascript/dom/element)，网道。 67 | - 上面获取的元素就会以 Element 对象的形式返回。 68 | - 实际上会基于 Element 对象派生出很多其他的对象，比如 `HTMLInputElement` `HTMLDivElement` 等，这些做一些了解即可，每个对象都有自己的一些特殊属性和方法。 69 | - 重点关注 `attributes` `className` `classList` `innerHTML` `innerText` `style` 等属性以及其相关方法。 70 | - 事件监听器 71 | - 提示：不要再用 `onclick` `onsubmit` 这种老掉牙的方式绑定事件了，直接看使用 `addEventListener` 的教程吧！ 72 | - [addEventListener()](https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener) 73 | - 常见事件：`click` `scroll` `submit` `change` `input` `keydown` `keyup` 等（根据英文应该能看出来是什么操作触发的）。 74 | - [removeEventListener()](https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/removeEventListener) 75 | - [Event 对象](https://developer.mozilla.org/zh-CN/docs/Web/API/Event) 76 | - 实际上会基于 Event 对象派生出很多其他的事件对象，比如 `MouseEvent` `KeyboardEvent` 等，这些做一些了解即可。 77 | - 用的比较多的有 `target`、`currentTarget` `preventDefault` `stopPropagation` 等属性和方法。 78 | 79 | ## 作业 80 | 81 | 作业不可以修改模板中的代码内容，只能在 ` 68 | 69 | 70 | -------------------------------------------------------------------------------- /steps/2/demo2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/west2-online/learn-frontend/7add269c2879659e8e5378b6cefaeac2f183ba2c/steps/2/demo2.gif -------------------------------------------------------------------------------- /steps/2/demo2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 海绵宝宝抓章鱼 6 | 7 | 12 | 13 |

      14 | 海绵宝宝很爱抓章鱼，可爱的学长（出题人）把章鱼哥也混在里面了，尽管他也是章鱼，但是不能抓到他。 15 |

      16 |

      17 | 现在我们要将章鱼哥先从这些章鱼中分离出来（即把这个节点从 18 | <ul> 里面去掉），之后再抓章鱼。 19 |

      20 |

      21 | 海绵宝宝抓章鱼喜欢先从重量小的开始抓，请帮助可爱的海绵宝宝和可爱的学长 22 |

      23 | 24 |
        25 |
      • 26 | 章鱼一号30.4kg 27 |
        • 28 |
      • 29 | 章鱼二号24.2kg 30 |
        • 31 |
      • 32 | 章鱼三号250.3kg 33 |
        • 34 |
      • 35 | 章鱼四号300.9kg 36 |
        • 37 |
      • 38 | 章鱼五号120.0kg 39 |
        • 40 |
      • 41 | 章鱼六号27.5kg 42 |
        • 43 |
      • 44 | 章鱼七号35.4kg 45 |
        • 46 |
      • 47 | 章鱼哥25.5kg 48 |
        • 49 |
      50 | 51 |
        52 | 55 |
      56 | 57 | 58 | 59 | 60 | 61 | 105 | 106 | 107 | -------------------------------------------------------------------------------- /steps/2/demo3.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/west2-online/learn-frontend/7add269c2879659e8e5378b6cefaeac2f183ba2c/steps/2/demo3.gif -------------------------------------------------------------------------------- /steps/2/demo3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 37 | 38 | 39 |
      40 |
      41 |

      你觉得你点的到我吗

      42 | 43 | 44 |
      45 |
      46 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /steps/3.md: -------------------------------------------------------------------------------- 1 | # JavaScript 和 CSS 进阶 2 | 3 | ## 学习目标 4 | 5 | ### CSS 6 | 7 | - 响应式布局 8 | - CSS 选择器进阶 9 | - CSS 实用函数 10 | 11 | ### JavaScript 12 | 13 | - JavaScript 异步 14 | - fetch API 及其应用 15 | 16 | ## 学习资料 17 | 18 | 你已经是一名成熟的学生啦！因此在这一阶段，你需要学会自己去查找资料。当然，如果有什么不会的地方，不要忘记向学长学姐请教哦！ 19 | 20 | ## 作业 21 | 22 | ### 一 23 | 24 | 请基于 [demo3-1.html](./3/demo3-1.html) 进行修改，完成以下任务： 25 | 26 | 1. 为 content 设置合理的 `padding`，使其可显示范围恰好为屏幕上除 header 外的所有区域（即使页面的显示区域刚好覆盖整个屏幕但是不出现滚动条），并将背景颜色设置为 `#f0f8ff`。 27 | 1. 利用 CSS Media Query 为下面的 `.card1`、`.card2`、`.card3`、`.card4`、`.card5` 设置合适的 `display` 属性，使其在不同屏幕尺寸下显示。 28 | 1. 将本列表的第二个条目设置为红色，但不使用 class 和 id 选择器（即基于现有的 HTML 结构编写选择器）。 29 | 1. 将本列表中的所有奇数条目设置为粗体，但不使用 class 和 id 选择器（即基于现有的 HTML 结构编写选择器）。 30 | 31 | 效果如图： 32 | 33 | ![](./3/demo1-3-1.jpg) 34 | 35 | ▲ 屏宽为 768px 时的效果 36 | 37 | ![](./3/demo1-3-2.jpg) 38 | 39 | ▲ 屏宽为 1024px 时的效果 40 | 41 | 如果经过尝试后无法完成，请查看 [demo3-1-answer.html](./3/demo3-1-answer.html)，理解后再尝试独立完成。 42 | 43 | ### 二 44 | 45 | 请基于 [demo3-2.html](./3/demo3-2.html) 进行修改，完成以下任务： 46 | 47 | 1. 编写 JavaScript 代码，实现打开页面后自动查询当前用户的 IP 地址。 48 | 1. 调用的 API 地址为 `https://myip.ipip.net/json`，请求方法为 GET，无需附加参数。 49 | 2. 将查询到的 IP 地址显示在页面上。 50 | 51 | 加分项： 52 | 53 | 1. 自由发挥，美化页面。 54 | 2. 请简要说明为什么在这个任务中需要使用 id 选择器来查找插入查询结果的元素。 55 | 56 | 如果经过尝试后无法完成，请查看 [demo3-2-answer.html](./3/demo3-2-answer.html)，理解后再尝试独立完成。 57 | -------------------------------------------------------------------------------- /steps/3/demo1-3-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/west2-online/learn-frontend/7add269c2879659e8e5378b6cefaeac2f183ba2c/steps/3/demo1-3-1.jpg -------------------------------------------------------------------------------- /steps/3/demo1-3-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/west2-online/learn-frontend/7add269c2879659e8e5378b6cefaeac2f183ba2c/steps/3/demo1-3-2.jpg -------------------------------------------------------------------------------- /steps/3/demo3-1-answer.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | demo3-1 6 | 19 | 20 | 21 | 22 | 23 |
      Header
      24 |
      25 |
      small (≥ 640px)
      26 |
      medium (≥ 768px)
      27 |
      large (≥ 1024px)
      28 |
      xlarge (≥ 1280px)
      29 |
      2xl (≥ 1536px)
      30 |
      31 |

      作业要求：

      32 |
        33 |
      1. 34 | 为 content 设置合理的 padding，使其可显示范围恰好为屏幕上除 header 35 | 外的所有区域（即使页面的显示区域刚好覆盖整个屏幕但是不出现滚动条），并将背景颜色设置为 36 | #f0f8ff。 37 |
        2. 38 |
      2. 39 | 利用 CSS Media Query 为下面的 card1、card2、card3、card4、card5 40 | 设置合适的 display 属性，使其在不同屏幕尺寸下显示。 41 |
        3. 42 |
      3. 43 | 将本列表的第二个条目设置为红色，但不使用 class 和 id 44 | 选择器（即基于现有的 HTML 结构编写选择器）。 45 |
        4. 46 |
      4. 47 | 将本列表中的所有奇数条目设置为粗体，但不使用 class 和 id 48 | 选择器（即基于现有的 HTML 结构编写选择器）。 49 |
        5. 50 |
      51 |
      52 |
      53 | 54 | 55 | 124 | 125 | -------------------------------------------------------------------------------- /steps/3/demo3-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | demo3-1 6 | 19 | 20 | 21 | 22 | 23 |
      Header
      24 |
      25 |
      small (≥ 640px)
      26 |
      medium (≥ 768px)
      27 |
      large (≥ 1024px)
      28 |
      xlarge (≥ 1280px)
      29 |
      2xl (≥ 1536px)
      30 |
      31 |

      作业要求：

      32 |
        33 |
      1. 34 | 为 content 设置合理的 padding，使其可显示范围恰好为屏幕上除 header 35 | 外的所有区域（即使页面的显示区域刚好覆盖整个屏幕但是不出现滚动条），并将背景颜色设置为 36 | #f0f8ff。 37 |
        2. 38 |
      2. 39 | 利用 CSS Media Query 为下面的 card1、card2、card3、card4、card5 40 | 设置合适的 display 属性，使其在不同屏幕尺寸下显示。 41 |
        3. 42 |
      3. 43 | 将本列表的第二个条目设置为红色，但不使用 class 和 id 44 | 选择器（即基于现有的 HTML 结构编写选择器）。 45 |
        4. 46 |
      4. 47 | 将本列表中的所有奇数条目设置为粗体，但不使用 class 和 id 48 | 选择器（即基于现有的 HTML 结构编写选择器）。 49 |
        5. 50 |
      51 |
      52 |
      53 | 54 | 55 | 76 | 77 | -------------------------------------------------------------------------------- /steps/3/demo3-2-answer.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | demo3-2 6 | 19 | 20 | 21 | 22 |

      What is my IP address?

      23 |

      IP address: Loading...

      24 |

      Location:

      25 | 26 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /steps/3/demo3-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | demo3-2 6 | 19 | 20 | 21 | 22 |

      What is my IP address?

      23 |

      IP address: Loading...

      24 |

      Location:

      25 | 26 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /steps/4.md: -------------------------------------------------------------------------------- 1 | # 前端框架入门 & 寒假合作轮 2 | 3 | ## 学习目标 4 | 5 | - 初步认识 React 或 Vue 之中的任意一种框架 6 | - 能够使用框架完成一个小型项目 7 | - 能够将前三轮中的知识应用到项目中 8 | 9 | ## 学习资料 10 | 11 | - [Vue.js 官方中文文档](https://cn.vuejs.org) 12 | - [React 官方中文文档](https://zh-hans.react.dev) 13 | 14 | 在学习的时候，需要注意在网络上搜索相关框架的问题时，可能会遇到不适用于新版本的解答，因此请注意查看官方文档。 15 | 16 | 需要特别注意的是，两个框架的官方文档中给出了一套渐进式的学习路线： 17 | 18 | - [Vue.js 互动教程](https://cn.vuejs.org/tutorial/) 19 | - [学习 React](https://zh-hans.react.dev/learn) 20 | 21 | 每一个框架都有自己的特点，并且在不同的场景下有不同的优势，并没有优劣之分。不过，每一个框架都会有许多深入的知识点，因此我们建议你 **选择其一进行学习** 即可。特别地，许多高阶用法对初学者是不友好的，因此我们建议你在学习的时候，**不要过度追求框架的高级用法**。 22 | 23 | ## 作业 24 | 25 | 我们正在与 Java 组协商寒假合作轮的相关事宜，请等待后续通知。 26 | -------------------------------------------------------------------------------- /steps/5.md: -------------------------------------------------------------------------------- 1 | # TypeScript 入门 2 | 3 | ## 学习目标 4 | 5 | - 认识 TypeScript 类型系统 6 | - 能够掌握一些基础的 TypeScript 类型注解操作 7 | - 可以完成一些简单的类型体操 8 | 9 | ## 学习资料 10 | 11 | - [The TypeScript Handbook](https://www.typescriptlang.org/docs/handbook/intro.html) 12 | - [TypeScript 入门教程](https://ts.xcatliu.com/) 13 | - [TypeScript 教程](https://wangdoc.com/typescript/)，阮一峰，网道 WangDoc.com 14 | 15 | ## 作业 16 | 17 | ### Type Challenges 18 | 19 | 请完成 [Type Challenges](https://github.com/type-challenges/type-challenges/blob/main/README.zh-CN.md) 中的下列任务： 20 | 21 | - [13. Hello World](https://github.com/type-challenges/type-challenges/blob/main/questions/00013-warm-hello-world/README.zh-CN.md) 22 | - [14. First of Array](https://github.com/type-challenges/type-challenges/blob/main/questions/00014-easy-first/README.zh-CN.md) 23 | - [18. Length of Tuple](https://github.com/type-challenges/type-challenges/blob/main/questions/00018-easy-tuple-length/README.zh-CN.md) 24 | 25 | 提交时请将每道题目对应的文件名命名为 `1-xx.ts` 的形式，如 `1-13.ts`。 26 | 27 | ### 实操 28 | 29 | 提交时请将每道题目对应的文件名命名为 `2-xx.ts` 的形式，如 `2-1.ts`。 30 | 31 | #### 1 32 | 33 | ```javascript 34 | // 请补全参数类型和返回类型 35 | function add(a, b) { 36 | return a + b; 37 | } 38 | ``` 39 | 40 | #### 2 41 | 42 | ```typescript 43 | type Fn = any; // 请补全函数类型 44 | 45 | const fn: Fn = (a, b) => a + b; 46 | ``` 47 | 48 | #### 3 49 | 50 | ```typescript 51 | type A = { a: number; }; 52 | type B = { b: string; }; 53 | 54 | // 补全 55 | type AorB = any; 56 | ``` 57 | 58 | ### Bonus 59 | 60 | 根据组内实际情况的考量，会有相应的特殊任务供大家完成~ 61 | -------------------------------------------------------------------------------- /steps/6.md: -------------------------------------------------------------------------------- 1 | # Node.js 入门 2 | 3 | ## 学习目标 4 | 5 | - 掌握 Node.js 的常用模块 6 | - 能够使用 npm 和/或 yarn 等包管理器进行包管理 7 | - 知道 ESM 和 CommonJS 的区别 8 | - 能够使用 Node.js 进行网页爬取 9 | - 掌握 Koa 的基本用法，能够搭建一个简单的 HTTP 服务器 10 | 11 | ## 学习资料 12 | 13 | 提示：不会的可以问 AI！对于这种已经有现成答案的问题，AI 的回答通常会很准确。 14 | 15 | - [Node.js 入门教程](https://www.runoob.com/nodejs/nodejs-tutorial.html) 16 | - [Cheerio 官方文档](https://cheerio.js.org/docs/intro) 17 | - [Koa 官方文档](https://koajs.com/#introduction) 18 | 19 | ## 作业 20 | 21 | 在本阶段的作业中，我们将常用场景抽象为了两个实际的小任务：一个是 Node.js 脚本编写，对应了本次的爬虫任务；另一个则是 Node.js 搭建 HTTP 服务器，对应了本次的 Koa HTTP Server 任务。 22 | 23 | ### 一、Web Spider 24 | 25 | #### 作业要求 26 | 27 | 爬取「福州大学通知文件系统」上今年 1 月 1 日到现在的所有通知的发表日期、部门、标题、访问链接。 28 | 29 | 网址: (需要校园网环境) 30 | 31 | - 使用 Node.js 的 fetch API 或者第三方库（如 axios）进行网页请求。 32 | - 使用 Cheerio 解析 HTML 内容，并利用适当的 CSS 选择器来获取所需信息。 33 | - 将爬取到的数据存储到本地文件 `notices.json` 中（无需上传到 GitHub，但需要体现存储过程）。 34 | - 提交代码时，确保包含一个说明文件，包含如何运行爬虫的指南以及爬取结果的数据字段说明。 35 | 36 | #### Bonus 37 | 38 | - 使用并发请求提升爬取速度，并使用诸如 p-queue 等库来控制并发请求数量，避免对服务器造成过大压力。 39 | - 爬取每个通知的正文及访问人数，并将其存储在 `notices.json` 中的每个通知对象中。 40 | - 将爬取的数据存储到 SQLite、MySQL、MongoDB 或其他数据库中（任选一个），并提供相应的查询接口。可以使用 ORM 框架（如 Sequelize 或 Mongoose）来简化数据库操作。 41 | 42 | ### 二、Simple HTTP Server 43 | 44 | #### 作业要求 45 | 46 | 使用 Koa 搭建一个简单的 HTTP 服务器，利用 Node.js 的 fs 模块提供以下 API： 47 | 48 | - 上传文件 `/api/upload`：接收文件上传，并将文件保存到服务器的 `uploads` 目录下。 49 | - 删除文件 `/api/delete`：接收文件名参数，删除服务器 `uploads` 目录下对应的文件。 50 | - 列出文件 `/api/files`：返回服务器 `uploads` 目录下的所有文件列表。 51 | 52 | 同时编写一个静态的 HTML 页面，提供一个简单的前端界面，允许用户进行文件上传、获取文件列表等操作，并获取上传后的访问 URL。放置在合适的目录下，并配置 Koa 服务器提供静态文件服务。 53 | 54 | #### Bonus 55 | 56 | - 增加鉴权功能，只有登录用户才能进行文件上传和删除操作。 57 | - 思考如何解决文件名冲突问题，采用合适的方式来生成唯一文件名。 58 | - 将上传的文件信息存储到数据库中（如 SQLite、MySQL 或 MongoDB， ~~甚至可以是本地 JSON 文件~~ ）。 59 | --------------------------------------------------------------------------------