面向初学者的网络开发--一门课程
微软的 Azure Cloud 倡导者很高兴提供一个为期 12 周、24 节课的课程，所有课程都是关于 JavaScript、CSS 和 HTML 基础知识的。每节课都包括课前和课后的小考、完成课程的书面说明、解决方案、作业等等。我们的基于项目的教学法允许你边学边学，这是一种行之有效的新技能“坚持”的方法。
衷心感谢我们的作者 Jen Looper，Chris Noring，Christopher Harrison，Jasmine Greenaway，Yohan Lasorsa，Floor Drees 和素描笔记艺术家 Tomomi Imura！
开始
学生们，要自己使用这门课程， Fork 整个库，并自己完成练习，从讲课前的小测验开始，然后阅读讲稿，完成其余的活动。尝试通过理解课程而不是复制解决方案代码来创建 Projects ；但是，在每个面向项目的课程中，/solutions 文件夹中的代码都是可用的。另一个想法是与朋友组成一个学习小组，一起学习内容。对于进一步的研究，我们建议 Microsoft Learn 并观看下面提到的视频。
gif byMohit Jaisal
点击上面的图片，观看关于这个项目和它的创建者的视频！
教育学
在这门课程中，我们选择了两个教学原则:确保它是基于项目的，并包括频繁的小测验。在这个系列的结尾，学生们将会制作一个打字游戏，一个虚拟的水族馆，一个“绿色”浏览器扩展，一个“空间入侵者”类型的游戏，以及一个商业类型的银行应用程序，并且将会学习 JavaScript，HTML 和 CSS 的基础知识，以及当今网络开发者的现代工具链。
你可以在 Microsoft Learn 上以 学习路径 的形式学习这门课程的前几课！
通过确保内容与 Projects 一致，该过程将使学生更具吸引力，并且概念的保留将得到增强。我们还在 JavaScript Basics 中编写了几个入门课程来介绍概念，并结合了“[初学者系列到:JavaScript]（https://channel9.msdn.com/series/beginners-series-to-JavaScript？wt.mc_id=academic-13441-cxa）”视频教程的集合，其中一些作者为本课程做出了贡献。
此外，课前的低风险小测验确定了学生学习主题的意图，而课后的第二次小测验则确保了学生的进一步学习。这门课程的设计是灵活和有趣的，可以全部或部分采用。 Projects 从小处开始，到 12 周周期结束时变得越来越复杂。
虽然我们有意避免引入 JavaScript 框架，以便在采用框架之前专注于 Web 开发人员所需的基本技能，但完成此课程的下一步是通过另一个视频集合学习 Node.js:“[Beginner Series to:Node.js]（https://channel9.msdn.com/series/beginners-series-to-nodejs？wt.mc_id=academic-13441-cxa）”。
每节课包括:
- 可选的素描笔记
- 可选补充视频
- 课前热身测验
- 书面课
- 对于基于项目的经验教训，请提供有关如何构建项目的分步指南。
- 知识检查
- 一项挑战
- 补充阅读
- 任务分配
- 课后小测验
小考注意事项:所有小考都包含 在这个应用程序中，共 48 个小考，每个小考 3 道题。它们是从课程中链接的，但测试应用程序可以在本地运行；请按照
quiz-app文件夹中的说明进行操作。它们正逐渐被本地化。
教训
| Project Name | Concepts Taught | 学习目标 | Linked Lesson | Author | |
|---|---|---|---|---|---|
| 01 | Getting Started | Introduction to Programming and Tools of the Trade | 了解大多数编程语言背后的基础知识，以及帮助专业开发人员完成工作的软件 | Intro to Programming Languages and Tools of the Trade | Jasmine |
| 02 | Getting Started | Basics of GitHub, includes working with a team | 如何在项目中使用 GitHub，如何在代码库中与他人合作 | Intro to GitHub | Floor |
| 03 | Getting Started | Accessibility | 学习 Web 可访问性的基础知识 | Accessibility Fundamentals | Christopher |
| 04 | JS Basics | JavaScript Data Types | JavaScript 数据类型的基础知识 | Data Types | Jasmine |
| 05 | JS Basics | Functions and Methods | 了解函数和管理应用程序逻辑流的方法 | Functions and Methods | Jasmine and Christopher |
| 06 | JS Basics | Making Decisions with JS | 了解如何使用决策方法在代码中创建条件 | Making Decisions | Jasmine |
| 07 | JS Basics | Arrays and Loops | 使用 JavaScript 中的数组和循环处理数据 | Arrays and Loops | Jasmine |
| 08 | Terrarium | HTML in Practice | 构建 HTML 来创建一个在线容器，重点是布局 | Introduction to HTML | Jen |
| 09 | Terrarium | CSS in Practice | 构建 CSS 来设计在线文库，重点关注 CSS 的基础知识，包括使页面具有响应性 | Introduction to CSS | Jen |
| 10 | Terrarium | JavaScript Closures, DOM manipulation | 构建 JavaScript，使 Terrarium函数成为一个拖放界面，专注于闭包和 DOM 操作 | JavaScript Closures, DOM manipulation | Jen |
| 11 | Typing Game | Build a Typing Game | 了解如何使用键盘事件来驱动 JavaScript 应用程序的逻辑 | Event-Driven Programming | Christopher |
| 12 | Green Browser Extension | Working with Browsers | 了解浏览器的工作方式、历史以及如何构建浏览器扩展的第一个元素 | About Browsers | Jen |
| 13 | Green Browser Extension | Building a form, calling an API and storing variables in local storage | 构建浏览器扩展的 JavaScript 元素，以使用存储在本地存储中的变量调用 API | APIs, Forms, and Local Storage | Jen |
| 14 | Green Browser Extension | Background processes in the browser, web performance | 使用浏览器的后台进程来管理扩展的图标；了解有关 Web 性能的信息，并进行一些优化 | Background Tasks and Performance | Jen |
| 15 | Space Game | More Advanced Game Development with JavaScript | 学习使用类和组合以及发布 / 订阅模式的继承，为编译一场游戏做准备 | Introduction to Advanced Game Development | Chris |
| 16 | Space Game | Drawing to canvas | 了解用于将元素绘制到屏幕上的 Canvas API | Drawing to Canvas | Chris |
| 17 | Space Game | Moving elements around the screen | 了解元素如何使用笛卡尔坐标和 Canvas API 获得运动 | Moving Elements Around | Chris |
| 18 | Space Game | Collision detection | 使用按键使元素相互碰撞，并提供冷却时间函数，以确保游戏的性能 | Collision Detection | Chris |
| 19 | Space Game | Keeping score | 根据游戏的状态和性能进行数学计算。 | Keeping Score | Chris |
| 20 | Space Game | Ending and restarting the game | 了解如何结束和重新启动游戏，包括清理资产和重置可变值 | The Ending Condition | Chris |
| 21 | Banking App | HTML Templates and Routes in a Web App | 了解如何使用路由和 HTML 模板创建多页面网站的脚手架架构 | HTML Templates and Routes | Yohan |
| 22 | Banking App | Build a Login and Registration Form | 了解编译表单和处理验证例程 | Forms | Yohan |
| 23 | Banking App | Methods of Fetching and Using Data | 数据如何流入和流出应用程序，如何获取、存储和处理应用程序 | Data | Yohan |
| 24 | Banking App | Concepts of State Management | 了解你的应用程序如何保持状态以及如何以编程方式对其进行管理 | State Management | Yohan |
离线访问
你可以通过使用 DOCSIFY 离线运行此文档。 Fork 此库，在你的本地机器上 安装 docsify ，然后在此库的根文件夹中，键入 docsify serve。该网站将在你的本地主机上的端口 3000 上提供服务:localhost:3000。
PDF 格式
可以找到所有课程的 PDF 格式 这里
其他课程
我们的团队制作了其他的课程！退房: