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，並執行以下命令，將 替換為剛剛複製的 URL：

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 翻譯。雖然我們致力於確保準確性，但請注意自動翻譯可能包含錯誤或不準確之處。原始語言文件應被視為權威來源。對於重要資訊，建議採用專業人工翻譯。我們不對因使用此翻譯而產生之任何誤解或誤釋負責。