面向初学者的 Web 开发课程

学习由 Microsoft Cloud Advocates 提供的为期 12 周的全面 Web 开发基础课程。24 节课涵盖了 JavaScript、CSS 和 HTML，通过动手项目如生态瓶、浏览器扩展和太空游戏来强化学习。课程包含测验、讨论和实践作业。通过项目驱动的教学方式，提高你的技能并优化知识记忆。快来开启你的编程之旅吧！

🧑‍🎓 你是学生吗？

访问 学生中心页面，你可以找到适合初学者的资源、学生包，甚至有机会获得免费的证书兑换券。这个页面每月都会更新内容，记得收藏并定期查看！

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

别错过我们最新发布的生成式 AI 课程！
访问 https://aka.ms/genai-js-course 开始学习！

面向初学者的 Web 开发课程 - 图1

  • 从基础到 RAG（检索增强生成）的完整课程
  • 使用 GenAI 和我们的配套应用与历史人物互动
  • 引人入胜的故事线，你将体验时空旅行！

面向初学者的 Web 开发课程 - 图2

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

  • Prompting 和 Prompt Engineering（提示工程）
  • 文本和图片应用生成
  • 搜索应用程序开发

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

🌱 入门指南

老师们，我们在 教师指南 中提供了一些使用课程的建议。欢迎在我们的 讨论区提供反馈！

学习者，在学习每节课时，先做课前测验，然后阅读讲义，完成各类活动，并通过课后测验检验学习成果。

为了提升学习体验，可以和同伴一起合作完成项目！在 讨论区中与大家交流，我们的团队会随时回答你的问题。

想要继续深造？推荐你探索 Microsoft Learn，获取更多学习资源。

📋 配置开发环境

课程已经配置好了开发环境！你可以选择在 Codespace（基于浏览器、无需安装）中运行课程，或者在本地使用文本编辑器，如 Visual Studio Code。

创建你的仓库

为了保存你的学习进度，建议你创建自己的仓库副本。点击页面顶部的 Use this template 按钮即可在你的 GitHub 账户下创建新仓库。

操作步骤：

  1. Fork 仓库：点击页面右上角的 “Fork” 按钮。
  2. 克隆仓库：运行以下命令将仓库克隆到本地： 
    1. git clone https://github.com/microsoft/Web-Dev-For-Beginners.git

在 Codespace 中运行课程

在你 Fork 的仓库中，点击 Code 按钮，选择 Open with Codespaces。这会在 Codespace 中为你创建新的工作空间。

创建 Codespace

在本地运行课程

在本地运行课程，你需要：

  • 文本编辑器
  • 浏览器
  • 命令行工具

第一节课 编程语言与开发工具介绍 会引导你选择合适的工具。

推荐使用 Visual Studio Code 作为编辑器，它内置了 终端。

  1. 克隆你的仓库到本地：
    点击 Code 按钮，复制仓库 URL，然后在终端中运行： 
    1.  git clone <your-repository-url>
  2. 在 Visual Studio Code 中打开项目文件夹：
    点击 文件 > 打开文件夹，选择克隆的文件夹。

推荐的 Visual Studio Code 扩展：

📂 每节课包含

  • 可选的手绘笔记
  • 可选的补充视频
  • 课前热身测验
  • 书面课程讲解
  • 项目课程中的逐步构建指南
  • 知识检查
  • 挑战任务
  • 补充阅读材料
  • 课后测验

关于测验的说明：所有测验都存放在 Quiz-app 文件夹中，总共有 48 个测验，每个测验包含 3 道题。这些测验在课程中有链接，你可以在本地运行测验应用，或将其部署到 Azure。请按照 quiz-app 文件夹中的说明操作。目前，这些测验正在逐步本地化。

🗃️ 课程列表

项目名称 授课概念 学习目标 课程链接 作者
01 入门 编程和开发工具基础 掌握大部分编程语言的基本原理，了解帮助专业开发者完成工作的工具 编程语言和开发工具入门 Jasmine
02 入门 GitHub 基础，团队协作 学习如何在项目中使用 GitHub，并与他人协作开发代码 GitHub 入门 Floor
03 入门 无障碍性 掌握 Web 无障碍性基础知识 无障碍性基础 Christopher
04 JS 基础 JavaScript 数据类型 学习 JavaScript 数据类型的基础知识 数据类型 Jasmine
05 JS 基础 函数和方法 学习如何使用函数和方法管理应用程序的逻辑流程 函数与方法 Jasmine 和 Christopher
06 JS 基础 使用 JS 进行决策 学习在代码中使用条件语句进行逻辑判断 逻辑判断 Jasmine
07 JS 基础 数组和循环 使用数组和循环在 JavaScript 中处理数据 数组和循环 Jasmine
08 Terrarium HTML 实战 构建 HTML 页面，实现在线玻璃容器（Terrarium），重点学习布局构建 HTML 入门 Jen
09 Terrarium CSS 实战 使用 CSS 为玻璃容器项目添加样式，重点学习 CSS 基础，包括响应式设计 CSS 入门 Jen
10 Terrarium JavaScript 闭包、DOM 操作 使用 JavaScript 让玻璃容器支持拖拽交互，重点学习闭包和 DOM 操作 JS 闭包与 DOM 操作 Jen
11 打字游戏 构建打字游戏 学习如何使用键盘事件驱动 JavaScript 应用的逻辑 事件驱动编程 Christopher
12 绿色浏览器扩展 浏览器操作 了解浏览器工作原理、历史，并搭建第一个浏览器扩展框架 关于浏览器 Jen
13 绿色浏览器扩展 构建表单、调用 API、存储变量 使用 JavaScript 构建浏览器扩展，通过 API 调用并将变量存储在本地 API、表单和本地存储 Jen
14 绿色浏览器扩展 浏览器后台进程与性能优化 使用浏览器后台进程管理扩展图标，同时优化 Web 性能 后台任务与性能 Jen
15 太空游戏 高级游戏开发 学习使用类与组合模式实现继承，掌握发布/订阅模式构建游戏 高级游戏开发入门 Chris
16 太空游戏 Canvas 绘图 学习使用 Canvas API 在屏幕上绘制元素 Canvas 绘图 Chris
17 太空游戏 元素移动 使用笛卡尔坐标系和 Canvas API 为游戏元素添加移动效果 元素移动 Chris
18 太空游戏 碰撞检测 实现元素碰撞检测，响应按键事件，并使用冷却函数优化性能 碰撞检测 Chris
19 太空游戏 计分机制 实现基于游戏状态和表现的数学计算进行计分 计分机制 Chris
20 太空游戏 游戏结束与重启 学习如何结束和重启游戏，包括资源清理和变量重置 结束条件 Chris
21 银行应用 HTML 模板与路由 学习如何在多页面网站中使用 HTML 模板和路由构建架构 HTML 模板与路由 Yohan
22 银行应用 构建登录和注册表单 学习表单构建和验证逻辑处理 表单 Yohan
23 银行应用 数据获取与使用方法 学习数据流转过程，包括获取、存储和处理 数据操作 Yohan
24 银行应用 状态管理概念 学习应用的状态管理和编程操作方式 状态管理 Yohan

🏫 教学法

我们的课程设计遵循以下两大核心教学原则：

  • 项目驱动学习
  • 频繁测验

本课程教授 JavaScript、HTML 和 CSS 的基础知识，同时涵盖现代 Web 开发者使用的最新工具和技术。学生将通过实际项目积累实践经验，例如：构建打字游戏、虚拟玻璃容器、环保浏览器扩展、类似太空侵略者的游戏以及面向企业的银行应用程序。通过完成本系列课程，学生将对 Web 开发有扎实的理解。

🎓 你可以在 Microsoft Learn 上以 学习路径 的形式学习本课程的前几节课！

通过将课程内容与项目相结合，学习过程变得更具吸引力，同时也能增强学生对概念的记忆和理解。此外，我们还编写了几节 JavaScript 基础入门课程，并配有视频教程，视频来自于《JavaScript 初学者系列》。部分视频的作者也为本课程提供了贡献。

此外，课堂前的小测验可以帮助学生明确学习目标，而课堂后的测验则有助于巩固所学知识。整个课程设计灵活且有趣，学生可以完整学习或选择部分内容。项目难度从入门逐渐增加，最终形成较为复杂的 Web 应用程序，整个周期为 12 周。

为了专注于 Web 开发者所需的基础技能，在本课程中我们特意没有引入 JavaScript 框架。完成本课程后，下一步推荐学习 Node.js，可以参考另一套视频系列：《Node.js 初学者系列》。

请访问我们的 行为准则 和 贡献指南。我们欢迎你提出建设性的反馈！ 😊

🧭 离线访问

你可以使用 Docsify 在本地离线运行该文档。只需 Fork 此仓库，在本地安装 Docsify，然后在仓库根目录下运行以下命令：

  1. docsify serve

网站将通过本地主机的 3000 端口运行，访问地址为：

  1. localhost:3000