Web-Dev-For-Beginners 12 周学习路线图从零掌握 HTML、CSS 与 JavaScript 的 24 课实战课程【免费下载链接】Web-Dev-For-Beginners24 Lessons, 12 Weeks, Get Started as a Web Developer项目地址: https://gitcode.com/GitHub_Trending/we/Web-Dev-For-Beginners导读本文是 Web-Dev-For-Beginners 开源课程仓库的官方学习路线图指南源自仓库根目录 Roadmap.md本仓库同时提供 50 语言的翻译版本如 丹麦语版。课程以 JavaScript、HTML、CSS 为核心通过 24 节课、12 周的里程碑式编排引导学习者依次完成虚拟玻璃容器Terrarium、打字游戏、绿色浏览器扩展、太空射击游戏与企业银行应用五个真实项目。读完本文你将清晰掌握整条学习路径的阶段划分、每节课的技术要点、课程教学法设计以及从环境准备到部署上线的完整动手方案。一、路线图总览灵活可裁剪的 24 课 / 12 周课程体系路线图的核心定位是面向零基础学习者的 Web 开发基础课程。课程体系具有两个关键设计聚焦三大语言基础全部 24 课围绕 JavaScript、HTML、CSS 展开刻意不引入任何 JavaScript 框架目的是让学习者在接触框架之前先扎实掌握 Web 开发者必备的核心技能灵活可裁剪课程既可以完整修读12 周也支持按需部分学习——项目的设计遵循从小型起步、随 12 周周期逐渐复杂的原则见 README.md 教学法部分。课程在仓库中的物理组织也与此对应1-getting-started-lessons、2-js-basics两个目录承载基础概念课3-terrarium至7-bank-project五个目录承载项目实战课另有 lesson-template 提供每课的标准模板供教学参考。二、关键里程碑三个阶段逐周拆解路线图将 12 周划分为三个里程碑阶段下面按阶段完整展开每一周涉及的主题并标注仓库中的对应课程位置。第 1-3 周编程基础与工具入门主题仓库课程核心要点编程语言与从业工具介绍编程语言与工具入门绝大多数编程语言的底层原理以及专业开发者使用的软件工具链编辑器、浏览器、命令行GitHub 基础GitHub 入门如何在项目中使用 GitHub、如何与团队协作于同一代码库无障碍Accessibility无障碍基础Web 无障碍的基础概念让页面为所有用户可用JS 基础数据类型数据类型JavaScript 各数据类型的基础知识函数与方法函数与方法用函数和方法管理应用的逻辑流用 JS 做决策决策使用条件判断方法在代码中创建分支逻辑该阶段属于非项目式基础课正如 Getting Started 章节说明 所言这部分的目的是介绍成为专业开发者所必需的核心概念为后续项目实战打底。第 4-6 周Terrarium 项目——HTML/CSS/JS 首次实战主题仓库课程核心要点数组与循环数组与循环用数组和循环处理数据HTML 实战HTML 入门构建在线玻璃容器的 HTML聚焦布局搭建CSS 实战CSS 入门用 CSS 为玻璃容器美化涵盖响应式页面JS 闭包与 DOM 操作闭包与 DOM 操作让玻璃容器实现拖放交互聚焦闭包与 DOM 操作Terrarium玻璃容器是课程的第一个完整项目最终成品是一个可拖放植物的在线虚拟玻璃容器。项目完整实现位于 3-terrarium/solution含index.html、style.css、script.js并在该小节 README 中提供了通过Azure Static Web Apps一键部署到 Web 的完整指引Fork 本仓库点击 Deploy to Azure 按钮按向导创建应用将App root设为/solution或你的代码根目录本应用无 API可跳过 API 配置.github文件夹会自动生成以协助构建发布。第 7-9 周Typing Game 与浏览器扩展——事件驱动与浏览器能力主题仓库课程核心要点Typing Game事件驱动编程事件驱动编程用键盘事件驱动 JavaScript 应用的逻辑完整成品见 4-typing-game/solution浏览器工作原理关于浏览器浏览器如何工作、浏览器历史以及扩展脚手架搭建表单、调用 API 与 local storageAPI、表单与本地存储构建扩展的 JavaScript 逻辑调用 API 并使用 local storage 存储变量浏览器后台任务与 Web 性能后台任务与性能利用浏览器后台进程管理扩展图标学习 Web 性能优化Typing Game让学习者把此前积累的 HTML/CSS/JS 技能用于实战游戏随机展示福尔摩斯名言追踪打字速度与准确率含 WPM 计算、字符比对、实时反馈等机制。Green Browser Extension绿色浏览器扩展则是一个可在 Edge、Chrome、Firefox 上运行的迷你网站式扩展调用 CO2 Signal API根据用户输入的区域代码返回该地区电力使用与碳强度的读数从而辅助用户做出用电决策例如避开高用电时段使用高耗电设备。构建脚手架与最终实现分别位于 5-browser-extension/start 与 5-browser-extension/solution。第 10-12 周Space Game 与 Banking App——进阶游戏开发与 Web 应用架构主题仓库课程核心要点Space Game进阶游戏开发进阶游戏开发入门用类与组合实现继承、学习 Pub/Sub 模式为构建游戏做准备Canvas 绘图绘制到 Canvas用 Canvas API 向屏幕绘制元素屏幕元素移动移动元素基于笛卡尔坐标系与 Canvas API 让元素产生运动碰撞检测碰撞检测用按键触发元素碰撞与反应并提供冷却函数保障游戏性能计分计分依据游戏状态与表现执行数学计算游戏结束与重启结束条件结束与重启游戏包括清理资源与重置变量Banking AppHTML 模板与路由HTML 模板与路由用路由与 HTML 模板搭建多页面网站的架构骨架登录与注册表单表单构建表单并处理校验例程数据获取与使用数据数据如何进出应用获取、存储与销毁状态管理状态管理应用如何保留状态并程序化地管理它Space Game与经典游戏 Space Invaders 同思路操控飞船向从上方来袭的怪物开火。完整实现见 6-space-game/solution含app.js、index.html、spaceArt素材目录游戏资源来自 Kenney.nl 开源素材集。Banking App面向企业场景其 API 示例服务位于 7-bank-project/apiNode.js 实现server.js并附带 api.http 接口测试文件完整前端在 7-bank-project/solution。三、每课的标准构成从课前测验到课后作业的完整闭环路线图所指的一课并非单一文档而是包含完整教学闭环的资源包。根据 README.md 课程构成说明每课固定包含可选的 sketchnote手绘笔记仓库 sketchnotes 目录收录了 webdev101 系列图解可选的补充视频课前热身测验pre-lesson quiz书面课程正文项目类课程的分步构建指南知识检查knowledge checks挑战challenge补充阅读作业assignment每课对应assignment.md课后测验post-lesson quiz。测验系统集中托管在 quiz-appVue 3 Vite 构建全课程共48 个测验、每个 3 题测验应用既可本地运行也可部署到 Azure配置细节见其目录内的package.json与vite.config.js。四、教学法设计项目式学习 高频测验路线图背后的课程设计遵循两条核心教学原则详见 README.md 教学法章节项目式学习project-based learning概念始终与项目对齐让学习过程更具参与感、知识留存率更高。项目从小到大逐步复杂Terrarium静态结构 拖放交互→ Typing Game事件驱动→ 浏览器扩展调用外部 API 浏览器能力→ Space GameCanvas 游戏架构模式→ Banking App多页面应用架构与状态管理频繁测验frequent quizzes课前低风险测验让学生聚焦学习意图课后测验强化知识留存。此外课程刻意不引入 JavaScript 框架聚焦框架出现之前 Web 开发者所需的基础技能完成课程后推荐的自然下一步是学习 Node.js对应视频系列见 README 推荐。五、学习成果五个可上手的完整项目完成此路线图后学习者将获得以下实战构建经验对应原文 Learning Outcomes一个键盘打字游戏Typing Game一个虚拟玻璃容器Terrarium一个环保型浏览器扩展Green Browser Extension一个太空入侵者风格的射击游戏Space Game一个面向企业的银行应用Banking App。同时建立对 Web 开发基础的扎实理解。课程还随各章节扩展了额外挑战例如 README 公告中提到的GitHub Copilot Agent 模式挑战利用 Copilot Agent 模式生成文本、创建编辑文件、执行命令。六、环境准备Fork、Clone 与三种运行方式路线图从第 1 课即引导学习者配置开发环境。仓库为此提供了开箱即用的环境方案详见 README.md Getting Started1. 创建自己的仓库副本点击页面顶部Use this template按钮在 GitHub 账户中生成课程副本便于保存个人学习成果或直接点击Fork按钮分叉仓库。2. 在 Codespace 中运行零安装浏览器环境在仓库副本中点击Code按钮并选择Open with Codespaces即可。3. 在本地运行准备文本编辑器、浏览器与命令行工具首课 编程语言与工具入门 会逐一介绍各工具选项推荐使用 Visual Studio Code内置终端git clone your-repository-url克隆后在 VS Code 中通过File Open Folder打开项目目录即可开始。推荐安装Live Server扩展在 VS Code 内预览 HTML 页面。4. 精简克隆仅主课程跳过翻译由于仓库包含 50 语言翻译下载体积较大。若只需课程本体可选用 sparse checkoutgit clone --filterblob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git cd Web-Dev-For-Beginners git sparse-checkout set --no-cone /* !translations !translated_imagesWindows CMD 将引号替换为双引号即可。七、延伸学习资源与教师参考路线图最后给出三类附加资源仓库自身资源课程内置大量教程、代码示例与挑战challenge分布于各课正文与assignment.md中平台课程Microsoft Learn 平台提供系列 Web 开发课程与学习路径README 中提供了与课程对应的 Learn Path 入口在线社区Stack Overflow 与 MDN Web Docs 是 Web 开发者常用的提问与技术查证社区。针对教师仓库提供了 for-teachers.md 专门的教学建议文档建议如何组织课堂使用这套课程。仓库还随课程更新追加了额外的独立项目可作为路线图之后的进阶练习使用 VS Code 编辑器的工作流课程 8-code-editor、构建个人 AI 助手的生成式 AI 项目 9-chat-projectPython 后端 HTML/JS/CSS 前端、以及 10-ai-framework-project 与 memory-game 等项目。若需离线阅读全部课程可在本地安装 Docsify 后于仓库根目录执行docsify serve站点将在localhost:3000提供。八、路线图使用建议按里程碑自查进度以第 3、6、9、12 周为节点核对每个里程碑下的主题清单是否已逐一完成项目与概念交替进行每进入一个新项目前先完成其前置的 JS 基础课如进入 Terrarium 前先完成数组与循环善用测验闭环每课先做课前测验设定意图学完用课后测验检验留存可在 quiz-app 中运行测验应用动手部署Terrarium 项目在 其小节 README 中提供了 Azure Static Web Apps 的一键部署指引建议在课程中期就把作品发布到线上获得完整的开发 → 构建 → 部署体验。这条 12 周路线图的最终目标正如文档所述——帮助学习者打好 Web 开发地基并带着五个可展示的实战项目开启自己的开发之旅。【免费下载链接】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），仅供参考