18 KiB
初学者的 Web 开发课程
微软的Azure云倡导者很高兴地提供一个为期12周的24课时的课程，所有关于JavaScript、CSS和HTML的基础知识。每节课都包括课前和课后测验、完成课程的书面说明、解决方案、作业等。我们以项目为基础的教学方法使你能够边学边做，这是一种证明新技能能够“扎根”的方法。
衷心感谢我们的作者Jen Looper、Chris Noring、Christopher Harrison、Jasmine Greenaway、Yohan Lasorsa、Floor Drees和手绘艺术家Tomomi Imura!
你是学生吗？
利用以下资源开始：
- Student Hub page 在这个页面，你会发现初学者资源、学生包，甚至是获得免费证书券的方法。这是一个你想加入书签并不时检查的页面，因为我们至少每月都会更换内容。
- Microsoft Student Learn ambassadors 加入一个由学生大使组成的全球社区，这可能是你进入微软的途径。
入门
对于学生，如果你想自己使用这个课程，你可以fork整个repo并自己完成练习，从课前测验开始，然后阅读课程并完成其余活动。尽量通过理解课程来创建项目，而不是复制解决方案的代码；不过，这些代码可以在每节课中的
/solutions目录中找到。另一个方法是与朋友组成一个学习小组，一起学习这些内容。对于进一步的学习，我们建议通过Microsoft Learn 和观看下面提到的视频。
Gif by Mohit Jaisal
🎥 点击上面的图像，观看关于该项目和创造该项目的人们的视频!
教学宗旨
在建立这个课程时，我们选择了两个教学宗旨：确保它是基于项目的，并包括频繁的测验。在本系列课程结束时，学生将建立一个打字游戏，一个虚拟的花艺瓶，一个“绿色”浏览器扩展，一个“太空入侵者”类型的游戏，以及一个商业类型的银行应用程序，并将学会JavaScript、HTML和CSS的基础知识，以及当今网络开发人员的现代工具链。
🎓 你可以把这个课程的前几节课作为Microsoft Learn的学习路径来学习!
通过确保内容与项目相一致，这个过程对学生来说更有吸引力，对概念的保持也会增强。我们还编写了几节关于JavaScript基础知识的入门课程来介绍概念，并配以“Beginners Series to: JavaScript”的视频教程集，其中一些作者为这个课程做出了贡献。
此外，课前的低风险测验确定了学生对学习一个主题的意向如何，而课后的第二次测验则确保了学生知识的进一步保留。这个课程的设计是灵活而有趣的，可以全部或部分地学习。这些项目开始时很简单，到12周的周期结束时变得越来越复杂。
虽然我们有意避免介绍JavaScript框架，以便在采用框架之前集中于作为一个Web开发者所需的基本技能，但是完成本系列课程的一个好的去处就是通过“Beginner Series to: Node.js”来学习Node.js。
每一课都包括：
- 可能的手绘笔记
- 可能的补充视频
- 课前预习小测验
- 书面课程
- 对于基于项目的课程，关于如何建立项目的分步指南
- 知识点检查
- 一个挑战
- 补充阅读
- 作业
- 课后小测验
关于测验的说明: 所有的测验都包含在这个应用程序中，总共有48个测验，每个测验三个问题。它们在课程中被链接，但测验应用程序可以在本地运行；按照
quiz-app文件夹中的指示操作。它们正逐渐被本地化。
课程
| 项目名称 | 教授概念 | 学习目标 | 课程链接 | 课程作者 | |
|---|---|---|---|---|---|
| 01 | 入门篇 | 编程语言和行业工具介绍 | 了解大多数编程语言背后的基本支撑，以及帮助专业开发人员完成工作的软件。 | 编程语言和工具介绍 | Jasmine |
| 02 | 入门篇 | GitHub的基础知识，包括与一个团队合作 | 如何在你的项目中使用GitHub，如何在代码库中与他人合作 | GitHub介绍 | Floor |
| 03 | 入门篇 | 无障碍性 | 学习网络无障碍的基本知识 | 无障碍基础知识 | Christopher |
| 04 | JS基础 | JavaScript数据类型 | JavaScript数据类型的基础知识 | 数据类型 | Jasmine |
| 05 | JS基础 | 函数和方法 | 了解管理应用程序逻辑流的函数和方法 | 函数和方法 | Jasmine and Christopher |
| 06 | JS基础 | 用JS做出决定 | 学习如何使用决策方法在你的代码中创建条件 | 做出决定 | Jasmine |
| 07 | JS基础 | 数组和循环 | 在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 | 绿色浏览器扩展 | 浏览器中的后台进程，网络性能 | 使用浏览器的后台进程来管理扩展的图标；了解网络性能和一些优化 | 后台任务和性能 | Jen |
| 15 | 太空游戏 | 用JavaScript进行更高级的游戏开发 | 学习使用类和组合的继承以及Pub/Sub模式，为建立游戏做准备。 | 高级游戏开发简介 | Chris |
| 16 | 太空游戏 | 在Canvas上绘图 | 了解用于在屏幕上绘制元素的Canvas API | 在Canvas上绘图 | Chris |
| 17 | 太空游戏 | 在屏幕上移动元素 | 了解元素如何利用软轴坐标和Canvas API获得运动效果 | 移动元素 | Chris |
| 18 | 太空游戏 | 碰撞检测 | 使用按键使元素相互碰撞和反应，并提供冷却功能以确保游戏的性能 | 碰撞检测 | Chris |
| 19 | 太空游戏 | 记分 | 根据游戏的状态和性能进行数学计算 | 记分 | Chris |
| 20 | 太空游戏 | 结束和重启游戏 | 学习结束和重启游戏的方法，包括清理资产和重设变量值 | 结束的条件 | Chris |
| 21 | 银行应用 | 网络应用程序中的HTML模板和路线 | 学习如何使用路由和HTML模板创建多页面网站架构的支架 | HTML模板和路线 | Yohan |
| 22 | 银行应用 | 建立一个登录和注册表格 | 学习构建表单和交接验证程序的知识 | 表格 | Yohan |
| 23 | 银行应用 | 获取和使用数据的方法 | 数据如何流入和流出你的应用程序，如何获取它，存储它，并处理它 | 数据 | Yohan |
| 24 | 银行应用 | 国家管理的概念 | 了解你的应用程序如何保留状态以及如何以编程方式管理它 | 国家管理 | Yohan |
离线访问
你可以通过使用Docsify离线运行这个文档。fork这个repo，在你的本地机器上安装Docsify，然后在这个repo的根文件夹中，输入 docsify serve。网站将在你的本地主机上的3000端口服务：localhost:3000。
所有课程的PDF文件可以在这里找到
其他课程
我们的团队还制作了其他课程! 详见：