给初学者看的Web开发教程

LIYI

发布于 2023-02-15 16:02:29

8870

发布于 2023-02-15 16:02:29

微软公司的Azure Cloud Advocates团队为Web开发新人打造了一门颇爱好评的免费课程，地址见： https://microsoft.github.io/Web-Dev-For-Beginners

在这个教程中，微软团队用12周时间、24节课，带领读者学习了JavaScript、CSS 和 HTML等Web开发基础知识。每节课都包括课前测验、课后测验、完成课程的书面说明、解决方案和作业等。该团队基于项目实战教学法，让读者在构建项目的实践过程中完成学习，该团队认为这是一种已经被验证过的，让新人迅速掌握新技能的行之有效的方法。

这也是作者一直倡导的PBL实战项目教学法的简化版，PBL是在项目实战教学的基础之上，将多个项目合并成一个项目进行实践，以此减少学习者的学习负担，提高学习效率。在没有PBL实战教程的时候，项目驱动的实战教程已是上选，它作为系统化从易到难的学习教程，已经比零散的非系统化的教程高级很多了。

感谢英文版本的作者：Jen Looper、Chris Noring、Christopher Harrison、Jasmine Greenaway、Yohan Lasorsa、Floor Drees 和素描艺术家 Tomomi Imura。

这本英文入门教程在Github上已经斩获了62k Star，作者在网上查找了一下，竟然没有中文版。可能是翻译不讨巧吧，毕竟这是既辛苦又没钱的苦差事。既然英文版如此受欢迎，翻译过来对中文社区的读者应该也很有价值。后面的内容，主要由作者在微软英文版本的基础上翻译，作者在努力保持原意+流畅的前提下，离加入了一些自己对于前端开发的理解，希望这更有助于中文读者的学习与理解。

你是学生吗？

读者，如果你是学生，可以访问微软网站上的学生中心页面，在上面可以找到初学者资源、学生资料包，甚至还有获得免费证书凭证的方法。

如何开始学习？

如何开始学习呢？

读者要自己学习这个课程，fork整个仓库并自己完成练习，英文版本的仓库链接是：

https://github.com/microsoft/Web-Dev-For-Beginners

作者在翻译过程中，也打造了一个中文仓库，链接是：

https://github.com/rixingyike/Web-Dev-For-Beginners-CN

你在学习的是中文教程，要fork后一个仓库。注意，作者是边写作边完善这个仓库的，所以每次在追随课程学习新内容时，记得同步一下仓库的最新内容。

在fork了仓库以后，有两条学习建议：

从课前测验开始学习，然后阅读课文，完成其余的学习活动。尝试独立理解课程并完成实践，而不是复制老师的解决方案代码。解决方案代码位于每个课程的solutions文件夹中。
另一个建议是，与朋友组成一个学习小组，这个小组最好是三个人，大家一起研究、学习课程内容。

为了方便读者学习，如果有必要，作者会考虑录制一些实操视频，看有多少读者需要再定。

基于教育学的课程设计

在构建这个课程时，我们选择了两个教学原则：

确保它以项目为基础且包括足够多的测验。

到本系列课程结束时，学生将完成构建一个打字游戏、一个虚拟玻璃容器、一个“绿色”的浏览器扩展、一个“太空入侵者”类型的游戏和一个商业类型的银行应用程序，并且还将学习到JavaScript、HTML 和 CSS等基础知识，以及当今 Web 开发人员常用的工程化工具链。

为了确保课程对学生具有足够的吸引力，方便读者对概念的理解，团队还编写了几个 JavaScript 基础知识入门课程来预先介绍相关概念，它们是JavaScript初学者入门系列课程，地址位于：

https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/

这是由微软团队录制的视频教程集合，读者可以选择性观看。

此外，课前测验可以测试学生学习某个主题的意图，启发思考，而课后的第二次测验可以确保记忆进一步加深。该课程设计灵活而有趣，可以全部或部分学习，五个小项目都是从小规模开始，到 12 周结束时变得越来越复杂。（这是零散的项目驱动式教程的优点，PBL实战教程便不能直接从后面某一处学起。）

在课程中，团队有意避免引入任何 JavaScript 框架，以便读者专注于 Web 开发人员所需的基本技能的学习。在完成本课程后，读者下一步可以继续学习Node.js初学者系列课程，它的地址是：

https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/

每节课的课程内容设计

可选草图笔记
可选的补充学习视频
课前的热身测验
笔试
对基于项目的课程，有关于如何构建项目的分步指南
知识检查
一个挑战
补充阅读内容
任务
课后测验

关于测验说明一下，所有测验列表如下所示：

 Lesson 1 - Intro to Programming Languages: Pre-Lecture Quiz
 Lesson 1 - Intro to Programming Languages: Post-Lecture Quiz
 Lesson 2 - Introduction to GitHub: Pre-Lecture Quiz
 Lesson 2 - Introduction to GitHub: Post-Lecture Quiz
 Lesson 3 - Creating Accessible Webpages: Pre-Lecture Quiz
 Lesson 3 - Creating Accessible Webpages: Post-Lecture Quiz
 Lesson 4 - JavaScript Basics - Data Types: Pre-Lecture Quiz
 Lesson 4 - JavaScript Basics - Data Types: Post-Lecture Quiz
 Lesson 5 - JavaScript Basics - Methods and Functions: Pre-Lecture Quiz
 Lesson 5 - JavaScript Basics - Methods and Functions: Post-Lecture Quiz
 Lesson 6 - JavaScript Basics - Making Decisions: Pre-Lecture Quiz
 Lesson 6 - JavaScript Basics - Making Decisions: Post-Lecture Quiz
 Lesson 7 - JavaScript Basics - Arrays and Loops: Pre-Lecture Quiz
 Lesson 7 - JavaScript Basics - Arrays and Loops: Post-Lecture Quiz
 Lesson 8 - Terrarium Project - Introduction to HTML: Pre-Lecture Quiz
 Lesson 8 - Terrarium Project - Introduction to HTML: Post-Lecture Quiz
 Lesson 9 - Terrarium Project - Introduction to CSS: Pre-Lecture Quiz
 Lesson 9 - Terrarium Project - Introduction to CSS: Post-Lecture Quiz
 Lesson 10 - Terrarium Project - DOM Manipulation and a Closure: Pre-Lecture Quiz
 Lesson 10 - Terrarium Project - DOM Manipulation and a Closure: Post-Lecture Quiz
 Lesson 11 - Typing Game: Pre-Lecture Quiz
 Lesson 11 - Typing Game: Post-Lecture Quiz
 Lesson 12 - Browser Extension Project - All about Browsers: Pre-Lecture Quiz
 Lesson 12 - Browser Extension Project - All about Browsers: Post-Lecture Quiz
 Lesson 13 - Browser Extension Project - Call an API, use Local Storage: Pre-Lecture Quiz
 Lesson 13 - Browser Extension Project - Call an API, use Local Storage: Post-Lecture Quiz
 Lesson 14 - Browser Extension Project - Learn about Background Tasks and Performance: Pre-Lecture Quiz
 Lesson 14 - Browser Extension Project - Learn about Background Tasks and Performance: Post-Lecture Quiz
 Lesson 15 - Space Game - Introduction: Pre-Lecture Quiz
 Lesson 15 - Space Game - Introduction: Post-Lecture Quiz
 Lesson 16 - Space Game - Draw Hero and Monsters to Canvas: Pre-Lecture Quiz
 Lesson 16 - Space Game - Draw Hero and Monsters to Canvas: Post-Lecture Quiz
 Lesson 17 - Space Game - Adding Motion: Pre-Lecture Quiz
 Lesson 17 - Space Game - Adding Motion: Post-Lecture Quiz
 Lesson 18 - Space Game - Adding A Laser and Detecting Collisions: Pre-Lecture Quiz
 Lesson 18 - Space Game - Adding A Laser and Detecting Collisions: Post-Lecture Quiz
 Lesson 19 - Space Game - Scoring and Lives: Pre-Lecture Quiz
 Lesson 19 - Space Game - Scoring and Lives: Post-Lecture Quiz
 Lesson 20 - Space Game - End and Restart: Pre-Lecture Quiz
 Lesson 20 - Space Game - End and Restart: Post-Lecture Quiz
 Lesson 21 - Bank Project - HTML Templates and Routes in a Web App: Pre-Lecture Quiz
 Lesson 21 - Bank Project HTML Templates and Routes in a Web App: Post-Lecture Quiz
 Lesson 22 - Bank Project - Build a Login and Registration Form: Pre-Lecture Quiz
 Lesson 22 - Bank Project - Build a Login and Registration Form: Post-Lecture Quiz
 Lesson 23 - Bank Project - Methods of Fetching and Using Data: Pre-Lecture Quiz
 Lesson 23 - Bank Project - Methods of Fetching and Using Data: Post-Lecture Quiz
 Lesson 24 - Bank Project - Concepts of State Management: Pre-Lecture Quiz
 Lesson 24 - Bank Project - Concepts of State Management: Post-Lecture Quiz

上面只是一个列表，方便读者了解有什么测试。这些测试的具体网址地址位于下面这个页面内：

https://ashy-river-0debb7803.1.azurestaticapps.net/

这些测试目前都是英文原版的，可能会被作者在翻译的过程中改写。总共48个测验，每个测验包含三个问题，每个测验应用程序可以在本地运行，在quiz-app文件夹中有详细的操作说明。

课程内容大纲

	项目名称	教授的概念	学习目标	联课	原作者
01	入门	编程和行业工具简介	了解大多数编程语言背后的基本原理以及帮助专业开发人员完成工作的软件	编程语言和行业工具简介	茉莉花
02	入门	GitHub 的基础知识，包括如何与团队其他成员协作	如何在项目中使用 GitHub，如何在代码库上与他人协作	GitHub 简介	地面
03	入门	辅助功能	了解 Web 可访问性的基础知识	辅助功能基础	克里斯托弗
04	JS 基础	JavaScript 数据类型	JavaScript数据类型基础	数据类型	茉莉花
05	JS 基础	函数和方法	了解控制应用程序逻辑流的功能和方法	函数和方法	茉莉花和克里斯托弗
06	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	绿色浏览器扩展	浏览器中的后台进程、网络性能	使用浏览器的后台进程，来管理扩展程序的图标，并了解网络性能和一些优化	后台任务和性能	仁
15	太空游戏	使用 JavaScript 进行更高级的游戏开发	了解使用类和组合的方式，以及发布/订阅模式，为构建游戏做准备	高级游戏开发简介	克里斯
16	太空游戏	绘图到画布	了解 Canvas API，用于将元素绘制到屏幕上	绘图到画布	克里斯
17	太空游戏	在屏幕上移动元素	探索元素如何使用笛卡尔坐标和 Canvas API 获得运动能力	移动元素	克里斯
18	太空游戏	碰撞检测	使用按键使元素相互碰撞并做出反应，并提供冷却功能以确保游戏性能	碰撞检测	克里斯
19	太空游戏	计分	根据游戏的状态和性能进行数学计算	记分	克里斯
20	太空游戏	结束和重新开始游戏	了解如何结束和重新启动游戏，包括清理资产和重置变量值	结束条件	克里斯
21	银行应用程序	Web 应用程序中的 HTML 模板和路由	了解如何使用路由和 HTML 模板，创建多页面网站架构的脚手架	HTML 模板和路由	耀汉
22	银行应用程序	建立一个登录和注册表单	了解构建表单和处理表单验证的流程	形式	耀汉
23	银行应用程序	获取和使用数据的方法	学习数据如何流入和流出应用程序，及如何获取、存储和处理数据	数据	耀汉
24	银行应用程序	状态管理的概念	了解你的应用程序如何保留状态，以及如何以编程的方式管理它	状态管理	耀汉