面向初学者的 Web 开发 - 课程大纲
通过微软云技术推广团队提供的12周系统课程，学习Web开发基础知识。24节课程将通过构建生态瓶、浏览器扩展、太空游戏等实践项目，深入讲解JavaScript、CSS和HTML。课程包含随堂测验、讨论环节和实践作业，采用高效的项目驱动教学法帮助巩固知识。立即开启您的编程之旅！
🧑🎓 您是学生吗？
访问学生中心页面，获取入门资源、学生礼包甚至免费证书兑换券。建议收藏该页面并定期查看，我们会每月更新内容。
📣 公告 - 全新《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按钮创建个人副本仓库，操作步骤：
- Fork仓库：点击页面右上角"Fork"按钮
- 克隆仓库：
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
使用Codespace运行课程
在您创建的仓库中，点击Code→Open with Codespaces即可创建云端环境。
本地运行课程
需准备文本编辑器、浏览器和命令行工具。首节课编程语言入门与开发工具将指导您配置环境。
推荐工具组合：
- Visual Studio Code（内置终端）
- 下载地址：Visual Studio Code
-
克隆仓库到本地：
在VS Code终端运行（替换<your-repository-url>为实际URL）：git clone <your-repository-url> -
通过文件→打开文件夹加载项目
推荐VS Code扩展：
- Live Server - HTML实时预览
- Copilot - 智能代码补全
📂 课程结构
每节课包含：
- 可选视觉笔记
- 可选补充视频
- 课前热身测验
- 图文讲义
- 项目分步指南（项目制课程）
- 知识点检测
- 拓展挑战
- 延伸阅读
- 课后作业
- 课后测验
关于测验：所有测验位于Quiz-app文件夹，共48套（每套3题）。可通过课程内链接访问，支持本地运行或部署至Azure，具体操作见
quiz-app文件夹说明。正在逐步实现多语言支持。
🗃️ 课程目录
| 项目名称 | 教授概念 | 学习目标 | 关联课程 | 作者 | |
|---|---|---|---|---|---|
| 01 | 入门指南 | 编程基础与开发工具介绍 | 学习大多数编程语言的基本原理，以及专业开发者使用的辅助软件 | 编程语言与开发工具入门 | Jasmine |
| 02 | 入门指南 | GitHub基础（含团队协作） | 如何在项目中使用GitHub，如何与他人协作开发代码库 | GitHub基础 | Floor |
| 03 | 入门指南 | 无障碍设计 | 学习网页无障碍基础 | 无障碍设计基础 | Christopher |
| 04 | JavaScript基础 | JavaScript数据类型 | JavaScript数据类型基础 | 数据类型 | Jasmine |
| 05 | JavaScript基础 | 函数与方法 | 学习使用函数和方法管理应用程序逻辑流 | 函数与方法 | Jasmine与Christopher |
| 06 | JavaScript基础 | JavaScript条件判断 | 学习如何通过条件判断方法在代码中创建分支逻辑 | 条件判断 | Jasmine |
| 07 | JavaScript基础 | 数组与循环 | 使用JavaScript中的数组和循环处理数据 | 数组与循环 | Jasmine |
| 08 | 生态箱项目 | HTML实践 | 构建在线生态箱的HTML结构，重点学习布局搭建 | HTML入门 | Jen |
| 09 | 生态箱项目 | CSS实践 | 为在线生态箱编写CSS样式，聚焦CSS基础与响应式设计 | CSS入门 | Jen |
| 10 | 生态箱项目 | JavaScript闭包与DOM操作 | 实现生态箱的拖拽交互功能，重点学习闭包与DOM操作 | JavaScript闭包与DOM操作 | Jen |
| 11 | 打字游戏 | 打字游戏开发 | 学习使用键盘事件驱动JavaScript应用逻辑 | 事件驱动编程 | Christopher |
| 12 | 绿色浏览器扩展 | 浏览器工作原理 | 了解浏览器工作机制、发展历史，并搭建浏览器扩展基础架构 | 浏览器概述 | Jen |
| 13 | 绿色浏览器扩展 | 表单构建、API调用与本地存储变量 | 开发浏览器扩展的JavaScript功能模块，调用API并使用本地存储变量 | API、表单与本地存储 | Jen |
| 14 | 绿色浏览器扩展 | 浏览器后台进程与网页性能优化 | 使用浏览器后台进程管理扩展图标；学习网页性能优化策略 | 后台任务与性能优化 | Jen |
| 15 | 太空游戏 | JavaScript进阶游戏开发 | 学习类继承与组合模式，以及发布/订阅模式，为游戏开发做准备 | 高级游戏开发入门 | Chris |
| 16 | 太空游戏 | Canvas绘图 | 学习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 |
🏫 教学理念
本课程设计遵循两大教学原则：
- 项目制学习
- 高频测验
课程涵盖JavaScript、HTML和CSS基础，以及现代Web开发者的最新工具与技术。学生将通过实践项目（打字游戏、虚拟生态箱、环保浏览器扩展、太空射击游戏和商业银行应用）积累实战经验。完成系列课程后，学生将掌握扎实的Web开发基础。
🎓 您可以通过微软学习平台以学习路径形式学习本课程的前几课！
通过将知识点与项目紧密结合，课程更具吸引力并增强概念记忆。我们还编写了JavaScript基础入门课程，搭配"JavaScript新手教程系列"视频（部分作者参与本课程开发）进行概念讲解。
课前小测验帮助学生明确学习目标，课后测验巩固知识记忆。课程设计灵活有趣，可完整学习也可分模块学习。项目难度随12周课程进度逐步提升。
虽然我们刻意避免引入JavaScript框架以专注于Web开发核心技能，但完成本课程后建议通过"Node.js新手教程系列"视频学习Node.js。
🧭 离线使用
您可以使用Docsify离线运行本文档。Fork本仓库后，在本地安装Docsify，然后在本仓库根目录运行docsify serve。文档将通过本地3000端口提供服务：localhost:3000。
📘 PDF版本
所有课程的PDF版本可在此处获取。
🎒 其他课程
我们团队还开发了其他课程：
- 生成式AI入门
- 生成式AI入门(.NET版)
- JavaScript生成式AI
- AI入门
- 数据科学入门
- 机器学习入门
- 网络安全入门
- Web开发入门
- 物联网入门
- XR开发入门
- GitHub Copilot配对编程精通
- GitHub Copilot for C#/.NET开发者精通
- Copilot冒险之旅
许可证
本仓库采用MIT许可证，详见LICENSE文件。