From 28627ba2c9702b5760a5272a0de7639ce74564cd Mon Sep 17 00:00:00 2001 From: SI_Xiaolong Date: Tue, 23 Aug 2022 22:53:52 +0800 Subject: [PATCH 1/4] Create README.zh-cn.md --- translations/README.zh-cn.md | 112 +++++++++++++++++++++++++++++++++++ 1 file changed, 112 insertions(+) create mode 100644 translations/README.zh-cn.md diff --git a/translations/README.zh-cn.md b/translations/README.zh-cn.md new file mode 100644 index 00000000..bcacbbb6 --- /dev/null +++ b/translations/README.zh-cn.md @@ -0,0 +1,112 @@ +[![GitHub license](https://img.shields.io/github/license/microsoft/Web-Dev-For-Beginners.svg)](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE) +[![GitHub contributors](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/) +[![GitHub issues](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/) +[![GitHub pull-requests](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/) +[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) + +[![GitHub watchers](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/) +[![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/) +[![GitHub stars](https://img.shields.io/github/stars/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/) + +[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners) + +# 初学者的 Web 开发课程 + +微软的Azure云倡导者很高兴地提供一个为期12周的24课时的课程，所有关于JavaScript、CSS和HTML的基础知识。每节课都包括课前和课后测验、完成课程的书面说明、解决方案、作业等。我们以项目为基础的教学方法使你能够边学边做，这是一种证明新技能能够“扎根”的方法。 + +**衷心感谢我们的作者Jen Looper、Chris Noring、Christopher Harrison、Jasmine Greenaway、Yohan Lasorsa、Floor Drees、和手绘艺术家Tomomi Imura!** + +# 你是学生吗？ + +利用以下资源开始： + +- [Student Hub page](https://docs.microsoft.com/en-gb/learn/student-hub?WT.mc_id=academic-13441-cxa) 在这个页面，你会发现初学者资源、学生包，甚至是获得免费证书券的方法。这是一个你想加入书签并不时检查的页面，因为我们至少每月都会更换内容。 +- [Microsoft Student Learn ambassadors](https://studentambassadors.microsoft.com?WT.mc_id=academic-13441-cxa) 加入一个由学生大使组成的全球社区，这可能是你进入微软的途径。 + + +# 入门 + +> **对于老师**, 我们已经有了一些关于如何使用该课程的[建议](for-teachers.zh-cn.md)。 我们希望您能在我们的[讨论区](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)提出反馈意见! + +> **[对于学生](https://aka.ms/student-page)**，如果你想自己使用这个课程，你可以fork整个repo并自己完成练习，从课前测验开始，然后阅读课程并完成其余活动。尽量通过理解课程来创建项目，而不是复制解决方案的代码；不过，这些代码可以在每节课中的`/solutions`目录中找到。另一个方法是与朋友组成一个学习小组，一起学习这些内容。对于进一步的学习，我们建议通过[Microsoft Learn](https://docs.microsoft.com/users/jenlooper-2911/collections/jg2gax8pzd6o81?WT.mc_id=academic-13441-cxa) 和观看下面提到的视频。 + +[![Promo video](../images/web.gif)](https://youtube.com/watch?v=R1wrdtmBSII) + +Gif by [Mohit Jaisal](https://linkedin.com/in/mohitjaisal) + +> 🎥 点击上面的图像，观看关于该项目和创造该项目的人们的视频! + +## 教学宗旨 + +在建立这个课程时，我们选择了两个教学宗旨：确保它是基于项目的，并包括频繁的测验。在本系列课程结束时，学生将建立一个打字游戏，一个虚拟的花艺瓶，一个“绿色”浏览器扩展，一个“太空入侵者”类型的游戏，以及一个商业类型的银行应用程序，并将学会JavaScript、HTML和CSS的基础知识，以及当今网络开发人员的现代工具链。 + +> 🎓 你可以把这个课程的前几节课作为Microsoft Learn的[学习路径](https://docs.microsoft.com/learn/paths/web-development-101?WT.mc_id=academic-13441-cxa)来学习! + +通过确保内容与项目相一致，这个过程对学生来说更有吸引力，对概念的保持也会增强。我们还编写了几节关于JavaScript基础知识的入门课程来介绍概念，并配以“[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript?WT.mc_id=academic-13441-cxa)”的视频教程集，其中一些作者为这个课程做出了贡献。 + +此外，课前的低风险测验确定了学生对学习一个主题的意向如何，而课后的第二次测验则确保了学生知识的进一步保留。这个课程的设计是灵活而有趣的，可以全部或部分地学习。这些项目开始时很简单，到12周的周期结束时变得越来越复杂。 + +虽然我们有意避免介绍JavaScript框架，以便在采用框架之前集中于作为一个Web开发者所需的基本技能，但是完成本系列课程的一个好的去处就是通过“[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs?WT.mc_id=academic-13441-cxa)”来学习Node.js。 + +> 查看我们的[行为准则](../CODE_OF_CONDUCT.md)、[贡献](../CONTRIBUTING.md)和[翻译](../TRANSLATIONS.md)指南。我们欢迎你的建设性的反馈! + +## 每一课都包括： + +- 可能的手绘笔记 +- 可能的补充视频 +- 课前预习小测验 +- 书面课程 +- 对于基于项目的课程，关于如何建立项目的分步指南 +- 知识点检查 +- 一个挑战 +- 补充阅读 +- 作业 +- 课后小测验 + +> **关于测验的说明**: 所有的测验都包含在[这个应用程序](https://ashy-river-0debb7803.1.azurestaticapps.net/)中，总共有48个测验，每个测验三个问题。它们在课程中被链接，但测验应用程序可以在本地运行；按照`quiz-app`文件夹中的指示操作。它们正逐渐被本地化。 + +## 课程 + +| | 项目名称 | 教授概念 | 学习目标 | 课程链接 | 课程作者 | +| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: | +| 01 | 入门篇 | 编程语言和行业工具介绍 | 了解大多数编程语言背后的基本支撑，以及帮助专业开发人员完成工作的软件。 | [编程语言和工具介绍](/1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | +| 02 | 入门篇 | GitHub的基础知识，包括与一个团队合作 | 如何在你的项目中使用GitHub，如何在代码库中与他人合作 | [GitHub介绍](/1-getting-started-lessons/2-github-basics/README.md) | Floor | +| 03 | 入门篇 | 无障碍性 | 学习网络无障碍的基本知识 | [无障碍基础知识](/1-getting-started-lessons/3-accessibility/README.md) | Christopher | +| 04 | JS基础 | JavaScript数据类型 | JavaScript数据类型的基础知识 | [数据类型](/2-js-basics/1-data-types/README.md) | Jasmine | +| 05 | JS基础 | 函数和方法 | 了解管理应用程序逻辑流的函数和方法 | [函数和方法](/2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher | +| 06 | JS基础 | 用JS做出决定 | 学习如何使用决策方法在你的代码中创建条件 | [做出决定](/2-js-basics/3-making-decisions/README.md) | Jasmine | +| 07 | JS基础 | 数组和循环 | 在JavaScript中使用数组和循环来处理数据 | [数组和循环](/2-js-basics/4-arrays-loops/README.md) | Jasmine | +| 08 | [花艺瓶](/3-terrarium/solution/README.md) | 实践中的HTML | 构建HTML以创建一个在线花艺瓶，重点是构建一个布局 | [HTML简介](/3-terrarium/1-intro-to-html/README.md) | Jen | +| 09 | [花艺瓶](/3-terrarium/solution/README.md) | 实践中的CSS | 构建CSS，为在线花艺瓶设计样式，重点是CSS的基础知识，包括使页面具有响应性 | [CSS简介](/3-terrarium/2-intro-to-css/README.md) | Jen | +| 10 | [花艺瓶](/3-terrarium/solution/README.md) | JavaScript闭包，DOM操作 | 构建JavaScript，使水族馆成为一个拖/放界面，重点是闭包和DOM操作 | [JavaScript闭包，DOM操作](/3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | +| 11 | [打字游戏](/4-typing-game/solution/README.md) | 建立一个打字游戏 | 学习如何使用键盘事件来驱动你的JavaScript应用程序的逻辑 | [事件驱动编程](/4-typing-game/typing-game/README.md) | Christopher | +| 12 | [绿色浏览器扩展](/5-browser-extension/solution/README.md) | 与浏览器协作 | 了解浏览器是如何工作的，它们的历史，以及如何为浏览器扩展的第一批元素提供支架 | [关于浏览器](/5-browser-extension/1-about-browsers/README.md) | Jen | +| 13 | [绿色浏览器扩展](/5-browser-extension/solution/README.md) | 构建一个表单，调用一个API，并在本地存储中存储变量 | 构建你的浏览器扩展的JavaScript元素，使用存储在本地存储中的变量调用API | [API、表单和本地存储](/5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | +| 14 | [绿色浏览器扩展](/5-browser-extension/solution/README.md) | 浏览器中的后台进程，网络性能 | 使用浏览器的后台进程来管理扩展的图标；了解网络性能和一些优化 | [后台任务和性能](/5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | +| 15 | [太空游戏](/6-space-game/solution/README.md) | 用JavaScript进行更高级的游戏开发 | 学习使用类和组合的继承以及Pub/Sub模式，为建立游戏做准备。 | [高级游戏开发简介](/6-space-game/1-introduction/README.md) | Chris | +| 16 | [太空游戏](/6-space-game/solution/README.md) | 在Canvas上绘图 | 了解用于在屏幕上绘制元素的Canvas API | [在Canvas上绘图](/6-space-game/2-drawing-to-canvas/README.md) | Chris | +| 17 | [太空游戏](/6-space-game/solution/README.md) | 在屏幕上移动元素 | 了解元素如何利用软轴坐标和Canvas API获得运动效果 | [移动元素](/6-space-game/3-moving-elements-around/README.md) | Chris | +| 18 | [太空游戏](/6-space-game/solution/README.md) | 碰撞检测 | 使用按键使元素相互碰撞和反应，并提供冷却功能以确保游戏的性能 | [碰撞检测](/6-space-game/4-collision-detection/README.md) | Chris | +| 19 | [太空游戏](/6-space-game/solution/README.md) | 记分 | 根据游戏的状态和性能进行数学计算 | [记分](/6-space-game/5-keeping-score/README.md) | Chris | +| 20 | [太空游戏](/6-space-game/solution/README.md) | 结束和重启游戏 | 学习结束和重启游戏的方法，包括清理资产和重设变量值 | [结束的条件](/6-space-game/6-end-condition/README.md) | Chris | +| 21 | [银行应用](/7-bank-project/solution/README.md) | 网络应用程序中的HTML模板和路线 | 学习如何使用路由和HTML模板创建多页面网站架构的支架 | [HTML模板和路线](/7-bank-project/1-template-route/README.md) | Yohan | +| 22 | [银行应用](/7-bank-project/solution/README.md) | 建立一个登录和注册表格 | 学习构建表单和交接验证程序的知识 | [表格](/7-bank-project/2-forms/README.md) | Yohan | +| 23 | [银行应用](/7-bank-project/solution/README.md) | 获取和使用数据的方法 | 数据如何流入和流出你的应用程序，如何获取它，存储它，并处理它 | [数据](/7-bank-project/3-data/README.md) | Yohan | +| 24 | [银行应用](/7-bank-project/solution/README.md) | 国家管理的概念 | 了解你的应用程序如何保留状态以及如何以编程方式管理它 | [国家管理](/7-bank-project/4-state-management/README.md) | Yohan | + +## 离线访问 + +你可以通过使用[Docsify](https://docsify.js.org/#/)离线运行这个文档。fork这个repo，在你的本地机器上安装Docsify，然后在这个repo的根文件夹中，输入 `docsify serve`。网站将在你的本地主机上的3000端口服务：`localhost:3000`。 + +## PDF + +所有课程的PDF文件可以在[这里](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf)找到 + +## 其他课程 + +我们的团队还制作了其他课程! 详见： + +- [Machine Learning for Beginners](https://aka.ms/ml-beginners) +- [IoT for Beginners](https://aka.ms/iot-beginners) +- [Data Science for Beginners](https://aka.ms/datascience-beginners) +- [AI for Beginners](https://aka.ms/ai-beginners) From 3b0e8e9929ba55d08ce801aef6eab3266ea150c9 Mon Sep 17 00:00:00 2001 From: SI_Xiaolong Date: Tue, 23 Aug 2022 22:53:52 +0800 Subject: [PATCH 2/4] Create README.zh-cn.md --- translations/README.zh-cn.md | 112 +++++++++++++++++++++++++++++++++++ 1 file changed, 112 insertions(+) create mode 100644 translations/README.zh-cn.md diff --git a/translations/README.zh-cn.md b/translations/README.zh-cn.md new file mode 100644 index 00000000..27226847 --- /dev/null +++ b/translations/README.zh-cn.md @@ -0,0 +1,112 @@ +[![GitHub license](https://img.shields.io/github/license/microsoft/Web-Dev-For-Beginners.svg)](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE) +[![GitHub contributors](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/) +[![GitHub issues](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/) +[![GitHub pull-requests](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/) +[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) + +[![GitHub watchers](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/) +[![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/) +[![GitHub stars](https://img.shields.io/github/stars/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/) + +[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners) + +# 初学者的 Web 开发课程 + +微软的Azure云倡导者很高兴地提供一个为期12周的24课时的课程，所有关于JavaScript、CSS和HTML的基础知识。每节课都包括课前和课后测验、完成课程的书面说明、解决方案、作业等。我们以项目为基础的教学方法使你能够边学边做，这是一种证明新技能能够“扎根”的方法。 + +**衷心感谢我们的作者Jen Looper、Chris Noring、Christopher Harrison、Jasmine Greenaway、Yohan Lasorsa、Floor Drees和手绘艺术家Tomomi Imura!** + +# 你是学生吗？ + +利用以下资源开始： + +- [Student Hub page](https://docs.microsoft.com/en-gb/learn/student-hub?WT.mc_id=academic-13441-cxa) 在这个页面，你会发现初学者资源、学生包，甚至是获得免费证书券的方法。这是一个你想加入书签并不时检查的页面，因为我们至少每月都会更换内容。 +- [Microsoft Student Learn ambassadors](https://studentambassadors.microsoft.com?WT.mc_id=academic-13441-cxa) 加入一个由学生大使组成的全球社区，这可能是你进入微软的途径。 + + +# 入门 + +> **对于老师**, 我们已经有了一些关于如何使用该课程的[建议](for-teachers.zh-cn.md)。 我们希望您能在我们的[讨论区](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)提出反馈意见! + +> **[对于学生](https://aka.ms/student-page)**，如果你想自己使用这个课程，你可以fork整个repo并自己完成练习，从课前测验开始，然后阅读课程并完成其余活动。尽量通过理解课程来创建项目，而不是复制解决方案的代码；不过，这些代码可以在每节课中的`/solutions`目录中找到。另一个方法是与朋友组成一个学习小组，一起学习这些内容。对于进一步的学习，我们建议通过[Microsoft Learn](https://docs.microsoft.com/users/jenlooper-2911/collections/jg2gax8pzd6o81?WT.mc_id=academic-13441-cxa) 和观看下面提到的视频。 + +[![Promo video](../images/web.gif)](https://youtube.com/watch?v=R1wrdtmBSII) + +Gif by [Mohit Jaisal](https://linkedin.com/in/mohitjaisal) + +> 🎥 点击上面的图像，观看关于该项目和创造该项目的人们的视频! + +## 教学宗旨 + +在建立这个课程时，我们选择了两个教学宗旨：确保它是基于项目的，并包括频繁的测验。在本系列课程结束时，学生将建立一个打字游戏，一个虚拟的花艺瓶，一个“绿色”浏览器扩展，一个“太空入侵者”类型的游戏，以及一个商业类型的银行应用程序，并将学会JavaScript、HTML和CSS的基础知识，以及当今网络开发人员的现代工具链。 + +> 🎓 你可以把这个课程的前几节课作为Microsoft Learn的[学习路径](https://docs.microsoft.com/learn/paths/web-development-101?WT.mc_id=academic-13441-cxa)来学习! + +通过确保内容与项目相一致，这个过程对学生来说更有吸引力，对概念的保持也会增强。我们还编写了几节关于JavaScript基础知识的入门课程来介绍概念，并配以“[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript?WT.mc_id=academic-13441-cxa)”的视频教程集，其中一些作者为这个课程做出了贡献。 + +此外，课前的低风险测验确定了学生对学习一个主题的意向如何，而课后的第二次测验则确保了学生知识的进一步保留。这个课程的设计是灵活而有趣的，可以全部或部分地学习。这些项目开始时很简单，到12周的周期结束时变得越来越复杂。 + +虽然我们有意避免介绍JavaScript框架，以便在采用框架之前集中于作为一个Web开发者所需的基本技能，但是完成本系列课程的一个好的去处就是通过“[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs?WT.mc_id=academic-13441-cxa)”来学习Node.js。 + +> 查看我们的[行为准则](../CODE_OF_CONDUCT.md)、[贡献](../CONTRIBUTING.md)和[翻译](../TRANSLATIONS.md)指南。我们欢迎你的建设性的反馈! + +## 每一课都包括： + +- 可能的手绘笔记 +- 可能的补充视频 +- 课前预习小测验 +- 书面课程 +- 对于基于项目的课程，关于如何建立项目的分步指南 +- 知识点检查 +- 一个挑战 +- 补充阅读 +- 作业 +- 课后小测验 + +> **关于测验的说明**: 所有的测验都包含在[这个应用程序](https://ashy-river-0debb7803.1.azurestaticapps.net/)中，总共有48个测验，每个测验三个问题。它们在课程中被链接，但测验应用程序可以在本地运行；按照`quiz-app`文件夹中的指示操作。它们正逐渐被本地化。 + +## 课程 + +| | 项目名称 | 教授概念 | 学习目标 | 课程链接 | 课程作者 | +| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: | +| 01 | 入门篇 | 编程语言和行业工具介绍 | 了解大多数编程语言背后的基本支撑，以及帮助专业开发人员完成工作的软件。 | [编程语言和工具介绍](/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.zh-cn.md) | Jasmine | +| 02 | 入门篇 | GitHub的基础知识，包括与一个团队合作 | 如何在你的项目中使用GitHub，如何在代码库中与他人合作 | [GitHub介绍](/1-getting-started-lessons/2-github-basics/translations/README.zh-cn.md) | Floor | +| 03 | 入门篇 | 无障碍性 | 学习网络无障碍的基本知识 | [无障碍基础知识](/1-getting-started-lessons/3-accessibility/translations/README.zh-cn.md) | Christopher | +| 04 | JS基础 | JavaScript数据类型 | JavaScript数据类型的基础知识 | [数据类型](/2-js-basics/1-data-types/translations/README.zh-cn.md) | Jasmine | +| 05 | JS基础 | 函数和方法 | 了解管理应用程序逻辑流的函数和方法 | [函数和方法](/2-js-basics/2-functions-methods/translations/README.zh-cn.md) | Jasmine and Christopher | +| 06 | JS基础 | 用JS做出决定 | 学习如何使用决策方法在你的代码中创建条件 | [做出决定](/2-js-basics/3-making-decisions/translations/README.zh-cn.md) | Jasmine | +| 07 | JS基础 | 数组和循环 | 在JavaScript中使用数组和循环来处理数据 | [数组和循环](/2-js-basics/4-arrays-loops/translations/README.zh-cn.md) | Jasmine | +| 08 | [花艺瓶](/3-terrarium/solution/translations/README.zh-cn.md) | 实践中的HTML | 构建HTML以创建一个在线花艺瓶，重点是构建一个布局 | [HTML简介](/3-terrarium/1-intro-to-html/translations/README.zh-cn.md) | Jen | +| 09 | [花艺瓶](/3-terrarium/solution/translations/README.zh-cn.md) | 实践中的CSS | 构建CSS，为在线花艺瓶设计样式，重点是CSS的基础知识，包括使页面具有响应性 | [CSS简介](/3-terrarium/2-intro-to-css/translations/README.zh-cn.md) | Jen | +| 10 | [花艺瓶](/3-terrarium/solution/translations/README.zh-cn.md) | JavaScript闭包，DOM操作 | 构建JavaScript，使水族馆成为一个拖/放界面，重点是闭包和DOM操作 | [JavaScript闭包，DOM操作](/3-terrarium/3-intro-to-DOM-and-closures/translations/README.zh-cn.md) | Jen | +| 11 | [打字游戏](/4-typing-game/solution/translations/README.zh-cn.md) | 建立一个打字游戏 | 学习如何使用键盘事件来驱动你的JavaScript应用程序的逻辑 | [事件驱动编程](/4-typing-game/typing-game/translations/README.zh-cn.md) | Christopher | +| 12 | [绿色浏览器扩展](/5-browser-extension/solution/translations/README.zh-cn.md) | 与浏览器协作 | 了解浏览器是如何工作的，它们的历史，以及如何为浏览器扩展的第一批元素提供支架 | [关于浏览器](/5-browser-extension/1-about-browsers/translations/README.zh-cn.md) | Jen | +| 13 | [绿色浏览器扩展](/5-browser-extension/solution/translations/README.zh-cn.md) | 构建一个表单，调用一个API，并在本地存储中存储变量 | 构建你的浏览器扩展的JavaScript元素，使用存储在本地存储中的变量调用API | [API、表单和本地存储](/5-browser-extension/2-forms-browsers-local-storage/translations/README.zh-cn.md) | Jen | +| 14 | [绿色浏览器扩展](/5-browser-extension/solution/translations/README.zh-cn.md) | 浏览器中的后台进程，网络性能 | 使用浏览器的后台进程来管理扩展的图标；了解网络性能和一些优化 | [后台任务和性能](/5-browser-extension/3-background-tasks-and-performance/translations/README.zh-cn.md) | Jen | +| 15 | [太空游戏](/6-space-game/solution/translations/README.zh-cn.md) | 用JavaScript进行更高级的游戏开发 | 学习使用类和组合的继承以及Pub/Sub模式，为建立游戏做准备。 | [高级游戏开发简介](/6-space-game/1-introduction/translations/README.zh-cn.md) | Chris | +| 16 | [太空游戏](/6-space-game/solution/translations/README.zh-cn.md) | 在Canvas上绘图 | 了解用于在屏幕上绘制元素的Canvas API | [在Canvas上绘图](/6-space-game/2-drawing-to-canvas/translations/README.zh-cn.md) | Chris | +| 17 | [太空游戏](/6-space-game/solution/translations/README.zh-cn.md) | 在屏幕上移动元素 | 了解元素如何利用软轴坐标和Canvas API获得运动效果 | [移动元素](/6-space-game/3-moving-elements-around/translations/README.zh-cn.md) | Chris | +| 18 | [太空游戏](/6-space-game/solution/translations/README.zh-cn.md) | 碰撞检测 | 使用按键使元素相互碰撞和反应，并提供冷却功能以确保游戏的性能 | [碰撞检测](/6-space-game/4-collision-detection/translations/README.zh-cn.md) | Chris | +| 19 | [太空游戏](/6-space-game/solution/translations/README.zh-cn.md) | 记分 | 根据游戏的状态和性能进行数学计算 | [记分](/6-space-game/5-keeping-score/translations/README.zh-cn.md) | Chris | +| 20 | [太空游戏](/6-space-game/solution/translations/README.zh-cn.md) | 结束和重启游戏 | 学习结束和重启游戏的方法，包括清理资产和重设变量值 | [结束的条件](/6-space-game/6-end-condition/translations/README.zh-cn.md) | Chris | +| 21 | [银行应用](/7-bank-project/solution/translations/README.zh-cn.md) | 网络应用程序中的HTML模板和路线 | 学习如何使用路由和HTML模板创建多页面网站架构的支架 | [HTML模板和路线](/7-bank-project/1-template-route/translations/README.zh-cn.md) | Yohan | +| 22 | [银行应用](/7-bank-project/solution/translations/README.zh-cn.md) | 建立一个登录和注册表格 | 学习构建表单和交接验证程序的知识 | [表格](/7-bank-project/2-forms/translations/README.zh-cn.md) | Yohan | +| 23 | [银行应用](/7-bank-project/solution/translations/README.zh-cn.md) | 获取和使用数据的方法 | 数据如何流入和流出你的应用程序，如何获取它，存储它，并处理它 | [数据](/7-bank-project/3-data/translations/README.zh-cn.md) | Yohan | +| 24 | [银行应用](/7-bank-project/solution/translations/README.zh-cn.md) | 国家管理的概念 | 了解你的应用程序如何保留状态以及如何以编程方式管理它 | [国家管理](/7-bank-project/4-state-management/translations/README.zh-cn.md) | Yohan | + +## 离线访问 + +你可以通过使用[Docsify](https://docsify.js.org/#/)离线运行这个文档。fork这个repo，在你的本地机器上安装Docsify，然后在这个repo的根文件夹中，输入 `docsify serve`。网站将在你的本地主机上的3000端口服务：`localhost:3000`。 + +## PDF + +所有课程的PDF文件可以在[这里](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf)找到 + +## 其他课程 + +我们的团队还制作了其他课程! 详见： + +- [Machine Learning for Beginners](https://aka.ms/ml-beginners) +- [IoT for Beginners](https://aka.ms/iot-beginners) +- [Data Science for Beginners](https://aka.ms/datascience-beginners) +- [AI for Beginners](https://aka.ms/ai-beginners) From 182ea24d355a78944bd9218d861dc71ee3fe62bd Mon Sep 17 00:00:00 2001 From: SI_Xiaolong Date: Wed, 24 Aug 2022 01:06:25 +0800 Subject: [PATCH 3/4] Translate the README.md of 2-intro-to-css to zh-cn. --- .../translations/README.zh-cn.md | 264 ++++++++++++++++++ 1 file changed, 264 insertions(+) create mode 100644 3-terrarium/2-intro-to-css/translations/README.zh-cn.md diff --git a/3-terrarium/2-intro-to-css/translations/README.zh-cn.md b/3-terrarium/2-intro-to-css/translations/README.zh-cn.md new file mode 100644 index 00000000..518734a3 --- /dev/null +++ b/3-terrarium/2-intro-to-css/translations/README.zh-cn.md @@ -0,0 +1,264 @@ +# 花艺瓶项目 Part 1： CSS 简介 + +![Introduction to CSS](../../../sketchnotes/webdev101-css.png) +> 由 [Tomomi Imura](https://twitter.com/girlie_mac) 绘制 + +## 课前测试 + +[课前测试](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/17) + +### 介绍 + +CSS，即层叠样式表，解决了网络开发的一个重要问题：如何让你的网站看起来更漂亮。对你的应用程序进行样式设计可以使它们更实用、更美观；你还可以使用 CSS 来创建响应式网页设计（RWD）--使你的网页可以根据不同窗口大小改变呈现方式。CSS 不仅可以让你的网页看起来漂亮；它还包括动画和转换，可以为你的网页提供复杂的交互。CSS 工作组帮助维护当前的 CSS 规范；你可以在[万维网联盟的网站](https://www.w3.org/Style/CSS/members).上关注他们的工作。 + +> 注意，CSS 是一种不断发展的语言，就像网络上的所有东西一样，并不是所有的浏览器都支持规范的最新部分。要经常通过 [CanIUse.com](https://caniuse.com) 来检查你的实现在相关浏览器的支持情况。 + +在本课中，我们将为我们的在线花艺瓶添加样式，并进一步了解几个 CSS 概念：层叠（Cascade）、继承（Inheritance）和选择器（Selectors）的使用、定位（Positioning）以及使用 CSS 构建布局（Layout）。在这个过程中，我们将对花艺瓶进行布局，并创建实际的花艺瓶本身。 + +### 先决条件 + +你应该已经为你的水族箱建立了HTML，并准备好了样式。 + +### 任务 + +在你的 `terrarium` 目录中，创建一个名为 `style.css` 的新文件。在 `` 部分导入该文件： + +```html + +``` + +--- + +## 层叠（Cascade） + +层叠样式表包含了样式“层叠”的概念，即一个样式的应用由其优先级来指导。由网站作者设置的样式优先于由浏览器设置的样式。“内联（Inline）”设置的样式优先于外部样式表中设置的样式。 + +### 任务 +在你的 `

` 标签上添加内联样式 `"color: red"`： + +```HTML +

My Terrarium

+``` + +然后，在你的`style.css`文件中添加以下代码： + +```CSS +h1 { + color: blue; +} +``` + +✅ 你的网页显示了哪种颜色？为什么？你能找到一个覆盖该样式的方法吗？你什么时候会想这样做，或者为什么不这样做？ + +--- + +## 继承（Inheritance） + +样式会从一个父级的样式继承到一个子级的样式，这样嵌套的元素就继承了它们父级的样式。 + +### 任务 + +将 body 的字体设置为给定的字体，并检查查看嵌套元素的字体： + +```CSS +body { + font-family: helvetica, arial, sans-serif; +} +``` + +打开你的浏览器控制台的“元素”标签，观察 H1 的字体。如浏览器中所述，它的字体继承自 body： + +![inherited font](images/1.png) + +✅ 你能让被嵌套的样式继承其他属性吗？ + +--- + +## CSS 选择器（Selectors) + +### 标签 + +到目前为止，你的 `style.css` 文件只有几个标签的样式，而且页面看起来很奇怪： + +```CSS +body { + font-family: helvetica, arial, sans-serif; +} + +h1 { + color: #3a241d; + text-align: center; +} +``` + +这种给标签样式的方式只能控制特别的元素。当你需要控制你的花艺瓶中许多植物的样式时，你需要利用 CSS 选择器。 + +### ID（Ids） + +添加一些样式来布局左边和右边的容器。由于只有一个左边的容器和一个右边的容器，它们在标记中被赋予了 id 标记。要为它们设计样式，请使用 `#`。 + +```CSS +#left-container { + background-color: #eee; + width: 15%; + left: 0px; + top: 0px; + position: absolute; + height: 100%; + padding: 10px; +} + +#right-container { + background-color: #eee; + width: 15%; + right: 0px; + top: 0px; + position: absolute; + height: 100%; + padding: 10px; +} +``` + +在这里，你把这些容器用绝对定位放在屏幕的最左边和右边，并对它们的宽度使用了百分比，这样它们就可以在小屏幕上缩放来正常显示。 + +✅ 这段代码相当重复，因此不要照抄；你能找到一个更好的方法来给这些 id 样式，也许可以用一个 id 和一个 class ？你需要修改 HTML 和 CSS。 + +```html +
+``` + +### 类（Classes） + +在上面的例子中，你为屏幕上两个独特的元素设计了样式。如果你想让样式应用于屏幕上的许多元素，你可以使用 CSS 类。利用这种方法在左边和右边的容器中布局植物。 + +请注意，HTML 中的每个植物都有一个 id 和 class 的组合。JavaScript 稍后会利用 id 控制植物的摆放；CSS 则会使用 class 来选择并将样式套用在相应的植物上。 + +```html +
+ plant +
+``` + +在你的 `style.css` 文件中添加以下内容： + +```CSS +.plant-holder { + position: relative; + height: 13%; + left: -10px; +} + +.plant { + position: absolute; + max-width: 150%; + max-height: 150%; + z-index: 2; +} +``` + +这个片段中值得注意的是相对和绝对定位的混合，我们将在下一节中介绍。我们先来看看使用百分比处理高度的方式： + +你将 `plant-holder` 的高度设置为 13%，这是一个很好的数字，可以确保在不需要滚动的情况下，所有的植物都显示在每个垂直容器中。 + +你设置植物支架向左移动，让植物在其容器中居中。图片有大量的透明区域需要被拖拽进来，向左移动可以更好地在屏幕上显示。 + +然后，植物本身被赋予 150% 的最大宽度。这使得它可以随着浏览器的缩小而缩小。试着调整你的浏览器的窗口大小；植物将保持在它们的容器中，靠缩小尺寸以适应窗口大小。 + +同样值得注意的是 z-index 的使用，它可以控制一个元素的相对高度（这样，植物就可以坐在容器的顶部，看起来就像坐在花艺瓶内部一样）。 + +✅ 为什么你同时需要一个 `plant-holder` 和一个植物 CSS 选择器？ + +## 定位（Positioning） + +混合位置属性（包括静态（Static）、相对（Relative）、固定（Fixed）、绝对（Absolute）和粘性（Sticky）位置）可能有点棘手，但如果操作得当，它可以让你很好地控制页面上的元素。 + +绝对定位的元素是相对于其父级元素定位的，如果没有，则根据 body 定位。 + +相对定位的元素是根据 CSS 指定的方向来调整其相对初始位置的位置。 + +在我们的例子中，`plant-holder` 是一个相对定位的元素，被定位在一个绝对定位的容器中。因此，容器被左右夹住，而嵌入其中的 `plant-holder` 会调整它在容器中的位置，为植物的竖排放置提供空间。 + +> `plant` 本身也有绝对定位，这是为了使其可拖动，你可以在下阶段课程中了解更多。 + +✅ 试着切换一下容器和 `plant-holder` 的定位类型。会发生什么？ + +## 布局（Layouts） + +现在，你将利用你所学到的知识来建造花艺瓶本身，所有这些都是用CSS来完成的。 + +首先，使用CSS将 `.terrarium` div 的子级样式化为一个圆角矩形： + +```CSS +.jar-walls { + height: 80%; + width: 60%; + background: #d1e1df; + border-radius: 1rem; + position: absolute; + bottom: 0.5%; + left: 20%; + opacity: 0.5; + z-index: 1; +} + +.jar-top { + width: 50%; + height: 5%; + background: #d1e1df; + position: absolute; + bottom: 80.5%; + left: 25%; + opacity: 0.7; + z-index: 1; +} + +.jar-bottom { + width: 50%; + height: 1%; + background: #d1e1df; + position: absolute; + bottom: 0%; + left: 25%; + opacity: 0.7; +} + +.dirt { + width: 60%; + height: 5%; + background: #3a241d; + position: absolute; + border-radius: 0 0 1rem 1rem; + bottom: 1%; + left: 20%; + opacity: 0.7; + z-index: -1; +} +``` + +注意这里使用的是百分比。如果你缩小你的浏览器窗口，你可以看到罐子是如何缩放的。也可以注意到罐子元素的宽度和高度百分比，以及每个元素是如何被绝对定位在中心，钉在窗口的底部的。 + +我们还使用 `rem` 来表示 `border-radius`，这是一种字体相对的长度。在 [CSS 规范](https://www.w3.org/TR/css-values-3/#font-relative-lengths)中阅读更多关于这种相对测量的类型。 + +✅ 试着改变罐子的颜色和不透明度与泥土的颜色。会发生什么？为什么？ + +--- + +## 🚀挑战 + +在瓶子的左边底部区域添加一个“气泡反光”，使其看起来更像玻璃。你将对 `.jar-glossy-long` 和 `.jar-glossy-short` 进行样式化，使其看起来像一个反射的光泽。下面是它的成果图： + +![花艺瓶成果图](../images/terrarium-final.png) + +要完成课后测验，请通过这个学习模块：[用 CSS 样式化你的 HTML 网页](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics?WT.mc_id=academic-13441-cxa) + +## 课后测试 + +[课后测试](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/18) + +## 复习 & 预习 + +CSS 看似简单明了，但在试图为所有浏览器和所有屏幕尺寸完美地设计一个应用程序时，却存在许多挑战。CSS-Grid 和 Flexbox 是为了使这项工作更有条理、更可靠而开发的工具。通过游玩 [Flexbox Froggy](https://flexboxfroggy.com/) 和 [Grid Garden](https://codepip.com/games/grid-garden/) 来了解这些工具。 + +## 作业 + +[CSS 重构](assignment.md) From 47449916b2d96a1d500d99aed8118451cb1f93da Mon Sep 17 00:00:00 2001 From: SI_Xiaolong Date: Wed, 24 Aug 2022 01:12:30 +0800 Subject: [PATCH 4/4] Fix some link errors in README.zh-cn.md. --- translations/README.zh-cn.md | 48 ++++++++++++++++++------------------ 1 file changed, 24 insertions(+), 24 deletions(-) diff --git a/translations/README.zh-cn.md b/translations/README.zh-cn.md index 27226847..0e48946d 100644 --- a/translations/README.zh-cn.md +++ b/translations/README.zh-cn.md @@ -69,30 +69,30 @@ Gif by [Mohit Jaisal](https://linkedin.com/in/mohitjaisal) | | 项目名称 | 教授概念 | 学习目标 | 课程链接 | 课程作者 | | :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: | -| 01 | 入门篇 | 编程语言和行业工具介绍 | 了解大多数编程语言背后的基本支撑，以及帮助专业开发人员完成工作的软件。 | [编程语言和工具介绍](/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.zh-cn.md) | Jasmine | -| 02 | 入门篇 | GitHub的基础知识，包括与一个团队合作 | 如何在你的项目中使用GitHub，如何在代码库中与他人合作 | [GitHub介绍](/1-getting-started-lessons/2-github-basics/translations/README.zh-cn.md) | Floor | -| 03 | 入门篇 | 无障碍性 | 学习网络无障碍的基本知识 | [无障碍基础知识](/1-getting-started-lessons/3-accessibility/translations/README.zh-cn.md) | Christopher | -| 04 | JS基础 | JavaScript数据类型 | JavaScript数据类型的基础知识 | [数据类型](/2-js-basics/1-data-types/translations/README.zh-cn.md) | Jasmine | -| 05 | JS基础 | 函数和方法 | 了解管理应用程序逻辑流的函数和方法 | [函数和方法](/2-js-basics/2-functions-methods/translations/README.zh-cn.md) | Jasmine and Christopher | -| 06 | JS基础 | 用JS做出决定 | 学习如何使用决策方法在你的代码中创建条件 | [做出决定](/2-js-basics/3-making-decisions/translations/README.zh-cn.md) | Jasmine | -| 07 | JS基础 | 数组和循环 | 在JavaScript中使用数组和循环来处理数据 | [数组和循环](/2-js-basics/4-arrays-loops/translations/README.zh-cn.md) | Jasmine | -| 08 | [花艺瓶](/3-terrarium/solution/translations/README.zh-cn.md) | 实践中的HTML | 构建HTML以创建一个在线花艺瓶，重点是构建一个布局 | [HTML简介](/3-terrarium/1-intro-to-html/translations/README.zh-cn.md) | Jen | -| 09 | [花艺瓶](/3-terrarium/solution/translations/README.zh-cn.md) | 实践中的CSS | 构建CSS，为在线花艺瓶设计样式，重点是CSS的基础知识，包括使页面具有响应性 | [CSS简介](/3-terrarium/2-intro-to-css/translations/README.zh-cn.md) | Jen | -| 10 | [花艺瓶](/3-terrarium/solution/translations/README.zh-cn.md) | JavaScript闭包，DOM操作 | 构建JavaScript，使水族馆成为一个拖/放界面，重点是闭包和DOM操作 | [JavaScript闭包，DOM操作](/3-terrarium/3-intro-to-DOM-and-closures/translations/README.zh-cn.md) | Jen | -| 11 | [打字游戏](/4-typing-game/solution/translations/README.zh-cn.md) | 建立一个打字游戏 | 学习如何使用键盘事件来驱动你的JavaScript应用程序的逻辑 | [事件驱动编程](/4-typing-game/typing-game/translations/README.zh-cn.md) | Christopher | -| 12 | [绿色浏览器扩展](/5-browser-extension/solution/translations/README.zh-cn.md) | 与浏览器协作 | 了解浏览器是如何工作的，它们的历史，以及如何为浏览器扩展的第一批元素提供支架 | [关于浏览器](/5-browser-extension/1-about-browsers/translations/README.zh-cn.md) | Jen | -| 13 | [绿色浏览器扩展](/5-browser-extension/solution/translations/README.zh-cn.md) | 构建一个表单，调用一个API，并在本地存储中存储变量 | 构建你的浏览器扩展的JavaScript元素，使用存储在本地存储中的变量调用API | [API、表单和本地存储](/5-browser-extension/2-forms-browsers-local-storage/translations/README.zh-cn.md) | Jen | -| 14 | [绿色浏览器扩展](/5-browser-extension/solution/translations/README.zh-cn.md) | 浏览器中的后台进程，网络性能 | 使用浏览器的后台进程来管理扩展的图标；了解网络性能和一些优化 | [后台任务和性能](/5-browser-extension/3-background-tasks-and-performance/translations/README.zh-cn.md) | Jen | -| 15 | [太空游戏](/6-space-game/solution/translations/README.zh-cn.md) | 用JavaScript进行更高级的游戏开发 | 学习使用类和组合的继承以及Pub/Sub模式，为建立游戏做准备。 | [高级游戏开发简介](/6-space-game/1-introduction/translations/README.zh-cn.md) | Chris | -| 16 | [太空游戏](/6-space-game/solution/translations/README.zh-cn.md) | 在Canvas上绘图 | 了解用于在屏幕上绘制元素的Canvas API | [在Canvas上绘图](/6-space-game/2-drawing-to-canvas/translations/README.zh-cn.md) | Chris | -| 17 | [太空游戏](/6-space-game/solution/translations/README.zh-cn.md) | 在屏幕上移动元素 | 了解元素如何利用软轴坐标和Canvas API获得运动效果 | [移动元素](/6-space-game/3-moving-elements-around/translations/README.zh-cn.md) | Chris | -| 18 | [太空游戏](/6-space-game/solution/translations/README.zh-cn.md) | 碰撞检测 | 使用按键使元素相互碰撞和反应，并提供冷却功能以确保游戏的性能 | [碰撞检测](/6-space-game/4-collision-detection/translations/README.zh-cn.md) | Chris | -| 19 | [太空游戏](/6-space-game/solution/translations/README.zh-cn.md) | 记分 | 根据游戏的状态和性能进行数学计算 | [记分](/6-space-game/5-keeping-score/translations/README.zh-cn.md) | Chris | -| 20 | [太空游戏](/6-space-game/solution/translations/README.zh-cn.md) | 结束和重启游戏 | 学习结束和重启游戏的方法，包括清理资产和重设变量值 | [结束的条件](/6-space-game/6-end-condition/translations/README.zh-cn.md) | Chris | -| 21 | [银行应用](/7-bank-project/solution/translations/README.zh-cn.md) | 网络应用程序中的HTML模板和路线 | 学习如何使用路由和HTML模板创建多页面网站架构的支架 | [HTML模板和路线](/7-bank-project/1-template-route/translations/README.zh-cn.md) | Yohan | -| 22 | [银行应用](/7-bank-project/solution/translations/README.zh-cn.md) | 建立一个登录和注册表格 | 学习构建表单和交接验证程序的知识 | [表格](/7-bank-project/2-forms/translations/README.zh-cn.md) | Yohan | -| 23 | [银行应用](/7-bank-project/solution/translations/README.zh-cn.md) | 获取和使用数据的方法 | 数据如何流入和流出你的应用程序，如何获取它，存储它，并处理它 | [数据](/7-bank-project/3-data/translations/README.zh-cn.md) | Yohan | -| 24 | [银行应用](/7-bank-project/solution/translations/README.zh-cn.md) | 国家管理的概念 | 了解你的应用程序如何保留状态以及如何以编程方式管理它 | [国家管理](/7-bank-project/4-state-management/translations/README.zh-cn.md) | Yohan | +| 01 | 入门篇 | 编程语言和行业工具介绍 | 了解大多数编程语言背后的基本支撑，以及帮助专业开发人员完成工作的软件。 | [编程语言和工具介绍](/1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | +| 02 | 入门篇 | GitHub的基础知识，包括与一个团队合作 | 如何在你的项目中使用GitHub，如何在代码库中与他人合作 | [GitHub介绍](/1-getting-started-lessons/2-github-basics/README.md) | Floor | +| 03 | 入门篇 | 无障碍性 | 学习网络无障碍的基本知识 | [无障碍基础知识](/1-getting-started-lessons/3-accessibility/README.md) | Christopher | +| 04 | JS基础 | JavaScript数据类型 | JavaScript数据类型的基础知识 | [数据类型](/2-js-basics/1-data-types/README.md) | Jasmine | +| 05 | JS基础 | 函数和方法 | 了解管理应用程序逻辑流的函数和方法 | [函数和方法](/2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher | +| 06 | JS基础 | 用JS做出决定 | 学习如何使用决策方法在你的代码中创建条件 | [做出决定](/2-js-basics/3-making-decisions/README.md) | Jasmine | +| 07 | JS基础 | 数组和循环 | 在JavaScript中使用数组和循环来处理数据 | [数组和循环](/2-js-basics/4-arrays-loops/README.md) | Jasmine | +| 08 | [花艺瓶](/3-terrarium/solution/README.md) | 实践中的HTML | 构建HTML以创建一个在线花艺瓶，重点是构建一个布局 | [HTML简介](/3-terrarium/1-intro-to-html/README.md) | Jen | +| 09 | [花艺瓶](/3-terrarium/solution/README.md) | 实践中的CSS | 构建CSS，为在线花艺瓶设计样式，重点是CSS的基础知识，包括使页面具有响应性 | [CSS简介](/3-terrarium/2-intro-to-css/README.md) | Jen | +| 10 | [花艺瓶](/3-terrarium/solution/README.md) | JavaScript闭包，DOM操作 | 构建JavaScript，使水族馆成为一个拖/放界面，重点是闭包和DOM操作 | [JavaScript闭包，DOM操作](/3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | +| 11 | [打字游戏](/4-typing-game/solution/README.md) | 建立一个打字游戏 | 学习如何使用键盘事件来驱动你的JavaScript应用程序的逻辑 | [事件驱动编程](/4-typing-game/typing-game/README.md) | Christopher | +| 12 | [绿色浏览器扩展](/5-browser-extension/solution/README.md) | 与浏览器协作 | 了解浏览器是如何工作的，它们的历史，以及如何为浏览器扩展的第一批元素提供支架 | [关于浏览器](/5-browser-extension/1-about-browsers/README.md) | Jen | +| 13 | [绿色浏览器扩展](/5-browser-extension/solution/README.md) | 构建一个表单，调用一个API，并在本地存储中存储变量 | 构建你的浏览器扩展的JavaScript元素，使用存储在本地存储中的变量调用API | [API、表单和本地存储](/5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | +| 14 | [绿色浏览器扩展](/5-browser-extension/solution/README.md) | 浏览器中的后台进程，网络性能 | 使用浏览器的后台进程来管理扩展的图标；了解网络性能和一些优化 | [后台任务和性能](/5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | +| 15 | [太空游戏](/6-space-game/solution/README.md) | 用JavaScript进行更高级的游戏开发 | 学习使用类和组合的继承以及Pub/Sub模式，为建立游戏做准备。 | [高级游戏开发简介](/6-space-game/1-introduction/README.md) | Chris | +| 16 | [太空游戏](/6-space-game/solution/README.md) | 在Canvas上绘图 | 了解用于在屏幕上绘制元素的Canvas API | [在Canvas上绘图](/6-space-game/2-drawing-to-canvas/README.md) | Chris | +| 17 | [太空游戏](/6-space-game/solution/README.md) | 在屏幕上移动元素 | 了解元素如何利用软轴坐标和Canvas API获得运动效果 | [移动元素](/6-space-game/3-moving-elements-around/README.md) | Chris | +| 18 | [太空游戏](/6-space-game/solution/README.md) | 碰撞检测 | 使用按键使元素相互碰撞和反应，并提供冷却功能以确保游戏的性能 | [碰撞检测](/6-space-game/4-collision-detection/README.md) | Chris | +| 19 | [太空游戏](/6-space-game/solution/README.md) | 记分 | 根据游戏的状态和性能进行数学计算 | [记分](/6-space-game/5-keeping-score/README.md) | Chris | +| 20 | [太空游戏](/6-space-game/solution/README.md) | 结束和重启游戏 | 学习结束和重启游戏的方法，包括清理资产和重设变量值 | [结束的条件](/6-space-game/6-end-condition/README.md) | Chris | +| 21 | [银行应用](/7-bank-project/solution/README.md) | 网络应用程序中的HTML模板和路线 | 学习如何使用路由和HTML模板创建多页面网站架构的支架 | [HTML模板和路线](/7-bank-project/1-template-route/README.md) | Yohan | +| 22 | [银行应用](/7-bank-project/solution/README.md) | 建立一个登录和注册表格 | 学习构建表单和交接验证程序的知识 | [表格](/7-bank-project/2-forms/README.md) | Yohan | +| 23 | [银行应用](/7-bank-project/solution/README.md) | 获取和使用数据的方法 | 数据如何流入和流出你的应用程序，如何获取它，存储它，并处理它 | [数据](/7-bank-project/3-data/README.md) | Yohan | +| 24 | [银行应用](/7-bank-project/solution/README.md) | 国家管理的概念 | 了解你的应用程序如何保留状态以及如何以编程方式管理它 | [国家管理](/7-bank-project/4-state-management/README.md) | Yohan | ## 离线访问