[](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 Action 支持(自动且始终保持最新)
[Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](./README.md) | [Chinese (Traditional, Hong Kong)](../zh-HK/README.md) | [Chinese (Traditional, Macau)](../zh-MO/README.md) | [Chinese (Traditional, Taiwan)](../zh-TW/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Kannada](../kn/README.md) | [Khmer](../km/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](../pcm/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../pt-BR/README.md) | [Portuguese (Portugal)](../pt-PT/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](../ru/README.md) | [Serbian (Cyrillic)](../sr/README.md) | [Slovak](../sk/README.md) | [Slovenian](../sl/README.md) | [Spanish](../es/README.md) | [Swahili](../sw/README.md) | [Swedish](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md)
> **喜欢本地克隆?**
>
> 本仓库包含50+语言翻译,显著增加了下载大小。若要克隆时不包含翻译内容,可以使用稀疏检出:
>
> **Bash / macOS / Linux:**
> ```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'
> ```
>
> **CMD (Windows):**
> ```cmd
> 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)。你可以在[这里](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)下载 Visual Studio Code。
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 中打开文件夹。您可以通过点击 **File** > **Open Folder** 并选择您刚刚克隆的文件夹来完成。
> 推荐的 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 基础 | 使用 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 游戏开发 | 学习使用继承(类与组合)和发布/订阅模式,为游戏开发做准备 | [高级游戏开发简介](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [太空游戏](./6-space-game/solution/README.md) | 画布绘图 | 了解 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) | Web 应用中的 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 | [浏览器/代码编辑器](../../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 助手项目](./9-chat-project/README.md) | Chris |
## 🏫 教学法
我们的课程设计基于两个关键教学原则:
* 项目式学习
* 频繁测验
该项目教授 JavaScript、HTML 和 CSS 基础知识,以及当今网络开发者使用的最新工具和技术。学生将通过构建打字游戏、虚拟生态瓶、环保浏览器扩展、太空侵略者风格游戏和商业银行应用等项目获得实践经验。课程结束时,学生将掌握扎实的网页开发知识。
> 🎓 您可以将本课程的前几节作为微软 Learn 平台上的[学习路径](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon)进行学习!
通过确保内容与项目紧密相关,过程对于学生更有吸引力,概念的掌握也将得到增强。我们还编写了多节 JavaScript 基础入门课程配合 “[JavaScript 初学者系列](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)” 视频教程,该教学系列部分作者也参与了本课程编写。
此外,课堂前的低风险测验帮助学生明确学习目标,课后的第二次测验则确保进一步的知识巩固。本课程设计灵活有趣,可整体或部分学习。项目从小型开始,逐渐增加复杂度,覆盖为期 12 周的周期。
虽然我们刻意避免引入 JavaScript 框架以专注于作为网页开发者所需的基本技能,但完成本课程后,学习 Node.js 是很好的下一步,您可以通过另一系列视频 “[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)
[](https://github.com/microsoft/langchain-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) 进行翻译。尽管我们努力确保准确性,但请注意自动翻译可能包含错误或不准确之处。以原始语言版本文档为权威来源。对于关键信息,建议使用专业人工翻译。我们对因使用本翻译而产生的任何误解或误释不负任何责任。