Web Development for Beginners - 課程大綱

透過Microsoft Cloud Advocates團隊提供的為期12週全面課程，學習網頁開發的基礎知識。24堂課中，每堂皆透過實作專案（例如生態瓶、瀏覽器擴充功能及太空遊戲）來深入探討JavaScript、CSS與HTML。參與測驗、討論及實作作業。利用我們有效的專案導向教學法提升技能並優化知識吸收。現在就開始你的程式設計之旅吧！

加入Azure AI Foundry Discord社群

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

派生這個儲存庫：按這裡
複製儲存庫： git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
加入Azure AI Foundry Discord，與專家及開發者交流

🌐 多語言支援

透過GitHub Action支援（自動化且總是最新）

想要本地複製？

該儲存庫包含50多種語言翻譯，會大幅增加下載大小。若想不下載翻譯檔案，可以使用稀疏擷取：

Bash / macOS / Linux:
git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners
git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'
CMD (Windows):
git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners
git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"
這樣可以更快下載，仍能完成課程所需的所有內容。

若想新增其他翻譯語言支援，請見此頁 here

🧑‍🎓 你是學生嗎？

造訪學生中心頁面，你會找到初學資源、學生套組，甚至可以免費取得證書兌換券。這是你想收藏並定期回顧查看的頁面，內容每月更新。

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

新增挑戰項目，查看大多數章節中的 "GitHub Copilot Agent Challenge 🚀"。這是使用GitHub Copilot與Agent模式完成的新挑戰。如果你還沒用過Agent模式，它不僅能產生文字，也能創建與編輯檔案、執行命令等等。

📣 公告 - 全新生成式AI專案

剛新增AI助理專案，點此查看專案

📣 公告 - 剛發布JavaScript的生成式AI新課程

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

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

課程涵蓋基礎到RAG技術。
使用生成AI和配套應用與歷史人物互動。
內容生動有趣，彷彿穿越時空！

每堂課附有作業、知識檢測和挑戰，輔導你學習：

提示語句與提示工程
文字及影像應用產生
搜尋應用

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

🌱 開始使用

教師們，我們已包含一些建議教您如何使用此課程。非常歡迎您在討論區留下寶貴意見！

學習者們，每課程請先完成課前測驗，再閱讀課程內容、完成各種活動，最後進行課後測驗來檢驗學習成效。

為提升學習效果，建議與同儕連線一起完成專案！歡迎在我們的討論區交流，社群管理團隊會隨時回答你的問題。

若想更進一步學習，我們強烈建議探索Microsoft Learn提供的其他學習材料。

📋 環境建置

本課程已配置好開發環境！開始學習時，你可選擇利用Codespace（瀏覽器內操作，無須安裝）執行本課程，或本機使用文字編輯器（如Visual Studio Code）進行開發。

建立你的儲存庫

為方便保存學習成果，我們建議你建立本儲存庫的個人複本。你可按頁面頂端的 Use this template 按鈕，即可在你的GitHub帳號中建立一份課程複本。

操作步驟：

派生儲存庫：點選此頁右上方的 "Fork" 按鈕。
複製儲存庫： git clone https://github.com/microsoft/Web-Dev-For-Beginners.git

在Codespace執行課程

於你建立的儲存庫中，點選 Code 按鈕，再選擇 Open with Codespaces。系統將為你建立全新Codespace工作區。

在本機電腦執行課程

若要在本機執行課程，你需要文字編輯器、瀏覽器和命令列工具。我們的第一課程式語言與開發工具介紹會引導你了解各種工具選項，讓你選擇最合適的。

我們建議使用Visual Studio Code作為編輯器，它也內建終端機。你可以從這裡下載Visual Studio Code 連結。

將你的儲存庫克隆到你的電腦。你可以按一下 Code 按鈕並複製 URL：

CodeSpace

然後，在 Visual Studio Code 內開啟 Terminal，並執行以下命令，將 <your-repository-url> 替換為剛剛複製的 URL：
```
git clone <your-repository-url>
```
在 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 and Christopher
06	JS 基礎	JavaScript 條件判斷	學習如何在程式碼中使用條件判斷函式	條件判斷	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	太空遊戲	更進階的遊戲開發：繼承與發布/訂閱模式	學習使用類別與組合來實作繼承，以及發佈/訂閱設計模式，為建置遊戲做準備	進階遊戲開發入門	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	Browser/VScode Code	使用 VScode 編輯器	學習如何使用程式碼編輯器	使用 VScode 編輯器	Chris
26	AI 助理	使用人工智能	學習如何建立你的專屬 AI 助理	AI 助理專案	Chris