初学者的网页开发课程

通过微软云推广者提供的为期12周的综合课程学习网页开发的基础知识。24个课程深入讲解JavaScript、CSS和HTML，配合手工项目如植物培养箱、浏览器扩展和太空游戏。参加测验、讨论和实践作业。通过我们的高效项目为基础的教学法，提升技能并优化知识掌握。今天就开始你的编码之旅吧！

加入 Azure AI Foundry Discord 社区

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

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

🌐 多语言支持

通过 GitHub Action 支持（自动且始终最新）

更喜欢本地克隆？

本仓库包含50多种语言的翻译，显著增加下载大小。若需无翻译版本，请使用稀疏检出：
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'
这样你可以更快完成课程所需的一切内容。

如果您希望支持更多翻译语言，列于这里

🧑‍🎓 你是学生吗？

访问学生中心页面，这里有入门资源、学生包甚至获得免费证书的方式。请收藏此页面并定期查看，因为我们每月都会更换内容。

📣 公告 - 新增 GitHub Copilot Agent 模式挑战！

新挑战已添加，请在大多数章节中查找 “GitHub Copilot Agent Challenge 🚀”。这是一个使用 GitHub Copilot 和 Agent 模式完成的新挑战。如果你以前没用过 Agent 模式，它不仅能生成文本，还可以创建和编辑文件、运行命令等。

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

新增 AI 助手项目，查看项目

📣 公告 - 刚发布的 JavaScript 生成式 AI 新课程

不要错过我们的生成式 AI 新课程！

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

覆盖从基础到 RAG 的课程。
使用 GenAI 和我们的配套应用与历史人物互动。
有趣且引人入胜的叙事，你将进行时空旅行！

每节课包括作业、知识检测和挑战，帮助你学习如：

提示及提示工程
文字和图像应用生成
搜索应用

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

🌱 入门指南

教师们，我们提供了一些建议关于如何使用此课程。欢迎在我们的讨论区反馈意见！

学习者，每节课先完成课前测验，然后阅读讲义，完成各项活动，并通过课后测验检验理解。

为提升学习体验，建议和同学们一起合作完成项目！欢迎在我们的讨论区发起讨论，我们的版主团队将为你解答问题。

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

📋 环境搭建

本课程已预置开发环境！开始学习时，你可以选择在Codespace（基于浏览器，无需安装环境）运行课程，或在本地电脑使用如Visual Studio Code的文本编辑器。

创建你的仓库

为方便保存作业，建议创建本仓库的个人副本。点击页面顶部的 Use this template 按钮，即可在你的 GitHub 账户创建一份该课程副本。

步骤如下：

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

在 Codespace 中运行课程

在你创建的个人副本中，点击 Code 按钮，选择 Open with Codespaces。这会为你创建一个新的 Codespace 工作环境。

在本地电脑运行课程

要在电脑本地运行课程，你需要文本编辑器、浏览器和命令行工具。我们的第一课，编程语言和开发工具入门，将介绍各种工具供你选择。

推荐使用 Visual Studio Code作为编辑器，它内置终端。可从这里下载。

将你的仓库克隆到电脑。点击 Code 按钮，复制 URL：

CodeSpace 然后，在 Visual Studio Code 中打开终端，运行以下命令，将 <your-repository-url> 替换为你刚才复制的 URL：
```
git clone <your-repository-url>
```
在 Visual Studio Code 中打开文件夹。你可以通过点击文件 > 打开文件夹，然后选择你刚克隆的文件夹来完成此操作。

推荐的 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	Terrarium	HTML 实践	构建用于创建在线生态瓶（Terrarium）的 HTML，重点是构建布局	HTML 入门	Jen
09	Terrarium	CSS 实践	构建用于为在线生态瓶设计样式的 CSS，重点是 CSS 基础以及页面响应式设计	CSS 入门	Jen
10	Terrarium	JavaScript 闭包与 DOM 操作	构建 JavaScript 使生态瓶实现拖拽功能，重点是闭包和 DOM 操作	JavaScript 闭包与 DOM 操作	Jen
11	打字游戏	制作打字游戏	学习如何使用键盘事件驱动 JavaScript 应用的逻辑	事件驱动编程	Christopher
12	绿色浏览器扩展	浏览器工作原理	了解浏览器的工作原理、发展历史及如何搭建浏览器扩展的基础元素	关于浏览器	Jen
13	绿色浏览器扩展	构建表单、调用 API 及本地存储变量	构建浏览器扩展的 JavaScript 元素，以便使用存储在本地的变量调用 API	API、表单与本地存储	Jen
14	绿色浏览器扩展	浏览器后台进程与网页性能	利用浏览器的后台进程管理扩展图标；学习网页性能及优化方法	后台任务与性能	Jen
15	太空游戏	进阶游戏开发 – 继承与模式	学习继承（包括类和组合）以及发布/订阅模式，为制作游戏做准备	进阶游戏开发介绍	Chris
16	太空游戏	画布绘制	学习 Canvas API，用于向屏幕绘制元素	画布绘制	Chris
17	太空游戏	元素运动	探索如何利用笛卡尔坐标和 Canvas API 赋予元素运动	移动元素	Chris
18	太空游戏	碰撞检测	使元素碰撞并相互响应按键，提供冷却功能确保游戏性能	碰撞检测	Chris
19	太空游戏	计分	根据游戏状态和表现进行数学计算	计分	Chris
20	太空游戏	结束和重启游戏	学习如何结束和重启游戏，包括清理资源和重置变量	结束条件	Chris
21	银行应用	Web 应用中的 HTML 模板和路由	学习如何使用路由和 HTML 模板构建多页面网站的框架	HTML 模板和路由	Yohan
22	银行应用	构建登录和注册表单	学习表单构建和验证处理流程	表单	Yohan
23	银行应用	数据获取和使用	学习数据如何流入流出你的应用，如何获取、存储和处理数据	数据	Yohan
24	银行应用	状态管理概念	学习应用如何保留状态及其编程管理方法	状态管理	Yohan
25	浏览器/VScode 代码	使用 VScode	学习如何使用代码编辑器	使用 VScode 代码编辑器	Chris
26	人工智能助手	使用 AI	学习如何构建自己的 AI 助手	AI 助手项目	Chris