Web Development for Beginners 课程全指南：用 12 周 24 课构建 Web 开发者技能起点

本文是微软 Cloud Advocates 主导的开源课程 Web Development for Beginners – A Curriculum（仓库根目录 README.md）的完整技术导读与实践手册。该课程以"项目驱动 + 高频测验"为教学主轴，用 12 周、24 课时覆盖 JavaScript、HTML、CSS 三大 Web 基础，并围绕"在线植物生态瓶（Terrarium）、打字游戏、浏览器扩展、太空射击游戏、银行业务应用"等真实可运行的项目逐课进阶。读完本文，你将掌握该仓库的目录组织、本地与云端环境搭建方法、单课学习闭环（课前测验 → 讲义 → 挑战 → 作业 → 课后测验）、全课程映射表、多语言与离线部署方式，并能直接沿着 课程课时表 开始第一步编码。

课程定位：面向零基础的 Web 开发者成长路径

根目录 README.md 给出的课程定位是：由 Microsoft Cloud Advocates 编写的一套 12 周综合课程，共 24 课时，每一课都深入 JavaScript、CSS 与 HTML 中的一个主题，并以动手项目（如 terrarium、浏览器扩展、太空游戏）作为练习载体，配合测验、讨论与实战作业，帮助学习者"在掌握技能的同时提升知识留存率"。

课程刻意不引入任何 JavaScript 框架，目的正如 教学法章节 所述：在学习框架之前，先扎实掌握 Web 开发者所需的基础技能。完成本课程后的合理下一步是学习 Node.js 等服务端知识。这一设计决定了整个仓库的结构——2-js-basics 先用 4 课讲纯 JavaScript 语法，随后 6 个章节全部围绕"用原生三件套构建完整项目"展开。

仓库总览：目录结构即课程地图

从仓库根目录可以清晰看到课程的组织方式：每一章是一个独立文件夹，按"数字-主题"命名；项目型章节内部再按课时分子目录，并统一提供 solution/（完整可运行答案）与练习用 your-work/ 结构。

• 1-getting-started-lessons/：非项目型入门三课，见 章节说明（编程语言与工具、GitHub 协作、无障碍基础）。
• 2-js-basics/：JavaScript 基础四课（数据类型、函数与方法、条件判断、数组与循环），见 章节说明。
• 3-terrarium/ 至 7-bank-project/：五个完整的项目型章节。
• 8-code-editor/ 与 9-chat-project/：后期新增章节（VS Code 编辑器使用、构建 AI 助手）。
• quiz-app/：全部课前/课后测验的独立 Vue 应用。
• sketchnotes/：各主题的可视化手绘笔记，例如 sketchnotes/webdev101-html.png、sketchnotes/webdev101-js-functions.png。
• translations/ 与 translated_images/：50+ 语言的翻译正文与配图。
• for-teachers.md、teaching-files/：面向教师的课堂组织指南与 LMS 导入包。
• pdf/、docs/、package.json：离线阅读与文档工具链。

其中每个项目型章节的 solution/ 目录都可直接运行：

项目	完整实现
植物生态瓶	3-terrarium/solution/index.html + script.js + style.css
打字游戏	4-typing-game/solution/index.js
浏览器扩展	5-browser-extension/solution/src/
太空游戏	6-space-game/solution/app.js
银行应用	7-bank-project/solution/app.js
AI 助手	9-chat-project/solution/

快速上手：四种方式开始学习

创建你自己的课程副本

README 强烈建议学习者先建立本仓库的个人副本（而非直接在只读仓库上操作），以便保存自己的练习成果：

1. 点击页面顶部的 Fork（或 Use this template）按钮，在个人账号下生成一份课程副本；
2. 克隆该副本到本地或云端；
3. 如需要交流答疑，可加入文末列出的讨论渠道（Azure AI Foundry Discord / 开发者论坛）。

在 Codespace 中运行课程（零安装）

课程自带"开箱即用"的开发环境：在你自己创建的仓库副本中，点击 Code 按钮并选择 Open with Codespaces，即可在浏览器中得到一个无需本地安装任何软件的可编程环境。这是最省事的起步路径，特别适合网络环境受限或不想配置本地工具链的学习者。

在本地运行课程

本地运行需要三样东西：一个文本编辑器、一个浏览器、一个命令行工具。Introduction to Programming Languages and Tools of the Trade（本课程第 01 课）会逐一讲解这些工具的可选方案。README 的推荐组合是 Visual Studio Code（自带集成 Terminal）：

git clone <your-repository-url>

然后通过 VS Code 的 File > Open Folder 打开克隆下来的目录即可开始。推荐安装两个 VS Code 扩展：

• Live Server：在 VS Code 内实时预览 HTML 页面（项目型章节的静态页面大多可借助它即时看到效果）；
• GitHub Copilot：辅助更快地编写代码（README 也提到多数章节已加入"GitHub Copilot Agent 挑战 🚀"，可用 Agent 模式生成与修改文件、运行命令）。

单课学习闭环：每课包含什么

README 明确了每一课的标准组成结构，任何一课的 README.md 都遵循同一模板：

• 可选的 sketchnote（手绘知识笔记，成品见 sketchnotes/）；
• 可选的补充讲解视频；
• 课前热身测验（pre-lesson warmup quiz）：以低风险方式提前建立学习意图；
• 书面讲义（written lesson）；
• 项目型课程的分步构建指南；
• 知识自检（knowledge checks）；
• 一个挑战（challenge）；
• 补充阅读（supplemental reading）；
• 作业（assignment）（每个课时文件夹内均有 assignment.md）；
• 课后测验（post-lesson quiz）：课后再次测验以强化记忆留存。

关于测验：所有测验集中存放于 quiz-app/ 目录，README 将其描述为一套覆盖全部课时、单份含三道问题的题库。该应用既可在本地运行，也可一键部署到 Azure，具体见 quiz-app/README.md 的说明。

课程总览（Lesson Map）

下表是仓库根 README 中的完整课程映射（01–24 为核心 24 课时；25、26 为后续公告新增的"代码编辑器"与"AI 助手"两课）。所有链接均已转为仓库根目录相对路径，可直接跳转至对应讲义：

#	项目	教授概念	学习目标	对应课时
01	Getting Started	编程语言与开发工具入门	理解大多数编程语言背后的基本机制，以及专业开发者日常使用的软件工具	Intro to Programming Languages and Tools of the Trade
02	Getting Started	GitHub 基础，含团队协作	如何在项目中使用 GitHub、如何与他人协作同一代码库	Intro to GitHub
03	Getting Started	无障碍（Accessibility）	Web 无障碍基础	Accessibility Fundamentals
04	JS Basics	JavaScript 数据类型	JavaScript 数据类型基础	Data Types
05	JS Basics	函数与方法	用函数与方法管理应用逻辑流	Functions and Methods
06	JS Basics	用 JS 做判断	用判断方法在代码中创建条件	Making Decisions
07	JS Basics	数组与循环	用数组与循环处理数据	Arrays and Loops
08	Terrarium	HTML 实战	构建在线生态瓶的 HTML，聚焦页面布局	Introduction to HTML
09	Terrarium	CSS 实战	编写生态瓶 CSS，覆盖基础与响应式页面	Introduction to CSS
10	Terrarium	JavaScript 闭包、DOM 操作	用闭包与 DOM 操作让生态瓶具备拖拽交互	JavaScript Closures, DOM manipulation
11	Typing Game	构建打字游戏	用键盘事件驱动 JS 应用逻辑	Event-Driven Programming
12	Green Browser Extension	与浏览器协作	浏览器工作原理、历史，以及搭建浏览器扩展的首批元素	About Browsers
13	Green Browser Extension	表单、调用 API、localStorage 存储变量	用存于 localStorage 的变量调用 API	APIs, Forms, and Local Storage
14	Green Browser Extension	浏览器后台进程与 Web 性能	用后台进程管理扩展图标；了解性能与优化手段	Background Tasks and Performance
15	Space Game	更进阶的 JS 游戏开发	用类继承、组合与发布订阅模式为游戏做准备	Introduction to Advanced Game Development
16	Space Game	Canvas 绘图	学习用于屏幕绘制的 Canvas API	Drawing to Canvas
17	Space Game	让元素动起来	结合笛卡尔坐标与 Canvas API 实现运动	Moving Elements Around
18	Space Game	碰撞检测	按键驱动碰撞与反应，用冷却机制保证性能	Collision Detection
19	Space Game	计分	依据游戏状态与表现进行数值计算	Keeping Score
20	Space Game	结束与重启游戏	清理资源、重置变量，实现游戏结束与重开	The Ending Condition
21	Banking App	HTML 模板与路由	用路由与 HTML 模板搭建多页面网站架构骨架	HTML Templates and Routes
22	Banking App	登录注册表单	构建表单并处理校验逻辑	Forms
23	Banking App	数据的获取与使用	数据如何进出应用、如何获取、存储与释放	Data
24	Banking App	状态管理概念	应用如何保持状态并以编程方式管理	State Management
25	Browser/VS Code Code	使用 VS Code	学会使用代码编辑器	Use VS Code Code Editor
26	AI Assistants	与 AI 协作	构建你自己的 AI 助手	AI Assistant project

从表中可以读出清晰的进阶曲线：先学习工具与编程思想（01–03），再掌握 JavaScript 语法（04–07），随后以生态瓶、打字游戏、浏览器扩展、太空游戏、银行应用五个递进项目把 HTML/CSS/JS 融会贯通（08–24）——每个项目"由小到大"地复杂化，正好呼应了教学法章节"项目从简单开始、在 12 周周期结束时逐步复杂"的设计。

教学法（Pedagogy）：项目驱动 + 高频测验

教学法章节是本课程区别于传统教程的核心。两条设计原则是：

• 项目式学习（project-based learning）：内容与项目对齐，学习过程对学生更有吸引力，概念留存更高；
• 高频测验（frequent quizzes）：课前低风险测验为学生设定学习意图，课后测验保障进一步的知识留存。

整个课程致力于讲授 JavaScript、HTML、CSS 基础及当下 Web 开发者使用的工具与技术。学习者会在过程中亲手构建：打字游戏、虚拟生态瓶、绿色环保浏览器扩展、太空入侵者风格游戏、以及面向企业的银行应用，最终建立起对 Web 开发扎实而完整的理解。README 特别注明其有意避开 JS 框架，以聚焦框架之前必备的基础技能。

值得补充的是，仓库确实为"测验"这条支线提供了完整可运行实现：quiz-app/ 是基于 Vue 3 + Vite 的独立应用，测验数据以 JSON 形式存放于 quiz-app/src/assets/translations/（如 en.json、zh_cn.json 等），并通过 index.js 统一导入；前端由 App.vue、views/ 与 components/ 组织而成。这印证了 README 中"测验可本地运行或部署到 Azure"的说法。

多语言支持与稀疏检出（Sparse Checkout）

README 用一整节强调该仓库的国际化能力：翻译由 GitHub Action 自动化维护（Co-op Translator），保证始终与英文原文同步。目前 translations/ 下已提供 50+ 种语言，以下为完整语言清单（每条均为仓库根目录相对链接）：

阿拉伯语	孟加拉语	保加利亚语	缅甸语
简体中文	繁体中文(香港)	繁体中文(澳门)	繁体中文(台湾)
克罗地亚语	捷克语	丹麦语	荷兰语
爱沙尼亚语	芬兰语	法语	德语
希腊语	希伯来语	印地语	匈牙利语
印尼语	意大利语	日语	卡纳达语
高棉语	韩语	立陶宛语	马来语
马拉雅拉姆语	马拉地语	尼泊尔语	尼日利亚皮钦语
挪威语	波斯语	波兰语	巴西葡萄牙语
葡萄牙语	旁遮普语	罗马尼亚语	俄语
塞尔维亚语	斯洛伐克语	斯洛文尼亚语	西班牙语
斯瓦希里语	瑞典语	他加禄语	泰米尔语
泰卢固语	泰语	土耳其语	乌克兰语
乌尔都语	越南语

想本地克隆？用稀疏检出跳过翻译文件

由于仓库包含 50+ 种语言翻译，整体体积明显偏大。README 提供了基于 Git 稀疏检出的优化克隆方案——它只取课程本体，显著加快下载速度：

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"

其中 --filter=blob:none 是部分克隆（不下载文件内容，用时按需取回），--sparse 与 sparse-checkout set --no-cone 指定仅检出除 translations、translated_images 之外的全部目录。执行后你将获得完成课程所需的一切内容，且下载体量大幅缩小。

离线访问与 PDF 版本

课程文档支持完全离线阅读，技术方案是 Docsify：

1. Fork 本仓库；
2. 本地安装 Docsify；
3. 在仓库根目录执行 docsify serve；
4. 浏览器访问 localhost:3000 即可在线阅读整套文档。

仓库内已为 Docsify 准备了文档骨架：docs/_sidebar.md 与 docs/_navbar.md；根目录 package.json 中声明了 docsify-to-pdf 开发依赖并内置 npm run convert 脚本，用于把文档导出为 PDF——仓库根目录下即有现成的全课时合订本 pdf/readme.pdf 可供离线浏览。

面向教师：GitHub Classroom 与 LMS 集成

仓库在 for-teachers.md 中为教师提供了完整的课堂落地指南，主要包含三条路径：

• GitHub Classroom：建议"一课一仓库"，即把每个课时目录提取为独立仓库，再为每课时创建对应 assignment，便于按班次独立管理作业；同时给出了推荐约定，如仓库命名 lesson-01-intro、标签 quiz/assignment/needs-review/late/resubmission、按学期打标签（如 v2025-term1），并提示避免把仓库放入 OneDrive/Google Drive 等同步目录以防 Git 冲突。
• Moodle / Canvas / Blackboard：仓库预置了可导入的课程包——Moodle 专用包 teaching-files/webdev-moodle.mbz 与通用 Common Cartridge 包 teaching-files/webdev-common-cartridge.imscc。导入后需按学期实际核对模块、截止日期与测验设置。
• 直接使用本仓库：不做 Classroom 也可组织同步/异步教学，例如同步课堂用分组讨论室完成测验、学生以 GitHub Issues 提交测验答案、以 Pull Request 提交协作作业；异步场景则让学生 fork 到私有仓库并添加教师为协作者。

将测验应用（Quiz-app）部署到 Azure

测验应用本身是独立可运行的 Vue 项目（见 quiz-app/README.md）。本地运行时依次执行：

git clone <your-repository-url>
cd <repo>/quiz-app
npm install        # 安装依赖
npm run build      # 构建产物
npm run dev        # 启动本地开发服务器
npm run lint       # （可选）代码规范检查

部署到 Azure Static Web Apps 时，在 Azure 门户中选择订阅与资源组后，将部署源设为 GitHub 并指定：Organization（你的组织）、Repository（本课程仓库）、Branch（如 main）；Azure 的构建预设会自动探测框架，按以下参数填写即可——App location：./quiz-app，Output location：dist（API 位置可留空）。部署完成后，仓库 .github 目录会自动生成 GitHub Actions 工作流文件，用于在 main 分支发生 push / PR 等事件时自动重新构建并发布；成功执行后刷新线上页面即可看到应用。

其他系列课程与社区支持

作为系列课程之一，作者团队（Microsoft Cloud Advocates）还维护着面向初学者的其他课程，涉及机器学习、数据科学、AI、网络安全、物联网、XR 等主题，本课程属于其中"Web 开发入门"方向（仓库根 README 中罗列了完整的姊妹课程清单）。若在学习或构建 AI 应用过程中遇到问题，可加入 Azure AI Foundry Discord 与 fellow learners 讨论，或在开发者论坛提交产品反馈与报错。

本仓库采用 MIT 许可证 开源，详见 LICENSE 文件。仓库同时提供了 CODE_OF_CONDUCT.md（行为准则）与 CONTRIBUTING.md（贡献指南），欢迎以 Issues 或讨论的形式提出改进建议。现在，从 Fork 这份仓库开始，打开第 01 课，你的 12 周 Web 开发之旅就正式启程了。