Web-Dev-For-Beginners/translations/tw

初學者的網頁開發課程 - 一套完整的教學計畫

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

🧑‍🎓 你是學生嗎？

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

📣 公告 - 全新課程 關於 JavaScript 的生成式 AI 已經發布

別錯過我們全新的生成式 AI 課程！

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

• 課程涵蓋從基礎到 RAG 的所有內容。
• 使用 GenAI 和我們的配套應用程式與歷史人物互動。
• 有趣且引人入勝的故事情節，帶你穿越時空！

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

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

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

🌱 開始學習

教師們，我們已提供一些建議供您參考如何使用這套課程。我們期待您在討論區中提供回饋！

學習者，每節課從課前測驗開始，接著閱讀課程內容，完成各種活動，並透過課後測驗檢查你的理解程度。

為了提升學習體驗，與同儕一起合作完成專案吧！我們鼓勵你在討論區中進行討論，我們的版主團隊將隨時回答你的問題。

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

📋 設置你的開發環境

這套課程已經準備好開發環境！你可以選擇在 Codespace（基於瀏覽器，無需安裝的環境）中運行課程，或者在本地電腦上使用像 Visual Studio Code 這樣的文字編輯器。

建立你的倉庫

為了方便保存你的學習進度，建議你建立這個倉庫的副本。你可以點擊頁面頂部的 Use this template 按鈕，這將在你的 GitHub 帳戶中建立一個包含課程副本的新倉庫。

操作步驟如下：

1. Fork 倉庫：點擊頁面右上角的 "Fork" 按鈕。
2. 克隆倉庫：執行 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：

   

   然後，在 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	Green Browser Extension	與瀏覽器互動	學習瀏覽器的運作方式、歷史，以及如何搭建瀏覽器擴展的基本元素	關於瀏覽器	Jen
13	Green Browser Extension	建立表單、調用 API 並將變數存儲於本地存儲中	建立瀏覽器擴展的 JavaScript 元素，使用存儲於本地存儲中的變數來調用 API	API、表單與本地存儲	Jen
14	Green Browser Extension	瀏覽器中的背景進程與網頁性能	使用瀏覽器的背景進程來管理擴展的圖標；學習網頁性能以及一些優化方法	背景任務與性能	Jen
15	Space Game	更高級的 JavaScript 遊戲開發	學習如何使用類別與組合進行繼承，以及 Pub/Sub 模式，為開發遊戲做準備	高級遊戲開發介紹	Chris
16	Space Game	繪製到畫布	學習如何使用 Canvas API，將元素繪製到螢幕上	繪製到畫布	Chris
17	Space Game	在螢幕上移動元素	探索如何使用笛卡爾座標系和 Canvas API 讓元素產生運動	移動元素	Chris
18	Space Game	碰撞檢測	讓元素通過按鍵碰撞並相互反應，並提供冷卻功能以確保遊戲性能	碰撞檢測	Chris
19	Space Game	計分	根據遊戲的狀態和表現進行數學計算	計分	Chris
20	Space Game	結束與重啟遊戲	學習如何結束與重啟遊戲，包括清理資產和重置變數值	結束條件	Chris
21	Banking App	網頁應用中的 HTML 模板與路由	學習如何使用路由和 HTML 模板來搭建多頁網站的架構	HTML 模板與路由	Yohan
22	Banking App	建立登入與註冊表單	學習如何建立表單並處理驗證流程	表單	Yohan
23	Banking App	獲取與使用數據的方法	瞭解數據如何在應用中流動，如何獲取、存儲和處理數據	數據	Yohan
24	Banking App	狀態管理的概念	學習應用如何保留狀態以及如何以程式化方式進行管理	狀態管理	Yohan

🏫 教學法

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

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

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

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

通過確保內容與專案相符，學習過程對學生來說更加有趣，並能增強概念的記憶。我們還撰寫了幾節 JavaScript 基礎課程來介紹概念，並搭配 "JavaScript 初學者系列" 視頻教程中的視頻，其中一些作者也參與了本課程的編寫。

此外，課前的低壓力小測驗可以幫助學生專注於學習主題，而課後的第二次測驗則能進一步鞏固記憶。該課程設計靈活有趣，可以整體學習或部分學習。專案從小型開始，並在 12 週的課程週期結束時逐漸變得複雜。

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

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

🧭 離線訪問

您可以使用 Docsify 離線運行此文檔。Fork 此倉庫，在本地機器上安裝 Docsify，然後在此倉庫的根目錄中輸入 docsify serve。網站將在本地端口 3000 上提供服務：localhost:3000。

📘 PDF

所有課程的 PDF 可在 此處 找到。

🎒 其他課程

我們的團隊還製作了其他課程！查看以下內容：

• 生成式 AI 初學者課程
• 生成式 AI 初學者課程 .NET
• 使用 JavaScript 的生成式 AI
• 使用 Java 的生成式 AI
• AI 初學者課程
• 數據科學初學者課程
• 機器學習初學者課程
• 網絡安全初學者課程
• 網頁開發初學者課程
• 物聯網初學者課程
• XR 開發初學者課程
• 掌握 GitHub Copilot 的智能使用
• 為 C#/.NET 開發者掌握 GitHub Copilot
• 選擇您的 Copilot 冒險

授權

此倉庫採用 MIT 授權。更多信息請參閱 LICENSE 文件。

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