[](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE) [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/) [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/) [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/) [](http://makeapullrequest.com) [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/) [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/) [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/) [](https://discord.gg/nTYy5BXMWG) # 面向初学者的网页开发课程 通过微软云倡导者为期12周的综合课程学习网页开发的基础知识。24节课中，每节课都通过实践项目，如生态瓶、浏览器扩展程序和太空游戏，深入讲解JavaScript、CSS和HTML。参与测验、讨论和实操任务。借助我们高效的项目驱动教学法，提高你的技能水平并优化知识掌握。马上开始你的编码之旅吧！ 加入 Azure AI Foundry Discord 社区 [](https://discord.gg/nTYy5BXMWG) 按照以下步骤开始使用这些资源： 1. **Fork 仓库**：点击 [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork) 2. **克隆仓库**：`git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` 3. [**加入 Azure AI Foundry Discord，与专家和开发者交流**](https://discord.com/invite/ByRwuEEgH4) ### 🌐 多语言支持 #### 通过 GitHub Actions 支持（自动且始终保持最新） [阿拉伯语](../ar/README.md) | [孟加拉语](../bn/README.md) | [保加利亚语](../bg/README.md) | [缅甸语 (Myanmar)](../my/README.md) | [简体中文](./README.md) | [繁体中文 (香港)](../hk/README.md) | [繁体中文 (澳门)](../mo/README.md) | [繁体中文 (台湾)](../tw/README.md) | [克罗地亚语](../hr/README.md) | [捷克语](../cs/README.md) | [丹麦语](../da/README.md) | [荷兰语](../nl/README.md) | [爱沙尼亚语](../et/README.md) | [芬兰语](../fi/README.md) | [法语](../fr/README.md) | [德语](../de/README.md) | [希腊语](../el/README.md) | [希伯来语](../he/README.md) | [印地语](../hi/README.md) | [匈牙利语](../hu/README.md) | [印尼语](../id/README.md) | [意大利语](../it/README.md) | [日语](../ja/README.md) | [卡纳达语](../kn/README.md) | [韩语](../ko/README.md) | [立陶宛语](../lt/README.md) | [马来语](../ms/README.md) | [马拉雅拉姆语](../ml/README.md) | [马拉地语](../mr/README.md) | [尼泊尔语](../ne/README.md) | [尼日利亚皮钦语](../pcm/README.md) | [挪威语](../no/README.md) | [波斯语 (法尔西语)](../fa/README.md) | [波兰语](../pl/README.md) | [巴西葡萄牙语](../br/README.md) | [葡萄牙语 (葡萄牙)](../pt/README.md) | [旁遮普语 (古鲁穆奇文)](../pa/README.md) | [罗马尼亚语](../ro/README.md) | [俄语](../ru/README.md) | [塞尔维亚语 (西里尔字母)](../sr/README.md) | [斯洛伐克语](../sk/README.md) | [斯洛文尼亚语](../sl/README.md) | [西班牙语](../es/README.md) | [斯瓦希里语](../sw/README.md) | [瑞典语](../sv/README.md) | [他加禄语 (菲律宾语)](../tl/README.md) | [泰米尔语](../ta/README.md) | [泰卢固语](../te/README.md) | [泰语](../th/README.md) | [土耳其语](../tr/README.md) | [乌克兰语](../uk/README.md) | [乌尔都语](../ur/README.md) | [越南语](../vi/README.md) > **想本地克隆？** > 本仓库包含50多种语言的翻译，显著增加了下载大小。若想不带翻译克隆，请使用稀疏检出： > ```bash > git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git > cd Web-Dev-For-Beginners > git sparse-checkout set --no-cone '/*' '!translations' '!translated_images' > ``` > 这样您就可以高速下载到完成课程所需的所有内容。 **如果您希望支持其他翻译语言，列表见 [这里](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)** [](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners) #### 🧑‍🎓 _你是学生吗？_ 访问 [**学生中心页面**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon)，这里有初学者资源、学生包，甚至获取免费证书凭证的方法。请收藏此页并定期查看，我们每月更换内容。 ### 📣 通告 - 新增 GitHub Copilot Agent 模式挑战任务！ 新增挑战，查看大多数章节中的 “GitHub Copilot Agent Challenge 🚀”。这是使用 GitHub Copilot 和 Agent 模式完成的新挑战。如果你以前没用过 Agent 模式，它不仅能生成文本，还能创建和编辑文件、运行命令等。 ### 📣 通告 - _新增使用生成式 AI 构建的项目_ 新增 AI 助手项目，快来看看 [项目](./9-chat-project/README.md) ### 📣 通告 - _面向 JavaScript 的生成式 AI 新课程发布_ 不要错过我们的生成式 AI 新课程！ 访问 [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) 开始学习！  - 涵盖从基础到 RAG 的课程。 - 使用生成式 AI 和我们的配套应用与历史人物互动。 - 趣味且引人入胜的叙事，你将体验时空穿越！  每节课均包含作业、知识检测和挑战，引导你学习以下主题： - 提示词及提示工程 - 文本和图像应用生成 - 搜索应用 访问 [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) 开始吧！ ## 🌱 开始入门 > **教师们**，我们提供了 [一些建议](for-teachers.md) 帮助您使用本课程。欢迎在我们的 [讨论区](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) 反馈意见！ **[学习者](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**，每节课建议从课前测验开始，阅读讲义内容，完成各种活动，并通过课后测验检验理解。 为了提升学习体验，建议与你的同伴共同完成项目！欢迎在我们的[讨论区](https://github.com/microsoft/Web-Dev-For-Beginners/discussions)积极发言，我们的版主团队会解答你的问题。 如果想深入学习，我们强烈推荐访问 [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) 获取更多学习资料。 ### 📋 配置开发环境 本课程已准备好开发环境！开始时，你可选择在 [Codespace](https://github.com/features/codespaces/) 环境运行（基于浏览器，无需安装），或者本地使用文本编辑器如 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) 编写代码。 #### 创建你的仓库 建议你创建本仓库的副本以便保存你的作业。点击页面顶部的 **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 供你使用。  #### 在本地计算机上运行课程 要在本地计算机上运行本课程，你需要文本编辑器、浏览器和命令行工具。首节课[编程语言与工具简介](../../1-getting-started-lessons/1-intro-to-programming-languages)会介绍这些工具的多种选择，帮助你选出最适合你的。 我们推荐使用 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) 作为编辑器，它自带集成 [终端](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon)。你可以从这里下载 Visual Studio Code [链接](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)。 1. 将你的仓库克隆到本地。点击 **Code** 按钮，复制仓库 URL： [CodeSpace](./images/createcodespace.png) 然后，在 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) 中打开 [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) 并运行以下命令，将 `` 替换为你刚才复制的 URL： ```bash git clone ``` 2. 在 Visual Studio Code 中打开该文件夹。你可以通过点击 **文件** > **打开文件夹** 并选择你刚克隆的文件夹来完成此操作。 > 推荐的 Visual Studio Code 扩展： > > * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - 用于在 Visual Studio Code 中预览 HTML 页面 > * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - 帮助你更快地编写代码 ## 📂 每节课内容包括： - 可选的手绘草图笔记 - 可选的补充视频 - 课前热身测验 - 文字课程内容 - 针对项目课程，有逐步的项目构建指南 - 知识点检查 - 挑战题 - 补充阅读资料 - 任务 - [课后测验](https://ff-quizzes.netlify.app/web/) > **关于测验的说明**：所有测验都包含在 Quiz-app 文件夹中，共有 48 个测验，每个测验包含三个问题。它们可从[此处](https://ff-quizzes.netlify.app/web/)访问，测验应用程序可以在本地运行或部署到 Azure；请按照 `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 和 Christopher | | 06 | JS基础 | JavaScript 中的决策制作 | 学习如何使用决策结构为代码创建条件 | [制作决策](./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 游戏开发 | 学习继承（包括类继承与组合）与发布/订阅模式，为构建游戏做准备 | [高级游戏开发介绍](./6-space-game/1-introduction/README.md) | Chris | | 16 | [太空游戏](./6-space-game/solution/README.md) | 画布绘制 | 学习 Canvas API，用于在屏幕上绘制元素 | [画布绘制](./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 | | 25 | [浏览器/VScode 代码](../../8-code-editor) | 使用 VScode | 学习如何使用代码编辑器| [使用 VScode 代码编辑器](./8-code-editor/1-using-a-code-editor/README.md) | Chris | | 26 | [AI 助手](./9-chat-project/README.md) | 与 AI 交互 | 学习如何构建自己的 AI 助手 | [AI 助手项目](./9-chat-project/README.md) | Chris | ## 🏫 教学理念 我们的课程设计基于两个核心教学原则： * 项目驱动学习 * 频繁测验 本课程教授 JavaScript、HTML 和 CSS 的基础知识，以及当今网页开发者使用的最新工具与技术。 学生将有机会通过开发打字游戏、虚拟生态瓶、环保浏览器扩展、太空入侵者风格游戏和企业银行应用，积累实践经验。 在课程结束时，学生将对网页开发有扎实的理解。 > 🎓 你可以将本课程的前几节课作为 Microsoft Learn 上的[学习路径](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon)学习！ 通过确保内容与项目相匹配，学习过程对学生来说更加有趣，知识点的记忆也会增强。我们还编写了几节 JavaScript 基础课程来介绍概念，搭配来自 “[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" 视频教程系列的视频，其中一些作者也参与了本课程的编写。 此外，课堂前的低风险测验能引导学生集中学习某课题，课堂后的第二次测验则帮助进一步巩固记忆。本课程设计灵活且有趣，可以全部学习也可选择部分学习。项目从小型开始，12 周周期结束时逐渐变得复杂。 虽然我们有意避免引入 JavaScript 框架，以便专注于在学习框架之前网页开发者需掌握的基本技能，但完成本课程后学习 Node.js 是一个很好的下一步，可通过另一视频系列“[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)”来实现。 > 请参阅我们的[行为准则](CODE_OF_CONDUCT.md)和[贡献指南](CONTRIBUTING.md)。我们欢迎你的建设性反馈！ ## 🧭 离线访问 你可以使用 [Docsify](https://docsify.js.org/#/) 离线运行本教程。Fork 本仓库，[在本机安装 Docsify](https://docsify.js.org/#/quickstart)，然后在仓库根目录下输入 `docsify serve`。网站将在本地主机 3000 端口提供服务：`localhost:3000`。 ## 📘 PDF 所有课程的 PDF 可在[此处](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf)找到。 ## 🎒 其它课程 我们的团队制作了其他课程！赶快看看： ### LangChain [](https://aka.ms/langchain4j-for-beginners) [](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin) --- ### Azure / Edge / MCP / Agents [](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst) [](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst) [](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst) [](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst) --- ### 生成式 AI 系列 [](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst) [-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst) [-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst) [-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst) --- ### 核心学习 [](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst) [](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst) [](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst) [](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung) [](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst) [](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst) [](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst) --- ### Copilot 系列 [](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst) [](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst) [](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst) ## 获取帮助 如果你遇到困难或对构建 AI 应用有任何疑问，加入其他学习者和经验丰富开发者的 MCP 讨论。这里是一个支持性的社区，欢迎提问并自由分享知识。 [](https://discord.gg/nTYy5BXMWG) 如果你在构建过程中有产品反馈或遇到错误，请访问： [](https://aka.ms/foundry/forum) ## 许可证 此仓库使用 MIT 许可证。详情请参阅 [LICENSE](../../LICENSE) 文件。 --- **免责声明**： 本文件通过 AI 翻译服务 [Co-op Translator](https://github.com/Azure/co-op-translator) 进行翻译。虽然我们力求准确，但请注意自动翻译可能存在错误或不准确之处。原始的本地语言版本应视为权威来源。对于重要信息，建议使用专业人工翻译。因使用本翻译而引起的任何误解或曲解，我们不承担任何责任。