Add README and for-teacher readme in Traditional Chinese

translations/README.zh-tw.md

@@ -0,0 +1,118 @@
+[![GitHub 授權](https://img.shields.io/github/license/microsoft/Web-Dev-For-Beginners.svg)](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)
+[![GitHub 貢獻者](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
+[![GitHub 問題](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
+[![GitHub 拉取要求](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
+[![歡迎 PR](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
+
+[![GitHub 觀察者](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
+[![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
+[![GitHub 星星](https://img.shields.io/github/stars/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)
+
+[![在 Visual Studio Code 中開啟](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
+
+# 初學者的 Web 開發課程
+
+微軟的Azure雲端倡議者很高興地提供一個為期12週的24堂課，所有關於JavaScript、CSS和HTML的基礎知識。每節課都包括課前和課後測驗、完成課程的書面說明、解決方案、作業等。我們以專案為基礎的教學方法使你能夠邊學邊做，這是一種證明新技能能夠「紮根」的方法。
+
+**衷心感謝我們的作者Jen Looper、Chris Noring、Christopher Harrison、Jasmine Greenaway、Yohan Lasorsa、Floor Drees和手繪藝術家Tomomi Imura!**
+
+# 你是學生嗎？
+
+利用以下資源開始：
+
+-[學生中心頁](https://docs.microsoft.com/en-gb/learn/student-hub?WT.mc_id=academic-13441-cxa) 在這個頁面，你會發現初學者資源、學生包，甚至是獲得免費證書券的方法。這是一個你想加入書籤並時不時檢查的頁面，因為我們至少每個月都會更換內容。
+
+-[微軟學生學習大使](https://studentambassadors.microsoft.com?WT.mc_id=academic-13441-cxa) 加入一個由學生大使組成的全球社區，這可能是你進入微軟的途徑。
+
+
+# 入門
+
+> **對於老師**, 我們已經有了一些關於如何使用課程的[建議](for-teachers.md)。我們希望您能在我們的[討論區](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)提出回饋意見!
+
+> **[對於學生](https://aka.ms/student-page)**，如果你想自己使用這個課程，你可以fork整個repo並自己完成練習，從課前測驗開始，然後閱讀課程並完成其餘活動。盡量透過理解課程來創建項目，而不是複製解決方案的代碼；不過，這些代碼可以在每節課中的`/solution`目錄中找到。另一個方法是與朋友組成一個學習小組，一起學習這些內容。對於進一步的學習，我們建議透過[微軟學習](https://docs.microsoft.com/users/jenlooper-2911/collections/jg2gax8pzd6o81?WT.mc_id=academic-13441-cxa) 和觀看下面提到的影片。
+
+[![宣傳影片](../images/web.gif)](https://youtube.com/watch?v=R1wrdtmBSII)
+
+Gif by [Mohit Jaisal](https://linkedin.com/in/mohitjaisal)
+
+>🎥 點擊上面的圖像，觀看關於該項目和創造該項目的人們的視頻!
+
+## 教學宗旨
+
+在建立這個課程時，我們選擇了兩個教學宗旨：確保它是基於專案的，並包括頻繁的測驗。在本系列課程結束時，學生將建立一個打字遊戲，一個虛擬的Terrarium，一個“綠色”瀏覽器擴展，一個“太空入侵者”類型的遊戲，以及一個商業類型的銀行應用程序，並將學會JavaScript、HTML和CSS的基礎知識，以及當今網頁開發人員的現代工具鏈。
+
+>🎓 你可以把這個課程的前幾堂課當作Microsoft Learn的[學習路徑](https://docs.microsoft.com/learn/paths/web-development-101?WT.mc_id=academic-13441-cxa)來學習!
+
+透過確保內容與專案一致，這個過程對學生來說更有吸引力，對概念的維持也會增強。我們也編寫了幾節關於JavaScript基礎知識的入門課程來介紹概念，並配以“[初學者係列：JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript?WT.mc_id=academic-13441-cxa)」的影片教學集，其中一些作者為這個課程做出了貢獻。
+
+此外，課前的低風險測驗確定了學生對學習主題的意圖如何，而課後的第二次測驗則確保了學生知識的進一步保留。這個課程的設計是靈活而有趣的，可以全部或部分地學習。這些專案一開始很簡單，到12週的週期結束時變得越來越複雜。
+
+雖然我們有意避免介紹JavaScript框架，以便在採用框架之前集中於作為一個Web開發者所需的基本技能，但是完成本系列課程的一個好的去處就是通過“[入門系列：Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs?WT.mc_id=academic-13441-cxa)」來學習Node.js。
+
+>查看我們的[行為準則](../CODE_OF_CONDUCT.md)、[貢獻](../CONTRIBUTING.md)和[翻譯](../TRANSLATIONS.md)指南。我們歡迎你的建設性的回饋!
+
+## 每一課都包括：
+
+- 可能的手繪筆記
+- 可能的補充視頻
+- 課前預習小測驗
+- 書面課程
+- 對於基於專案的課程，關於如何建立專案的逐步指南
+- 知識點檢查
+- 一個挑戰
+- 補充閱讀
+- 作業
+- 課後小測驗
+
+> **關於測驗的說明**: 所有的測驗都包含在[這個應用程式](https://ashy-river-0debb7803.1.azurestaticapps.net/)中，總共有48個測驗，每個測驗三個問題。它們在課程中被鏈接，但測驗應用程式可以在本地運行；按照`測驗應用程式`資料夾中的指示操作。它們正逐漸被本地化。
+
+## 課程
+
+ |  | 專案名稱                                      | 教授概念 | 學習目標 | 課程連結 | 課程作者               | 
+ |-------------------------------------------| ------- | ------- | ------ |--------------------| ------ |
+ | 01 | 入門篇                                       | 程式語言與產業工具介紹 | 了解大多數程式語言背後的基本支撐，以及幫助專業開發人員完成工作的軟體。 |[程式語言與工具介紹](/1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine            | 
+ | 02 | 入門篇                                       | GitHub的基礎知識，包括與一個團隊合作 | 如何在你的專案中使用GitHub，如何在程式碼庫中與他人合作 |[GitHub介紹](/1-getting-started-lessons/2-github-basics/translations/README.zh-cn.md) | Floor              | 
+ | 03 | 入門篇                                       | 無障礙性 | 學習網路無障礙的基本知識 |[無障礙基礎知識](/1-getting-started-lessons/3-accessibility/translations/README.zh-cn.md) | Christopher        | 
+ | 04 | JS基礎                                      | JavaScript資料型別 | JavaScript資料型別的基礎 |[資料型態](/2-js-basics/1-data-types/translations/README.zh-cn.md)| Jasmine            | 
+ | 05 | JS基礎                                      | 函數與方法 | 了解管理應用程式邏輯流的函數與方法 |[函數與方法](/2-js-basics/2-functions-methods/translations/README.zh-cn.md) | Jasmine and Christopher | 
+ | 06 | JS基礎                                      | 用JS做決定 | 學習如何使用決策方法在你的程式碼中建立條件 |[做出決定](/2-js-basics/3-making-decisions/translations/README.zh-cn.md) | Jasmine                | 
+ | 07 | JS基礎                                      | 陣列與迴圈 | 在JavaScript中使用陣列和循環來處理資料 |[數組和循環](/2-js-basics/4-arrays-loops/translations/README.zh-cn.md)| Jasmine                | 
+ | 08 | [Terrarium](/3-terrarium/solution/README.md)       | 實踐中的HTML | 建立HTML以創建一個線上花藝瓶，重點是建立一個佈局 |[HTML簡介](/3-terrarium/1-intro-to-html/translations/README.zh-cn.md) | Jen                  | 
+ | 09| [Terrarium](/3-terrarium/solution/README.md)       | 實踐中的CSS | 建立CSS，為線上花藝瓶設計樣式，重點是CSS的基礎知識，包括使頁面具有響應性 |[CSS簡介](/3-terrarium/2-intro-to-css/translations/README.zh-cn.md) | Jen                  | 
+ | 10 | [Terrarium](/3-terrarium/solution/README.md)       | JavaScript閉包，DOM操作 | 建立JavaScript，使水族箱成為一個拖/放介面，重點是閉包和DOM操作 |[JavaScript閉包，DOM操作](/3-terrarium/3-DOM 和閉包介紹/README.md) | Jen                  | 
+ | 11 | [打字遊戲](/4-typing-game/solution/README.md) | 建立一個打字遊戲 | 學習如何使用鍵盤事件來驅動你的JavaScript應用程式的邏輯 |[事件驅動程式設計](/4-typing-game/typing-game/README.md)| Christopher              | 
+ | 12 | [綠色瀏覽器擴充功能](/5-browser-extension/solution/README.md)  | 與瀏覽器合作 | 了解瀏覽器是如何運作的，它們的歷史，以及如何為瀏覽器擴充功能的第一批元素提供支架 |[關於瀏覽器](/5-browser-extension/1-about-browsers/README.md) | Jen                  | 
+ | 13 | [綠色瀏覽器擴充功能](/5-browser-extension/solution/README.md)    | 建立一個表單，呼叫一個API，並在本機儲存中儲存變數 | 建立你的瀏覽器擴充的JavaScript元素，使用儲存在本機儲存中的變數呼叫API |[API、表單和本機儲存](/5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen                  | 
+ | 14 | [綠色瀏覽器擴充功能](/5-browser-extension/solution/README.md)  | 瀏覽器中的後台進程，網路效能 | 使用瀏覽器的後台進程來管理擴充功能的圖示；了解網路效能和一些最佳化 |[後台任務與效能](/5-browser-extension/3-background-tasks-and-performance/README.md) | Jen                  | 
+ | 15 | [太空遊戲](/6-space-game/solution/README.md) | 用JavaScript進行更進階的遊戲開發 | 學習使用類別和組合的繼承以及Pub/Sub模式，為建立遊戲做準備。 |[進階遊戲開發簡介](/6-space-game/1-introduction/README.md) | Chris                | 
+ | 16 | [太空遊戲](/6-space-game/solution/README.md) | 在Canvas上繪圖 | 了解用於在螢幕上繪製元素的Canvas API |[在Canvas上繪圖](/6-space-game/2-drawing-to-canvas/README.md)| Chris                | 
+ | 17 | [太空遊戲](/6-space-game/solution/README.md) | 在螢幕上移動元素 | 了解元素如何利用軟軸座標和Canvas API獲得運動效果 |[移動元素](/6-space-game/3-moving-elements-around/README.md) | Chris                | 
+ | 18 | [太空遊戲](/6-space-game/solution/README.md) | 碰撞偵測 | 使用按鍵使元素相互碰撞和反應，並提供冷卻功能以確保遊戲的效能 |[碰撞偵測](/6-space-game/4-collision-detection/README.md) | Chris                | 
+ | 19 | [太空遊戲](/6-space-game/solution/README.md) | 記分 | 根據遊戲的狀態和效能進行數學計算 |[記分](/6-space-game/5-keeping-score/README.md)| Chris                | 
+ | 20 | [太空遊戲](/6-space-game/solution/README.md)  | 結束與重啟遊戲 | 學習結束和重啟遊戲的方法，包括清理資產和重設變數值 |[結束的條件](/6-space-game/6-end-condition/README.md)| Chris                | 
+ | 21 | [銀行應用](/7-bank-project/solution/README.md) | 網路應用程式中的HTML模板和路線 | 學習如何使用路由和HTML模板建立多頁面網站架構的支架 |[HTML模板與路線](/7-bank-project/1-template-route/README.md) | Yohan                 | 
+ | 22 | [銀行應用](/7-bank-project/solution/README.md) | 建立一個登入和註冊表格 | 學習建立表單和交接驗證程序的知識 |[表格](/7-bank-project/2-forms/README.md) | Yohan                 | 
+ | 23 | [銀行應用](/7-bank-project/solution/README.md) | 獲取和使用數據的方法 | 數據如何流入和流出你的應用程序，如何獲取它，存儲它，並處理它 |[數據](/7-bank-project/3-data/README.md) | Yohan                 | 
+ | 24 | [銀行應用](/7-bank-project/solution/README.md) | 國家管理的概念 | 了解你的應用程式如何保留狀態以及如何以程式設計方式管理它 |[國家管理](/7-bank-project/4-state-management/README.md) | Yohan                 | 
+
+## 離線訪問
+
+你可以透過使用[文檔化](https://docsify.js.org/#/)離線運行這個文檔。 fork這個repo，在你的本機上安裝Docsify，然後在這個repo的根資料夾中，輸入`docsify serve`。網站將在你的本地主機上的3000埠服務：`localhost:3000`。
+
+## PDF
+
+所有課程的PDF檔案可以在[這裡](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf)找到
+
+## 其他課程
+
+我們的團隊也製作了其他課程! 詳見：
+
+-[機器學習初學者](https://aka.ms/ml-beginners)
+
+-[物聯網初學者](https://aka.ms/iot-beginners)
+
+-[資料科學初學者](https://aka.ms/datascience-beginners)
+
+-[人工智慧初學者](https://aka.ms/ai-beginners)
+
+

translations/for-teachers.zh-tw.md

@@ -0,0 +1,25 @@
+## 寫給教育工作者
+
+你想要在你的課堂上使用這門課程嗎？請隨意使用！
+
+事實上，你可以透過使用 GitHub Classroom 直接在 GitHub 中使用這門課。
+
+要做到這一點，需要先複製 (fork)這個儲存庫 (repo)。你需要對每一堂課都建立一個儲存庫，所以需要將每一個資料夾分別放到各個儲存庫中。這樣一來，[GitHub課堂](https://classroom.github.com/classrooms) 就可以分開選擇各節課程。
+
+這個[完整指南](https://github.blog/2020-03-18-set-up-your-digital-classroom-with-github-classroom/)將會告訴你如何建立你的教室。
+
+## 原樣使用這個倉庫
+
+如果你比起 GitHub Classroom 你更願意照現在這個樣子直接使用這個儲存庫，也是沒問題的。你需要去告知學生現在該去看哪一堂課。
+
+在網路授課的情況下（如 Zoom、Teams 等）你可能需要建立一些分組討論室來進行測試和指導學生，以幫助他們做好學習準備。然後邀請學生參加測試，並在特定時間點以 Issues 的形式提交他們的答案。對於作業也可以這麼做，前提是你希望學生可以在作業上公開協作提交結果。
+
+如果你傾向於更非公開的形式，可以讓你的學生分次 Fork 這門課程到他們自己的 GitHub 倉庫中，並且設為私有 (private)，然後給你訪問權限。這樣他們就可以在他們自己的儲存庫私下完成測試和作業，然後透過你的課堂倉庫以 Issues 的形式提交給你。
+
+有許多辦法讓這門課變成網路課堂的形式，如果你感覺某種方式非常棒，請告訴我們！
+
+## 請告訴我們你的想法！
+
+我們希望可以讓這門課程對你和你的學生有所幫助。歡迎[回饋](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)。
+
+