[](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
[](http://makeapullrequest.com)
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
# 初学者的 Web 开发课程
微软的Azure云倡导者很高兴地提供一个为期12周的24课时的课程， ，
**衷心感谢我们的作者Jen Looper、Chris Noring、Christopher Harrison、Jasmine Greenaway、Yohan Lasorsa、Floor Drees和手绘艺术家Tomomi Imura!**
# 你是学生吗？
利用以下资源开始：
- [Student Hub page ](https://docs.microsoft.com/en-gb/learn/student-hub?WT.mc_id=academic-13441-cxa ) 在这个页面，你会发现初学者资源、学生包，甚至是获得免费证书券的方法。这是一个你想加入书签并不时检查的页面，因为我们至少每月都会更换内容。
- [Microsoft Student Learn ambassadors ](https://studentambassadors.microsoft.com?WT.mc_id=academic-13441-cxa ) 加入一个由学生大使组成的全球社区，这可能是你进入微软的途径。
# 入门
> **对于老师**, 我们已经有了一些关于如何使用该课程的[建议](for-teachers.zh-cn.md)。 我们希望您能在我们的[讨论区](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)提出反馈意见!
> **[对于学生](https://aka.ms/student-page)**， ， ， ， ， ； ，
[](https://youtube.com/watch?v=R1wrdtmBSII)
Gif by [Mohit Jaisal ](https://linkedin.com/in/mohitjaisal )
> 🎥 点击上面的图像，观看关于该项目和创造该项目的人们的视频!
## 教学宗旨
在建立这个课程时， ： ， ， ， ， ， ， ， ，
> 🎓 你可以把这个课程的前几节课作为Microsoft Learn的[学习路径](https://docs.microsoft.com/learn/paths/web-development-101?WT.mc_id=academic-13441-cxa)来学习!
通过确保内容与项目相一致， ， ，
此外， ， ， ，
虽然我们有意避免介绍JavaScript框架， ，
> 查看我们的[行为准则](../CODE_OF_CONDUCT.md)、[贡献](../CONTRIBUTING.md)和[翻译](../TRANSLATIONS.md)指南。我们欢迎你的建设性的反馈!
## 每一课都包括：
- 可能的手绘笔记
- 可能的补充视频
- 课前预习小测验
- 书面课程
- 对于基于项目的课程，关于如何建立项目的分步指南
- 知识点检查
- 一个挑战
- 补充阅读
- 作业
- 课后小测验
> **关于测验的说明**: 所有的测验都包含在[这个应用程序](https://ashy-river-0debb7803.1.azurestaticapps.net/)中， ， ， ；
## 课程
| | 项目名称 | 教授概念 | 学习目标 | 课程链接 | 课程作者 |
| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
| 01 | 入门篇 | 编程语言和行业工具介绍 | 了解大多数编程语言背后的基本支撑，以及帮助专业开发人员完成工作的软件。 | [编程语言和工具介绍 ](/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.zh-cn.md ) | Jasmine |
| 02 | 入门篇 | GitHub的基础知识， ， GitHub介绍 ](/1-getting-started-lessons/2-github-basics/translations/README.zh-cn.md ) | Floor |
| 03 | 入门篇 | 无障碍性 | 学习网络无障碍的基本知识 | [无障碍基础知识 ](/1-getting-started-lessons/3-accessibility/translations/README.zh-cn.md ) | Christopher |
| 04 | JS基础 | JavaScript数据类型 | JavaScript数据类型的基础知识 | [数据类型 ](/2-js-basics/1-data-types/translations/README.zh-cn.md ) | Jasmine |
| 05 | JS基础 | 函数和方法 | 了解管理应用程序逻辑流的函数和方法 | [函数和方法 ](/2-js-basics/2-functions-methods/translations/README.zh-cn.md ) | Jasmine and Christopher |
| 06 | JS基础 | 用JS做出决定 | 学习如何使用决策方法在你的代码中创建条件 | [做出决定 ](/2-js-basics/3-making-decisions/translations/README.zh-cn.md ) | Jasmine |
| 07 | JS基础 | 数组和循环 | 在JavaScript中使用数组和循环来处理数据 | [数组和循环 ](/2-js-basics/4-arrays-loops/translations/README.zh-cn.md ) | Jasmine |
| 08 | [花艺瓶 ](/3-terrarium/solution/README.md ) | 实践中的HTML | 构建HTML以创建一个在线花艺瓶， HTML简介 ](/3-terrarium/1-intro-to-html/translations/README.zh-cn.md ) | Jen |
| 09 | [花艺瓶 ](/3-terrarium/solution/README.md ) | 实践中的CSS | 构建CSS， ， ， CSS简介 ](/3-terrarium/2-intro-to-css/translations/README.zh-cn.md ) | Jen |
| 10 | [花艺瓶 ](/3-terrarium/solution/README.md ) | JavaScript闭包， ， ， JavaScript闭包， ](/3-terrarium/3-intro-to-DOM-and-closures/README.md ) | Jen |
| 11 | [打字游戏 ](/4-typing-game/solution/README.md ) | 建立一个打字游戏 | 学习如何使用键盘事件来驱动你的JavaScript应用程序的逻辑 | [事件驱动编程 ](/4-typing-game/typing-game/README.md ) | Christopher |
| 12 | [绿色浏览器扩展 ](/5-browser-extension/solution/README.md ) | 与浏览器协作 | 了解浏览器是如何工作的，它们的历史，以及如何为浏览器扩展的第一批元素提供支架 | [关于浏览器 ](/5-browser-extension/1-about-browsers/README.md ) | Jen |
| 13 | [绿色浏览器扩展 ](/5-browser-extension/solution/README.md ) | 构建一个表单， ， ， API、表单和本地存储 ](/5-browser-extension/2-forms-browsers-local-storage/README.md ) | Jen |
| 14 | [绿色浏览器扩展 ](/5-browser-extension/solution/README.md ) | 浏览器中的后台进程，网络性能 | 使用浏览器的后台进程来管理扩展的图标；了解网络性能和一些优化 | [后台任务和性能 ](/5-browser-extension/3-background-tasks-and-performance/README.md ) | Jen |
| 15 | [太空游戏 ](/6-space-game/solution/README.md ) | 用JavaScript进行更高级的游戏开发 | 学习使用类和组合的继承以及Pub/Sub模式， 高级游戏开发简介 ](/6-space-game/1-introduction/README.md ) | Chris |
| 16 | [太空游戏 ](/6-space-game/solution/README.md ) | 在Canvas上绘图 | 了解用于在屏幕上绘制元素的Canvas API | [在Canvas上绘图 ](/6-space-game/2-drawing-to-canvas/README.md ) | Chris |
| 17 | [太空游戏 ](/6-space-game/solution/README.md ) | 在屏幕上移动元素 | 了解元素如何利用软轴坐标和Canvas API获得运动效果 | [移动元素 ](/6-space-game/3-moving-elements-around/README.md ) | Chris |
| 18 | [太空游戏 ](/6-space-game/solution/README.md ) | 碰撞检测 | 使用按键使元素相互碰撞和反应，并提供冷却功能以确保游戏的性能 | [碰撞检测 ](/6-space-game/4-collision-detection/README.md ) | Chris |
| 19 | [太空游戏 ](/6-space-game/solution/README.md ) | 记分 | 根据游戏的状态和性能进行数学计算 | [记分 ](/6-space-game/5-keeping-score/README.md ) | Chris |
| 20 | [太空游戏 ](/6-space-game/solution/README.md ) | 结束和重启游戏 | 学习结束和重启游戏的方法，包括清理资产和重设变量值 | [结束的条件 ](/6-space-game/6-end-condition/README.md ) | Chris |
| 21 | [银行应用 ](/7-bank-project/solution/README.md ) | 网络应用程序中的HTML模板和路线 | 学习如何使用路由和HTML模板创建多页面网站架构的支架 | [HTML模板和路线 ](/7-bank-project/1-template-route/README.md ) | Yohan |
| 22 | [银行应用 ](/7-bank-project/solution/README.md ) | 建立一个登录和注册表格 | 学习构建表单和交接验证程序的知识 | [表格 ](/7-bank-project/2-forms/README.md ) | Yohan |
| 23 | [银行应用 ](/7-bank-project/solution/README.md ) | 获取和使用数据的方法 | 数据如何流入和流出你的应用程序，如何获取它，存储它，并处理它 | [数据 ](/7-bank-project/3-data/README.md ) | Yohan |
| 24 | [银行应用 ](/7-bank-project/solution/README.md ) | 国家管理的概念 | 了解你的应用程序如何保留状态以及如何以编程方式管理它 | [国家管理 ](/7-bank-project/4-state-management/README.md ) | Yohan |
## 离线访问
你可以通过使用[Docsify](https://docsify.js.org/#/)离线运行这个文档。fork这个repo， ， ， `docsify serve` 。网站将在你的本地主机上的3000端口服务：
## PDF
所有课程的PDF文件可以在[这里](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf)找到
## 其他课程
我们的团队还制作了其他课程! 详见：
- [Machine Learning for Beginners ](https://aka.ms/ml-beginners )
- [IoT for Beginners ](https://aka.ms/iot-beginners )
- [Data Science for Beginners ](https://aka.ms/datascience-beginners )
- [AI for Beginners ](https://aka.ms/ai-beginners )
