Web-Dev-For-Beginners 仓库工程指南多项目结构、运行部署与 Docsify 翻译体系全解析【免费下载链接】Web-Dev-For-Beginners24 Lessons, 12 Weeks, Get Started as a Web Developer项目地址: https://gitcode.com/GitHub_Trending/we/Web-Dev-For-Beginners本文基于该仓库的AGENTS.md操作手册含丹麦语译文 translations/da/AGENTS.md编写面向需要维护、二次开发或系统性地跑通这个课程仓库的开发者。文章覆盖仓库的整体结构与架构、各子项目Quiz App、Bank API、Browser Extension、Space Game、AI Chat的安装与启动命令、测试与代码风格约定、Docsify 文档与 PDF 构建、翻译体系以及常见故障排查方法。读完之后你能够独立完成该教育课程仓库的克隆、各独立项目的本地运行、构建验证与文档发布全流程。仓库概览12 周课程与 24 个动手项目Web-Dev-For-Beginners 是由 Microsoft Cloud Advocates 开发的教育课程仓库定位为12 周、24 课的 Web 开发入门路径内容围绕 JavaScript、CSS 和 HTML 三大核心技术展开。其核心构成包括教学内容24 个结构化课程按项目式模块组织实战项目Terrarium生态瓶、Typing Game打字游戏、Browser Extension浏览器扩展、Space Game太空游戏、Banking App银行应用、Code Editor代码编辑器与 AI Chat AssistantAI 聊天助手互动测验48 个测验每个 3 道题作为课前/课后评估多语言支持通过 GitHub Actions 自动翻译至 50 语言技术栈HTML、CSS、JavaScript、Vue.js 3、Vite、Node.js、Express、Python用于 AI 项目。目录结构与伪 Monorepo架构从源码结构看该仓库并不是传统意义上共享依赖的 monorepo而是一个课程式目录 独立项目的混合结构课程按数字序号顺序编号1-getting-started-lessons/、2-js-basics/、3-terrarium/、4-typing-game/、5-browser-extension/、6-space-game/、7-bank-project/、8-code-editor/、9-chat-project/、10-ai-framework-project/每个课程目录包含README.md、assignment.md、代码示例与solution/答案目录部分项目还有start/或your-work/目录供学员填写独立项目各自携带package.json彼此不共享依赖互不影响翻译内容统一收纳在translations/{language-code}/结构下仓库中实际包含ar、bg、de、zh-CN、pt-BR等 50 余个语言目录。各子项目的安装与启动命令手册明确指出该仓库主要用于教育内容消费只有在对特定项目动手开发时才需要执行安装。以下逐项目给出操作方式并结合各项目的package.json与源码说明实际约束。主仓库克隆git clone Web-Dev-For-Beginners 上游仓库地址 cd Web-Dev-For-Beginners克隆完成后无需在根目录执行npm install除非你要生成 PDF 文档见后文。Quiz AppVue 3 Vitecd quiz-app npm install npm run dev # 启动开发服务器 npm run build # 构建生产版本 npm run lint # 运行 ESLint从 quiz-app/package.json 可以确认其技术细节dev脚本即vitebuild为vite build此外还有preview脚本用于本地预览构建产物依赖为vue ^3.4.29与vue-router ^4.3.3开发依赖包含vite ^6.4.2、vitejs/plugin-vue ^5.2.4lint脚本是eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore——注意它自带--fix运行 lint 时会自动修复可修复的风格问题源码入口在 quiz-app/src/main.js页面由 quiz-app/src/router 与 quiz-app/src/components 组织。Bank Project APINode.js Expresscd 7-bank-project/api npm install npm start # 启动 API 服务器 npm run lint # 运行 ESLint npm run format # 用 Prettier 格式化7-bank-project/api/package.json 提供了几个关键事实engines声明node: 10即 Node.js 最低版本要求为 10运行依赖为express ^4.21.2、cors ^2.8.5、body-parser ^1.20.3format脚本实际为prettier --single-quote --write *.js格式化时强制使用单引号服务入口为 7-bank-project/api/server.js请求示例可参考同目录的 7-bank-project/api/api.http。Browser Extension 项目cd 5-browser-extension/solution npm install # 随后按照浏览器自身的说明加载扩展从 5-browser-extension/solution/package.json 可以看到这个扩展carbon-trigger-extension基于webpack打包提供npm run build一次性打包和npm run watch监听重打包两个脚本运行时要求node 18、npm 9。构建产物输出到dist/目录含dist/manifest.json加载方式遵循各浏览器的开发者扩展安装流程仓库中也提供了 Edge 安装等说明图片如 install-on-edge.png。Space Game 项目cd 6-space-game/solution npm install # 在浏览器中打开 index.html或使用 Live Server 扩展这是一个 Canvas 项目主逻辑在 6-space-game/solution/app.js页面入口为 6-space-game/solution/index.html。各课程关卡2-drawing-to-canvas/至6-end-condition/均配有solution/与your-work/两套目录方便对照练习。Chat 项目Python 后端手册给出的启动方式cd 9-chat-project/solution/backend/python pip install openai # 设置环境变量 GITHUB_TOKEN python api.py结合 9-chat-project/solution/backend/python/api.py 与 9-chat-project/solution/backend/python/llm.py 的源码可以补充几点实操细节api.py实际构建的是一个FastAPI应用含 CORS 中间件、Pydantic 请求/响应模型并提供/、/health、/test与POST /hello四个端点文件末尾有uvicorn.run(app, host0.0.0.0, port5000, reloadTrue)因此python api.py会在5000 端口启动开发服务器这意味着除了openai包之外还需要安装fastapi与uvicorn依赖llm.py通过 OpenAI 兼容客户端调用 GitHub Models 推理端点默认模型为openai/gpt-4o-mini可用环境变量LLM_MODEL与LLM_BASE_URL覆盖GITHUB_TOKEN是硬性前置条件llm.py在导入阶段即检查该环境变量未设置会直接抛出EnvironmentError。开发工作流贡献者与学习者两条路径内容贡献者的标准流程Fork仓库到你的 GitHub 账号克隆自己的 fork 到本地为改动创建新分支修改课程内容或代码示例在相关项目目录中测试代码改动按贡献指南提交 Pull Request。学习者的使用路径Fork 或克隆仓库按顺序浏览各课程目录阅读每课的README.md完成课前测验在线测验站点跟做课程目录中的代码示例完成assignment.md中的任务与挑战完成课后测验。本地实时开发Live Development文档站点在根目录运行docsify serve默认端口 3000Quiz App在quiz-app/目录运行npm run devVite 默认端口 5173HTML 项目使用 VS Code 的 Live Server 扩展API 项目在对应 API 目录运行npm start。测试策略无自动化测试套件下的验证方式手册明确声明这是一个教育仓库没有大规模的自动化测试验证主要依赖手工与静态检查# Quiz App 验证 cd quiz-app npm run lint # 检查代码风格问题 npm run build # 确认构建成功 # Bank API 验证 cd 7-bank-project/api npm run lint # 检查代码风格问题 node server.js # 确认服务器能无错启动手工测试的关注点包括代码示例运行无错误、文档内链接有效、项目构建成功、示例符合最佳实践。提交前则要求在所有含package.json的目录运行npm run lint、校验 Markdown 链接、在浏览器或 Node.js 中实测代码示例、确认翻译文件保持了正确的结构。代码风格与文件组织约定JavaScript使用现代 ES6 语法遵循各项目内置的 ESLint 配置如 quiz-app 使用eslint-plugin-vuebank-api 使用 eslint ^7变量与函数命名要有教育意义上的清晰性添加面向学习者的概念解释注释在配置了 Prettier 的地方如 bank-api按 Prettier 格式化。HTML/CSS 与 PythonHTML 使用语义化 HTML5 元素、遵循响应式设计原则、类名命名清晰并配有解释 CSS 技巧的注释Python 遵循 PEP 8示例代码清晰、在有助于理解处使用类型注解llm.py中的call_llm(prompt: str, system_message: str, ...) - str即为例证。Markdown 文档与文件组织清晰的标题层级、代码块标注语言、附额外资源链接截图与图片放在课程对应的images/目录且图片必须带 alt 文本以保证可访问性课程按序编号每个项目带solution/常带start/或your-work/翻译统一在translations/{language-code}/下。构建与部署Azure Static Web Apps、PDF 与 DocsifyQuiz App 的静态部署quiz-app 配置为通过Azure Static Web Apps部署cd quiz-app npm run build # 生成 dist/ 目录 # push 到 main 分支后由 GitHub Actions workflow 自动部署对应配置应用位置/quiz-app、输出位置dist、触发文件为 .github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml。文档 PDF 生成根目录 package.json 只有一个convert脚本node_modules/.bin/docsify-to-pdfdevDependencydocsify-to-pdf0.0.5。生成流程npm install # 安装 docsify-to-pdf npm run convert # 从 docs 生成 PDF生成逻辑入口为 docsifytopdf.js产物参考 pdf/readme.pdf。Docsify 文档站npm install -g docsify-cli # 全局安装 Docsify CLI docsify serve # 在 localhost:3000 提供服务Docsify 的侧边栏与导航由 docs/_sidebar.md 和 docs/_navbar.md 驱动——这正是文档站起不来时的首要排查项。项目级构建差异Vue 项目quiz-appnpm run build生成生产 bundle静态项目terrarium、space-game 等无构建步骤直接以静态文件服务。翻译体系co-op-translator 自动化机制翻译由 GitHub Actions 上的 co-op-translator workflow 驱动自动产出 50 语言版本源文件位于主目录课程目录与根目录翻译文件落在translations/{language-code}/每个翻译文件带有元数据头记录original_hash、translation_date、source_file、language_code四个字段文件末尾另有 Co-op Translator 免责声明区块可在 translations/da/AGENTS.md 文件尾部看到实例人工改进翻译时定位到对应语言目录 → 保持结构不变地修改 → 确保代码示例仍可运行 → 测试本地化后的测验内容。一个值得注意的性能点50 语言目录使完整克隆体积较大手册建议仅做内容工作时使用浅克隆git clone --depth 1并在针对英文内容的检索中排除translations/目录。故障排查五类常见问题症状排查路径Quiz App 启动失败检查 Node.js 版本建议 v14删除node_modules与package-lock.json后重新npm install排查端口占用Vite 默认 5173Bank API 启动失败确认 Node.js 10见 7-bank-project/api/package.json 的engines检查端口占用确认依赖已安装浏览器扩展加载失败检查manifest.json格式构建后位于dist/查看浏览器控制台报错按浏览器自身的扩展安装说明操作Python Chat 项目报错确认pip install openai完成确认GITHUB_TOKEN已设置llm.py导入即校验检查 GitHub Models 访问权限Docsify 文档站不起服务全局安装docsify-cli从仓库根目录运行确认docs/_sidebar.md存在开发环境方面的补充建议HTML 项目用 VS Code Live Server安装 ESLint 与 Prettier 扩展统一格式用浏览器 DevTools 调试 JavaScriptVue 项目可安装 Vue DevTools 浏览器扩展。安全注意事项环境变量API 密钥永远不得提交进仓库使用.env文件已被.gitignore覆盖所需环境变量应在项目 README 中写明Python 项目使用虚拟环境python -m venv venv保持依赖更新GitHub token 遵循最小权限原则GitHub Models 访问需要 Personal Access TokenPAT必须以环境变量方式保存严禁提交 token 或任何凭证。贡献规范与 Pull Request 检查清单PR 标题采用[模块] 描述的格式约定例如[Quiz-app] Add new quiz for lesson X[Lesson-3] Fix typo in terrarium project[Translation] Add Spanish translation for lesson 5[Docs] Update setup instructions提交前的四项强制检查代码质量在受影响的目录运行npm run lint修复全部 lint 错误与警告构建验证如适用则运行npm run build确保无构建错误链接校验逐一测试 Markdown 链接与图片引用内容审校检查拼写与语法、确认代码示例正确且有教学价值、确认翻译保持原意。此外还需接受 Microsoft CLA首次提交 PR 时自动校验、遵循 CODE_OF_CONDUCT.md、并参考 CONTRIBUTING.md 获取完整贡献指南PR 评审由维护者与社区共同完成优先考虑教学清晰度翻译内容则按准确性与文化相关性评审。教学定位与仓库维护该课程的目标受众是完全没有 Web 开发基础的初学者、在校学生与教师教学设计强调项目式学习、高频知识检查48 个测验、真实应用场景示例以及先基础、后框架的能力递进。仓库由维护者持续跟进依赖与内容更新Issues 与讨论有专人维护翻译更新则完全依赖 GitHub Actions 自动化。需要深入某个具体项目时可继续阅读各项目自己的 READMEquiz-app/README.mdVue 3 测验应用、7-bank-project/README.md带认证的银行应用、5-browser-extension/README.md浏览器扩展开发、6-space-game/README.mdCanvas 游戏开发、9-chat-project/README.mdAI 聊天助手项目。由于各项目完全独立、互不共享依赖你可以只克隆整个仓库中的某个子目录相关部分进行开发而不必影响其他项目。【免费下载链接】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 仓库工程指南：多项目结构、运行部署与 Docsify 翻译体系全解析
Web-Dev-For-Beginners 仓库工程指南多项目结构、运行部署与 Docsify 翻译体系全解析【免费下载链接】Web-Dev-For-Beginners24 Lessons, 12 Weeks, Get Started as a Web Developer项目地址: https://gitcode.com/GitHub_Trending/we/Web-Dev-For-Beginners本文基于该仓库的AGENTS.md操作手册含丹麦语译文 translations/da/AGENTS.md编写面向需要维护、二次开发或系统性地跑通这个课程仓库的开发者。文章覆盖仓库的整体结构与架构、各子项目Quiz App、Bank API、Browser Extension、Space Game、AI Chat的安装与启动命令、测试与代码风格约定、Docsify 文档与 PDF 构建、翻译体系以及常见故障排查方法。读完之后你能够独立完成该教育课程仓库的克隆、各独立项目的本地运行、构建验证与文档发布全流程。仓库概览12 周课程与 24 个动手项目Web-Dev-For-Beginners 是由 Microsoft Cloud Advocates 开发的教育课程仓库定位为12 周、24 课的 Web 开发入门路径内容围绕 JavaScript、CSS 和 HTML 三大核心技术展开。其核心构成包括教学内容24 个结构化课程按项目式模块组织实战项目Terrarium生态瓶、Typing Game打字游戏、Browser Extension浏览器扩展、Space Game太空游戏、Banking App银行应用、Code Editor代码编辑器与 AI Chat AssistantAI 聊天助手互动测验48 个测验每个 3 道题作为课前/课后评估多语言支持通过 GitHub Actions 自动翻译至 50 语言技术栈HTML、CSS、JavaScript、Vue.js 3、Vite、Node.js、Express、Python用于 AI 项目。目录结构与伪 Monorepo架构从源码结构看该仓库并不是传统意义上共享依赖的 monorepo而是一个课程式目录 独立项目的混合结构课程按数字序号顺序编号1-getting-started-lessons/、2-js-basics/、3-terrarium/、4-typing-game/、5-browser-extension/、6-space-game/、7-bank-project/、8-code-editor/、9-chat-project/、10-ai-framework-project/每个课程目录包含README.md、assignment.md、代码示例与solution/答案目录部分项目还有start/或your-work/目录供学员填写独立项目各自携带package.json彼此不共享依赖互不影响翻译内容统一收纳在translations/{language-code}/结构下仓库中实际包含ar、bg、de、zh-CN、pt-BR等 50 余个语言目录。各子项目的安装与启动命令手册明确指出该仓库主要用于教育内容消费只有在对特定项目动手开发时才需要执行安装。以下逐项目给出操作方式并结合各项目的package.json与源码说明实际约束。主仓库克隆git clone Web-Dev-For-Beginners 上游仓库地址 cd Web-Dev-For-Beginners克隆完成后无需在根目录执行npm install除非你要生成 PDF 文档见后文。Quiz AppVue 3 Vitecd quiz-app npm install npm run dev # 启动开发服务器 npm run build # 构建生产版本 npm run lint # 运行 ESLint从 quiz-app/package.json 可以确认其技术细节dev脚本即vitebuild为vite build此外还有preview脚本用于本地预览构建产物依赖为vue ^3.4.29与vue-router ^4.3.3开发依赖包含vite ^6.4.2、vitejs/plugin-vue ^5.2.4lint脚本是eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore——注意它自带--fix运行 lint 时会自动修复可修复的风格问题源码入口在 quiz-app/src/main.js页面由 quiz-app/src/router 与 quiz-app/src/components 组织。Bank Project APINode.js Expresscd 7-bank-project/api npm install npm start # 启动 API 服务器 npm run lint # 运行 ESLint npm run format # 用 Prettier 格式化7-bank-project/api/package.json 提供了几个关键事实engines声明node: 10即 Node.js 最低版本要求为 10运行依赖为express ^4.21.2、cors ^2.8.5、body-parser ^1.20.3format脚本实际为prettier --single-quote --write *.js格式化时强制使用单引号服务入口为 7-bank-project/api/server.js请求示例可参考同目录的 7-bank-project/api/api.http。Browser Extension 项目cd 5-browser-extension/solution npm install # 随后按照浏览器自身的说明加载扩展从 5-browser-extension/solution/package.json 可以看到这个扩展carbon-trigger-extension基于webpack打包提供npm run build一次性打包和npm run watch监听重打包两个脚本运行时要求node 18、npm 9。构建产物输出到dist/目录含dist/manifest.json加载方式遵循各浏览器的开发者扩展安装流程仓库中也提供了 Edge 安装等说明图片如 install-on-edge.png。Space Game 项目cd 6-space-game/solution npm install # 在浏览器中打开 index.html或使用 Live Server 扩展这是一个 Canvas 项目主逻辑在 6-space-game/solution/app.js页面入口为 6-space-game/solution/index.html。各课程关卡2-drawing-to-canvas/至6-end-condition/均配有solution/与your-work/两套目录方便对照练习。Chat 项目Python 后端手册给出的启动方式cd 9-chat-project/solution/backend/python pip install openai # 设置环境变量 GITHUB_TOKEN python api.py结合 9-chat-project/solution/backend/python/api.py 与 9-chat-project/solution/backend/python/llm.py 的源码可以补充几点实操细节api.py实际构建的是一个FastAPI应用含 CORS 中间件、Pydantic 请求/响应模型并提供/、/health、/test与POST /hello四个端点文件末尾有uvicorn.run(app, host0.0.0.0, port5000, reloadTrue)因此python api.py会在5000 端口启动开发服务器这意味着除了openai包之外还需要安装fastapi与uvicorn依赖llm.py通过 OpenAI 兼容客户端调用 GitHub Models 推理端点默认模型为openai/gpt-4o-mini可用环境变量LLM_MODEL与LLM_BASE_URL覆盖GITHUB_TOKEN是硬性前置条件llm.py在导入阶段即检查该环境变量未设置会直接抛出EnvironmentError。开发工作流贡献者与学习者两条路径内容贡献者的标准流程Fork仓库到你的 GitHub 账号克隆自己的 fork 到本地为改动创建新分支修改课程内容或代码示例在相关项目目录中测试代码改动按贡献指南提交 Pull Request。学习者的使用路径Fork 或克隆仓库按顺序浏览各课程目录阅读每课的README.md完成课前测验在线测验站点跟做课程目录中的代码示例完成assignment.md中的任务与挑战完成课后测验。本地实时开发Live Development文档站点在根目录运行docsify serve默认端口 3000Quiz App在quiz-app/目录运行npm run devVite 默认端口 5173HTML 项目使用 VS Code 的 Live Server 扩展API 项目在对应 API 目录运行npm start。测试策略无自动化测试套件下的验证方式手册明确声明这是一个教育仓库没有大规模的自动化测试验证主要依赖手工与静态检查# Quiz App 验证 cd quiz-app npm run lint # 检查代码风格问题 npm run build # 确认构建成功 # Bank API 验证 cd 7-bank-project/api npm run lint # 检查代码风格问题 node server.js # 确认服务器能无错启动手工测试的关注点包括代码示例运行无错误、文档内链接有效、项目构建成功、示例符合最佳实践。提交前则要求在所有含package.json的目录运行npm run lint、校验 Markdown 链接、在浏览器或 Node.js 中实测代码示例、确认翻译文件保持了正确的结构。代码风格与文件组织约定JavaScript使用现代 ES6 语法遵循各项目内置的 ESLint 配置如 quiz-app 使用eslint-plugin-vuebank-api 使用 eslint ^7变量与函数命名要有教育意义上的清晰性添加面向学习者的概念解释注释在配置了 Prettier 的地方如 bank-api按 Prettier 格式化。HTML/CSS 与 PythonHTML 使用语义化 HTML5 元素、遵循响应式设计原则、类名命名清晰并配有解释 CSS 技巧的注释Python 遵循 PEP 8示例代码清晰、在有助于理解处使用类型注解llm.py中的call_llm(prompt: str, system_message: str, ...) - str即为例证。Markdown 文档与文件组织清晰的标题层级、代码块标注语言、附额外资源链接截图与图片放在课程对应的images/目录且图片必须带 alt 文本以保证可访问性课程按序编号每个项目带solution/常带start/或your-work/翻译统一在translations/{language-code}/下。构建与部署Azure Static Web Apps、PDF 与 DocsifyQuiz App 的静态部署quiz-app 配置为通过Azure Static Web Apps部署cd quiz-app npm run build # 生成 dist/ 目录 # push 到 main 分支后由 GitHub Actions workflow 自动部署对应配置应用位置/quiz-app、输出位置dist、触发文件为 .github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml。文档 PDF 生成根目录 package.json 只有一个convert脚本node_modules/.bin/docsify-to-pdfdevDependencydocsify-to-pdf0.0.5。生成流程npm install # 安装 docsify-to-pdf npm run convert # 从 docs 生成 PDF生成逻辑入口为 docsifytopdf.js产物参考 pdf/readme.pdf。Docsify 文档站npm install -g docsify-cli # 全局安装 Docsify CLI docsify serve # 在 localhost:3000 提供服务Docsify 的侧边栏与导航由 docs/_sidebar.md 和 docs/_navbar.md 驱动——这正是文档站起不来时的首要排查项。项目级构建差异Vue 项目quiz-appnpm run build生成生产 bundle静态项目terrarium、space-game 等无构建步骤直接以静态文件服务。翻译体系co-op-translator 自动化机制翻译由 GitHub Actions 上的 co-op-translator workflow 驱动自动产出 50 语言版本源文件位于主目录课程目录与根目录翻译文件落在translations/{language-code}/每个翻译文件带有元数据头记录original_hash、translation_date、source_file、language_code四个字段文件末尾另有 Co-op Translator 免责声明区块可在 translations/da/AGENTS.md 文件尾部看到实例人工改进翻译时定位到对应语言目录 → 保持结构不变地修改 → 确保代码示例仍可运行 → 测试本地化后的测验内容。一个值得注意的性能点50 语言目录使完整克隆体积较大手册建议仅做内容工作时使用浅克隆git clone --depth 1并在针对英文内容的检索中排除translations/目录。故障排查五类常见问题症状排查路径Quiz App 启动失败检查 Node.js 版本建议 v14删除node_modules与package-lock.json后重新npm install排查端口占用Vite 默认 5173Bank API 启动失败确认 Node.js 10见 7-bank-project/api/package.json 的engines检查端口占用确认依赖已安装浏览器扩展加载失败检查manifest.json格式构建后位于dist/查看浏览器控制台报错按浏览器自身的扩展安装说明操作Python Chat 项目报错确认pip install openai完成确认GITHUB_TOKEN已设置llm.py导入即校验检查 GitHub Models 访问权限Docsify 文档站不起服务全局安装docsify-cli从仓库根目录运行确认docs/_sidebar.md存在开发环境方面的补充建议HTML 项目用 VS Code Live Server安装 ESLint 与 Prettier 扩展统一格式用浏览器 DevTools 调试 JavaScriptVue 项目可安装 Vue DevTools 浏览器扩展。安全注意事项环境变量API 密钥永远不得提交进仓库使用.env文件已被.gitignore覆盖所需环境变量应在项目 README 中写明Python 项目使用虚拟环境python -m venv venv保持依赖更新GitHub token 遵循最小权限原则GitHub Models 访问需要 Personal Access TokenPAT必须以环境变量方式保存严禁提交 token 或任何凭证。贡献规范与 Pull Request 检查清单PR 标题采用[模块] 描述的格式约定例如[Quiz-app] Add new quiz for lesson X[Lesson-3] Fix typo in terrarium project[Translation] Add Spanish translation for lesson 5[Docs] Update setup instructions提交前的四项强制检查代码质量在受影响的目录运行npm run lint修复全部 lint 错误与警告构建验证如适用则运行npm run build确保无构建错误链接校验逐一测试 Markdown 链接与图片引用内容审校检查拼写与语法、确认代码示例正确且有教学价值、确认翻译保持原意。此外还需接受 Microsoft CLA首次提交 PR 时自动校验、遵循 CODE_OF_CONDUCT.md、并参考 CONTRIBUTING.md 获取完整贡献指南PR 评审由维护者与社区共同完成优先考虑教学清晰度翻译内容则按准确性与文化相关性评审。教学定位与仓库维护该课程的目标受众是完全没有 Web 开发基础的初学者、在校学生与教师教学设计强调项目式学习、高频知识检查48 个测验、真实应用场景示例以及先基础、后框架的能力递进。仓库由维护者持续跟进依赖与内容更新Issues 与讨论有专人维护翻译更新则完全依赖 GitHub Actions 自动化。需要深入某个具体项目时可继续阅读各项目自己的 READMEquiz-app/README.mdVue 3 测验应用、7-bank-project/README.md带认证的银行应用、5-browser-extension/README.md浏览器扩展开发、6-space-game/README.mdCanvas 游戏开发、9-chat-project/README.mdAI 聊天助手项目。由于各项目完全独立、互不共享依赖你可以只克隆整个仓库中的某个子目录相关部分进行开发而不必影响其他项目。【免费下载链接】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），仅供参考