學習網頁開發

歡迎來到 MDN 學習區域。這套文章旨在為網頁開發的完全初學者提供構建網站的基本技能。我們的目標不是將你從“初學者”變成“專家”，而是將你從“初學者”變成“舒適”。從那裡，你應該能夠開始你的學習之旅，從MDN 的其他部分以及其他假設有大量先前知識的中級到高階資源中學習。

如果你是一個完全的初學者，網頁開發可能具有挑戰性——我們將引導你，並提供足夠的細節，讓你感到舒適並正確地學習主題。無論你是學習網頁開發的學生（自學或作為課程的一部分）、尋找課程材料的教師、業餘愛好者，還是僅僅想要更多地瞭解網頁技術如何工作的人，你都應該感到賓至如歸。

從哪裡開始

如果你不確定是否要深入學習網頁開發，並且想先進行一個體驗課程，我們建議你從我們的網頁入門指南開始。除此之外，你應該從學習以下主題開始

HTML 和 CSS: HTML 為網頁內容提供結構，而 CSS 提供樣式化和佈局該內容的指令。請參閱HTML 簡介和CSS 入門以獲取必要的入門資訊。
JavaScript: JavaScript 允許你在網站上編寫互動式功能。從JavaScript 入門開始。
框架和工具: 掌握了原生 HTML、CSS 和 JavaScript 的基礎知識後，你應該瞭解客戶端網頁開發工具，然後考慮深入研究客戶端 JavaScript 框架。你還應該考慮學習伺服器端網站程式設計的基本概念。

注意：我們的詞彙表提供了術語定義。此外，如果你對網頁開發有任何具體問題，我們的常見問題部分可能會有幫助。

想成為前端網頁開發人員？

如果你想成為前端網頁開發人員並且不確定首先學習什麼，我們建議你使用MDN 課程來計劃你的學習。它提供了一個結構化的學習路徑，涵蓋成為成功的前端開發人員必備的技能和實踐，以及推薦的學習資源。

開始學習

涵蓋的主題

以下是我們在 MDN 學習區域中涵蓋的所有主題的列表。

網頁入門

為完全初學者提供網頁開發的實用入門。

HTML — 網頁結構

HTML 是我們用來構建內容的不同部分並定義其含義或用途的語言。本主題詳細介紹了 HTML。

CSS — 網頁樣式

CSS 是我們用來控制網頁內容的樣式和佈局，以及新增動畫等行為的語言。本主題提供了 CSS 的全面覆蓋。

JavaScript — 動態客戶端指令碼

JavaScript 是一種用於為網頁新增動態功能的指令碼語言。本主題教授成為舒適地編寫和理解 JavaScript 所需的所有基本知識。

網頁表單 — 處理使用者資料

Web 表單是與使用者互動的強大工具——最常見的是，它們用於收集使用者資料，或允許使用者控制使用者介面。在下面列出的文章中，我們將介紹構建、樣式設定和與 Web 表單互動的所有基本方面。

無障礙性——讓每個人都能使用網路

無障礙性是指使 Web 內容儘可能多的人能夠訪問的實踐，無論其殘疾、裝置、地區或其他差異因素如何。本主題為您提供了所有必要的知識。

Web 效能——使網站快速且響應迅速

Web 效能是指確保 Web 應用程式快速下載並對使用者互動做出響應的藝術，無論使用者的頻寬、螢幕尺寸、網路或裝置功能如何。

MathML

MathML 是一種語言，我們可以使用它來在網頁中編寫數學公式，包括分數、上標、下標、根式、矩陣、積分、級數等。本主題涵蓋 MathML。

工具和測試

本主題涵蓋開發人員用於促進其工作的工具，例如跨瀏覽器測試工具、程式碼檢查工具、程式碼格式化工具、轉換工具、版本控制系統、部署工具和客戶端 JavaScript 框架。

伺服器端網站程式設計

即使您專注於客戶端 Web 開發，瞭解伺服器和伺服器端程式碼功能的工作原理仍然很有用。本主題提供了一個關於伺服器端如何工作的概述，以及詳細的教程，展示瞭如何使用兩個流行的框架構建伺服器端應用程式：Django（Python）和 Express（Node.js）。

任務和評估

在 MDN 的“學習 Web 開發”部分，有許多獨立的任務和評估供您完成。它們主要分為兩種型別

“測試您的技能”任務，例如在在程式碼中做出決策——條件語句中。
一些模組末尾更深入的**評估**，例如圖片庫。

每個任務都有一個相關的評分指南和推薦的解決方案，以幫助您評估您的工作。有一些模式可以更容易地找到這些資源，例如

上面連結的**測試您的技能**任務的評分指南和資源可在https://github.com/mdn/learning-area/tree/main/javascript/building-blocks/tasks/conditionals找到。
上面連結的**評估**的評分指南和資源可在https://github.com/mdn/learning-area/tree/main/javascript/building-blocks/gallery找到。

注意：大多數任務和評估的評分指南和其他資源都可以在mdn/learning-area中找到，但也有一些在mdn/css-examples中。

獲取我們的程式碼示例

您在學習區域中遇到的程式碼示例都可在 GitHub 上獲取。如果您想將它們全部複製到您的計算機上，最簡單的方法是下載最新主程式碼分支的 ZIP 檔案。

如果您希望以更靈活的方式複製倉庫，以便自動更新，您可以按照更復雜的說明操作

在您的機器上安裝 Git。這是 GitHub 所依賴的底層版本控制系統軟體。
開啟計算機的命令提示符（Windows）或終端(Linux，macOS)。
要將學習區域倉庫複製到當前命令提示符/終端指向位置的名為 learning-area 的資料夾中，請使用以下命令
bash
```
git clone https://github.com/mdn/learning-area
```
您現在可以進入目錄並找到您需要的檔案（使用 Finder/檔案資源管理器或cd 命令）。

您可以使用以下步驟更新 learning-area 儲存庫中 GitHub 主版本中所做的任何更改

在命令提示符/終端中，使用 cd 進入 learning-area 目錄。例如，如果您在父目錄中
bash
```
cd learning-area
```
使用以下命令更新儲存庫
bash
```
git pull
```

聯絡我們

如果您想與我們聯絡任何事宜，請使用溝通渠道。我們希望收到您關於您認為網站上任何錯誤或缺失內容的反饋、對新學習主題的請求、對您不理解的專案的幫助請求，或任何其他問題或疑慮。

如果您有興趣幫助開發/改進內容，請檢視如何提供幫助並聯系我們！無論您是學習者、教師、經驗豐富的 Web 開發人員，還是其他有興趣幫助改善學習體驗的人，我們都非常樂意與您交談。

另請參閱

前端開發人員職業路徑 ^{MDN 課程合作伙伴}: Scrimba 的前端開發人員職業路徑教授成為一名合格的前端 Web 開發人員所需的所有知識，包括有趣的互動課程和挑戰、知識淵博的教師和一個支援性的社群。從零開始，獲得您的第一份前端工作！許多課程元件都可以作為獨立的免費版本使用。
學習 JavaScript: 一個針對有抱負的 Web 開發人員的優秀資源——在互動式環境中學習 JavaScript，包括簡短的課程和互動式測試，並由自動化評估指導。前 40 節課是免費的，完整課程只需支付少量的一次性費用即可獲得。
Codecademy: 一個很棒的互動式網站，用於從頭開始學習程式語言。
freeCodeCamp.org: 一個互動式網站，提供教程和專案以學習 Web 開發。
The Odin Project: 提供一個免費且開源的全棧課程，從初學者到高階水平。
MDN 部落格: MDN 部落格包含來自 MDN 團隊和客座作者的文章，內容涉及網站的新發展、HTML、CSS、JavaScript 和其他 Web 開發新聞。
Mozilla 開發人員通訊: 我們為 Web 開發人員提供的通訊，是所有經驗水平的優秀資源。