msb-public
/
Web-Dev-For-Beginners
mirror of https://github.com/microsoft/Web-Dev-For-Beginners.git
1
0
Code Issues Projects Releases Wiki Activity

Update README.zh-cn.md

Browse Source
pull/1134/head
Zirnc 2 years ago committed by GitHub
parent 207136a537
commit 8bd0cbf084
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 26 additions and 24 deletions
Show Stats Download Patch File Download Diff File

50
translations/README.zh-cn.md
Unescape View File

@ -12,9 +12,9 @@
# 初学者的 Web 开发课程 # 初学者的 Web 开发课程
微软的Azure云倡导者很高兴地提供一个为期12周的24课时的课程，所有关于JavaScript、CSS和HTML的基础知识。每节课都包括课前和课后测验、完成课程的书面说明、解决方案、作业等。我们以项目为基础的教学方法使你能够边学边做，这是一种证明新技能能够“扎根”的方法。 微软的 Azure 云倡导者很高兴地提供一个为期 12 周的 24 课时的课程，所有关于 JavaScript、CSS 和 HTML 的基础知识。每节课都包括课前和课后测验、完成课程的书面说明、解决方案、作业等。我们以项目为基础的教学方法使你能够边学边做，这是一种证明新技能能够“扎根”的方法。
**衷心感谢我们的作者Jen Looper、Chris Noring、Christopher Harrison、Jasmine Greenaway、Yohan Lasorsa、Floor Drees和手绘艺术家Tomomi Imura!** **衷心感谢我们的作者 Jen Looper、Chris Noring、Christopher Harrison、Jasmine Greenaway、Yohan Lasorsa、Floor Drees 和手绘艺术家 Tomomi Imura!**
# 你是学生吗？ # 你是学生吗？
@ -28,7 +28,7 @@
> **对于老师**, 我们已经有了一些关于如何使用该课程的[建议](for-teachers.zh-cn.md)。 我们希望您能在我们的[讨论区](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)提出反馈意见! > **对于老师**, 我们已经有了一些关于如何使用该课程的[建议](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) 和观看下面提到的视频。 > **[对于学生](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) [![Promo video](../images/web.gif)](https://youtube.com/watch?v=R1wrdtmBSII)
@ -38,15 +38,15 @@ Gif by [Mohit Jaisal](https://linkedin.com/in/mohitjaisal)
## 教学宗旨 ## 教学宗旨
在建立这个课程时，我们选择了两个教学宗旨：确保它是基于项目的，并包括频繁的测验。在本系列课程结束时，学生将建立一个打字游戏，一个虚拟的花艺瓶，一个“绿色”浏览器扩展，一个“太空入侵者”类型的游戏，以及一个商业类型的银行应用程序，并将学会JavaScript、HTML和CSS的基础知识，以及当今网络开发人员的现代工具链。 在建立这个课程时，我们选择了两个教学宗旨：确保它是基于项目的，并包括频繁的测验。在本系列课程结束时，学生将建立一个打字游戏，一个虚拟的花艺瓶，一个“绿色”浏览器扩展，一个“太空入侵者”类型的游戏，以及一个商业类型的银行应用程序，并将学会 JavaScript、HTML 和 CSS 的基础知识，以及当今网络开发人员的现代工具链。
> 🎓 你可以把这个课程的前几节课作为Microsoft Learn的[学习路径](https://docs.microsoft.com/learn/paths/web-development-101?WT.mc_id=academic-13441-cxa)来学习! > 🎓 你可以把这个课程的前几节课作为 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)”的视频教程集，其中一些作者为这个课程做出了贡献。 通过确保内容与项目相一致，这个过程对学生来说更有吸引力，对概念的保持也会增强。我们还编写了几节关于 JavaScript 基础知识的入门课程来介绍概念，并配以“[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript?WT.mc_id=academic-13441-cxa)”的视频教程集，其中一些作者为这个课程做出了贡献。
此外，课前的低风险测验确定了学生对学习一个主题的意向如何，而课后的第二次测验则确保了学生知识的进一步保留。这个课程的设计是灵活而有趣的，可以全部或部分地学习。这些项目开始时很简单，到12周的周期结束时变得越来越复杂。 此外，课前的低风险测验确定了学生对学习一个主题的意向如何，而课后的第二次测验则确保了学生知识的进一步保留。这个课程的设计是灵活而有趣的，可以全部或部分地学习。这些项目开始时很简单，到 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。 虽然我们有意避免介绍 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)指南。我们欢迎你的建设性的反馈! > 查看我们的[行为准则](../CODE_OF_CONDUCT.md)、[贡献](../CONTRIBUTING.md)和[翻译](../TRANSLATIONS.md)指南。我们欢迎你的建设性的反馈!
@ -63,44 +63,44 @@ Gif by [Mohit Jaisal](https://linkedin.com/in/mohitjaisal)
- 作业 - 作业
- 课后小测验 - 课后小测验
> **关于测验的说明**: 所有的测验都包含在[这个应用程序](https://ashy-river-0debb7803.1.azurestaticapps.net/)中，总共有48个测验，每个测验三个问题。它们在课程中被链接，但测验应用程序可以在本地运行；按照`quiz-app`文件夹中的指示操作。它们正逐渐被本地化。 > **关于测验的说明**: 所有的测验都包含在[这个应用程序](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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 07 | JS 基础 | 数组和循环 | 在JavaScript中使用数组和循环来处理数据 | [数组和循环](/2-js-basics/4-arrays-loops/translations/README.zh-cn.md) | Jasmine |
| 08 | [花艺瓶](/3-terrarium/solution/README.md) | 实践中的HTML | 构建HTML以创建一个在线花艺瓶，重点是构建一个布局 | [HTML简介](/3-terrarium/1-intro-to-html/translations/README.zh-cn.md) | Jen | | 08 | [花艺瓶](/3-terrarium/solution/README.md) | 实践中的 HTML | 构建HTML以创建一个在线花艺瓶，重点是构建一个布局 | [HTML简介](/3-terrarium/1-intro-to-html/translations/README.zh-cn.md) | Jen |
| 09 | [花艺瓶](/3-terrarium/solution/README.md) | 实践中的CSS | 构建CSS，为在线花艺瓶设计样式，重点是CSS的基础知识，包括使页面具有响应性 | [CSS简介](/3-terrarium/2-intro-to-css/translations/README.zh-cn.md) | Jen | | 09 | [花艺瓶](/3-terrarium/solution/README.md) | 实践中的 CSS | 构建CSS，为在线花艺瓶设计样式，重点是 CSS 的基础知识，包括使页面具有响应性 | [CSS简介](/3-terrarium/2-intro-to-css/translations/README.zh-cn.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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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`。 你可以通过使用 [Docsify](https://docsify.js.org/#/) 离线运行这个文档。fork 这个 repo，在你的本地机器上安装 Docsify，然后在这个 repo 的根文件夹中，输入 `docsify serve`。网站将在你的本地主机上的 3000 端口服务：`localhost:3000`。
## PDF ## PDF
所有课程的PDF文件可以在[这里](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf)找到 所有课程的 PDF 文件可以在[这里](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf)找到
## 其他课程 ## 其他课程
@ -110,3 +110,5 @@ Gif by [Mohit Jaisal](https://linkedin.com/in/mohitjaisal)
- [IoT for Beginners](https://aka.ms/iot-beginners) - [IoT for Beginners](https://aka.ms/iot-beginners)
- [Data Science for Beginners](https://aka.ms/datascience-beginners) - [Data Science for Beginners](https://aka.ms/datascience-beginners)
- [AI for Beginners](https://aka.ms/ai-beginners) - [AI for Beginners](https://aka.ms/ai-beginners)
- [XR Development for Beginners](https://aka.ms/xr-dev-for-beginners)

Write Preview
Loading…
Cancel
Save