Web-Dev-For-Beginners：微软开源的 Web 开发课程

微软开源的 Web 开发课程，12 周讲解 HTML/CSS/JavaScript。通过 6 个实战项目（植物园、打字游戏、浏览器扩展、太空游戏、银行应用、代码编辑器）掌握前端技能。配套 48 个测验，适合零基础，学完产出完整作品集。

想学前端开发，但不知道从哪儿开始？网上教程看了一堆，学完还是不会做项目？

今天分享一个微软团队做的开源课程 Web-Dev-For-Beginners，目前在 GitHub 上有 93.5k Star。这个课程最大的特点是系统和实战——不是零散的知识点，而是完整的 12 周学习路径，还能做出 6 个真实项目。

转自：https://yunpan.plus/t/492-1-1

课程内容

基础部分（1-4周）

HTML 语义化标签、CSS 布局（Flexbox 和 Grid）、JavaScript 基础语法。这部分会带你做一个虚拟植物园项目，学习 CSS 高级布局和拖拽功能。

进阶实战（5-8周）

DOM 操作、事件处理、浏览器扩展开发、Canvas 游戏编程。你会做出打字游戏、Chrome 插件、太空射击游戏这三个项目。

综合应用（9-12周）

状态管理、本地存储、路由、实时通信。最后会完成银行应用和代码编辑器两个完整的单页应用。

学习方式

每节课的结构是：课前测验 → 讲解 → 动手做 → 课后测验 → 扩展作业。

React从零实现深度解析：https://yunpan.plus/t/34

课前测验帮你回顾已有知识，讲解部分建立新概念，动手环节通过项目巩固，课后测验检验效果。这种设计能让学习效果更扎实。

适合谁

零基础转行：不需要编程基础，课程从最基础的 HTML 标签开始讲起。

计算机专业学生：补充实战经验，学完能拿出 6 个项目做作品集。

后端转前端：系统学习前端三件套（HTML/CSS/JavaScript），快速上手。

实际收获

技术能力：能独立开发静态网站，掌握 JavaScript 核心特性，理解前端工程化思维。

作品集：6 个完整项目可以部署到 GitHub Pages，直接放简历上。

学习方法：学会项目驱动的学习方式，提升阅读英文技术文档的能力。

怎么开始

Fork 项目后可以直接在浏览器用 GitHub Codespaces 运行，不用配置本地环境。也可以克隆到本地，用 VS Code 打开就能学。

项目地址：microsoft/Web-Dev-For-Beginners

React核心架构：https://yunpan.plus/t/34

Vue3实战开发：https://yunpan.plus/t/45

后续学习

学完这套课程，可以继续学 React、Vue 这些框架，或者往全栈方向发展学 Node.js。微软还配套推出了 GenAI-JS 课程，可以学习 AI 在前端的应用。

最近每章还新增了 GitHub Copilot Agent 挑战，可以体验 AI 辅助编程。

这个项目最大的价值在于完整性。不是碎片化的知识点，而是一条清晰的学习路径；不是纸上谈兵，而是真实的项目经验。如果你正在考虑学前端，这个项目值得投入时间认真学完。

关注《云栈开源日记》，每天发现优质开源项目

🏷️ 标签

#WebDevForBeginners #GitHub #前端开发 #微软开源 #零基础学编程 #Web开发教程 #JavaScript入门

作者声明本文无利益相关，欢迎值友理性交流，和谐讨论～