
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 --filterblob:none --sparse 你的仓库地址 cd Web-Dev-For-Beginners git sparse-checkout set --no-cone /* !translations !translated_images:: CMD (Windows) git clone --filterblob:none --sparse 你的仓库地址 cd Web-Dev-For-Beginners git sparse-checkout set --no-cone /* !translations !translated_images--filterblob: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 统一导入注册——这也是多语言社区翻译、新增语种的入口。若要把测验应用免费部署到 Azurequiz-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 课组织章节导航。离线启动步骤如下Fork 本仓库或直接使用本地克隆在本地机器安装 Docsify在仓库根目录执行docsify serve站点会运行在http://localhost:3000。若你希望得到一份所有课程的静态合订版仓库内还提供了 pdf/readme.pdfPDF 合订文件。面向教师与延伸学习教师使用课程文档与仓库内置了多种课堂落地方式。for-teachers.md 详细介绍了如何配合 GitHub Classroom 按「一课一仓库」组织班级作业以及直接使用本仓库授课的同步/异步模式仓库还提供了可直接导入主流 LMS 的课程包teaching-files/webdev-moodle.mbzMoodle与 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),仅供参考