新手入門網頁開發課程

透過微軟雲端推廣團隊帶來的為期12週綜合課程，學習網頁開發的基礎知識。這24堂課會深入探討JavaScript、CSS與HTML，並且透過各種動手專案，例如微型生態瓶、瀏覽器擴充功能以及太空遊戲。參與小測驗、討論與實作作業。運用我們有效的專案導向教學法，提升你的技能並優化知識吸收。今天就開始你的程式設計旅程吧！ 加入 Azure AI Foundry Discord 社群 開始使用這些資源的步驟如下：

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

🌐 多語言支援

透過 GitHub Action 支援（自動且保持最新）

阿拉伯文 | 孟加拉文 | 保加利亞文 | 緬甸語 | 中文（簡體） | 中文（繁體，香港） | 中文（繁體，澳門） | 中文（繁體，台灣） | 克羅埃西亞文 | 捷克文 | 丹麥文 | 荷蘭文 | 愛沙尼亞文 | 芬蘭文 | 法文 | 德文 | 希臘文 | 希伯來文 | 印地文 | 匈牙利文 | 印尼文 | 義大利文 | 日文 | 卡納達文 | 高棉文 | 韓文 | 立陶宛文 | 馬來文 | 馬拉雅拉姆文 | 馬拉地文 | 尼泊爾文 | 奈及利亞派金語 | 挪威文 | 波斯文（法爾西語） | 波蘭文 | 葡萄牙文（巴西） | 葡萄牙文（葡萄牙） | 旁遮普文（古魯穆奇體） | 羅馬尼亞文 | 俄文 | 塞爾維亞文（西里爾字母） | 斯洛伐克文 | 斯洛文尼亞文 | 西班牙文 | 斯瓦希里文 | 瑞典文 | 他加祿文（菲律賓語） | 坦米爾文 | 泰盧固文 | 泰文 | 土耳其文 | 烏克蘭文 | 烏爾都文 | 越南文

若你希望新增其他翻譯語言，支援語言列表見此處

🧑‍🎓 你是學生嗎？

請造訪學生中心頁面，你會找到初學資源、學生套件，甚至取得免費證書憑證的方式。這是你想要收藏並時常關注的網頁，因為我們會每月更換內容。

📣 公告 - 新增 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 帳號中建立一個帶有課程內容的全新儲存庫。 操作步驟如下：

1. Fork 該儲存庫：點擊本頁面右上方的「Fork」按鈕。
2. Clone 該儲存庫： 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： CodeSpace 然後，在 Visual Studio Code 中打開 Terminal 並執行以下命令，將 替換為剛才複製的網址：

git clone <your-repository-url>

2. 在 Visual Studio Code 中打開該資料夾。您可以點擊 File > Open Folder 並選擇剛剛複製的資料夾。

📂 每個課程包括：

• 可選的手繪筆記
• 可選的補充影片
• 課前暖身測驗
• 書面課程內容
• 專案導向課程包含逐步指引如何建置專案
• 知識檢查
• 挑戰題
• 補充閱讀材料
• 作業
• 課後測驗

🗃️ 課程列表

🏫 教學法

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

• 專案導向學習
• 頻繁的測驗 該計畫涵蓋 JavaScript、HTML 及 CSS 的基礎，以及當前網頁開發人員所使用的最新工具與技術。學生將有機會透過建構打字遊戲、虛擬生態箱、環保瀏覽器擴充功能、太空入侵者風格遊戲和企業銀行應用程式來累積實作經驗。課程結束時，學生將對網頁開發獲得扎實的理解。 透過確保內容與專案緊密對應，學習過程對學生來說更具吸引力且概念吸收更佳。我們也撰寫了多堂 JavaScript 基礎入門課程，搭配「JavaScript 新手系列」的教學影片，其中部分作者也參與本課程內容的編撰。 此外，每堂課前的低壓力測驗幫助學生專心學習主題，而課後的測驗則促進進一步的概念鞏固。此課程設計靈活有趣，可全程參與或分段學習。專案由淺入深，逐漸增加難度，包含一個 12 週的循環課程。 雖然我們刻意避免介紹 JavaScript 框架，以便先專注於成為網頁開發人員所需的基本技能，再採用框架，接下來的好選擇是透過另一系列教學影片學習 Node.js：「Node.js 新手系列」。

🧭 離線存取

您可以使用 Docsify 離線瀏覽本文件。請 fork 此儲存庫，在本機安裝 Docsify，然後於本儲存庫根目錄輸入 docsify serve。網站將透過本地主機的 3000 埠提供服務：localhost:3000。

📘 PDF

所有課程的 PDF 版本可在此處下載。

🎒 其他課程

我們團隊還製作了其他課程！請參考：

LangChain

Azure / Edge / MCP / Agents

生成式 AI 系列

-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA) -C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC) -E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)

核心學習

Copilot 系列

尋求協助

如果你遇到困難或對建置 AI 應用程式有任何疑問，歡迎加入其他學習者及經驗豐富開發者，參與 MCP 的討論。這裏是一個支持性強的社群，歡迎提問並自由分享知識。 如果你在建置過程中有產品回饋或錯誤，請造訪：

授權條款

本專案庫採用 MIT 授權條款。詳情請參閱LICENSE檔案。

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