Web-Dev-For-Beginners 全攻略：12 周 26 讲的零基础 Web 开发课程体系与实战上手指南

本文以仓库中的 阿拉伯语版课程首页（与根目录 README.md 同源）为骨架，系统梳理 Web-Dev-For-Beginners 这一开源教学仓库的整体结构：从多语言支持、sparse checkout 轻量克隆，到 Codespace/本地环境搭建、每节课的标准学习流程、Quiz 测验应用实现，以及 26 讲课程清单与教学法设计。读完本文，你将能快速判断这份课程是否适合自己，并照着清晰的步骤从零开始运行、学习甚至以教师身份二次组织这套教材。

课程总览：一门围绕真实项目展开的 Web 入门课

Web-Dev-For-Beginners 由微软 Cloud Advocates 团队出品，主 README 的定位是"24 Lessons, 12 Weeks, Get Started as a Web Developer"——即面向零基础的 12 周速成课程。课程技术范围高度聚焦，不引入任何前端框架，只围绕 HTML、CSS、JavaScript 三件套展开，并通过六个循序渐进的真实项目贯穿始终：

• 在线植物生态缸（Terrarium）
• 打字练习游戏（Typing Game）
• 绿色环保浏览器扩展（Browser Extension）
• 太空射击游戏（Space Game）
• 企业银行应用（Banking App）
• 后期新增的 AI 聊天助手项目（Chat Assistant）

从仓库的 docs/_sidebar.md 可以看到整个课程被组织为入门（Getting Started）、JS 基础（JS Basics）、HTML/CSS/JS 实践、打字游戏、浏览器扩展、太空游戏、银行项目、代码编辑器与 AI 助手等递进阶段。值得注意的是：虽然课程口号仍写"24 lessons"，但课程表目前已经扩充到 26 讲（新增了第 25 讲"使用 VSCode 代码编辑器"与第 26 讲"AI 助手项目"），下文会给出完整的逐讲清单。

多语言支持与轻量化克隆：sparse checkout 的正确姿势

该仓库最大的特色之一就是超强的多语言覆盖——translations/ 目录下包含 50 多种语言的 README 翻译，例如本文依据的 translations/ar/README.md（阿拉伯语），以及 translations/zh-CN/ 下的简体中文等版本；与之配套的 translated_images 目录还存放了每种语言的本地化图片（webp 格式）。这些翻译由 Azure/co-op-translator 这样的翻译工具通过 GitHub Action 自动化维护、持续更新，因此各语言版本始终与英文原文保持同步。

但如此庞大的翻译文件也带来一个实际问题：仓库体积过大，影响克隆速度。原文档给出的解决方案是 Git 的 sparse checkout（稀疏检出），只拉取完成课程真正需要的文件，跳过 translations 与 translated_images 两个目录：

Bash / macOS / Linux：

git clone --filter=blob:none --sparse <your-repository-url>
cd Web-Dev-For-Beginners
git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'

CMD（Windows）：

git clone --filter=blob:none --sparse <your-repository-url>
cd Web-Dev-For-Beginners
git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"

其中 --filter=blob:none 是部分克隆（partial clone）参数，让 Git 在需要时才按需下载文件内容；--no-cone 模式配合 /* 加 ! 排除规则，即可在保留根目录全部课程内容的前提下跳过翻译目录。这样你就能以远高于全量克隆的速度拿到完成课程所需的全部素材——这也解释了为何中文资料常建议克隆时特意排除这些大目录。

起步准备：Fork、克隆与两种运行环境

原文档将学习者（Learners）与教师（Teachers）的使用路径分开设计。对学习者，官方推荐的启动步骤是：

1. Fork 仓库：点击页面右上角 "Fork" 按钮，创建属于你自己的副本；也可以使用 "Use this template" 将课程作为模板直接生成新仓库，便于保存自己的练习成果。
2. 克隆到本地：先点击 "Code" 复制你自己的仓库地址，再在终端执行 git clone <your-repository-url>。
3. 打开并预览：在 VS Code 中用 File > Open Folder 打开克隆下来的目录。

如果你把上面的占位符 <your-repository-url> 换成你自己 fork 后的仓库地址，就既能保留历史提交，又能把每一讲作业自由地提交到个人仓库中。

在正式动笔写代码前，第一讲 1-getting-started-lessons/1-intro-to-programming-languages/README.md 会带你逐一认识"编辑器 + 浏览器 + 命令行"三件套，帮助你选定最适合自己的工具组合，因此它被设计成真正意义上的开篇引导课。

方式一：直接在 GitHub Codespaces 中运行（零安装）

课程自带开箱即用的开发环境。在你自己 Fork 出的仓库页面上，点击 Code 按钮并选择 Open with Codespaces，即可得到一个完全运行在浏览器里的云端工作区，无需在本地安装任何东西：

方式二：本地 VS Code + 终端

本地运行只需文本编辑器、浏览器和命令行工具。官方推荐的组合是 VS Code（自带集成 Terminal），并建议安装两个扩展：

• Live Server：在 VS Code 内直接预览 HTML 页面；
• GitHub Copilot：辅助你更快地编写代码。

如果你对某个项目（例如 6-space-game 或 7-bank-project）的最终效果好奇，可以先打开对应 solution 目录下的页面进行比对——仓库几乎为每讲都提供了可运行的 solution 完整实现。

每节课的标准学习闭环

这不是一本单纯"读"的教材。文档明确列出每一讲的固定组成结构，形成"测—学—练—评"的闭环：

• 可选的涂鸦笔记（sketchnote）与配套视频
• 课前热身测验（pre-lesson warmup quiz）
• 文字讲义（written lesson）
• 项目类课程配套的分步构建指南（step-by-step guides）
• 知识检查（knowledge checks）
• 挑战任务（a challenge）
• 补充阅读（supplemental reading）
• 作业（assignment）
• 课后测验（post-lesson quiz）

绝大多数章节中还内置了标注 🚀 的 GitHub Copilot Agent 挑战——这是较新加入的内容，要求你用 Copilot 的 Agent 模式完成更开放的任务，Agent 不仅能生成文字，还能创建、编辑文件并执行命令。

测验系统：Quiz App 的前后端实现细节

课程文档特别说明：所有课前/课后测验都集中在 quiz-app 目录，共 48 个测验、每个测验包含 3 道题。我们可以在 quiz-app/src/assets/translations/en.json 中核实到这一数据——该文件里实际包含 48 个带 id 的测验条目（注意 quiz-app/README.md 中"40 quizzes"属于旧版描述，以主 README 与 JSON 数据的 48 个为准）。测验同样具备多语言能力，quiz-app/src/assets/translations 下存放了 en.json、zh_cn.json 等十几种语言的题目文件。

从 quiz-app/package.json 可以看出，测验应用本身是一个基于 Vue 3.4 + vue-router 4 + Vite 6 的前端工程（vite 驱动开发与构建），而不是静态页面。题目 JSON 的结构非常规整，顶层分组里每个 quiz 都包含 id、title 与题目数组：

[
  {
    "title": "A title",
    "complete": "A complete button title",
    "error": "An error message upon selecting the wrong answer",
    "quizzes": [
      {
        "id": 1,
        "title": "Title",
        "quiz": [
          {
            "questionText": "The question asked",
            "answerOptions": [
              { "answerText": "Option 1 title", "isCorrect": true },
              { "answerText": "Option 2 title", "isCorrect": false }
            ]
          }
        ]
      }
    ]
  }
]

本地运行与构建

按 quiz-app/README.md 的指引，在 quiz-app 目录下执行即可：

npm install      # 安装依赖
npm run dev      # 本地启动开发服务器（Vite）
npm run build    # 打包产物输出到 dist
npm run lint     # 可选：ESLint 代码检查

部署到 Azure Static Web Apps

测验应用支持一键部署到 Azure Static Web Apps（官方估算部署成本为 0 元）。在 Azure 门户创建 Static Web App 时，关键配置为：

• App location：./quiz-app
• Output location：dist
• 部署成功后 Azure 会在仓库 .github 目录自动生成 GitHub Actions 工作流文件，监听 main 分支的 push / pull_request 事件触发重新构建与部署。

完整课程清单（01–26 讲）

以下逐讲清单来自 translations/ar/README.md 的课程总表（概念、目标均已转述为中文，各讲正文链接统一改为从仓库根目录出发的相对路径）：

讲次	所属项目	核心概念	关联讲义
01	入门	编程语言与开发工具基础	编程语言与工具
02	入门	GitHub 基础与团队协作	GitHub 入门
03	入门	Web 无障碍（Accessibility）	无障碍基础
04	JS 基础	JavaScript 数据类型	数据类型
05	JS 基础	函数与方法	函数与方法
06	JS 基础	用 JS 做决策（条件判断）	决策逻辑
07	JS 基础	数组与循环	数组与循环
08	Terrarium	HTML 实战：搭建布局	HTML 入门
09	Terrarium	CSS 实战：样式与响应式	CSS 入门
10	Terrarium	JS 闭包与 DOM 操作（拖拽交互）	JS 闭包与 DOM
11	Typing Game	键盘事件驱动逻辑	事件驱动编程
12	浏览器扩展	浏览器工作原理与扩展骨架	认识浏览器
13	浏览器扩展	表单、调用 API 与本地存储	API、表单与 Local Storage
14	浏览器扩展	后台任务与 Web 性能优化	后台任务与性能
15	Space Game	类继承、组合与 Pub/Sub 模式	进阶游戏开发入门
16	Space Game	Canvas API 绘制	Canvas 绘制
17	Space Game	笛卡尔坐标与元素移动	元素移动
18	Space Game	碰撞检测与按键响应	碰撞检测
19	Space Game	计分与状态运算	计分系统
20	Space Game	游戏结束与重启、资源清理	结束条件
21	Bank Project	HTML 模板与前端路由	模板与路由
22	Bank Project	登录/注册表单与校验	表单
23	Bank Project	数据获取、存储与销毁	数据层
24	Bank Project	状态管理概念	状态管理
25	Code Editor	使用 VS Code 代码编辑器	使用 VS Code
26	AI Assistants	构建自己的 AI 助手	AI 助手项目

每讲对应的 assignment.md 提供可交付的课后作业，而 solution/ 目录则给出参考实现，例如 3-terrarium/solution/、4-typing-game/solution/、5-browser-extension/solution/、6-space-game/solution/、7-bank-project/solution/ 都是可以直接打开运行的成品。

教学法设计：为什么"项目驱动 + 高频测验"更有效

课程的两个核心教学法原则是 基于项目的学习（project-based learning） 与 高频测验（frequent quizzes）。从 translations/ar/README.md 的说明可以提炼出如下设计逻辑：

• 内容对齐项目：每讲知识点都服务于一个真实可见的产出物，学习过程因此更有沉浸感，概念留存率更高。项目从简单起步、复杂度逐周递增，最终覆盖打字游戏、虚拟生态缸、浏览器扩展、太空游戏与银行应用五类完整作品。
• 课前课后的双测验机制：课前低压力测验（pre-quiz）帮助学生带着意图进入新主题；课后测验（post-quiz）则强化记忆留存。
• 刻意回避框架：课程有意不引入任何 JavaScript 框架，目的是让学习者先掌握 Web 开发的基础能力；因此官方建议的后续学习路径是 Node.js。
• 灵活可裁剪：整套课程可完整学习，也可按需拆取部分章节使用。

给教师的使用建议

文档为教师单独开辟了建议章节（仓库根目录下的 for-teachers.md），内容包括：

• GitHub Classroom 集成：建议按"每讲一个仓库"的方式拆解课程，配合 lesson-01-intro 之类的命名约定、quiz/assignment 等标签以及按届次打 tag/release 来管理作业与批改；
• LMS 导入包：仓库 teaching-files 目录预置了 Moodle 课程包（webdev-moodle.mbz）与通用 Common Cartridge 文件（webdev-common-cartridge.imscc），可导入 Moodle、Canvas 等主流学习管理系统。

离线阅读与二次分发：Docsify 与 PDF

• Docsify 离线站点：仓库自带 docs/_sidebar.md 与 docs/_navbar.md 导航配置，支持用 Docsify 在本地离线渲染整份文档。Fork 仓库并安装 Docsify 后，在仓库根目录执行 docsify serve，站点会运行在 http://localhost:3000。
• PDF 版本：全部讲义的打包 PDF 位于仓库 pdf/readme.pdf；根目录 package.json 中通过 docsify-to-pdf 提供了 npm run convert 的 PDF 转换脚本，相关实现可参考根目录的 docsifytopdf.js。

许可与仓库规范

• 本仓库以 MIT 许可证 发布，详见根目录 LICENSE。
• 参与贡献前请阅读 CODE_OF_CONDUCT.md（行为准则）与 CONTRIBUTING.md（贡献指南）；中文翻译仓库的经验显示，翻译提交主要通过自动化翻译工具 + 人工 PR 校对的流程合入。

小结

Web-Dev-For-Beginners 的价值在于它把"学语法"与"做作品"无缝衔接：26 讲覆盖从编程语言通识、Git/GitHub、无障碍，到 DOM/CSS/Canvas 游戏、表单校验、路由状态管理乃至 AI 助手的完整知识带，所有概念都落在六个可运行的渐进式项目上，再配合 48 个三人题的测验闭环。无论你是打算自学入门、用 GitHub Classroom 开班授课，还是把它作为企业内训素材，都可以参照上文的多语言精简克隆、环境搭建与逐讲索引快速落地。