13 KiB

Raw Blame History Unescape Escape

初學者的 Web 開發課程

微軟的Azure雲端倡議者很高興地提供一個為期12週的24堂課，所有關於JavaScript、CSS和HTML的基礎知識。每節課都包括課前和課後測驗、完成課程的書面說明、解決方案、作業等。我們以專案為基礎的教學方法使你能夠邊學邊做，這是一種證明新技能能夠「紮根」的方法。

衷心感謝我們的作者Jen Looper、Chris Noring、Christopher Harrison、Jasmine Greenaway、Yohan Lasorsa、Floor Drees和手繪藝術家Tomomi Imura!

你是學生嗎？

利用以下資源開始：

-學生中心頁在這個頁面，你會發現初學者資源、學生包，甚至是獲得免費證書券的方法。這是一個你想加入書籤並時不時檢查的頁面，因為我們至少每個月都會更換內容。

-微軟學生學習大使加入一個由學生大使組成的全球社區，這可能是你進入微軟的途徑。

入門

對於老師, 我們已經有了一些關於如何使用課程的建議。我們希望您能在我們的討論區提出回饋意見!

對於學生，如果你想自己使用這個課程，你可以fork整個repo並自己完成練習，從課前測驗開始，然後閱讀課程並完成其餘活動。盡量透過理解課程來創建項目，而不是複製解決方案的代碼；不過，這些代碼可以在每節課中的/solution目錄中找到。另一個方法是與朋友組成一個學習小組，一起學習這些內容。對於進一步的學習，我們建議透過微軟學習和觀看下面提到的影片。

Gif by Mohit Jaisal

🎥 點擊上面的圖像，觀看關於該項目和創造該項目的人們的視頻!

教學宗旨

在建立這個課程時，我們選擇了兩個教學宗旨：確保它是基於專案的，並包括頻繁的測驗。在本系列課程結束時，學生將建立一個打字遊戲，一個虛擬的Terrarium，一個“綠色”瀏覽器擴展，一個“太空入侵者”類型的遊戲，以及一個商業類型的銀行應用程序，並將學會JavaScript、HTML和CSS的基礎知識，以及當今網頁開發人員的現代工具鏈。

🎓 你可以把這個課程的前幾堂課當作Microsoft Learn的學習路徑來學習!

透過確保內容與專案一致，這個過程對學生來說更有吸引力，對概念的維持也會增強。我們也編寫了幾節關於JavaScript基礎知識的入門課程來介紹概念，並配以“初學者係列：JavaScript」的影片教學集，其中一些作者為這個課程做出了貢獻。

此外，課前的低風險測驗確定了學生對學習主題的意圖如何，而課後的第二次測驗則確保了學生知識的進一步保留。這個課程的設計是靈活而有趣的，可以全部或部分地學習。這些專案一開始很簡單，到12週的週期結束時變得越來越複雜。

雖然我們有意避免介紹JavaScript框架，以便在採用框架之前集中於作為一個Web開發者所需的基本技能，但是完成本系列課程的一個好的去處就是通過“入門系列：Node.js」來學習Node.js。

查看我們的行為準則、貢獻和翻譯指南。我們歡迎你的建設性的回饋!

每一課都包括：

可能的手繪筆記
可能的補充視頻
課前預習小測驗
書面課程
對於基於專案的課程，關於如何建立專案的逐步指南
知識點檢查
一個挑戰
補充閱讀
作業
課後小測驗

關於測驗的說明: 所有的測驗都包含在這個應用程式中，總共有48個測驗，每個測驗三個問題。它們在課程中被鏈接，但測驗應用程式可以在本地運行；按照測驗應用程式資料夾中的指示操作。它們正逐漸被本地化。

課程

	專案名稱	教授概念	學習目標	課程連結	課程作者
01	入門篇	程式語言與產業工具介紹	了解大多數程式語言背後的基本支撐，以及幫助專業開發人員完成工作的軟體。	程式語言與工具介紹	Jasmine
02	入門篇	GitHub的基礎知識，包括與一個團隊合作	如何在你的專案中使用GitHub，如何在程式碼庫中與他人合作	GitHub介紹	Floor
03	入門篇	無障礙性	學習網路無障礙的基本知識	無障礙基礎知識	Christopher
04	JS基礎	JavaScript資料型別	JavaScript資料型別的基礎	資料型態	Jasmine
05	JS基礎	函數與方法	了解管理應用程式邏輯流的函數與方法	函數與方法	Jasmine and Christopher
06	JS基礎	用JS做決定	學習如何使用決策方法在你的程式碼中建立條件	做出決定	Jasmine
07	JS基礎	陣列與迴圈	在JavaScript中使用陣列和循環來處理資料	數組和循環	Jasmine
08	Terrarium	實踐中的HTML	建立HTML以創建一個線上花藝瓶，重點是建立一個佈局	HTML簡介	Jen
09	Terrarium	實踐中的CSS	建立CSS，為線上花藝瓶設計樣式，重點是CSS的基礎知識，包括使頁面具有響應性	CSS簡介	Jen
10	Terrarium	JavaScript閉包，DOM操作	建立JavaScript，使水族箱成為一個拖/放介面，重點是閉包和DOM操作	[JavaScript閉包，DOM操作](/3-terrarium/3-DOM 和閉包介紹/README.md)	Jen
11	打字遊戲	建立一個打字遊戲	學習如何使用鍵盤事件來驅動你的JavaScript應用程式的邏輯	事件驅動程式設計	Christopher
12	綠色瀏覽器擴充功能	與瀏覽器合作	了解瀏覽器是如何運作的，它們的歷史，以及如何為瀏覽器擴充功能的第一批元素提供支架	關於瀏覽器	Jen
13	綠色瀏覽器擴充功能	建立一個表單，呼叫一個API，並在本機儲存中儲存變數	建立你的瀏覽器擴充的JavaScript元素，使用儲存在本機儲存中的變數呼叫API	API、表單和本機儲存	Jen
14	綠色瀏覽器擴充功能	瀏覽器中的後台進程，網路效能	使用瀏覽器的後台進程來管理擴充功能的圖示；了解網路效能和一些最佳化	後台任務與效能	Jen
15	太空遊戲	用JavaScript進行更進階的遊戲開發	學習使用類別和組合的繼承以及Pub/Sub模式，為建立遊戲做準備。	進階遊戲開發簡介	Chris
16	太空遊戲	在Canvas上繪圖	了解用於在螢幕上繪製元素的Canvas API	在Canvas上繪圖	Chris
17	太空遊戲	在螢幕上移動元素	了解元素如何利用軟軸座標和Canvas API獲得運動效果	移動元素	Chris
18	太空遊戲	碰撞偵測	使用按鍵使元素相互碰撞和反應，並提供冷卻功能以確保遊戲的效能	碰撞偵測	Chris
19	太空遊戲	記分	根據遊戲的狀態和效能進行數學計算	記分	Chris
20	太空遊戲	結束與重啟遊戲	學習結束和重啟遊戲的方法，包括清理資產和重設變數值	結束的條件	Chris
21	銀行應用	網路應用程式中的HTML模板和路線	學習如何使用路由和HTML模板建立多頁面網站架構的支架	HTML模板與路線	Yohan
22	銀行應用	建立一個登入和註冊表格	學習建立表單和交接驗證程序的知識	表格	Yohan
23	銀行應用	獲取和使用數據的方法	數據如何流入和流出你的應用程序，如何獲取它，存儲它，並處理它	數據	Yohan
24	銀行應用	國家管理的概念	了解你的應用程式如何保留狀態以及如何以程式設計方式管理它	國家管理	Yohan