Web-Dev-For-Beginners/translations/mo

初學者的網頁開發課程 - 教學大綱

透過 Microsoft Cloud Advocates 提供的 12 週完整課程，學習網頁開發的基礎知識。24 篇課程涵蓋 JavaScript、CSS 和 HTML，並透過實作專案如生態瓶、瀏覽器擴充功能及太空遊戲來學習。課程包含測驗、討論及實際作業，幫助您提升技能並加強知識吸收。立即開始您的程式設計旅程吧！

加入 Azure AI Foundry Discord 社群

按照以下步驟開始使用這些資源：

1. Fork 儲存庫：點擊
2. Clone 儲存庫： git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
3. 加入 Azure AI Foundry Discord，與專家及其他開發者交流

🌐 多語言支援

透過 GitHub Action 支援（自動化且隨時更新）

阿拉伯文 | 孟加拉文 | 保加利亞文 | 緬甸文 | 中文（簡體） | 中文（繁體，香港） | 中文（繁體，澳門） | 中文（繁體，台灣） | 克羅埃西亞文 | 捷克文 | 丹麥文 | 荷蘭文 | 愛沙尼亞文 | 芬蘭文 | 法文 | 德文 | 希臘文 | 希伯來文 | 印地文 | 匈牙利文 | 印尼文 | 義大利文 | 日文 | 韓文 | 立陶宛文 | 馬來文 | 馬拉地文 | 尼泊爾文 | 挪威文 | 波斯文（法爾西） | 波蘭文 | 葡萄牙文（巴西） | 葡萄牙文（葡萄牙） | 旁遮普文（古木基文） | 羅馬尼亞文 | 俄文 | 塞爾維亞文（西里爾文） | 斯洛伐克文 | 斯洛文尼亞文 | 西班牙文 | 斯瓦希里文 | 瑞典文 | 他加祿文（菲律賓文） | 泰米爾文 | 泰文 | 土耳其文 | 烏克蘭文 | 烏爾都文 | 越南文

如果您希望支援其他翻譯語言，請參考 此處

🧑‍🎓 您是學生嗎？

造訪 學生中心頁面，您可以找到初學者資源、學生套件，甚至有機會獲得免費證書兌換券。這是您想要收藏並定期查看的頁面，因為我們每月都會更新內容。

📣 公告 - 新增 GitHub Copilot Agent 模式挑戰！

新增挑戰，請在大多數章節中尋找 "GitHub Copilot Agent Challenge 🚀"。這是一個使用 GitHub Copilot 和 Agent 模式完成的新挑戰。如果您之前未使用過 Agent 模式，它不僅能生成文字，還能創建和編輯檔案、執行指令等。

📣 公告 - 新增使用生成式 AI 的專案

剛新增 AI 助理專案，請查看 專案

📣 公告 - 新課程 使用 JavaScript 的生成式 AI 已正式推出

不要錯過我們的生成式 AI 新課程！

造訪 https://aka.ms/genai-js-course 開始學習！

• 課程涵蓋從基礎到 RAG 的所有內容。
• 使用 GenAI 和我們的伴侶應用程式與歷史人物互動。
• 有趣且引人入勝的敘事，您將進行時光旅行！

每堂課包含一個作業、一個知識檢查以及一個挑戰，幫助您學習以下主題：

• 提示及提示工程
• 文字及圖片應用程式生成
• 搜尋應用程式

造訪 https://aka.ms/genai-js-course 開始學習！

🌱 開始使用

教師們，我們已 提供一些建議 關於如何使用此教學大綱。我們期待您在 討論論壇 中提供回饋！

學習者，每堂課開始前，請先完成課前測驗，然後閱讀課程內容，完成各種活動，並透過課後測驗檢查您的理解程度。

為了提升學習效果，建議您與同學一起合作完成專案！我們鼓勵您在 討論論壇 中進行討論，我們的版主團隊將隨時回答您的問題。

為了進一步提升您的教育水平，我們強烈建議您探索 Microsoft Learn 以獲取更多學習材料。

📋 設置您的環境

此教學大綱已準備好開發環境！開始使用時，您可以選擇在 Codespace（基於瀏覽器，無需安裝的環境）中運行教學大綱，或在您的電腦上使用文字編輯器如 Visual Studio Code。

創建您的儲存庫

為了方便保存您的工作，建議您創建此儲存庫的副本。您可以點擊頁面頂部的 使用此模板 按鈕，這將在您的 GitHub 帳戶中創建一個包含教學大綱副本的新儲存庫。

請按照以下步驟操作：

1. Fork 儲存庫：點擊頁面右上角的 "Fork" 按鈕。
2. Clone 儲存庫： git clone https://github.com/microsoft/Web-Dev-For-Beginners.git

在 Codespace 中運行教學大綱

在您創建的儲存庫副本中，點擊 Code 按鈕並選擇 Open with Codespaces。這將為您創建一個新的 Codespace 以進行工作。

在您的電腦上本地運行教學大綱

要在您的電腦上本地運行此教學大綱，您需要一個文字編輯器、一個瀏覽器和一個命令行工具。我們的第一堂課 程式語言及工具介紹 將引導您了解各種工具選項，幫助您選擇最適合您的工具。

我們建議使用 Visual Studio Code 作為您的編輯器，它還內建了 終端機。您可以在 這裡 下載 Visual Studio Code。

1. 將您的儲存庫克隆到您的電腦。您可以點擊 Code 按鈕並複製 URL：

   CodeSpace

   然後，在 Visual Studio Code 的 終端機 中運行以下命令，將 <your-repository-url> 替換為您剛複製的 URL：

   git clone <your-repository-url>
   

2. 在 Visual Studio Code 中打開文件夾。您可以點擊 File > Open Folder，然後選擇您剛克隆的文件夾。

推薦的 Visual Studio Code 擴展：

• Live Server - 在 Visual Studio Code 中預覽 HTML 頁面
• Copilot - 幫助您更快速地撰寫程式碼

📂 每堂課包含：

• 選擇性手繪筆記
• 選擇性補充影片
• 課前暖身測驗
• 書面課程
• 專案型課程的逐步建構指南
• 知識檢測
• 挑戰題
• 補充閱讀材料
• 作業
• 課後測驗

關於測驗的說明：所有測驗都包含在 Quiz-app 資料夾中，共有 48 個測驗，每個測驗包含三個問題。您可以在 這裡 找到測驗應用程式，該應用程式可以在本地運行或部署到 Azure；請按照 quiz-app 資料夾中的指示操作。

🗃️ 課程

	專案名稱	教授概念	學習目標	連結課程	作者
01	入門	程式設計簡介及工具介紹	學習大多數程式語言的基本原理以及幫助專業開發者完成工作的軟體	程式語言與工具簡介	Jasmine
02	入門	GitHub 基礎，包含團隊合作	如何在專案中使用 GitHub，如何與他人協作程式碼庫	GitHub 基礎	Floor
03	入門	無障礙設計	學習網頁無障礙設計的基礎	無障礙設計基礎	Christopher
04	JS 基礎	JavaScript 資料型別	JavaScript 資料型別的基礎	資料型別	Jasmine
05	JS 基礎	函數與方法	學習如何使用函數和方法來管理應用程式的邏輯流程	函數與方法	Jasmine 和 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 API，用於將元素繪製到螢幕	繪製到畫布	Chris
17	太空遊戲	在螢幕上移動元素	探索如何使用笛卡爾座標和 Canvas API 使元素獲得運動	移動元素	Chris
18	太空遊戲	碰撞檢測	使用按鍵使元素碰撞並相互作用，並提供冷卻功能以確保遊戲效能	碰撞檢測	Chris
19	太空遊戲	計分	根據遊戲的狀態和效能進行數學計算	計分	Chris
20	太空遊戲	結束與重新開始遊戲	學習如何結束與重新開始遊戲，包括清理資產和重置變數值	結束條件	Chris
21	銀行應用程式	網頁應用程式中的 HTML 模板與路由	學習如何使用路由和 HTML 模板建立多頁網站的架構	HTML 模板與路由	Yohan
22	銀行應用程式	建立登入與註冊表單	學習建立表單並處理驗證程序	表單	Yohan
23	銀行應用程式	獲取與使用資料的方法	資料如何在應用程式中流動，如何獲取、儲存和處理	資料	Yohan
24	銀行應用程式	狀態管理概念	學習應用程式如何保留狀態以及如何以程式方式管理它	狀態管理	Yohan
25	瀏覽器/VS Code 編輯器	使用 VS Code	學習如何使用程式碼編輯器	使用 VS Code 編輯器	Chris
26	AI 助理	使用 AI	學習如何建立自己的 AI 助理	AI 助理專案	Chris

🏫 教學法

我們的課程設計基於兩個主要的教學原則：

• 專案導向學習
• 頻繁測驗

本課程教授 JavaScript、HTML 和 CSS 的基礎知識，以及當今網頁開發者使用的最新工具和技術。學生將有機會透過建立打字遊戲、虛擬生態瓶、環保瀏覽器擴充功能、太空侵略者風格的遊戲以及商業銀行應用程式來獲得實作經驗。到課程結束時，學生將對網頁開發有扎實的理解。

🎓 您可以在 Microsoft Learn 上以 學習路徑 的形式學習本課程的前幾堂課！

透過確保內容與專案相符，學習過程變得更具吸引力，並能增強概念的記憶。我們還撰寫了幾個 JavaScript 基礎的入門課程來介紹概念，並搭配 "JavaScript 初學者系列" 的影片教學，其中一些作者也參與了本課程的編寫。

此外，課前的低壓測驗可以幫助學生專注於學習主題，而課後的第二次測驗則能進一步加強記憶。本課程設計靈活有趣，可以完整學習或選擇部分內容。專案從簡單開始，並在 12 週的課程結束時逐漸變得更為複雜。

雖然我們有意避免介紹 JavaScript 框架，以便專注於網頁開發者在採用框架之前所需的基本技能，但完成本課程後的下一步可以是透過另一系列影片學習 Node.js："Node.js 初學者系列"。

請參閱我們的 行為準則 和 貢獻指南。我們歡迎您的建設性反饋！

🧭 離線存取

您可以使用 Docsify 離線運行此文件。Fork 此存儲庫，在本地機器上 安裝 Docsify，然後在此存儲庫的根目錄中輸入 docsify serve。網站將在本地端的 3000 埠上運行：localhost:3000。

📘 PDF

所有課程的 PDF 可在 這裡 找到。

🎒 其他課程

我們的團隊還製作了其他課程！請查看：

• MCP 初學者課程
• 邊緣 AI 初學者課程
• AI 代理初學者課程
• 生成式 AI 初學者課程 .NET
• 使用 JavaScript 的生成式 AI
• 使用 Java 的生成式 AI
• AI 初學者指南
• 資料科學初學者指南
• 機器學習初學者指南
• 網路安全初學者指南
• 網頁開發初學者指南
• 物聯網初學者指南
• XR 開發初學者指南
• 精通 GitHub Copilot 用於代理性使用
• 精通 GitHub Copilot 用於 C#/.NET 開發者
• 選擇你的 Copilot 冒險

獲取幫助

如果您遇到困難或對構建 AI 應用有任何疑問，請加入：

如果您在構建過程中有產品反饋或遇到錯誤，請訪問：

授權

此存儲庫採用 MIT 授權。請參閱 LICENSE 文件以獲取更多資訊。

---

免責聲明：
本文件已使用 AI 翻譯服務 Co-op Translator 進行翻譯。儘管我們努力確保準確性，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於關鍵信息，建議使用專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或誤釋不承擔責任。