關於 課程

MDN 前端開發課程旨在為當今 Web 行業中需要就業和長期發展的前端 Web 開發人員提供基礎技能和知識的權威推薦。

本課程由 MDN 團隊建立,並得到了 Mozilla 內部專家以及更廣泛的 MDN 社群的審查和反饋。感謝您寶貴的意見;您知道自己是誰!

動機

Mozilla 每天都與行業專業人士交流,我們定期收到關於新員工知識缺口的反饋。招聘經理經常觀察到

  • 過於關注使用框架快速構建 Web 應用,卻缺乏對這些框架背後底層技術的理解。這導致瞭解決問題的能力不足,以及隨著工具的變化,長期就業能力下降。
  • 缺乏核心最佳實踐,例如語義化、可訪問性和響應式設計。這導致缺乏使用者導向,並限制了可用性。
  • 對瀏覽器如何從根本上工作、如何顯示資訊以及您免費獲得的互動性等知識的瞭解不足。這導致解決方案過於複雜,而且通常不可訪問。
  • 有限的解決問題、團隊合作、研究和其他重要的軟技能。

因此,我們決定建立本課程,以幫助指導人們學習更優秀的技能組合,提高他們的就業能力,並使他們能夠構建一個更好、更易於訪問、更負責任的未來 Web。我們希望他們有最大的成功機會。

本課程體現了我們認為 Web 應該擁有的價值觀——可訪問性、可持續性、可用性、效能和社群。我們希望教育工作者、開發人員和學生能夠使用此資源,並在他們的工作中、教學中以及他們構建的產品中倡導這些價值觀。

目標受眾

學生

本課程對幾類學生都有用

  • 希望進入該行業的學生,這可能涉及獲得相關的資格或認證。本課程將作為他們應學習內容的指南。
  • 現有 Web 開發人員,他們希望“提升”他們的技能,確保他們的技能集是最新的,並找出他們應該瞭解更多知識的技能缺口。
  • 非前端 Web 開發人員,他們在其他領域(例如後端 Web 開發人員或特定平臺開發人員)擁有現有的開發經驗,希望進入前端 Web 開發,並希望獲得他們應該學習的主題指南。

一旦學生有了要學習的主題列表,他們就應該透過自學、參加課程或訓練營來學習,或者結合使用。無論哪種方式,在完成符合要求的課程後,學生應該能夠透過一項測試他們所學主題知識的考試。

注意:本資源不是一門前端 Web 開發學習課程,也不旨在對其進行徹底的教授。它推薦了現代前端 Web 開發人員應該知道的內容。然而,我們花費了大量的時間和精力來審查涵蓋我們模組的各種課程,並打算推薦我們認為適合學習本課程的免費和付費課程。

教育工作者

教育工作者可以在建立與 Web 相關的大學學位、學院課程、編碼學校課程或類似課程的程式、單元和評估規範時,將本課程用作指南。遵循本課程將有助於確保課程教授最新的技術和最佳實踐,並避免不良實踐和過時的資訊。

要了解更多資訊,請查閱我們的 教育者資源 頁面。

無憂 PDF 下載:完整的 MDN 課程可提供方便的 PDF 版本,供您與學生和同事分享。

下載課程

範圍

前端開發人員這個術語可能含糊不清;它對不同的人可能有不同的含義,而且從事前端工作的人可能需要執行各種不同的任務。

涵蓋內容

本課程不試圖概述 Web 開發人員可能需要深入瞭解的每一個主題。本課程涵蓋以下內容

  • 核心技術技能,如語義 HTML、CSS 和 JavaScript 基礎。
  • 最佳實踐,如可訪問性、響應式設計和 UI 設計理論。
  • 關鍵工具,如框架和版本控制。
  • 軟技能,以培養獲得工作所需的思維方式和態度。
  • 環境知識,如計算機和檔案系統、瀏覽 Web、命令列基礎知識以及程式碼編輯器。
  • 幾個“擴充套件”模組,我們認為它們構成了開發人員開始擴充套件知識和發展專業特長時應學習的有用附加技能。這包括
    • CSS 變換和動畫
    • Web API 的常見類別(例如,媒體、圖形和儲存)
    • 效能
    • 安全和隱私
    • 測試

詳細程度

所呈現的主題涵蓋了不同程度的細節。

  • 有些內容被深入講解,例如 HTML 和 CSS 基礎。在學生開始他們的學習之旅之前,清晰地理解這些內容非常重要。
  • 有些內容講解得更膚淺,例如版本控制或測試。理解這些主題是什麼以及開始掌握一些基礎知識很重要,但這些技能可以在您職業生涯的繼續中進行擴充套件。

未涵蓋內容

此外,還有幾個領域我們明確不涵蓋在本課程中,即

  • 後端語言/平臺,例如 Node.jsPHPPython.NETJavaRuby。後端,顧名思義,不在前端開發課程的範圍內,儘管您會在全棧開發人員課程中找到交叉內容。

    • 這裡有一個例外是 Node.js;它在現代 Web 開發中有廣泛的用途,因此一些基本的 Node.js 知識應該被認為是必不可少的。我們不明確涵蓋基於 Node.js 的應用程式的開發,但您將在課程的多個地方遇到它,作為使用各種工具/功能的機制。例如,包括 擴充套件 6 測試擴充套件 9 其他工具型別
  • 傳統的關係型資料庫(例如,MySQLPostgres)和其他伺服器端資料儲存(例如,雲資料庫,如 MongoDBGoogle Cloud Datastore)。這些被認為是後端的一部分,因此不在課程範圍之內。我們確實涵蓋了客戶端儲存機制,如 CookiesWeb StorageIndexedDB,但它們具有不同且獨特的用例。

  • 深入的 DevOps 主題,例如用於配置和自動化(例如,Amazon AWSGoogle Cloud PlatformMicrosoft Azure)的雲平臺以及容器化工具(例如,KubernetesDocker)。我們確實會輕微觸及一些被認為是 DevOps 領域內的工具——例如 GitHub 和自動化測試工具——但這些與前端開發人員領域有明顯的交叉。

  • 圖形設計超越基礎知識(在 為開發人員而設計 中概述)。

  • 與產品和專案管理等角色相關的技能(例如,組織、研究和規劃)。

歸因

任何人都可以免費使用此資源。如果您覺得本課程有用,我們希望您考慮做以下事情

  • 連結到它。例如,教育工作者可以在他們的公開課程資訊中包含以下內容

    html
    <p>
      This course is based on the
      <a href="https://mdn.club.tw/en-US/curriculum/"
        >MDN front-end development curriculum</a
      >.
    </p>
    
  • 告訴其他人!我們希望儘可能多的學生和教育工作者開始使用本課程,並圍繞它作為 Web 開發人員基本知識的標準。

注意:本課程應作為指導,但其使用並不意味著 Mozilla 的認可。

課程更新流程

Web 開發行業正在不斷快速變化。為了使我們的建議保持最新,我們將定期審查我們的課程,釋出更改日誌,並每年進行一次公告,聯絡已知符合要求的課程的建立者,告知他們課程已更改,並鼓勵他們根據需要審查/更新他們的課程。

我們計劃在每年的第二季度進行此項工作,以便在第二季度/第三季度為教育工作者提供時間,在下一學年開始前實施更改。

反饋

我們很樂意聽取您對我們課程的反饋。如果您對如何改進該資源有任何建議,或者您注意到任何不準確或錯誤,我們非常希望收到您的反饋。在 課程原始碼倉庫 上建立一個包含您反饋的問題。