28 KiB

Raw Blame History Unescape Escape

Web 開發初學者課程

透過微軟雲端推廣大使設計的 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 多種語言翻譯，會大幅增加下載大小。若想複製不含翻譯的倉庫，請使用 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'
這樣可以更快速下載並取得完成課程所需的所有內容。

如果你希望支援更多翻譯語言，請見此處

🧑‍🎓 你是學生嗎？

請參訪 學生中心頁面，你會找到初學者資源、學生包，以及取得免費證書兌換券的方式。這是你應該收藏並不時瀏覽的頁面，因為內容會每月更新。

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

新增了挑戰章節，大部分章節中可找到「GitHub Copilot Agent Challenge 🚀」。這是使用 GitHub Copilot 與 Agent 模式完成的新挑戰。若你還未用過 Agent 模式，它不僅可以產生文字，還能建立及編輯檔案、執行指令等功能。

📣 公告 - 新增產生式 AI 專案

新增 AI 助理專案，詳情請參閱專案

📣 公告 - 剛剛發布的 Generative AI JavaScript 新課程

千萬別錯過我們全新的產生式 AI 課程！

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

涵蓋從基礎到 RAG (Retrieval-Augmented Generation) 的課程
使用 GenAI 及我們的夥伴應用程式與歷史人物互動
有趣且引人入勝的故事情節，帶你穿越時空！

每堂課都包含作業、知識檢查及挑戰，引導你學習以下主題：

提示語設計與提示工程
文字及圖像應用程式產生
搜尋應用程式

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

🌱 入門指引

老師們，我們已在 for-teachers.md 提供了一些使用課程的建議。歡迎在我們的討論區提供反饋！

學員，每節課開始前先做「課前小測驗」，接著閱讀課程教材、完成各項活動，最後以「課後小測驗」檢核學習成果。

為提升學習體驗，請與同儕合作完成專案！我們鼓勵在討論區發問討論，管理員團隊會隨時為你解答。

若想進一步學習，我們強烈建議探索 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	JavaScript 基礎	JavaScript 資料型態	JavaScript 資料型態的基礎	資料型態	Jasmine
05	JavaScript 基礎	函數與方法	認識函數及方法以管理應用程式的邏輯流程	函數與方法	Jasmine 和 Christopher
06	JavaScript 基礎	使用 JS 作決策	學習如何在程式碼中創建條件判斷流程	決策製作	Jasmine
07	JavaScript 基礎	陣列與迴圈	使用 JavaScript 陣列和迴圈來處理資料	陣列與迴圈	Jasmine
08	Terrarium	HTML 實作	建置網路生態缸的 HTML 元素，專注於佈局設計	HTML 入門	Jen
09	Terrarium	CSS 實作	建置網路生態缸的 CSS 樣式，涵蓋 CSS 基礎並負責使頁面響應式	CSS 入門	Jen
10	Terrarium	JavaScript 閉包與 DOM 操作	建置網路生態缸的拖放功能，專注於閉包及 DOM 操作	JavaScript 閉包與 DOM 操作	Jen
11	打字遊戲	建置打字遊戲	學習如何使用鍵盤事件驅動 JavaScript 應用程式的邏輯	事件驅動程式設計	Christopher
12	綠色瀏覽器擴充功能	瀏覽器運作	瞭解瀏覽器的運作原理、歷史，以及如何搭建瀏覽器擴充功能的初步架構	關於瀏覽器	Jen
13	綠色瀏覽器擴充功能	建立表單、呼叫 API 及本機儲存變數	建構瀏覽器擴充功能 JavaScript 元素，使用本機儲存的變數呼叫 API	API、表單與本機儲存	Jen
14	綠色瀏覽器擴充功能	瀏覽器背景程序與網頁效能	使用瀏覽器背景程序管理擴充功能圖示；了解網頁效能及優化	背景任務與效能	Jen
15	太空遊戲	JavaScript 更進階遊戲開發	認識類別與組合的繼承，以及發布/訂閱模式，為開發遊戲做準備	進階遊戲開發導論	Chris
16	太空遊戲	Canvas 畫布繪圖	熟悉 Canvas API，用於繪製畫面元素	Canvas 繪圖	Chris
17	太空遊戲	移動畫面上的元素	探索如何透過笛卡爾座標和 Canvas API 讓元素產生運動	移動畫面元素	Chris
18	太空遊戲	碰撞偵測	使元素相互碰撞並透過按鍵產生反應，並提供冷卻函式以維持遊戲效能	碰撞偵測	Chris
19	太空遊戲	計分	根據遊戲狀況與表現進行數學計算	計分系統	Chris
20	太空遊戲	遊戲結束與重新開始	了解如何結束與重新啟動遊戲，包括清理資源與重置變數	結束條件	Chris
21	銀行應用程式	網頁應用程式中的 HTML 範本與路由	學習如何建立多頁網站架構的骨幹，使用路由與 HTML 範本	HTML 範本與路由	Yohan
22	銀行應用程式	建立登入和註冊表單	學習建立表單及驗證處理函式	表單	Yohan
23	銀行應用程式	取得與使用資料的方式	資料如何流入流出應用程式，如何取得、儲存與釋放	資料	Yohan
24	銀行應用程式	狀態管理概念	學習應用程式如何維持狀態，並以程式方式管理	狀態管理	Yohan
25	瀏覽器/VScode 程式碼	使用 VScode	學習如何使用程式碼編輯器	使用 VScode 程式碼編輯器	Chris
26	AI 助理	AI 應用	學習如何建置屬於你自己的 AI 助理	AI 助理專案	Chris