GitHub - microsoft/Web - Dev - For - Beginners课程介绍

技术背景

该课程由Microsoft Cloud Advocates推出，是一个为期12周的综合课程，旨在帮助初学者掌握Web开发的基础知识。课程包含24个课程，通过实践项目，如建造在线生态瓶、开发打字游戏、太空游戏等，深入学习JavaScript、CSS和HTML。同时，课程还包括测验、讨论和实践作业，采用基于项目的教学方法，帮助学习者提高技能和知识保留率。

实现步骤

准备环境

环境选择：课程提供了现成的开发环境，可选择在Codespace（基于浏览器，无需安装）中运行，或使用如Visual Studio Code等文本编辑器在本地计算机上运行。
创建仓库：为方便保存工作，建议创建自己的仓库。点击页面顶部的“Use this template”按钮，在GitHub账户中创建包含课程副本的新仓库。也可点击右上角的“Fork”按钮进行仓库复刻，然后使用git clone命令将仓库克隆到本地。

学习流程

教师：课程包含了使用该课程的建议，欢迎在讨论论坛提供反馈。
学习者：每节课先进行课前测验，然后阅读课程材料，完成各项活动，最后通过课后测验检查理解程度。为增强学习体验，可与同行一起合作项目，也可在讨论论坛进行讨论，论坛有管理员团队解答问题。此外，建议探索Microsoft Learn获取更多学习材料。

课程内容

24节课的详细内容

课程序号	课程阶段	课程名称	概念教学	学习目标	关联课程	作者
01	入门	编程和工具介绍	学习大多数编程语言的基本原理以及专业开发人员使用的软件	编程语言和工具入门	无	Jasmine
02	入门	GitHub基础	如何在项目中使用GitHub，如何在代码库上与他人协作	GitHub入门	无	Floor
03	入门	可访问性	学习Web可访问性的基础知识	可访问性基础	无	Christopher
04	JavaScript基础	JavaScript数据类型	JavaScript数据类型的基础知识	数据类型	无	Jasmine
05	JavaScript基础	函数和方法	学习函数和方法来管理应用程序的逻辑流程	函数和方法	无	Jasmine和Christopher
06	JavaScript基础	用JavaScript做决策	学习如何使用决策方法在代码中创建条件	决策	无	Jasmine
07	JavaScript基础	数组和循环	在JavaScript中使用数组和循环处理数据	数组和循环	无	Jasmine
08	生态瓶	HTML实践	构建HTML以创建在线生态瓶，重点是构建布局	HTML介绍	无	Jen
09	生态瓶	CSS实践	构建CSS以设计在线生态瓶的样式，重点是CSS的基础知识，包括使页面响应式	CSS介绍	无	Jen
10	生态瓶	JavaScript闭包和DOM操作	构建JavaScript使生态瓶作为拖放界面运行，重点是闭包和DOM操作	JavaScript闭包和DOM操作	无	Jen
11	打字游戏	构建打字游戏	学习如何使用键盘事件驱动JavaScript应用程序的逻辑	事件驱动编程	无	Christopher
12	绿色浏览器扩展	与浏览器协作	学习浏览器的工作原理、历史以及如何搭建浏览器扩展的第一个元素	关于浏览器	无	Jen
13	绿色浏览器扩展	构建表单、调用API和在本地存储变量	构建浏览器扩展的JavaScript元素，使用本地存储的变量调用API	API、表单和本地存储	无	Jen
14	绿色浏览器扩展	浏览器中的后台进程和Web性能	使用浏览器的后台进程管理扩展的图标；学习Web性能和一些优化方法	后台任务和性能	无	Jen
15	太空游戏	使用JavaScript进行更高级的游戏开发	学习使用类和组合以及发布/订阅模式进行继承，为构建游戏做准备	高级游戏开发介绍	无	Chris
16	太空游戏	在画布上绘图	学习用于在屏幕上绘制元素的Canvas API	在画布上绘图	无	Chris
17	太空游戏	在屏幕上移动元素	了解如何使用笛卡尔坐标和Canvas API使元素移动	在屏幕上移动元素	无	Chris
18	太空游戏	碰撞检测	使元素碰撞并相互反应，使用按键并提供冷却功能以确保游戏性能	碰撞检测	无	Chris
19	太空游戏	计分	根据游戏的状态和性能进行数学计算	计分	无	Chris
20	太空游戏	结束和重新开始游戏	学习结束和重新开始游戏，包括清理资产和重置变量值	结束条件	无	Chris
21	银行应用	Web应用中的HTML模板和路由	学习如何使用路由和HTML模板创建多页网站架构的框架	HTML模板和路由	无	Yohan
22	银行应用	构建登录和注册表单	学习构建表单并处理验证例程	表单	无	Yohan
23	银行应用	获取和使用数据的方法	了解数据如何流入和流出应用程序，如何获取、存储和处理数据	数据	无	Yohan
24	银行应用	状态管理概念	学习应用程序如何保留状态以及如何以编程方式管理它	状态管理	无	Yohan

生成式AI新课程

新发布了关于JavaScript的生成式AI新课程，涵盖从基础到检索增强生成（RAG）的所有内容。可访问[https://aka.ms/genai - js - course](https://aka.ms/genai - js - course)开始学习，课程包括使用生成式AI与历史人物互动等有趣内容，每节课都有作业、知识检查和挑战。

核心代码

文档中未提及具体核心代码，但在课程的实践项目中，会涉及到大量的JavaScript、CSS和HTML代码。例如在构建在线生态瓶项目中，HTML代码用于构建布局：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Online Terrarium</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- 生态瓶布局 -->
    <div class="terrarium">
        <!-- 生态瓶内容 -->
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS代码用于样式设计：

.terrarium {
    width: 80%;
    margin: 0 auto;
    border: 1px solid #ccc;
    padding: 20px;
    background-color: #f9f9f9;
}

JavaScript代码用于实现功能：

// 示例：处理拖放事件
const terrarium = document.querySelector('.terrarium');
terrarium.addEventListener('dragover', (e) => {
    e.preventDefault();
});
terrarium.addEventListener('drop', (e) => {
    e.preventDefault();
    // 处理拖放逻辑
});