基于项目的学习方法

相关源文件

• 2-js-basics/2-functions-methods/README.md
• 2-js-basics/3-making-decisions/README.md
• 2-js-basics/4-arrays-loops/README.md
• 3-terrarium/1-intro-to-html/README.md
• 3-terrarium/2-intro-to-css/README.md
• 3-terrarium/3-intro-to-DOM-and-closures/README.md
• 4-typing-game/typing-game/README.md
• 5-browser-extension/1-about-browsers/README.md
• 5-browser-extension/2-forms-browsers-local-storage/README.md
• 5-browser-extension/3-background-tasks-and-performance/README.md
• README.md
• translations/README.bn.md
• translations/README.el.md
• translations/README.fil.md
• translations/README.fr.md
• translations/README.hi.md
• translations/README.id.md
• translations/README.ml.md
• translations/README.pt-BR.md
• translations/README.ru.md
• translations/README.ta.md
• translations/README.te.md

本页面将介绍“Web 开发入门”课程中使用的项目式学习方法。它概述了如何构建实践项目以循序渐进地培养技能，这种方法的教学原理，以及每个项目如何与核心 Web 开发概念联系起来。

目的与范围

该课程采用项目式学习作为基础教学策略，让学生能够

• 通过构建真实应用程序来学习，而非仅依靠理论
• 通过动手编码练习来培养实践技能
• 了解各种 Web 技术如何在真实项目中协同工作
• 体验从概念到实现的完整开发周期

有关学习路径结构的详细信息，请参阅 学习路径。

教学框架

项目式学习基础

本课程的构建基于这样一个前提：主动创造能带来比被动学习更深入的理解和更好的记忆。每个项目既是学习的载体，也是作品集的一部分。

来源： README.md147-153 README.md155-159

评估策略

每个项目都包含验证学习效果的评估机制

评估类型	时间点	目的
课前测验	内容之前	设定学习目标和基线知识
知识检查	学习过程中	验证对关键概念的理解
挑战	引导学习之后	在稍有不同的情境下应用概念
课后测验	完成后	确认对材料的记忆

来源： README.md159-160

项目进展

项目在课程中难度递增，让学生在学习新概念的同时，能够建立在先前掌握的技能之上。

来源： README.md119-143

项目结构组成部分

课程中的每个项目都遵循一致的结构，旨在指导学生完成学习过程。

组件	目的	示例
草图笔记	概念的视觉概览	模拟植物栽培箱结构可视化
分步指南	详细的实现说明	构建和样式化植物栽培箱容器
可运行的代码示例	参考实现	用于拖放操作的 DOM 操作
挑战	扩展以巩固学习	为植物栽培箱玻璃添加光泽效果
知识检查	自我验证点	测试 CSS 定位理解
作业	独立应用技能	重构 CSS 以实现更好的组织

来源： README.md102-113 3-terrarium/2-intro-to-css/README.md252-256

核心项目概览

模拟植物栽培箱项目

一个虚拟植物栽培箱，教授 HTML 结构、CSS 样式和 JavaScript DOM 操作，包含可拖动元素。

来源： 3-terrarium/1-intro-to-html/README.md 3-terrarium/2-intro-to-css/README.md 3-terrarium/3-intro-to-DOM-and-closures/README.md98-186

打字游戏

一个交互式打字游戏，通过键盘事件教授事件驱动编程。

来源： 4-typing-game/typing-game/README.md197-292

浏览器扩展

一个“绿色”浏览器扩展，教授 API 集成、表单和浏览器特定功能。

来源： 5-browser-extension/1-about-browsers/README.md64-142 5-browser-extension/2-forms-browsers-local-storage/README.md17-107 5-browser-extension/3-background-tasks-and-performance/README.md62-133

太空游戏

一个基于 Canvas 的太空射击游戏，教授高级 JavaScript 概念，包括继承和碰撞检测。

银行应用

一个单页银行应用程序，展示了状态管理、路由和表单处理。

通过构建学习

每个项目的核心方法遵循此进度

1. 概念介绍，包含理论解释和视觉草图
2. 引导式实现，附带分步说明
3. 代码探索，通过检查可运行的解决方案
4. 挑战扩展，以加深理解
5. 独立练习，通过作业完成

这种结构使学生能够从概念讲解过渡到在更具挑战性的情境中独立应用它们。

来源： README.md102-113 2-js-basics/3-making-decisions/README.md45-81

项目式方法的优势

项目式方法带来了几个关键优势

1. 情境化学习：技术在解决实际问题的背景下教授，使抽象概念具体化
2. 激励结构：构建可见、功能性项目可提供即时反馈和满意度
3. 技能整合：每个项目结合了多项技能，展示了不同技术如何协同工作
4. 作品集开发：完成的项目可作为作品集，向潜在雇主展示技能
5. 真实性评估：项目提供了超越简单测验的真实理解度衡量

来源： README.md155-157

渐进式技能发展

项目循序渐进地培养技能，后期项目依赖于对早期概念的掌握

项目	核心技能发展	先决知识
模拟植物栽培箱	HTML 结构、CSS 样式、DOM 操作	基础 JS 语法
打字游戏	事件处理、DOM 更新、计时	DOM 操作
浏览器扩展	API 调用、本地存储、浏览器集成	事件处理、表单
太空游戏	Canvas 绘图、游戏循环、碰撞检测	JavaScript 函数、事件
银行应用	路由、状态管理、表单验证	所有先前的概念

来源： README.md119-144

结论

本课程的项目式学习方法为学生提供了一条结构化且灵活的学习路径，以发展 Web 开发技能。通过实践学习，学生不仅获得了理论知识，还获得了实践经验，为他们应对现实世界的开发任务做好了准备。