HTML Code Play: Learn HTML

透過修改程式碼並觀察其效果來學習 Web 開發。 HTML Code Play 將 HTML、CSS 和 JavaScript 課程與行動程式碼編輯器、可運行範例、測驗和程式設計遊戲結合。您可以利用它學習概念、親自動手實踐，並在同一裝置上追蹤學習進度。

閱讀、編輯和運行

瀏覽學習目錄，打開教程並閱讀其解釋以及完整的程式碼範例。將範例傳送到編輯器，運行原始程式碼，然後變更標籤、樣式或表達式並比較輸出結果。這種實踐性強的工作流程將您閱讀的語法與它創建的頁面或行為聯繫起來。

工作區支援 HTML、CSS 和 JavaScript 編輯，並帶有語法高亮顯示。在實驗過程中，您可以使用撤銷和重做功能，尋找文字、跳到特定行並調整編輯器字體大小。如果您需要一個新的頁面作為起點，可以建立新頁面或選擇現有範本。開啟 HTML 文件，儲存您的工作，使用「另存為」建立另一個副本，或透過裝置的共用選項共用程式碼文件。

引導式學習與練習

本課程涵蓋 11 個 Web 技術主題，從頁面結構和樣式到腳本編寫、向量圖形、響應式佈局和互動式範例。您可以按標題或章節搜尋課程，找到所需內容。將有用的教學置頂以便集中複習，添加您自己的課程筆記，並使用「上一頁」和「下一頁」控制項在教學課程之間切換。

每個教程都包含講解、語法和可運行的範例。您可以進行主題測驗或練習挑戰。練習題要求您完成缺少的程式碼，並提供提示和答案回饋，幫助您檢查遺漏的細節。測驗結果可幫助您在返回課程之前檢驗理解程度。

六種練習方式

選擇一款程式遊戲來練習不同的技能：

- 程式碼建構器：重新排列程式碼區塊以重建可運行的程式碼。

- 輸出偵探：預測程式碼片段的輸出結果。

- 錯誤查找：找出錯誤的程式碼行。

- 填空：選擇缺少的代碼標記。

- 匹配實驗室：將術語與其含義聯繫起來。

- 快速問答：在限定時間內回答判斷。

活動等級會記錄結果並解鎖下一步。您可以重玩已解鎖的關卡以提高分數，或使用不斷更新的混合練習歌單。

保持學習井然有序

進度畫面會依技術類型彙整已複習的課程、測驗和練習。查看您的技能圖譜和建議的下一步學習計劃，從「主頁」繼續學習課程，並接受每日挑戰。連勝和挑戰徽章會讓您的學習活動一目了然。可選的學習提醒需要通知權限，您可以將其關閉。

您的課程進度、筆記和遊戲結果都儲存在裝置上。學習螢幕控制項包括更大的字體、更高的對比度和更少的動態效果。單獨的 HTML、CSS 和 JavaScript 評估會提供應用程式內成就憑證；這些是應用程式學習記錄，並非認證資格。

線上社群貼文在連網時會提供另一種程式碼資源供您探索。網路支援的內容和載入外部資源的範例需要存取網際網路；本地進度儲存不支援雲端同步。

對於初學者、學生以及重新學習前端概念的人來說，可以從一個例子入手，做一些小的改動，並透過練習來加深理解。