學習該如何開發 Web

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

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

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

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

入門

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

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

Random glossary entry

Doctype
<!DOCTYPE>會告知你的瀏覽器這個文件是用哪個版本的 HTML (或 XML)撰寫。Doctype 是一種宣告,而非 tag。你也可以把它想作「document type declaration」(文件類型宣告),或是縮寫的 「DTD」。

涵蓋主題

以下是 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

隨機了解常見的相關術語

可緩存
可緩存的響應是可被緩存的HTTP 響應,它被存儲以供稍後檢索和使用,從而將新的請求保存在伺服器。不是所有的 HTTP 響應都可以被緩存,可以被緩存的 HTTP 響應需滿足如下列條件:

聯絡我們

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

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

另可參閱

Mozilla Developer Newsletter
我們針對網頁開發者發行的電子報,對於所有程度的開發者都是很好的學習資源。
EXLskills 
免費和開放的課程,學習技術技能,指導和基於項目的學習
Codecademy
絕妙的互動式網站,可從頭開始學習程式設計語言。
Code.org
基本的編碼理論與實作,主要為孩童與初學者所設計。
freeCodeCamp.com
富含教學與專案實做的互動式網路開發學習網站。
Web Literacy Map
Web 素養與 21 世紀常見技術的入門,亦已分門別類提供教學活動。
Teaching activities
由 Mozilla 基金會所設計的一系列教學 (與學習) 活動,涵蓋 JavaScript 的基本 Web 素養與隱私概念,並可嘗試開發 Minecraft。
  1. Web 入門
    1. 安裝基本軟體
    2. 你的網站看起來會是什麼樣子?
    3. 與各式各樣檔案打交道
    4. HTML 基本概念
    5. CSS 基本概念
    6. JavaScript 基本概念
    7. 將你的網站發佈上線
    8. 網站的運作方式
  2. HTML — 建構 Web
    1. HTML 概述
    2. HTML 介紹
      1. HTML 基本介紹
      2. HTML 入門
      3. 先入為主?HTML 的 Metadata
      4. HTML 文字基本概念
      5. 建立超連結
      6. 進階文字格式
      7. 文件與網站架構
      8. HTML 除錯
      9. 評量習題:對字母標記
      10. 評量習題:建構內容網頁
    3. 多媒體與嵌入
      1. 多媒體與嵌入概述
      2. HTML 圖像
      3. 視訊與音訊內容
      4. 從物件到 iframe — 其他嵌入技術
      5. 為 Web 新增向量圖像
      6. 有所回應互動的圖像
      7. 評量習題:Mozilla splash 頁面
  3. CSS — 讓 Web 別有風格
    1. CSS 概述
    2. CSS 介紹
      1. CSS 基本介紹
      2. CSS 運作方式
      3. CSS 語法
      4. 選擇器(Selectors)
      5. CSS 數值與單位
      6. 串接 (Cascade) 與繼承 (Inheritance)
      7. 區塊模型 (Box model)
      8. CSS 除錯
      9. 評量習題:基礎的 CSS 綜合運算 (Comprehension)
    3. 文字樣式
      1. 文字樣式概述
      2. 文字與字體樣式基本原則
      3. 清單樣式
      4. 連結樣式
      5. Web 字型
      6. 評量習題:Typesetting a community school homepage
    4. 框盒 (boxes) 樣式
      1. 框盒樣式概述
      2. 框盒模型 (Box model) 回顧
      3. 背景
      4. 邊框
      5. 表格樣式
      6. 進階框盒效果
      7. 評量習題:Creating fancy letterheader paper
      8. 評量習題:A cool looking box
    5. CSS 配置
      1. CSS 配置概述
      2. 浮動布局(Floats)
      3. Positioning
      4. Practical positioning examples
      5. 彈性盒子(Flexbox)
  4. 進階學習教材
    1. JavaScript — 動態指令
    2. WebGL — 圖像處理
  5. 常見問題
    1. HTML 問題
    2. CSS 問題
    3. Web 運作方式
    4. 工具與設定
    5. 設計與親和度
  6. 該如何貢獻