From 218934fa2ed1c702a6d3923d2aa2cc6b43c48684 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:43:23 -0500 Subject: initial commit --- files/zh-tw/learn/index.html | 238 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 238 insertions(+) create mode 100644 files/zh-tw/learn/index.html (limited to 'files/zh-tw/learn/index.html') diff --git a/files/zh-tw/learn/index.html b/files/zh-tw/learn/index.html new file mode 100644 index 0000000000..729b0d7999 --- /dev/null +++ b/files/zh-tw/learn/index.html @@ -0,0 +1,238 @@ +--- +title: 學習該如何開發 Web +slug: Learn +tags: + - Beginner + - Index + - Landing + - Learn + - NeedsTranslation + - TopicStub + - Web +translation_of: Learn +--- +
+
+

+ +

{{LearnSidebar}}

+ +

+ +

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

+
+ +

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

+ +

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

+ +
+

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

+
+ +

入門

+ + + +
+

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

+
+ +

{{LearnBox({"title":"Random glossary entry"})}}

+ +

涵蓋主題

+ +

以下是 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. +
  2. 在 GitHub 註冊一個帳號。很簡單的。
    3. +
  3. 註冊好後用自己的帳密登入 github.com。
    4. +
  4. 開啟你的命令提示字元（Windows）（譯註：如果使用 Windows 7 以後，建議使用 Powershell）或是終端機（Linux、MacOSX）
    5. +
  5. 要把學習專區的 repo 透過命令提示字元/終端機複製到目錄裡面，稱作 learning-area 的資料夾，只要鍵入以下指令： + 
    git clone https://github.com/mdn/learning-area
    +
    6. +
  6. 現在你能透過檔案管理員或 cd 指令進入目錄，找到想要的檔案了。
    7. +
+ +

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

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

{{LearnBox({"title":"隨機了解常見的相關術語"})}}

+ +

聯絡我們

+ +

如果你想向我們詢問任何事情，最快的方式就是透過學習專區討論串或 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. +
    2. 你的網站看起來會是什麼樣子？
      3. +
    3. 與各式各樣檔案打交道
      4. +
    4. HTML 基本概念
      5. +
    5. CSS 基本概念
      6. +
    6. JavaScript 基本概念
      7. +
    7. 將你的網站發佈上線
      8. +
    8. 網站的運作方式
      9. +
    +
    2. +
  2. HTML — 建構 Web +
      +
    1. HTML 概述
      2. +
    2. HTML 介紹 +
        +
      1. HTML 基本介紹
        2. +
      2. HTML 入門
        3. +
      3. 先入為主？HTML 的 Metadata
        4. +
      4. HTML 文字基本概念
        5. +
      5. 建立超連結
        6. +
      6. 進階文字格式
        7. +
      7. 文件與網站架構
        8. +
      8. HTML 除錯
        9. +
      9. 評量習題：對字母標記
        10. +
      10. 評量習題：建構內容網頁
        11. +
      +
      3. +
    3. 多媒體與嵌入 +
        +
      1. 多媒體與嵌入概述
        2. +
      2. HTML 圖像
        3. +
      3. 視訊與音訊內容
        4. +
      4. 從物件到 iframe — 其他嵌入技術
        5. +
      5. 為 Web 新增向量圖像
        6. +
      6. 有所回應互動的圖像
        7. +
      7. 評量習題：Mozilla splash 頁面
        8. +
      +
      4. +
    +
    3. +
  3. CSS — 讓 Web 別有風格 +
      +
    1. CSS 概述
      2. +
    2. CSS 介紹 +
        +
      1. CSS 基本介紹
        2. +
      2. CSS 運作方式
        3. +
      3. CSS 語法
        4. +
      4. 選擇器(Selectors)
        5. +
      5. CSS 數值與單位
        6. +
      6. 串接 (Cascade) 與繼承 (Inheritance)
        7. +
      7. 區塊模型 (Box model)
        8. +
      8. CSS 除錯
        9. +
      9. 評量習題：基礎的 CSS 綜合運算 (Comprehension)
        10. +
      +
      3. +
    3. 文字樣式 +
        +
      1. 文字樣式概述
        2. +
      2. 文字與字體樣式基本原則
        3. +
      3. 清單樣式
        4. +
      4. 連結樣式
        5. +
      5. Web 字型
        6. +
      6. 評量習題：Typesetting a community school homepage
        7. +
      +
      4. +
    4. 框盒 (boxes) 樣式 +
        +
      1. 框盒樣式概述
        2. +
      2. 框盒模型 (Box model) 回顧
        3. +
      3. 背景
        4. +
      4. 邊框
        5. +
      5. 表格樣式
        6. +
      6. 進階框盒效果
        7. +
      7. 評量習題：Creating fancy letterheader paper
        8. +
      8. 評量習題：A cool looking box
        9. +
      +
      5. +
    5. CSS 配置 +
        +
      1. CSS 配置概述
        2. +
      2. 浮動布局(Floats)
        3. +
      3. Positioning
        4. +
      4. Practical positioning examples
        5. +
      5. 彈性盒子(Flexbox)
        6. +
      +
      6. +
    +
    4. +
  4. 進階學習教材 +
      +
    1. JavaScript — 動態指令
      2. +
    2. WebGL — 圖像處理
      3. +
    +
    5. +
  5. 常見問題 +
      +
    1. HTML 問題
      2. +
    2. CSS 問題
      3. +
    3. Web 運作方式
      4. +
    4. 工具與設定
      5. +
    5. 設計與親和度
      6. +
    +
    6. +
  6. 該如何貢獻
    7. +
+
-- cgit v1.2.3-54-g00ecf