Web Dev For Beginners
1.0.0
通过 Microsoft Cloud Advocates 提供的为期 12 周的综合课程，了解 Web 开发的基础知识。 24 节课程中的每一节课都通过玻璃容器、浏览器扩展和太空游戏等实践项目深入探讨 JavaScript、CSS 和 HTML。参与测验、讨论和实践作业。通过我们有效的基于项目的教学法，提高您的技能并优化您的知识保留。今天开始您的编码之旅！
访问学生中心页面，您可以在其中找到初学者资源、学生包，甚至获得免费证书券的方法。这是您想要添加书签并时常检查的页面，因为我们每月都会更换内容。
不要错过我们关于生成人工智能的新 12 课课程！
每节课都包括要完成的作业、知识检查和挑战，以指导您学习以下主题：
提示和提示工程
文本和图像应用程序生成
搜索应用程序
访问 https://aka.ms/genai-beginners 开始！
老师们，我们已经提供了一些关于如何使用本课程的建议。我们希望您能在我们的论坛中提供反馈！
学习者在每节课中都从课前测验开始，然后阅读讲座材料，完成各种活动，并通过课后测验检查您的理解情况。
为了增强您的学习体验，请与您的同事联系，共同完成项目！我们鼓励在我们的论坛中进行讨论，我们的主持人团队将可以回答您的问题。
为了进一步学习，我们强烈建议您探索 Microsoft Learn 以获取更多学习材料。
本课程的开发环境已准备就绪！开始时，您可以选择在 Codespace（基于浏览器、无需安装的环境）中运行课程，或使用文本编辑器（例如 Visual Studio Code）在本地计算机上运行课程。
为了轻松保存您的工作，建议您创建此存储库自己的副本。您可以通过单击页面顶部的“使用此模板”按钮来执行此操作。这将在您的 GitHub 帐户中创建一个包含课程副本的新存储库。
请按照下列步骤操作：
分叉存储库：单击此页面右上角的“分叉”按钮。
克隆存储库： git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
在您创建的此存储库的副本中，单击“代码”按钮并选择“使用 Codespaces 打开” 。这将创建一个新的代码空间供您工作。
要在计算机上本地运行本课程，您将需要文本编辑器、浏览器和命令行工具。我们的第一课“编程语言和行业工具简介”将引导您了解每种工具的各种选项，以便您选择最适合您的工具。
我们的建议是使用 Visual Studio Code 作为编辑器，它也有一个内置终端。您可以在此处下载 Visual Studio Code。
将您的存储库克隆到您的计算机。您可以通过单击“代码”按钮并复制 URL 来完成此操作：
然后，在 Visual Studio Code 中打开终端并运行以下命令，将<your-repository-url>替换为您刚刚复制的 URL：
git clone <your-repository-url>
在 Visual Studio Code 中打开该文件夹。您可以通过单击“文件” > “打开文件夹”并选择刚刚克隆的文件夹来完成此操作。
推荐的 Visual Studio Code 扩展：
Live Server - 在 Visual Studio Code 中预览 HTML 页面
Copilot - 帮助您更快地编写代码
可选的草图笔记
可选补充视频
课前热身测验
笔试课
对于基于项目的课程，有关如何构建项目的分步指南
知识检查
一个挑战
补充阅读
任务
课后测验
关于测验的说明：所有测验都包含在 Quiz-app 文件夹中，总共 48 个测验，每个测验三个问题。它们在课程中链接，测验应用程序可以在本地运行或部署到 Azure；按照
quiz-app文件夹中的说明进行操作。它们正在逐渐本地化。
| 项目名称 | 教授的概念 | 学习目标 | 链接课程 | 作者 | |
|---|---|---|---|---|---|
| 01 | 入门 | 编程和行业工具简介 | 了解大多数编程语言背后的基本基础以及帮助专业开发人员完成工作的软件 | 编程语言和行业工具简介 | 茉莉花 |
| 02 | 入门 | GitHub 基础知识，包括与团队合作 | 如何在项目中使用 GitHub，如何在代码库上与其他人协作 | GitHub 简介 | 地面 |
| 03 | 入门 | 无障碍 | 了解网络可访问性的基础知识 | 辅助功能基础知识 | 克里斯托弗 |
| 04 | JS 基础知识 | JavaScript 数据类型 | JavaScript 数据类型的基础知识 | 数据类型 | 茉莉花 |
| 05 | JS 基础知识 | 函数和方法 | 了解管理应用程序逻辑流的函数和方法 | 函数和方法 | 茉莉花和克里斯托弗 |
| 06 | JS 基础知识 | 使用 JS 做出决策 | 了解如何使用决策方法在代码中创建条件 | 做出决定 | 茉莉花 |
| 07 | JS 基础知识 | 数组和循环 | 在 JavaScript 中使用数组和循环处理数据 | 数组和循环 | 茉莉花 |
| 08 | 玻璃容器 | HTML 实践 | 构建 HTML 以创建在线玻璃容器，重点是构建布局 | HTML 简介 | 仁 |
| 09 | 玻璃容器 | CSS 实践 | 构建 CSS 来设置在线玻璃容器的样式，重点关注 CSS 基础知识，包括使页面响应式 | CSS 简介 | 仁 |
| 10 | 玻璃容器 | JavaScript 闭包、DOM 操作 | 构建 JavaScript 以使玻璃容器功能成为拖放界面，重点关注闭包和 DOM 操作 | JavaScript 闭包、DOM 操作 | 仁 |
| 11 | 打字游戏 | 构建一个打字游戏 | 了解如何使用键盘事件来驱动 JavaScript 应用程序的逻辑 | 事件驱动编程 | 克里斯托弗 |
| 12 | 绿色浏览器扩展 | 使用浏览器 | 了解浏览器的工作原理、历史以及如何构建浏览器扩展的第一个元素 | 关于浏览器 | 仁 |
| 13 | 绿色浏览器扩展 | 构建表单、调用 API 并将变量存储在本地存储中 | 构建浏览器扩展的 JavaScript 元素，以使用本地存储中存储的变量调用 API | API、表单和本地存储 | 仁 |
| 14 | 绿色浏览器扩展 | 浏览器中的后台进程、Web 性能 | 使用浏览器的后台进程来管理扩展程序的图标；了解网络性能和一些需要进行的优化 | 后台任务和性能 | 仁 |
| 15 | 太空游戏 | 使用 JavaScript 进行更高级的游戏开发 | 了解使用类和组合以及 Pub/Sub 模式进行继承，为构建游戏做好准备 | 高级游戏开发简介 | 克里斯 |
| 16 | 太空游戏 | 绘图到画布 | 了解 Canvas API，用于将元素绘制到屏幕上 | 绘图到画布 | 克里斯 |
| 17 号 | 太空游戏 | 在屏幕上移动元素 | 了解元素如何使用笛卡尔坐标和 Canvas API 获得运动 | 移动元素 | 克里斯 |
| 18 | 太空游戏 | 碰撞检测 | 使用按键使元素相互碰撞和反应，并提供冷却功能以确保游戏性能 | 碰撞检测 | 克里斯 |
| 19 | 太空游戏 | 记分 | 根据游戏的状态和表现进行数学计算 | 记分 | 克里斯 |
| 20 | 太空游戏 | 结束并重新开始游戏 | 了解如何结束和重新启动游戏，包括清理资产和重置变量值 | 结束条件 | 克里斯 |
| 21 | 银行应用程序 | Web 应用程序中的 HTML 模板和路由 | 了解如何使用路由和 HTML 模板创建多页面网站架构的支架 | HTML 模板和路由 | 约翰 |
| 22 | 银行应用程序 | 构建登录和注册表单 | 了解构建表单和处理验证例程 | 表格 | 约翰 |
| 23 | 银行应用程序 | 获取和使用数据的方法 | 数据如何流入和流出您的应用程序，如何获取、存储和处置它 | 数据 | 约翰 |
| 24 | 银行应用程序 | 状态管理的概念 | 了解您的应用程序如何保留状态以及如何以编程方式管理它 | 状态管理 | 约翰 |
我们的课程设计考虑了两个关键的教学原则：
基于项目的学习
经常测验
该计划教授 JavaScript、HTML 和 CSS 的基础知识，以及当今 Web 开发人员使用的最新工具和技术。学生将有机会通过构建打字游戏、虚拟玻璃容器、环保浏览器扩展、太空入侵者风格的游戏和企业银行应用程序来培养实践经验。在本系列结束时，学生将对 Web 开发有深入的了解。
？您可以将本课程的前几课作为 Microsoft Learn 上的学习路径！
通过确保内容与项目保持一致，整个过程对学生来说更具吸引力，概念的保留也将得到增强。我们还编写了几门 JavaScript 基础知识入门课程来介绍概念，并搭配“初学者系列：JavaScript”视频教程集合中的视频，其中一些作者为本课程做出了贡献。
此外，课前的低风险测验可以确定学生学习某个主题的意图，而课后的第二次测验则可以确保进一步保留。该课程设计灵活、有趣，可以全部或部分学习。这些项目从小规模开始，到 12 周周期结束时变得越来越复杂。
虽然我们有意避免引入 JavaScript 框架，以便在采用框架之前专注于 Web 开发人员所需的基本技能，但完成本课程的下一步很好的做法是通过另一组视频学习 Node.js：“初学者系列：节点.js”。
请访问我们的行为准则和贡献指南。我们欢迎您提出建设性的反馈意见！
您可以使用 Docsify 离线运行此文档。分叉此存储库，在本地计算机上安装 Docsify，然后在此存储库的根文件夹中，键入docsify serve 。该网站将在您的本地主机上的端口 3000 上提供服务： localhost:3000 。
可以在此处找到所有课程的 PDF 版本。
我们的团队制作其他课程！查看：
人工智能初学者
数据科学初学者
适合初学者的生成式人工智能
面向初学者的新网络安全
物联网初学者
初学者机器学习
适合初学者的 XR 开发
掌握 GitHub Copilot 进行 AI 结对编程
该存储库已根据 MIT 许可证获得许可。有关详细信息，请参阅许可证文件。
