摘要

已完成

在此課程模組中，您將設定適用於網頁程式開發的工作環境。 您也已建立網站，並測試了網頁瀏覽器中的一切運作正常。 讓我們看看您已完成的所有內容:

• 您已下載並安裝網頁程式開發所需的工具，並使用基本套件自訂編輯器。
• 您已建立專案目錄與檔案來建置網站。
• 您建立了標題和其他頁面元素，然後連結至外部檔案並在瀏覽器中測試頁面。
• 您將樣式套用至不同的元素，並在瀏覽器中測試您的網站，並使用 CSS 新增佈景主題支援。
• 您已新增 JavaScript 以啟用與網頁的自訂互動，並在佈景主題之間進行切換。
• 您已了解如何建立和使用主控台訊息，以便在您的程式碼中查看。

您收集工具並建立作為網頁程式開發人員的基礎。 您可以重複使用網站作為未來專案的範本。 隨著您的技能和知識的增長，您會更有能力實現對網站的願景。 您也將更有能力讓想法付諸實現。

深入了解

網頁程式開發概念

• 容錯 (正常降低)
• 關注點分離
• 漸進增強

網頁程式開發參考

HTML5

• HTML 歷程記錄
• Webhint - Use charset 'Utf-8' (Webhint - 使用字元集 'Utf-8')
• MDN web docs - What’s in the head? (MDN web docs - 標題內容)
• MDN Web 文件 - HTML 元素參考

CSS

• MDN Web 文件 - CSS：階層式樣式表

JavaScript

• MDN web docs - Strict mode (MDN web docs - Strict 模式)
• MDN Web 文件 - JavaScript 參考

網頁程式開發技術

Microsoft Edge 文件

• Microsoft Edge Developer Tools (Microsoft Edge 開發人員工具)
• 使用元素工具檢查、編輯及偵錯 HTML 和 CSS
• 主控台概觀

Azure 靜態 Web 應用程式

部署網站的方式之一是使用 Azure Static Web Apps。

• Azure Static Web Apps 的學習路徑
• Azure Static Web Apps 文件

Visual Studio Code 文件

• User Interface (使用者介面)
• Emmet in Visual Studio Code (Visual Studio Code 中的 Emmet)