Web-Dev-For-Beginners/translations/zh

初学者的网页开发课程 - 一套完整的学习计划

通过微软云倡导者提供的12周综合课程，学习网页开发的基础知识。24节课涵盖了JavaScript、CSS和HTML，通过实践项目如生态瓶、浏览器扩展和太空游戏进行学习。课程包括测验、讨论和实践作业，帮助你提升技能并优化知识保留效果。今天就开始你的编程之旅吧！

加入Azure AI Foundry Discord社区

按照以下步骤开始使用这些资源：

1. Fork仓库：点击
2. 克隆仓库：git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
3. 加入Azure AI Foundry Discord，与专家和其他开发者交流

🌐 多语言支持

通过GitHub Action支持（自动更新，始终保持最新）

法语 | 西班牙语 | 德语 | 俄语 | 阿拉伯语 | 波斯语 | 乌尔都语 | 中文（简体） | 中文（繁体，澳门） | 中文（繁体，香港） | 中文（繁体，台湾） | 日语 | 韩语 | 印地语 | 孟加拉语 | 马拉地语 | 尼泊尔语 | 旁遮普语（古木基文） | 葡萄牙语（葡萄牙） | 葡萄牙语（巴西） | 意大利语 | 波兰语 | 土耳其语 | 希腊语 | 泰语 | 瑞典语 | 丹麦语 | 挪威语 | 芬兰语 | 荷兰语 | 希伯来语 | 越南语 | 印尼语 | 马来语 | 他加禄语（菲律宾语） | 斯瓦希里语 | 匈牙利语 | 捷克语 | 斯洛伐克语 | 罗马尼亚语 | 保加利亚语 | 塞尔维亚语（西里尔文） | 克罗地亚语 | 斯洛文尼亚语 | 乌克兰语 | 缅甸语（缅甸）

如果你希望支持其他语言，支持的语言列表在这里

🧑‍🎓 你是学生吗？

访问 学生中心页面，你可以找到初学者资源、学生礼包，甚至获取免费证书的方式。这个页面值得收藏，并定期查看，因为我们每月都会更新内容。

📣 公告 - 使用生成式AI构建新项目

刚刚添加了新的AI助手项目，快来看看 项目

📣 公告 - 新的生成式AI课程

我们刚刚发布了关于JavaScript的生成式AI课程！

不要错过我们的新课程！

访问 https://aka.ms/genai-js-course 开始学习！

• 课程内容涵盖从基础到RAG的所有内容。
• 使用生成式AI和我们的配套应用与历史人物互动。
• 有趣且引人入胜的叙事，你将进行时间旅行！

每节课都包括一个作业、知识检查和挑战，帮助你学习以下主题：

• 提示和提示工程
• 文本和图像应用生成
• 搜索应用

访问 https://aka.ms/genai-js-course 开始学习！

🌱 开始学习

教师们，我们提供了一些建议供您使用这套课程。我们期待您在讨论论坛中提供反馈！

学习者，每节课从课前测验开始，阅读课程材料，完成各种活动，并通过课后测验检查您的理解。

为了提升学习体验，与同伴一起完成项目！我们鼓励在讨论论坛中进行讨论，我们的版主团队会回答您的问题。

为了进一步学习，我们强烈推荐探索 Microsoft Learn 以获取更多学习材料。

📋 设置您的环境

这套课程已经准备好了开发环境！您可以选择在 Codespace（基于浏览器，无需安装的环境）中运行课程，或者在本地计算机上使用文本编辑器如 Visual Studio Code。

创建您的仓库

为了方便保存您的学习成果，建议您创建自己的仓库副本。您可以通过点击页面顶部的 Use this template 按钮来完成。这将在您的GitHub账户中创建一个包含课程副本的新仓库。

按照以下步骤操作：

1. Fork仓库：点击页面右上角的 "Fork" 按钮。
2. 克隆仓库：git clone https://github.com/microsoft/Web-Dev-For-Beginners.git

在Codespace中运行课程

在您创建的仓库副本中，点击 Code 按钮并选择 Open with Codespaces。这将为您创建一个新的Codespace以供使用。

在本地计算机上运行课程

要在本地计算机上运行课程，您需要一个文本编辑器、浏览器和命令行工具。我们的第一节课，编程语言和工具介绍，将指导您选择适合您的工具。

我们推荐使用 Visual Studio Code 作为编辑器，它还内置了 终端。您可以在这里下载Visual Studio Code。

1. 将您的仓库克隆到计算机。您可以通过点击 Code 按钮并复制URL来完成：

   CodeSpace

   然后，在 Visual Studio Code 的 终端 中运行以下命令，将 <your-repository-url> 替换为您刚刚复制的URL：

   git clone <your-repository-url>
   

2. 在Visual Studio Code中打开文件夹。您可以通过点击 File > Open Folder 并选择您刚刚克隆的文件夹来完成。

推荐的Visual Studio Code扩展：

• Live Server - 在Visual Studio Code中预览HTML页面
• Copilot - 帮助您更快地编写代码

📂 每节课包括：

• 可选的手绘笔记
• 可选的补充视频
• 课前热身测验
• 书面课程
• 对于基于项目的课程，提供逐步指导如何构建项目
• 知识检查
• 挑战
• 补充阅读材料
• 作业
• 课后测验

关于测验的说明：所有测验都包含在 Quiz-app 文件夹中，共有 48 个测验，每个测验包含三个问题。它们可以在 这里 找到。测验应用可以在本地运行或部署到 Azure，请按照 quiz-app 文件夹中的说明操作。

🗃️ 课程

	项目名称	教授的概念	学习目标	相关课程链接	作者
01	入门	编程简介及开发工具	学习大多数编程语言的基本原理，以及帮助专业开发人员完成工作的相关软件	编程语言和开发工具简介	Jasmine
02	入门	GitHub 基础知识，包括团队协作	学习如何在项目中使用 GitHub，以及如何与他人协作开发代码库	GitHub 简介	Floor
03	入门	无障碍性	学习网页无障碍性的基础知识	无障碍性基础	Christopher
04	JS 基础	JavaScript 数据类型	学习 JavaScript 数据类型的基础知识	数据类型	Jasmine
05	JS 基础	函数和方法	学习如何使用函数和方法来管理应用程序的逻辑流	函数和方法	Jasmine 和 Christopher
06	JS 基础	使用 JS 做决策	学习如何使用决策方法在代码中创建条件	做决策	Jasmine
07	JS 基础	数组和循环	使用 JavaScript 中的数组和循环处理数据	数组和循环	Jasmine
08	生态瓶	HTML 实践	构建 HTML 以创建在线生态瓶，重点是布局构建	HTML 简介	Jen
09	生态瓶	CSS 实践	构建 CSS 以为在线生态瓶设计样式，重点是 CSS 基础知识，包括使页面响应式	CSS 简介	Jen
10	生态瓶	JavaScript 闭包和 DOM 操作	构建 JavaScript 使生态瓶具备拖放功能，重点是闭包和 DOM 操作	JavaScript 闭包和 DOM 操作	Jen
11	打字游戏	构建打字游戏	学习如何使用键盘事件驱动 JavaScript 应用程序的逻辑	事件驱动编程	Christopher
12	绿色浏览器扩展	浏览器相关知识	学习浏览器的工作原理及历史，并搭建浏览器扩展的初始元素	关于浏览器	Jen
13	绿色浏览器扩展	构建表单、调用 API 并将变量存储在本地存储中	构建浏览器扩展的 JavaScript 元素，通过存储在本地存储中的变量调用 API	API、表单和本地存储	Jen
14	绿色浏览器扩展	浏览器后台进程和网页性能	使用浏览器的后台进程管理扩展图标；学习网页性能及一些优化方法	后台任务和性能	Jen
15	太空游戏	更高级的 JavaScript 游戏开发	学习使用类和组合进行继承，以及发布/订阅模式，为构建游戏做准备	高级游戏开发简介	Chris
16	太空游戏	绘制到画布	学习 Canvas API，用于将元素绘制到屏幕	绘制到画布	Chris
17	太空游戏	在屏幕上移动元素	了解如何使用笛卡尔坐标和 Canvas API 使元素获得运动	移动元素	Chris
18	太空游戏	碰撞检测	使元素通过按键碰撞并相互反应，并提供冷却功能以确保游戏性能	碰撞检测	Chris
19	太空游戏	计分	根据游戏状态和表现进行数学计算	计分	Chris
20	太空游戏	结束和重启游戏	学习如何结束和重启游戏，包括清理资源和重置变量值	结束条件	Chris
21	银行应用	网页应用中的 HTML 模板和路由	学习如何使用路由和 HTML 模板创建多页面网站的架构	HTML 模板和路由	Yohan
22	银行应用	构建登录和注册表单	学习如何构建表单并处理验证逻辑	表单	Yohan
23	银行应用	获取和使用数据的方法	学习数据如何在应用程序中流动，如何获取、存储和处理数据	数据	Yohan
24	银行应用	状态管理概念	学习应用程序如何保持状态以及如何以编程方式管理状态	状态管理	Yohan
25	浏览器/VSCode 编辑器	使用 VSCode	学习如何使用代码编辑器	使用 VSCode 编辑器	Chris
26	AI 助手	使用 AI	学习如何构建自己的 AI 助手	AI 助手项目	Chris

🏫 教学法

我们的课程设计基于两个关键教学原则：

• 项目驱动学习
• 频繁测验

该课程教授 JavaScript、HTML 和 CSS 的基础知识，以及当今网页开发人员使用的最新工具和技术。学生将有机会通过构建打字游戏、虚拟生态瓶、环保浏览器扩展、太空入侵者风格游戏以及企业银行应用来获得实践经验。到课程结束时，学生将对网页开发有扎实的理解。

🎓 您可以在 Microsoft Learn 上以 学习路径 的形式学习本课程的前几节课！

通过确保内容与项目相结合，学习过程变得更加有趣，学生对概念的记忆也会得到增强。我们还编写了几节 JavaScript 基础知识的入门课程，并配有 "JavaScript 初学者系列" 视频教程中的视频，其中一些作者也参与了本课程的编写。

此外，课前的低压力测验可以让学生专注于学习主题，而课后的第二次测验可以进一步巩固记忆。本课程设计灵活有趣，可以完整学习，也可以部分学习。项目从小型开始，到 12 周周期结束时逐渐变得复杂。

虽然我们有意避免引入 JavaScript 框架，以专注于网页开发人员在采用框架之前所需的基本技能，但完成本课程后的一个良好下一步是通过另一系列视频学习 Node.js："Node.js 初学者系列"。

请访问我们的 行为准则 和 贡献指南。我们欢迎您的建设性反馈！

🧭 离线访问

您可以使用 Docsify 离线运行此文档。Fork 此仓库，在本地机器上 安装 Docsify，然后在此仓库的根文件夹中输入 docsify serve。网站将在本地的 3000 端口上运行：localhost:3000。

📘 PDF

所有课程的 PDF 可在 这里 找到。

🎒 其他课程

我们的团队还制作了其他课程！请查看：

• MCP 初学者课程
• 边缘 AI 初学者课程
• AI 代理初学者课程
• 生成式 AI 初学者课程 .NET
• 使用 JavaScript 的生成式 AI
• 使用 Java 的生成式 AI
• AI 初学者课程
• 数据科学初学者课程
• 机器学习初学者课程
• 网络安全初学者课程
• 网页开发初学者课程
• 物联网初学者课程
• XR 开发初学者课程
• 掌握 GitHub Copilot 用于代理编程
• 掌握 GitHub Copilot：适用于 C#/.NET 开发者
• 选择你的 Copilot 冒险之旅

获取帮助

如果遇到困难或对构建 AI 应用有任何疑问，请加入：

如果在构建过程中有产品反馈或遇到错误，请访问：

许可证

此仓库使用 MIT 许可证。有关更多信息，请参阅 LICENSE 文件。

---

免责声明：
本文档使用AI翻译服务 Co-op Translator 进行翻译。尽管我们努力确保翻译的准确性，但请注意，自动翻译可能包含错误或不准确之处。原始语言的文档应被视为权威来源。对于关键信息，建议使用专业人工翻译。我们不对因使用此翻译而产生的任何误解或误读承担责任。