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

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

【免费下载链接】Web-Dev-For-Beginners24 Lessons, 12 Weeks, Get Started as a Web Developer项目地址: https://gitcode.com/GitHub_Trending/we/Web-Dev-For-Beginners

本仓库是一套面向零基础学习者的开源全栈入门课程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、克隆与多语言仓库的稀疏检出

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

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

一个重要的仓库事实是：本仓库包含 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，即可创建并进入一个预配置的云端开发容器，所有工具都随课程就绪。它适合没有本地开发环境的初学者。

路径二：本地运行

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

使用 Visual Studio Code 作为编辑器（其内置集成终端）；不输出外部链接，可在官网下载安装；
克隆仓库后，用File > Open Folder打开克隆下来的文件夹；
安装两个推荐的 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），知识点链接指向对应教学文章。

从课程文档的公告信息看，仓库最近还补充了新的挑战类型——在多数章节中寻找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 课组织章节导航）。

离线启动步骤如下：

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

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）自动生成（见文档末尾免责声明），自动翻译可能存在误差或不准确之处，正式以英文原版为权威来源；涉及关键信息时可参考英文原文核实。

<输出文章>

【免费下载链接】Web-Dev-For-Beginners24 Lessons, 12 Weeks, Get Started as a Web Developer项目地址: https://gitcode.com/GitHub_Trending/we/Web-Dev-For-Beginners

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

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