Web Development for Beginners - 課程大綱
透過Microsoft Cloud Advocates團隊提供的為期12週全面課程，學習網頁開發的基礎知識。24堂課中，每堂皆透過實作專案（例如生態瓶、瀏覽器擴充功能及太空遊戲）來深入探討JavaScript、CSS與HTML。參與測驗、討論及實作作業。利用我們有效的專案導向教學法提升技能並優化知識吸收。現在就開始你的程式設計之旅吧！ 加入Azure AI Foundry Discord社群 依照以下步驟開始使用這些資源： 1. 派生這個儲存庫：按這裡 2. 複製儲存庫： git clone https://github.com/microsoft/Web-Dev-For-Beginners.git 3. 加入Azure AI Foundry Discord，與專家及開發者交流
🌐 多語言支援
透過GitHub Action支援（自動化且總是最新）
Arabic | Bengali | Bulgarian | Burmese (Myanmar) | Chinese (Simplified) | Chinese (Traditional, Hong Kong) | Chinese (Traditional, Macau) | Chinese (Traditional, Taiwan) | Croatian | Czech | Danish | Dutch | Estonian | Finnish | French | German | Greek | Hebrew | Hindi | Hungarian | Indonesian | Italian | Japanese | Kannada | Khmer | Korean | Lithuanian | Malay | Malayalam | Marathi | Nepali | Nigerian Pidgin | Norwegian | Persian (Farsi) | Polish | Portuguese (Brazil) | Portuguese (Portugal) | Punjabi (Gurmukhi) | Romanian | Russian | Serbian (Cyrillic) | Slovak | Slovenian | Spanish | Swahili | Swedish | Tagalog (Filipino) | Tamil | Telugu | Thai | Turkish | Ukrainian | Urdu | Vietnamese 若想新增其他翻譯語言支援，請見此頁 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帳號中建立一份課程複本。 操作步驟： 1. 派生儲存庫：點選此頁右上方的 “Fork” 按鈕。 2. 複製儲存庫： 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>
在 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 翻譯。雖然我們致力於確保準確性，但請注意自動翻譯可能包含錯誤或不準確之處。原始語言文件應被視為權威來源。對於重要資訊，建議採用專業人工翻譯。我們不對因使用此翻譯而產生之任何誤解或誤釋負責。
Follow the lesson from Microsoft Web-Dev-For-Beginners course