You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Web-Dev-For-Beginners/translations/hk
softchris 2973498524
🌐 Update translations via Co-op Translator
3 days ago
..
1-getting-started-lessons 🌐 Update translations via Co-op Translator 6 days ago
2-js-basics 🌐 Update translations via Co-op Translator 6 days ago
3-terrarium 🌐 Update translations via Co-op Translator 6 days ago
4-typing-game 🌐 Update translations via Co-op Translator 6 days ago
5-browser-extension 🌐 Update translations via Co-op Translator 6 days ago
6-space-game 🌐 Update translations via Co-op Translator 6 days ago
7-bank-project 🌐 Update translations via Co-op Translator 6 days ago
8-code-editor/1-using-a-code-editor 🌐 Update translations via Co-op Translator 6 days ago
9-chat-project 🌐 Update translations via Co-op Translator 3 days ago
docs 🌐 Update translations via Co-op Translator 2 weeks ago
lesson-template 🌐 Update translations via Co-op Translator 2 weeks ago
quiz-app 🌐 Update translations via Co-op Translator 2 weeks ago
CODE_OF_CONDUCT.md 🌐 Update translations via Co-op Translator 2 weeks ago
CONTRIBUTING.md 🌐 Update translations via Co-op Translator 2 weeks ago
README.md 🌐 Update translations via Co-op Translator 6 days ago
SECURITY.md 🌐 Update translations via Co-op Translator 2 weeks ago
SUPPORT.md 🌐 Update translations via Co-op Translator 2 weeks ago
_404.md 🌐 Update translations via Co-op Translator 2 weeks ago
for-teachers.md 🌐 Update translations via Co-op Translator 2 weeks ago

README.md

GitHub license
GitHub contributors
GitHub issues
GitHub pull-requests
PRs Welcome

GitHub watchers
GitHub forks
GitHub stars

Open in Visual Studio Code

Microsoft Azure AI Foundry Discord

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

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

初學者的網頁開發課程 - 一個完整的課程大綱

透過 Microsoft Cloud Advocates 提供的 12 週完整課程學習網頁開發的基礎知識。24 節課涵蓋 JavaScript、CSS 和 HTML並通過實作專案如生態瓶、瀏覽器擴展和太空遊戲進行學習。參與測驗、討論和實際作業提升技能並優化知識保留效果。立即開始你的程式設計旅程吧

🌐 多語言支援

透過 GitHub Action 支援(自動化且隨時保持最新)

法文 | 西班牙文 | 德文 | 俄文 | 阿拉伯文 | 波斯文(法爾西) | 烏爾都文 | 中文(簡體) | 中文(繁體,澳門) | 中文(繁體,香港) | 中文(繁體,台灣) | 日文 | 韓文 | 印地文 | 孟加拉文 | 馬拉地文 | 尼泊爾文 | 旁遮普文(古木基文) | 葡萄牙文(葡萄牙) | 葡萄牙文(巴西) | 義大利文 | 波蘭文 | 土耳其文 | 希臘文 | 泰文 | 瑞典文 | 丹麥文 | 挪威文 | 芬蘭文 | 荷蘭文 | 希伯來文 | 越南文 | 印尼文 | 馬來文 | 塔加洛文(菲律賓語) | 斯瓦希里文 | 匈牙利文 | 捷克文 | 斯洛伐克文 | 羅馬尼亞文 | 保加利亞文 | 塞爾維亞文(西里爾文) | 克羅埃西亞文 | 斯洛維尼亞文 | 烏克蘭文 | 緬甸文(緬甸)

如果你希望支援其他語言,請參考 這裡

🧑‍🎓 你是學生嗎?

造訪 學生中心頁面,你可以找到初學者資源、學生套件,甚至有機會獲得免費證書兌換券。這是你想要加入書籤並定期查看的頁面,因為我們每月都會更新內容。

📣 公告 - 使用生成式 AI 建立新專案

新增了全新的 AI 助理專案,快來看看 專案

📣 公告 - 生成式 AI 的新課程

我們剛剛發布了針對 JavaScript 的生成式 AI 課程!

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

Background

  • 課程涵蓋從基礎到 RAG 的所有內容。
  • 使用 GenAI 和我們的配套應用程式與歷史人物互動。
  • 有趣且引人入勝的敘事,你將進行時光旅行!

character

每節課都包含一個作業、一個知識檢查以及一個挑戰,幫助你學習以下主題:

  • 提示和提示工程
  • 文本和圖像應用程式生成
  • 搜索應用程式

立即造訪 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 以便進行工作。

!Codespace./images/createcodespace.png)

在本地電腦上運行課程

要在本地電腦上運行這份課程,你需要一個文本編輯器、一個瀏覽器和一個命令行工具。我們的第一節課 程式語言與工具介紹 將引導你了解這些工具的各種選項,幫助你選擇最適合你的工具。

我們建議使用 Visual Studio Code 作為編輯器,它還內建了 終端。你可以在這裡下載 Visual Studio Code。

  1. 將你的儲存庫克隆到電腦上。你可以通過點擊 Code 按鈕並複製 URL 來完成:

    !CodeSpace

    然後,在 Visual Studio Code終端 中運行以下命令,將 <your-repository-url> 替換為你剛剛複製的 URL

    git clone <your-repository-url>
    
  2. 在 Visual Studio Code 中打開資料夾。你可以通過點擊 File

開啟資料夾,然後選擇你剛剛複製的資料夾。 推薦的 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 JS 基礎 JavaScript 資料型別 JavaScript 資料型別的基礎知識 資料型別 Jasmine
05 JS 基礎 函數與方法 學習如何使用函數與方法來管理應用程式的邏輯流程 函數與方法 Jasmine 和 Christopher
06 JS 基礎 使用 JS 做決策 學習如何使用決策方法在程式碼中創建條件 決策方法 Jasmine
07 JS 基礎 陣列與迴圈 使用 JavaScript 中的陣列與迴圈來處理資料 陣列與迴圈 Jasmine
08 生態瓶 HTML 實作 建立 HTML 來創建線上生態瓶,專注於建立網頁佈局 HTML 入門 Jen
09 生態瓶 CSS 實作 建立 CSS 來設計線上生態瓶,專注於 CSS 的基礎知識,包括使網頁具有響應式設計 CSS 入門 Jen
10 生態瓶 JavaScript 閉包與 DOM 操作 建立 JavaScript 使生態瓶具備拖放功能,專注於閉包與 DOM 操作 JavaScript 閉包與 DOM 操作 Jen
11 打字遊戲 建立打字遊戲 學習如何使用鍵盤事件來驅動 JavaScript 應用程式的邏輯流程 事件驅動程式設計 Christopher
12 綠色瀏覽器擴展 瀏覽器相關知識 學習瀏覽器的運作方式、歷史,以及如何搭建瀏覽器擴展的基本架構 瀏覽器基礎知識 Jen
13 綠色瀏覽器擴展 建立表單、呼叫 API 並將變數儲存於本地存儲 建立瀏覽器擴展的 JavaScript 元件,使用儲存在本地存儲的變數來呼叫 API API、表單與本地存儲 Jen
14 綠色瀏覽器擴展 瀏覽器背景處理程序與網頁效能 使用瀏覽器的背景處理程序來管理擴展的圖示;學習網頁效能及一些優化方法 背景任務與效能 Jen
15 太空遊戲 更進階的 JavaScript 遊戲開發 學習使用類別與組合進行繼承,以及 Pub/Sub 模式,為建立遊戲做準備 進階遊戲開發入門 Chris
16 太空遊戲 繪製到畫布 學習 Canvas API用於將元素繪製到螢幕上 繪製到畫布 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

🏫 教學法

我們的課程設計基於兩個主要教學原則:

  • 專案式學習
  • 頻繁測驗

本課程教授 JavaScript、HTML 和 CSS 的基礎知識,以及現代網頁開發者使用的最新工具與技術。學生將有機會透過建立打字遊戲、虛擬生態瓶、環保瀏覽器擴展、類似太空侵略者的遊戲,以及商業銀行應用程式來獲得實作經驗。到課程結束時,學生將對網頁開發有扎實的理解。

🎓 您可以在 Microsoft Learn 上以 學習路徑 的形式學習本課程的前幾節!

透過確保內容與專案相符,學習過程變得更具吸引力,並且概念的記憶力將得到增強。我們還撰寫了幾個 JavaScript 基礎課程作為入門,並搭配 "JavaScript 初學者系列" 的影片教程,其中一些作者也參與了本課程的編寫。

此外,課前的低壓測驗可以幫助學生專注於學習主題,而課後的第二次測驗則進一步加強記憶。本課程設計靈活有趣,可以完整學習或選擇部分內容。專案從小型開始,並在 12 週的學習周期內逐漸變得更複雜。

雖然我們刻意避免介紹 JavaScript 框架,以專注於網頁開發者在採用框架之前所需的基本技能,但完成本課程後的下一步可以是學習 Node.js透過另一系列影片"Node.js 初學者系列"。

請參閱我們的 行為準則貢獻指南。我們歡迎您的建設性反饋!

🧭 離線存取

您可以使用 Docsify 離線運行此文件。Fork 此 repo並在本地機器上 安裝 Docsify,然後在此 repo 的根目錄中輸入 docsify serve。網站將在本地端的 3000 埠上運行:localhost:3000

📘 PDF

所有課程的 PDF 可在 此處 找到。

🎒 其他課程

我們的團隊還製作了其他課程!查看以下內容:

授權

此存儲庫採用MIT許可證授權。詳情請參閱LICENSE文件。


免責聲明
此文件已使用人工智能翻譯服務 Co-op Translator 翻譯。我們致力於提供準確的翻譯,但請注意,自動翻譯可能包含錯誤或不準確之處。應以原始語言的文件作為權威來源。對於關鍵資訊,建議使用專業的人類翻譯。我們對因使用此翻譯而引起的任何誤解或錯誤解讀概不負責。