歡迎來到 MDN 的「學習專區(Learning Area)」。本系列文章將提供撰寫程式碼的必要網站,讓剛接觸的新手也能開發 Web。

MDN 學習專區不是要讓「初學者」變成「專家」;而是想讓「初學者」能夠更怡然自得。你在這裡可完全安排自己的進度,逐步探索 MDN 的其他部分,再接觸進階資源來堆砌之前所習得的知識。

如果你是完全的新手,那 Web 開發過程可能頗有難度。我們希望能帶領你輕鬆學習,另提供相關細節以培養你的正確觀念。不論你是要學習 Web 開發(自學或參與課程)的學生、尋找教材的老師、純粹興趣使然的業餘工程師,甚至只是想進一步了解 Web 技術的人,都希望你在這裡就像在家裡一樣自在。

重要:此學習專區將定期新增更多資訊。如果你希望能納入其他自己感興趣的主題,或覺得某個地方尚有缺漏,請到下方的聯絡我們尋找相關資訊並取得聯繫。

入門

  • 完全新手:如果你正打算接觸 Web 開發,我們建議先從提供了實用 Web 開發介紹的入門 Web模組。
  • 特殊問題:如果你對 Web 開發有著特殊問題,常見問題可能有你所需要的資訊。
  • 基礎以外:如果你已經具備基本知識,則下一步就是了解 HTMLCSS 的細節。可從HTML 介紹模組著手,再進到CSS 介紹
  • 寫些腳本:如果你嫻熟 HTML 與 CSS 或想動手寫程式碼,要不要去 JavaScript 或伺服器端語言那邊看看呢──就從我們的 JavaScript 起步走伺服器端程式設計起步走開始吧。

注意:我們的字彙庫另提供專有名詞的定義。

Random glossary entry

WebExtensions
WebExtensions 是一種跨瀏覽器系統,用於開發 Firefox 的瀏覽器附加元件。這個系統提供許多 API 能夠在不同的瀏覽器中執行,例如 Mozilla Firefox、Google Chrome、Opera 瀏覽器和 Microsoft Edge。

涵蓋主題

以下是 MDN 學習專區內涵蓋的主題清單。

Web 入門
針對完全新手提供實際介紹。
HTML:構建 Web
HTML 是構建不同區域的內容、還有定義這些區域意義和用途的語言。這個主題詳述了 HTML。
CSS:打扮 Web
CSS 是用來妝點和編排 web 內容、添加動畫行為之類的語言。這個主題總括 CSS 的一切。
JavaScript:動態用戶端腳本
JavaScript 是給網頁添加動態功能的語言。這個主題會教你要自在理解並撰寫 JavaScript 所需的一切。
無障礙網頁:讓大家都能用上 Web
無障礙網頁是給盡可能給任何人提供 Web 內容的做法,無論那個人是否受障礙、設備、地點、或其他原因影響。這個主題提供你需要知道的一切。
工具與測試
這個主題介紹開發者用來改善工作的工具,如跨瀏覽器測試工具。
伺服端網站程式設計
就算對用戶端 Web 開發熟悉了,理解伺服器和伺服器端程式如何做動是很有用的。這個主題提供了伺服器端做動原理的總體介紹,並藉著兩大熱門框架──Django(Python)與 Express(node.js)──詳細說明如何建立伺服器端 app。

取得我們的範例程式碼

在學習專區看到的所有程式碼都放在 GitHub 上了。如果想把它們複製到自己的電腦,最簡單的方法是:

  1. 在電腦上安裝 Git。這個版本控制系統,是 GitHub 運作的基礎。
  2. 在 GitHub 註冊一個帳號。很簡單的。
  3. 註冊好後用自己的帳密登入 github.com
  4. 開啟你的命令提示字元(Windows)(譯註:如果使用 Windows 7 以後,建議使用 Powershell)或是終端機(LinuxMacOSX
  5. 要把學習專區的 repo 透過命令提示字元/終端機複製到目錄裡面,稱作 learning-area 的資料夾,只要鍵入以下指令:
    git clone https://github.com/mdn/learning-area
  6. 現在你能透過檔案管理員或 cd 指令進入目錄,找到想要的檔案了。

你可以在 GitHub 的 learning-area repository 做任何更新,只要這麼做:

  1. 在命令提示字元/終端機裡面,用 cd 進到 learning-area 目錄,例如說你要是在上一層目錄的話:
    cd learning-area
  2. 用這個指令更新 repository:
    git pull

隨機了解常見的相關術語

REST
具象狀態傳輸(REST,Representational State Transfer)是一組實現效率、可讀性、還有可擴展分散式系統(scalable distributed system)的軟體架構設計規範。如果一個系統能維持某些規範,他就是 RESTful。

聯絡我們

如果你想向我們詢問任何事情,最快的方式就是透過學習專區討論串IRC 頻道留下訊息。不論你覺得網站有哪個地方做錯或缺漏,想看到新的學習主題、對自己不了解的地方尋求協助,或其他疑難雜症,都歡迎你提供意見給我們。

如果你想幫我們添增\改善內容,則請先了解該如何協助並聯絡我們!不論你是學生、教師、Web 開發老手,或是想幫我們改善學習經驗,都歡迎和我們聯絡。

Join the Learn community

Choose your preferred method for joining the discussion:

另可參閱

Mozilla Developer Newsletter
我們針對網頁開發者發行的電子報,對於所有程度的開發者都是很好的學習資源。
EXLskills 
免費和開放的課程,學習技術技能,指導和基於項目的學習
Codecademy
絕妙的互動式網站,可從頭開始學習程式設計語言。
Code.org
基本的編碼理論與實作,主要為孩童與初學者所設計。
freeCodeCamp.com
富含教學與專案實做的互動式網路開發學習網站。
Web Literacy Map
Web 素養與 21 世紀常見技術的入門,亦已分門別類提供教學活動。
Teaching activities
由 Mozilla 基金會所設計的一系列教學 (與學習) 活動,涵蓋 JavaScript 的基本 Web 素養與隱私概念,並可嘗試開發 Minecraft。

文件標籤與貢獻者

最近更新: svarlamov,