31 KiB

Raw Blame History Unescape Escape

面向初学者的网页开发课程

通过微软云倡导者为期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 Actions 支持（自动且始终保持最新）

想本地克隆？

本仓库包含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 作为编辑器，它自带集成终端。你可以从这里下载 Visual Studio Code 链接。

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

CodeSpace 然后，在 Visual Studio Code 中打开 Terminal 并运行以下命令，将 <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基础	JavaScript 中的决策制作	学习如何使用决策结构为代码创建条件	制作决策	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	银行应用	网页应用中的 HTML 模板和路由	学习如何创建多页面网站架构的骨架，使用路由和 HTML 模板	HTML 模板与路由	Yohan
22	银行应用	构建登录和注册表单	学习构建表单及处理验证流程	表单	Yohan
23	银行应用	获取和使用数据的方法	了解数据在应用中的流入与流出，如何获取、存储及处理数据	数据	Yohan
24	银行应用	状态管理概念	学习应用如何保持状态以及如何以编程方式管理状态	状态管理	Yohan
25	浏览器/VScode 代码	使用 VScode	学习如何使用代码编辑器	使用 VScode 代码编辑器	Chris
26	AI 助手	与 AI 交互	学习如何构建自己的 AI 助手	AI 助手项目	Chris