31 KiB

Raw Blame History Unescape Escape

Web Development for Beginners - 課程大綱

透過 Microsoft 雲端宣導者精心策劃的為期十二週綜合課程，學習網頁開發的基礎知識。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 多種語言翻譯，會大幅增加下載大小。若要不下載翻譯檔案，請使用稀疏簽出（sparse checkout）：
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 助理專案剛加入，請查看 project

📣 公告 - 全新 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 按鈕並複製網址：

CodeSpace 然後，在 Visual Studio Code 中開啟終端機並執行以下命令，將 <your-repository-url> 替換為您剛剛複製的 URL：
```
git clone <your-repository-url>
```
在 Visual Studio Code 中開啟資料夾。您可以點擊檔案 > 開啟資料夾 並選取您剛剛複製的資料夾。

推薦的 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	Terrarium	HTML 實作	製作線上生態箱的 HTML，著重於版面配置	HTML 入門	Jen
09	Terrarium	CSS 實作	製作線上生態箱的 CSS，著重於 CSS 基本與製作響應式網頁	CSS 入門	Jen
10	Terrarium	JavaScript 閉包與 DOM 操作	編寫 JavaScript 使生態箱具備拖放功能，重點是閉包與 DOM 操作	JavaScript 閉包與 DOM 操作	Jen
11	Typing Game	製作打字遊戲	學習如何使用鍵盤事件來驅動 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 進行進階遊戲開發	學習類別與組合（Class 和 Composition）的繼承，以及發布/訂閱模式 (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
25	Browser/VScode Code	使用 VScode	學習如何使用程式碼編輯器	使用 VScode 程式碼編輯器	Chris
26	AI Assistants	使用 AI	學習如何建立自己的 AI 助手	AI 助手專案	Chris