初學者網站開發 - 一套課程

透過微軟雲端推廣者的12週完整課程學習網站開發的基礎。這24堂課透過動手專案深入探索JavaScript、CSS和HTML，範例涵蓋玻璃箱生態瓶、瀏覽器擴充功能和太空遊戲。參與測驗、討論與實作作業。使用我們有效的專案導向教學法提升你的技能並優化知識吸收。立即開始你的程式碼學習旅程！

加入 Azure AI Foundry Discord 社群

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

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

🌐 多語言支援

透過 GitHub Action 支援（自動且永遠最新）

想要本機 Clone？

此程式庫包含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 助手專案，請查看專案

📣 公告 - 新課程針對 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 程式庫：點擊本頁右上方的「Fork」按鈕。
Clone 程式庫： git clone https://github.com/microsoft/Web-Dev-For-Beginners.git

在 Codespace 中執行課程

於你建立的程式庫副本中，點擊 Code 按鈕並選擇 Open with Codespaces，將為你建立一個新的 Codespace 以便作業。

在本機電腦執行課程

若要在本機執行此課程，你需要文字編輯器、瀏覽器和命令列工具。我們的第一堂課程式語言簡介與開發工具介紹將帶你了解各種選項，協助你選擇最適合自己的工具。

我們推薦使用 Visual Studio Code 作為文字編輯器，它內建了終端機。你可以從這裡下載 Visual Studio Code。

將你的程式庫 Clone 到電腦。可點擊 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	Getting Started	程式設計入門與常用工具介紹	瞭解多數程式語言背後的基本原理，並認識協助專業開發者的軟體工具	Intro to Programming Languages and Tools of the Trade	Jasmine
02	Getting Started	GitHub 基礎與團隊協作教學	了解如何在專案中使用 GitHub，及如何與他人協同合作維護程式碼	Intro to GitHub	Floor
03	Getting Started	無障礙設計	學習網頁無障礙設計的基礎	Accessibility Fundamentals	Christopher
04	JS Basics	JavaScript 資料類型	JavaScript 資料類型的基礎知識	Data Types	Jasmine
05	JS Basics	函式與方法介紹	瞭解函式與方法如何管理應用程式邏輯流程	Functions and Methods	Jasmine and Christopher
06	JS Basics	JavaScript 決策製作	學習如何使用決策結構在程式碼中建立條件	Making Decisions	Jasmine
07	JS Basics	陣列與迴圈	使用陣列與迴圈來操作資料	Arrays and Loops	Jasmine
08	Terrarium	HTML 實作	建立 HTML 以打造線上生態瓶，專注於建立排版布局	Introduction to HTML	Jen
09	Terrarium	CSS 實作	製作 CSS 以美化線上生態瓶，學習 CSS 基礎與響應式設計	Introduction to CSS	Jen
10	Terrarium	JavaScript 閉包與 DOM 操作	撰寫 JavaScript 以實作拖放式生態瓶介面，專注於閉包及 DOM 操作	JavaScript Closures, DOM manipulation	Jen
11	Typing Game	打字遊戲製作	學習如何使用鍵盤事件驅動 JavaScript 應用程式邏輯	Event-Driven Programming	Christopher
12	Green Browser Extension	瀏覽器原理與操作	瞭解瀏覽器的工作原理與歷史，並搭建瀏覽器擴充功能的初始元件	About Browsers	Jen
13	Green Browser Extension	製作表單、呼叫 API 並儲存至本地儲存空間	撰寫瀏覽器擴充功能中的 JavaScript 元素以呼叫 API，並使用變數存儲於本地儲存空間	APIs, Forms, and Local Storage	Jen
14	Green Browser Extension	背景程序與網頁效能優化	利用瀏覽器背景程序管理擴充功能圖示，理解網頁效能並學習優化方法	Background Tasks and Performance	Jen
15	Space Game	進階 JavaScript 遊戲開發	瞭解繼承、類別與組合模式以及發布/訂閱模式，為遊戲開發做準備	Introduction to Advanced Game Development	Chris
16	Space Game	Canvas 繪圖	瞭解 Canvas API 以繪製螢幕上的元素	Drawing to Canvas	Chris
17	Space Game	控制元素在螢幕上移動	探索如何利用直角座標系與 Canvas API 使元素產生運動	Moving Elements Around	Chris
18	Space Game	碰撞偵測	實作元素之間的碰撞與反應，並透過按鍵觸發冷卻功能以確保遊戲效能	Collision Detection	Chris
19	Space Game	計分系統	根據遊戲狀態與表現執行數學計算	Keeping Score	Chris
20	Space Game	結束及重新開始遊戲	了解如何結束與重新啟動遊戲，包括清理資源與重設變數	The Ending Condition	Chris
21	Banking App	網頁應用中的 HTML 範本與路由	學習如何使用路由與 HTML 範本來建立多頁網站架構	HTML Templates and Routes	Yohan
22	Banking App	建立登入與註冊表單	認識表單建置及驗證流程	Forms	Yohan
23	Banking App	資料獲取與使用方法	瞭解資料如何流入與流出應用程式，包含取得、儲存與處理	Data	Yohan
24	Banking App	狀態管理概念	學會應用程式如何保留狀態，以及如何以程式化方式管理狀態	State Management	Yohan
25	Browser/VScode Code	使用 VScode	學習如何使用程式碼編輯器	Use VScode Code Editor	Chris
26	AI Assistants	使用 AI	學習如何打造自己的 AI 助手	AI Assistant project	Chris