學習 Web 開發

新前端開發者的必備技能

歡迎來到 MDN 學習 Web 開發(也稱為 Learn)。本資源提供了一套結構化的教程,教授成功的前端開發者所需的必備技能和實踐,並輔以練習和進一步推薦的資源。

關於學習 Web 開發

  • 根據 MDN 課程大綱 中定義的,教授每位前端開發者在職業生涯成功和行業相關性方面所需的必備技能和知識。

  • 由 MDN 社群建立,並結合了來自更廣泛的 Web 社群的學生、教育者和開發者的見解進行改進。

  • 旨在將您從“初學者”提升到“熟悉”(而不是從“初學者”提升到“專家”),為您提供足夠多的知識以使用更高階的資源(例如 MDN 的其餘部分)。

注意: 最後更新:2025 年 8 月(檢視更新日誌)。

不知道從何開始?

從未寫過程式碼?

我們的 入門模組 為完全的初學者提供了設定教程以及基礎概念和背景資訊。如果您是完全的初學者(即您還沒有安裝程式碼編輯器或編寫過任何程式碼),則應該從這裡開始。

想掌握基礎知識?

我們的 核心模組 提供了一套結構化的教程,教授成功的前端開發者所需的必備技能和實踐。

超越基礎?

隨著您開始擴充套件知識和發展專業技能,我們的 擴充套件模組 涵蓋了有用的附加技能。完成我們的核心模組後,請繼續學習這些內容。

在學校工作?

使用我們的模組來指導您的教學,檢視我們的 教育者頁面 以獲取更多想法,或者讓您的學生報名參加 Scrimba 的 前端開發人員職業路徑MDN 學習合作伙伴

檢驗你的技能

在整個課程中,您會發現幾篇文章旨在幫助您評估是否理解了我們正在教授的內容。有兩種型別:

  • “測試您的技能”文章更頻繁地出現,測試您對單個孤立功能的知識,例如 HTML 連結、CSS 盒子模型或 JavaScript 函式。
  • “挑戰”文章出現頻率較低,測試您將多個功能結合起來建立某種完整網站或程式的能力。

大多數問題都包含 HTML/CSS/JavaScript 程式碼塊,顯示每個任務的起始程式碼。推薦的完成方法是按下程式碼塊中的“播放”按鈕,在 MDN Playground 中開啟示例,然後根據問題說明編輯程式碼。

如果犯了錯誤,可以使用 MDN Playground 中的重置按鈕清除您的工作。如果您真的卡住了,通常可以在每個問題部分的底部檢視解決方案,或者 尋求幫助

注意: 如果您更喜歡在自己的編輯器或線上編輯器(例如 CodePenJSFiddle)中工作,您可以將 MDN Playground 中的程式碼複製到您選擇的環境中。

有些問題不包含起始程式碼塊,而是要求您下載入門檔案在本地機器上進行處理。有時這是由於問題的複雜性,有時我們只是想稍微改變一下。

獲取我們的程式碼示例

您將在學習區域遇到的程式碼示例都 可在 GitHub 上找到

聯絡我們

如果您想就任何事情與我們取得聯絡,請使用 溝通渠道。我們很樂意聽取您關於網站上任何認為錯誤或缺失的內容、新學習主題的請求、關於您不理解的專案尋求幫助的請求,或任何其他問題或疑慮。

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

另見

前端開發人員職業路徑 MDN 學習合作伙伴

Scrimba 的前端開發人員職業路徑透過有趣的互動課程和挑戰、知識淵博的教師以及支援性的社群,教授您成為一名合格的前端 Web 開發人員所需的一切。從零開始,找到您的第一份前端工作!許多課程組成部分都提供獨立的免費版本。

Codecademy

一個很棒的互動網站,用於從頭開始學習程式語言。

freeCodeCamp.org

具有教程和專案的互動網站,用於學習 Web 開發。

學習 JavaScript

對於有抱負的 Web 開發人員來說,這是一個極好的資源——在互動式環境中學習 JavaScript,包括短課程和互動式測試,並透過自動化評估進行指導。前 40 節課是免費的,完整課程只需一次小額付款。