Web-Dev-For-Beginners 课程全景指南：12 周 24 课从零掌握 HTML、CSS 与 JavaScript

本仓库是一套面向零基础学习者的开源全栈入门课程 Web Development for Beginners - A Curriculum（官方英文版见仓库根目录 README.md，本文主体对应的保加利亚语版见 translations/bg/README.md），由 Microsoft Cloud Advocates 牵头编写。课程以「项目驱动学习 + 高频测验」为核心方法论，用 24 堂渐进式课程带领你通过构建真实项目掌握 JavaScript、HTML、CSS。读完本文，你将理解课程的完整骨架、如何在本仓库的多种语言版本中高效克隆与配置开发环境、每一课的学习闭环，以及 26 节课（含两节新增课）的知识点与项目地图。

课程是什么：从「入门」到「做得出东西」

这是一门被设计为 12 周、24 课（官方文档口径；目录表现已扩充至 26 行） 的初学者课程。它的核心承诺不是堆砌语法，而是让你通过动手项目获得真实可上手的 Web 开发经验。课程文档列出的关键定位包括：

• 教学内容：JavaScript、HTML、CSS 三大基础，以及现代 Web 开发者正在使用的工具与技巧；
• 项目载体：打字游戏、虚拟植物温室（Terrarium）、环保主题浏览器扩展、太空入侵者风格游戏、面向业务场景的银行应用，以及新增的 AI 助手聊天项目；
• 设计初衷：有意避开 JavaScript 框架，先把作为 Web 开发者应掌握的基础技能打牢（学完后的推荐下一步是学习 Node.js）。

从仓库目录结构看（如 1-getting-started-lessons、2-js-basics、3-terrarium、4-typing-game、5-browser-extension、6-space-game、7-bank-project 等），内容组织方式与课程文档完全对应：先学编程语言与 GitHub、可访问性基础，再学 JS 数据类型、函数、条件分支、数组与循环，随后进入以「项目」为单位、难度逐课递增的实战阶段。

开始前的准备：Fork、克隆与多语言仓库的稀疏检出

课程的文档建议按以下顺序开始：

1. 创建你自己的副本：点击页面顶部 Use this template 或 Fork 按钮，在个人 GitHub 账号下生成一份课程副本，方便保存自己的练习成果；
2. 克隆到本地：在终端中执行 git clone <你的仓库地址>（将 <你的仓库地址> 替换为你 Fork 后得到的仓库 URL）；
3. 加入社区讨论，与其他学习者和开发者交流。

一个重要的仓库事实是：本仓库包含 50+ 种语言的翻译版本（英文主版本之外，其余语言统一存放在 translations 目录，按语言代码分子目录，如 bg、zh-CN、ja、fr 等；配套翻译图片位于 translated_images）。翻译由 GitHub Action 自动化维护、持续保持与英文版同步，但也显著增大了克隆体积。

文档因此给出跳过翻译内容的高效克隆方案（sparse checkout）：

# Bash / macOS / Linux
git clone --filter=blob:none --sparse <你的仓库地址>
cd Web-Dev-For-Beginners
git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'

:: CMD (Windows)
git clone --filter=blob:none --sparse <你的仓库地址>
cd Web-Dev-For-Beginners
git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"

--filter=blob:none 表示按需延迟下载文件内容（blob），--sparse 与 sparse-checkout set --no-cone 则把检出范围限定为课程实际需要的目录、显式排除 translations 与 translated_images 两个大目录。这样既能拿到完成课程所需的全部内容，又能显著加快克隆速度。若后续需要某个语言的完整内容，可以再通过 sparse-checkout 规则按需添加。

运行课程的两种环境

课程文档明确说明「开箱即用的开发环境」，并提供两条运行路径：

路径一：GitHub Codespaces（浏览器环境，无需安装）

在你的课程副本页面点击 Code 按钮，选择 Open with Codespaces，即可创建并进入一个预配置的云端开发容器，所有工具都随课程就绪。它适合没有本地开发环境的初学者。

路径二：本地运行

本地运行课程需要三样东西：文本编辑器、浏览器和命令行工具。第一课 编程语言与行业工具入门 会带你逐项对比各工具的选项，帮助你做选择。课程推荐组合为：

1. 使用 Visual Studio Code 作为编辑器（其内置集成终端）；不输出外部链接，可在官网下载安装；
2. 克隆仓库后，用 File > Open Folder 打开克隆下来的文件夹；
3. 安装两个推荐的 VS Code 扩展：
   • Live Server：直接在 VS Code 内预览 HTML 页面；
   • GitHub Copilot：辅助你更快地编写代码。

每一课包含的「学习闭环」

无论你选择哪一课，都会体验同一套经过设计的标准化学习流程。课程文档列出的单课组成要素如下：

• 可选的 sketchnote（视觉笔记）；
• 可选的补充视频；
• 课前热身测验（pre-lesson quiz，低风险、用于设定学习意图）；
• 成文的图文讲解（written lesson）；
• 对项目型课程而言，附有分步构建指南；
• 课内知识检查（knowledge check）；
• 一项挑战（challenge）；
• 补充阅读材料（supplemental reading）；
• 课后作业（assignment）；
• 课后测验（post-lesson quiz，用于巩固记忆）。

测验系统：quiz-app

文档特别说明：全部测验集中在 quiz-app 目录，共 48 组小测验、每组 3 题（课程文档口径；quiz-app/README.md 中的维护说明另有「40 组、从 0 计数」的表述，两组文档计数不一致，以课程英文主 README 与后续维护口径为准）。测验应用可以本地运行，也可以部署到 Azure。

从 quiz-app/package.json 的源码事实看，quiz-app 是一个 Vue 3 + Vue Router + Vite 的前端工程，常用命令包括：

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

测验题数据以多语言 JSON 形式存放在 quiz-app/src/assets/translations（含 en.json、zh_cn.json、zh_tw.json、ja.json、fr.json、bg.json 之外的多语种文件），并由同目录的 index.js 统一导入注册——这也是多语言社区翻译、新增语种的入口。

若要把测验应用免费部署到 Azure，quiz-app/README.md 给出了 Azure Static Web Apps 的标准配置：应用位置（App location）填 ./quiz-app、构建输出目录（Output location）填 dist，部署完成后会自动在仓库 .github 目录生成触发重新部署的 GitHub Actions 工作流。

26 课全览：项目、知识点与学习目标

下表依据课程文档的「Lessons」目录整理（保留了课程文档对 26 行的编号与归类，所有链接已统一为仓库根目录相对路径）。文档中项目名链接指向该项目的完整可运行代码（solution），知识点链接指向对应教学文章。

#	项目	讲解主题	学习目标	对应课程
01	Getting Started	编程语言与行业工具入门	了解大多数编程语言背后的基本原理，以及专业开发者依赖的软件工具	Intro to Programming Languages and Tools
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 实战	搭建在线温室页面，重点在页面布局	Introduction to HTML
09	Terrarium 项目	CSS 实战	编写样式并掌握 CSS 基础与响应式	Introduction to CSS
10	Terrarium 项目	JS 闭包与 DOM 操作	用拖拽交互让温室「活」起来，重点讲闭包与 DOM	JS Closures, DOM manipulation
11	Typing Game 项目	构建打字游戏	学习用键盘事件驱动 JS 应用逻辑（事件驱动编程）	Event-Driven Programming
12	Green Browser Extension	浏览器工作原理	了解浏览器历史与工作方式，搭建扩展的第一批元素	About Browsers
13	Green Browser Extension	表单、API 与本地存储	用 localStorage 存储变量并调用 API，构建扩展的 JS 部分	APIs, Forms, and Local Storage
14	Green Browser Extension	浏览器后台任务与性能	用浏览器后台进程管理扩展图标，学习 Web 性能与优化	Background Tasks and Performance
15	Space Game 项目	更进阶的 JS 游戏开发	学习 Class 继承、Composition 与 Pub/Sub 模式	Intro 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/VSCode	使用代码编辑器	学习代码编辑器的使用	Use VSCode Code Editor
26	AI Assistants	使用 AI	学习构建自己的 AI 助手	AI Assistant project

从课程文档的公告信息看，仓库最近还补充了新的挑战类型——在多数章节中寻找 GitHub Copilot Agent Challenge，需要借助 GitHub Copilot 的 Agent 模式完成：该模式不仅能生成文本，还能创建与编辑文件、执行命令。这一设计反映课程正持续向 AI 辅助开发演进。

教学法：为什么这样安排

课程文档将教学设计归结为两个关键原则：

• 项目驱动学习（project-based learning）——把内容和真实项目对齐，学习过程更有参与感、概念记忆更牢固；
• 高频测验（frequent quizzes）——课前一组低风险小测验帮学生「设定意图」，课后一组测验强化记忆。

文档同时强调课程刻意不引入任何 JavaScript 框架，以便在进入框架生态之前先把基本功打牢；「先基础、后框架」的路线也解释了为什么课程从变量、函数一直讲到 DOM 操作与状态管理，却不涉及 React/Vue 框架教学。项目难度设计为从小到大、循序渐进，最终在 12 周周期内形成完整能力。另据文档说明，课程中的 JS 基础部分还配套了面向初学者的 JavaScript 视频系列，部分作者参与编写了本课程。

离线访问：Docsify 本地文档站

课程文档支持完全离线阅读。仓库根目录的 index.html 使用 Docsify 构建静态文档站，其配置片段（loadNavbar: 'docs/_navbar.md'、relativePath: true 以及一组把课程路径自动映射到各语言翻译 README 的 alias 规则）印证了这套离线方案。目录顺序定义见 docs/_sidebar.md（按 1–24 课组织章节导航）。

离线启动步骤如下：

1. Fork 本仓库（或直接使用本地克隆）；
2. 在本地机器安装 Docsify；
3. 在仓库根目录执行：

docsify serve

站点会运行在 http://localhost:3000。若你希望得到一份所有课程的静态合订版，仓库内还提供了 pdf/readme.pdf（PDF 合订文件）。

面向教师与延伸学习

• 教师使用：课程文档与仓库内置了多种课堂落地方式。for-teachers.md 详细介绍了如何配合 GitHub Classroom 按「一课一仓库」组织班级作业，以及直接使用本仓库授课的同步/异步模式；仓库还提供了可直接导入主流 LMS 的课程包：teaching-files/webdev-moodle.mbz（Moodle）与 teaching-files/webdev-common-cartridge.imscc（通用 Common Cartridge，可兼容 Canvas 等平台）。
• 学习者延伸：文档推荐结合 Microsoft Learn 的补充学习材料与 Student Hub 学生资源（含面向学生的免费资源与证书信息），并鼓励学习者在讨论社区中与同伴协作、向维护团队提问。

姊妹课程、支持渠道与许可

项目组围绕同一「For Beginners」系列持续产出多门姊妹课程，例如 Generative AI 系列（含 .NET / Java / JavaScript 分支）、ML for Beginners、Data Science for Beginners、AI for Beginners、Cybersecurity、IoT、XR、LangChain、Azure/Edge/MCP/Agents 以及 Copilot 系列，具体入口以各课程官方发布页为准。遇到问题可在仓库讨论区与支持论坛提问。本仓库以 MIT 许可发布，许可全文见 LICENSE。

提示：多语言版本由 AI 翻译服务（Co-op Translator）自动生成（见文档末尾免责声明），自动翻译可能存在误差或不准确之处，正式以英文原版为权威来源；涉及关键信息时可参考英文原文核实。

<输出文章>