Web Development for Beginners - 课程纲要

通过微软云倡导者的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）。
使用生成式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作为编辑器，它内置了终端。你可以在这里下载。

克隆仓库到本地电脑。点击 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 - 帮助您更快地编写代码

📂 每课内容包括：

可选的手绘笔记
可选的补充视频
课前热身测验
书面课程
针对项目型课程，逐步指导如何构建项目
知识检测
挑战任务
补充阅读
课后测验 post-lesson quiz

关于测验的说明：所有测验都包含在 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	银行应用	Web应用中的HTML模板和路由	学习如何使用路由和HTML模板创建多页网站的框架	HTML模板与路由	Yohan
22	银行应用	构建登录及注册表单	学习如何构建表单及处理表单验证	表单	Yohan
23	银行应用	数据获取与使用方法	了解数据在应用中的流入流出，如何获取、存储与处理数据	数据	Yohan
24	银行应用	状态管理概念	学习应用如何保持状态及如何编程管理状态	状态管理	Yohan
25	浏览器/VScode代码	使用VScode	学习如何使用代码编辑器	使用VScode代码编辑器	Chris
26	AI 助手	使用人工智能	学习如何构建自己的AI助手	AI助手项目	Chris