初学者的网页开发课程

通过微软云倡导者提供的为期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+语言翻译，显著增加了下载大小。若要克隆时不包含翻译内容，可以使用稀疏检出：

Bash / macOS / Linux:
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):
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 的课程内容。
使用生成式 AI 和我们的伴侣应用与历史人物互动。
有趣且引人入胜的叙事，你将体验时光穿梭！

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

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

访问 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 作为编辑器，它自带内置的终端。你可以在这里下载 Visual Studio Code。

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

CodeSpace

然后，在 Visual Studio Code 中打开 Terminal，运行以下命令，将 <your-repository-url> 替换为您刚刚复制的 URL：
```
git clone <your-repository-url>
```
在 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，用于在屏幕上绘制图形	Canvas 绘图	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 代码编辑器	Chris
26	AI 助手	使用人工智能	学习构建您自己的 AI 助手	AI 助手项目	Chris