build a no-auth react webapp (i.e. static webapp that can be deployed a free github page) (use localstorage to store the learning progress) (DO NOT require claude account to use that webapp) for my retired mom to learn Python zero to hero. My mom is eager to learn about a lot of things about the computer is very foreign to her, so i guess this has to feel intuitive and fun but should also have a scientific backed method/ roadmap to guide her to level up. maybe CLT?
Q: What's your mom's current comfort level with computers? A: Can use email and browse the web, but that's about it Q: What learning style do you think would engage her most? A: Mix of all approaches Q: How much time might she dedicate to learning? A: Short daily sessions (10-15 min), but do not limit the daily learning content, allow learning ahead of schedule
i think she's more comfortable with learning in Traditional chinese, but keep all the keywords and jargons/ verbs in english. but anything about the "story"/ explanations can be in chinese
i think my mom wants to learn the overview or "why" things work or why are things designed/arranged that way, before learning any of the syntax.
reference curriculum roadmap (draft): Python 花園 - 零到英雄完整課程規劃 課程設計理念 核心原則
- 理解先於記憶：先建立心智模型，再學語法
- 認知負荷理論 (CLT)：每次只引入一個新概念
- 生活化類比：用日常經驗解釋抽象概念
- 漸進式複雜度：從具體到抽象，從簡單到複雜
- 立即應用：每個概念都有實際用途 學習節奏
- 每天 10-15 分鐘
- 每週 5-6 天（允許休息）
- 總計約 16-20 週完成基礎到中級
第一階段：理解電腦的思維方式 (Week 1-2, 10 lessons) Week 1: 電腦是什麼？ Day 1: 電腦如何「思考」？ 概念目標：理解電腦只會執行精確的指令
- 互動遊戲：當一個「機器人」，只能執行精確指令
- 例子：如何告訴機器人「做一個三明治」
- 學習：為什麼需要程式語言
- 無程式碼：純概念理解 Day 2: 什麼是程式語言？ 概念目標：程式語言是人類和電腦之間的翻譯器
- 類比：就像學英文、法文一樣，Python 是和電腦溝通的語言
- 為什麼選 Python？（簡單、強大、應用廣泛）
- 展示：用 Python 可以做什麼（網站、數據分析、自動化）
- 無程式碼：看示範影片和圖片 Day 3: 程式的三個基本元素 概念目標：所有程式都由三件事組成
- 順序執行：一步一步做（像食譜）
- 做決定：如果...就...（像選擇題）
- 重複做：做很多次（像洗碗）
- 互動：生活中的例子配對遊戲
- 無程式碼：純視覺化理解 Day 4: 電腦的記憶力 概念目標：理解電腦需要「記住」東西
- 類比：人腦記憶 vs 電腦記憶
- 為什麼需要「儲存」資料？
- 介紹變數的概念（不用語法）
- 互動：記憶遊戲 - 記住數字、名字
- 無程式碼：概念理解 Day 5: 程式碼的旅程 - 從打字到執行 概念目標：理解按下「執行」後發生什麼事
- 你寫的程式碼（純文字檔案 .py）
- Python 直譯器（interpreter）的工作
- 類比：翻譯官即時翻譯你的話給電腦聽
- 視覺化：程式碼 → 直譯器 → 機器語言 → 結果
- 對比：編譯 vs 直譯（為什麼 Python 是直譯型）
- 無程式碼：動畫展示整個流程 Day 6: 你的工作環境 - IDE 和終端機 概念目標：理解寫程式的工具
- IDE（整合開發環境）：
- 就像 Word 是寫文章的地方，IDE 是寫程式的地方
- 功能：語法高亮、自動補全、錯誤提示
- 為什麼比記事本好用？
- 終端機（Terminal/命令列）：
- 用文字和電腦對話的地方
- 類比：像傳簡訊給電腦
- 為什麼程式設計師喜歡用？（快速、強大）
- 視覺化：GUI vs CLI 的差異
- 實際示範：在 IDE 寫程式 vs 在終端執行
- 無程式碼：概念理解和環境熟悉 Day 7: Python 的家 - 模組和套件 概念目標：理解程式碼如何組織和重用
- 模組（Module）：
- 一個 .py 檔案就是一個模組
- 類比：一本書的一個章節
- 為什麼要分模組？（組織、重用）
- 套件（Package）：
- 很多模組的集合
- 類比：整本書或圖書館
- import 的魔法：
- 當你寫 import math，發生了什麼？
- Python 去哪裡找這個模組？
- 視覺化：搜尋路徑（當前目錄 → 標準庫 → site-packages）
- 標準庫 vs 第三方套件
- 無程式碼：理解 Python 生態系統 Day 8: 你的第一個「指令」 概念目標：終於開始寫第一行！
- 回顧：現在你知道按下執行後會發生什麼
- 介紹 print（讓電腦「說話」）
- 類比：print 就像你對電腦說「請告訴我...」
- 第一次寫程式碼：print("你好！")
- 觀察：這行程式碼如何被直譯器處理
- 慶祝時刻！🎉 Week 2: 儲存與使用資料 Day 9: 變數 - 你的資料盒子 概念目標：變數是有名字的儲存空間
- 類比：變數像標籤紙盒
- 為什麼需要名字？（方便找到）
- 視覺化：盒子裡放不同東西
- 實作：創建第一個變數 name = "媽媽" Day 10: 不同種類的資料 概念目標：理解數字和文字是不同的
- 文字 (string)：用引號包起來
- 數字 (integer)：可以計算
- 為什麼要區分？（電腦需要知道怎麼處理）
- 實作：嘗試兩種類型 Day 11: 讓電腦幫你算數 概念目標：電腦是超級計算機
- 基本運算：+ - × ÷
- 為什麼用變數存計算結果？
- 實作：計算生活中的問題（買菜、分帳） Day 12: 資料可以改變 概念目標：變數的值可以更新
- 類比：盒子裡的東西可以換掉
- 為什麼需要改變？（計數、更新資訊）
- 實作：計數器概念 Day 13: 第一階段總複習 概念目標：整合前面所學
- 回顧：電腦思維、變數、基本運算
- 小專案：製作個人資料卡片
- 慶祝：完成基礎認知！
第二階段：讓程式做決定 (Week 3-5, 15 lessons) Week 3: 條件與邏輯 Day 14: 電腦如何做選擇？ 概念目標：理解條件判斷的必要性
- 生活例子：如果下雨就帶傘
- 程式需要「如果...就...」的能力
- 介紹布林值：True/False（是非題）
- 無程式碼：決策樹遊戲 Day 15: 第一個 if 語句 概念目標：if 讓程式做選擇
- 語法介紹：if 條件:
- 為什麼要縮排？（表示「這是 if 裡面的」）
- 實作：簡單的年齡判斷 Day 16: 不只是「如果」- else 概念目標：處理「否則」的情況
- if-else：如果不是 A 就是 B
- 實作：奇數偶數判斷 Day 17: 多重選擇 - elif 概念目標：處理多個可能性
- 類比：選擇題 A/B/C/D
- 實作：成績等級判定 Day 18: 比較與邏輯 概念目標：如何比較資料
- 比較運算子：> < == !=
- 邏輯運算：and, or, not
- 實作：組合條件判斷 Week 4-5: 實際應用練習 Day 19-23: 條件判斷小專案
- 簡易計算機
- 溫度轉換器
- BMI 計算與建議
- 密碼檢查器
- 小測驗遊戲
第三階段：重複的力量 (Week 6-8, 15 lessons) Week 6: 迴圈概念 Day 24: 為什麼需要重複？ 概念目標：重複是程式的超能力
- 生活例子：洗碗、摺衣服
- 如果要做 100 次呢？1000 次？
- 無程式碼：理解重複的價值 Day 25: while 迴圈 - 當...的時候 概念目標：條件式重複
- 「只要條件成立就繼續做」
- 危險：無限迴圈
- 實作：倒數計時器 Day 26: for 迴圈 - 固定次數 概念目標：已知次數的重複
- 「做 N 次」
- range() 函數
- 實作：九九乘法表 Day 27: 走訪資料 - 列表初探 概念目標：一個變數存多個東西
- 類比：購物清單
- for 迴圈走訪列表
- 實作：處理多筆資料 Day 28: 迴圈的實際應用
- 尋找最大值
- 累加總和
- 資料過濾 Week 7-8: 迴圈專案週 Day 29-38: 迴圈小專案
- 猜數字遊戲
- 密碼產生器
- 簡易通訊錄
- 待辦清單
- 簡單統計分析
第四階段：組織你的程式 (Week 9-11, 15 lessons) Week 9: 函數 - 可重用的程式碼 Day 39: 什麼是函數？ 概念目標：函數是可重用的程式碼片段
- 類比：食譜、遙控器按鈕
- 為什麼需要函數？（避免重複、易於維護）
- 無程式碼：概念理解 Day 40: 定義你的第一個函數 概念目標：def 關鍵字
- 語法：def function_name():
- 呼叫函數
- 實作：問候函數 Day 41: 函數的輸入 - 參數 概念目標：讓函數更靈活
- 參數就像「設定」
- 實作：客製化問候 Day 42: 函數的輸出 - return 概念目標：函數可以「回傳」結果
- return 的意義
- 實作：計算函數 Day 43: 組合使用函數
- 函數呼叫函數
- 建立函數庫
- 實作：工具箱概念 Week 10-11: 函數專案週 Day 44-53: 函數小專案
- 個人工具庫
- 文字處理器
- 簡易記帳程式
- 遊戲框架
- 資料分析工具
第五階段：資料結構 (Week 12-14, 15 lessons) Week 12: 列表的深入學習 Day 54: 列表操作大全
- 新增、刪除、修改
- 切片 (slicing)
- 列表方法 Day 55: 二維列表
- 概念：列表中的列表
- 應用：表格資料 Day 56: 列表推導式
- 優雅的寫法
- 效能優勢 Week 13: 字典 - 鍵值對 Day 57: 字典的概念 概念目標：用「名字」找資料
- 類比：真正的字典
- 鍵值對概念 Day 58-60: 字典操作
- 增刪查改
- 走訪字典
- 實際應用 Week 14: 元組與集合 Day 61-63: 其他資料結構
- Tuple: 不可變的列表
- Set: 獨特元素的集合
- 選擇合適的資料結構
第六階段：檔案與實用技能 (Week 15-16, 10 lessons) Day 64-68: 檔案操作
- 讀取文字檔
- 寫入文字檔
- CSV 檔案處理
- 錯誤處理基礎 Day 69-73: 實用模組
- datetime: 時間日期
- random: 隨機數
- os: 檔案系統
- 匯入與使用模組
第七階段：物件導向思維 (Week 17-18, 10 lessons) Week 17: 理解物件導向 Day 74: 什麼是物件導向？ 概念目標：理解為什麼需要 OOP
- 到目前為止的問題：
- 程式變大後，函數和變數很多，難以管理
- 相關的資料和函數分散各處
- 難以重用和擴展
- 現實世界的啟發：
- 類比：一台車有屬性（顏色、速度）和行為（加速、煞車）
- 把相關的「資料」和「功能」組合在一起
- OOP 的核心思想：
- 把程式看成「物件」的互動
- 每個物件有自己的狀態和行為
- 無程式碼：概念理解 Day 75: 類別 vs 物件 - 藍圖與實體 概念目標：理解 Class 和 Object 的關係
- 類別（Class）：
- 類比：房屋設計圖、餅乾模具
- 定義「這種物件」有什麼屬性和方法
- 是一個「模板」或「藍圖」
- 物件（Object）：
- 類比：實際蓋好的房子、做出來的餅乾
- 根據類別創建的「實例」
- 每個實例有自己的資料
- 視覺化展示：
- 一個 Dog 類別 → 可以創建多隻不同的狗
- 每隻狗有自己的名字、年齡，但都能叫
- 無程式碼：純概念理解 Day 76: 第一個類別 - 定義與創建 概念目標：學習 class 語法
- 定義類別：class Dog:
- init 方法（初始化器/建構子）
- 為什麼需要？（創建物件時設定初始狀態）
- self 是什麼？（指向「自己」）
- 創建物件：my_dog = Dog("旺財", 3)
- 實作：簡單的 Person 類別 Day 77: 屬性與方法 概念目標：物件的資料和行為
- 屬性（Attributes）：
- 物件的「資料」或「狀態」
- 存取：dog.name
- 方法（Methods）：
- 物件的「行為」或「功能」
- 為什麼第一個參數是 self？
- 實作：為類別添加方法 Day 78: 封裝 - 保護你的資料 概念目標：理解資訊隱藏
- 為什麼需要封裝？
- 保護重要資料不被外部隨意修改
- 控制存取方式
- 私有屬性：
- 命名慣例：_name（內部使用）
- __name（名稱改編）
- Getter 和 Setter：
- 提供控制的存取介面
- 可以加入驗證邏輯
- 實作：銀行帳戶類別 Day 79: 繼承 - 重用和擴展 概念目標：理解類別之間的關係
- 為什麼需要繼承？
- 避免重複程式碼
- 建立層級關係
- 概念：
- 父類別（基礎類別）
- 子類別（衍生類別）
- 類比：動物 → 狗、貓
- 語法：class Dog(Animal):
- 方法覆寫（Override）
- 實作：動物類別繼承 Day 80: 多型 - 同一介面，不同行為 概念目標：理解多型的威力
- 什麼是多型？
- 不同物件對同一訊息有不同反應
- 類比：都會「叫」，但狗汪汪、貓喵喵
- Duck Typing：
- Python 的特色
- 「如果走路像鴨子，叫聲像鴨子...」
- 實作：不同形狀的 area() 方法 Day 81: 組合 vs 繼承 概念目標：理解物件關係的兩種方式
- 繼承："是一個" (is-a)
- 狗「是一個」動物
- 組合："有一個" (has-a)
- 車「有一個」引擎
- 何時用哪個？
- 優先使用組合（更靈活）
- 繼承用於真正的層級關係
- 實作：汽車與引擎 Day 82: 特殊方法 - Python 的魔法 概念目標：自訂物件行為
- Dunder 方法（雙下劃線）
- str：字串表示
- len：長度
- add：加法運算
- eq：相等比較
- 為什麼有用？
- 讓自訂物件像內建類型一樣好用
- 實作：向量類別 Day 83: OOP 最佳實踐 概念目標：寫好的 OOP 程式碼
- 單一職責原則
- 一個類別只做一件事
- 開放封閉原則
- 開放擴展，封閉修改
- 何時使用 OOP？
- 複雜系統建模
- 需要重用和擴展
- 多人協作
- 何時不用 OOP？
- 簡單腳本
- 數據處理管道
- 程式碼檢視：好與壞的設計
第八階段：綜合專案 (Week 19-22) 專案導向學習 專案 1: 圖書管理系統 (Week 19) 整合技能：OOP、檔案、資料結構
- Book 類別（書籍資訊）
- Library 類別（管理書籍）
- 借閱、歸還功能
- 資料持久化 專案 2: 家庭記帳本 (Week 20) 整合技能：OOP、檔案處理
- Transaction 類別（交易記錄）
- Account 類別（帳戶管理）
- 分類統計
- 月報表生成
- 視覺化圖表 專案 3: 任務管理系統 (Week 21) 整合技能：完整 OOP 設計
- Task 類別（任務）
- Project 類別（專案）
- Priority 系統
- 提醒功能
- 進度追蹤 專案 4: 自選專案 (Week 22) 自主學習：根據興趣選擇
- 配方管理系統
- 閱讀清單追蹤
- 簡易部落格生成器
- 資料爬蟲入門
每堂課的標準結構
- 引入 (2-3 分鐘)
- 派姨的故事或情境
- 連結上一課內容
- 今天要解決什麼問題？
- 概念解釋 (3-4 分鐘)
- 用類比說明
- 視覺化展示
- 為什麼需要這個？
- 示範 (2-3 分鐘)
- 看派姨怎麼做
- 逐步解說
- 常見錯誤提醒
- 實作練習 (5-7 分鐘)
- 引導式練習
- 即時提示
- 錯誤回饋
- 總結 (1-2 分鐘)
- 今天學到什麼
- 如何應用到生活
- 預告下一課
進階路徑建議 (Week 23+) 深入主題（選修）
- 物件導向程式設計
- 網頁爬蟲
- 資料視覺化
- 自動化腳本
- API 使用
- 簡易網站開發 持續學習資源
- Python 官方文檔
- 實際專案練習
- 開源專案參與
- 社群學習
評估與調整 每週檢查點
- 概念理解測試（非壓力）
- 實作能力檢驗
- 學習節奏調整 學習里程碑
- Week 2: 理解程式執行流程，可以寫簡單計算程式
- Week 5: 可以做互動式程式
- Week 8: 可以處理列表資料
- Week 11: 可以設計函數結構
- Week 14: 可以處理複雜資料
- Week 18: 理解 OOP 並能設計簡單類別
- Week 22: 可以獨立完成中型專案
輔助學習工具 互動元素
- 視覺化程式執行
- 拖放式程式碼組合
- 即時錯誤提示
- 進度追蹤 心理支持
- 派姨鼓勵系統
- 學習夥伴功能
- 慶祝小成就
- 失敗也是學習 複習機制
- 間隔重複複習
- 概念地圖
- 個人筆記本
- 常見問題集
成功指標 技術能力
- 能讀懂簡單 Python 程式
- 能獨立寫 50-100 行程式
- 能除錯基本錯誤
- 能查找和使用文檔 思維能力
- 能分解問題
- 能設計解決方案
- 能評估不同做法
- 具備程式思維 學習態度
- 對學習有信心
- 願意嘗試和犯錯
- 能自主學習
- 享受創造的樂趣
這份課程設計遵循認知負荷理論，確保每次只引入一個新概念，並充分練習後才進入下一個。Day 5-7 特別加入了「程式執行流程」和「開發環境」的深入理解，讓學習者建立完整的心智模型。Week 17-18 加入完整的 OOP 教學，從概念到實作，循序漸進。根據你媽媽的學習速度，可以調整節奏，重要的是理解而非速度。