From a4e7906a7a75ce33a2acd24c33a7dd33bf68f870 Mon Sep 17 00:00:00 2001
From: A1lo <yin199909@aliyun.com>
Date: Sun, 22 Dec 2024 11:17:09 +0800
Subject: [PATCH] chore(zh-tw): fix broken links to learn area (#25201)

* zh-tw: use script to fix broken links to learn area

* fix the broken links in page macros
---
 files/zh-tw/glossary/dns/index.md             |  2 +-
 files/zh-tw/glossary/ftp/index.md             |  2 +-
 files/zh-tw/glossary/mime_type/index.md       |  2 +-
 .../glossary/progressive_enhancement/index.md |  2 +-
 files/zh-tw/glossary/url/index.md             |  4 +-
 .../core/accessibility/index.md               | 10 ++--
 .../accessibility/wai-aria_basics/index.md    | 16 +++----
 .../what_is_accessibility/index.md            | 12 ++---
 .../core/css_layout/index.md                  | 24 +++++-----
 .../angular_building/index.md                 |  8 ++--
 .../angular_filtering/index.md                | 12 ++---
 .../angular_getting_started/index.md          | 12 ++---
 .../angular_item_component/index.md           | 12 ++---
 .../angular_styling/index.md                  | 12 ++---
 .../angular_todo_list_beginning/index.md      | 12 ++---
 .../core/frameworks_libraries/index.md        | 48 +++++++++----------
 .../introduction/index.md                     | 12 ++---
 .../react_getting_started/index.md            | 20 ++++----
 .../react_todo_list_beginning/index.md        | 14 +++---
 .../svelte_getting_started/index.md           | 18 +++----
 .../svelte_todo_list_beginning/index.md       | 12 ++---
 .../svelte_variables_props/index.md           | 12 ++---
 .../vue_first_component/index.md              | 12 ++---
 .../vue_getting_started/index.md              | 14 +++---
 .../core/scripting/a_first_splash/index.md    | 14 +++---
 .../core/scripting/arrays/index.md            |  4 +-
 .../core/scripting/conditionals/index.md      |  8 ++--
 .../core/scripting/functions/index.md         |  6 +--
 .../core/scripting/index.md                   |  6 +--
 .../core/scripting/json/index.md              | 10 ++--
 .../core/scripting/loops/index.md             |  6 +--
 .../core/scripting/math/index.md              | 10 ++--
 .../core/scripting/object_basics/index.md     |  8 ++--
 .../core/scripting/strings/index.md           |  8 ++--
 .../scripting/useful_string_methods/index.md  |  6 +--
 .../core/scripting/variables/index.md         |  6 +--
 .../scripting/what_is_javascript/index.md     | 10 ++--
 .../core/scripting/what_went_wrong/index.md   |  8 ++--
 .../basic_html_syntax/index.md                |  4 +-
 .../creating_links/index.md                   | 12 ++---
 .../headings_and_paragraphs/index.md          |  6 +--
 .../structuring_content/html_images/index.md  | 14 +++---
 .../html_table_basics/index.md                | 14 +++---
 .../index.md                                  |  4 +-
 .../structuring_documents/index.md            | 12 ++---
 .../webpage_metadata/index.md                 |  8 ++--
 .../styling_basics/getting_started/index.md   | 12 ++---
 .../core/styling_basics/index.md              |  4 +-
 .../core/styling_basics/what_is_css/index.md  | 14 +++---
 .../core/text_styling/index.md                | 10 ++--
 .../adding_bouncing_balls_features/index.md   |  4 +-
 .../classes_in_javascript/index.md            | 12 ++---
 .../object_building_practice/index.md         | 12 ++---
 .../object_prototypes/index.md                | 10 ++--
 .../extensions/async_js/index.md              |  4 +-
 .../extensions/async_js/introducing/index.md  | 10 ++--
 .../extensions/client-side_apis/index.md      | 12 ++---
 .../how_to_structure_a_web_form/index.md      | 12 ++---
 .../extensions/forms/index.md                 | 20 ++++----
 .../server-side/django/admin_site/index.md    |  6 +--
 .../django/authentication/index.md            |  6 +--
 .../django/development_environment/index.md   |  6 +--
 .../server-side/django/forms/index.md         |  6 +--
 .../server-side/django/generic_views/index.md |  6 +--
 .../server-side/django/home_page/index.md     |  8 ++--
 .../extensions/server-side/django/index.md    |  6 +--
 .../server-side/django/introduction/index.md  | 10 ++--
 .../server-side/django/models/index.md        |  6 +--
 .../server-side/django/sessions/index.md      |  8 ++--
 .../django/skeleton_website/index.md          |  4 +-
 .../tutorial_local_library_website/index.md   |  4 +-
 .../express_nodejs/deployment/index.md        |  2 +-
 .../development_environment/index.md          |  8 ++--
 .../express_nodejs/displaying_data/index.md   | 14 +++---
 .../server-side/express_nodejs/forms/index.md | 18 +++----
 .../express_nodejs/introduction/index.md      | 12 ++---
 .../express_nodejs/mongoose/index.md          | 10 ++--
 .../express_nodejs/routes/index.md            | 10 ++--
 .../express_nodejs/skeleton_website/index.md  | 10 ++--
 .../tutorial_local_library_website/index.md   | 10 ++--
 .../server-side/first_steps/index.md          | 10 ++--
 .../first_steps/introduction/index.md         |  6 +--
 .../testing/automated_testing/index.md        | 12 ++---
 .../extensions/testing/index.md               | 12 ++---
 .../dealing_with_files/index.md               |  4 +-
 .../installing_software/index.md              |  6 +--
 .../web_standards/how_the_web_works/index.md  |  2 +-
 .../adding_interactivity/index.md             |  8 ++--
 .../creating_the_content/index.md             |  4 +-
 .../publishing_your_website/index.md          | 14 +++---
 .../styling_the_content/index.md              |  6 +--
 .../what_will_your_website_look_like/index.md |  4 +-
 .../learn_web_development/howto/index.md      | 38 +++++++--------
 .../howto/solve_css_problems/index.md         | 30 ++++++------
 .../howto/solve_html_problems/index.md        | 34 ++++++-------
 .../howto/solve_javascript_problems/index.md  | 34 ++++++-------
 .../what_is_a_web_server/index.md             | 14 +++---
 .../writing_style_guide/index.md              |  2 +-
 files/zh-tw/web/accessibility/index.md        |  8 ++--
 .../web/api/cssstylesheet/insertrule/index.md |  2 +-
 .../web/api/event/currenttarget/index.md      |  2 +-
 files/zh-tw/web/api/event/index.md            |  4 +-
 files/zh-tw/web/api/event/target/index.md     |  2 +-
 files/zh-tw/web/api/uievent/index.md          |  2 +-
 files/zh-tw/web/css/@namespace/index.md       |  2 +-
 files/zh-tw/web/css/css_fonts/index.md        |  6 +--
 files/zh-tw/web/css/index.md                  |  2 +-
 files/zh-tw/web/css/syntax/index.md           |  2 +-
 files/zh-tw/web/events/index.md               |  2 +-
 files/zh-tw/web/html/element/a/index.md       |  2 +-
 files/zh-tw/web/html/element/abbr/index.md    |  2 +-
 files/zh-tw/web/html/element/area/index.md    |  2 +-
 files/zh-tw/web/html/element/audio/index.md   |  4 +-
 files/zh-tw/web/html/element/button/index.md  |  2 +-
 files/zh-tw/web/html/element/canvas/index.md  |  2 +-
 files/zh-tw/web/html/element/div/index.md     |  2 +-
 .../web/html/element/input/submit/index.md    |  2 +-
 files/zh-tw/web/html/element/table/index.md   |  6 +--
 .../index.md                                  |  4 +-
 files/zh-tw/web/http/cookies/index.md         |  2 +-
 files/zh-tw/web/http/methods/connect/index.md |  2 +-
 files/zh-tw/web/http/methods/delete/index.md  |  2 +-
 files/zh-tw/web/http/methods/get/index.md     |  2 +-
 files/zh-tw/web/http/methods/head/index.md    |  2 +-
 files/zh-tw/web/http/methods/options/index.md |  2 +-
 files/zh-tw/web/http/methods/patch/index.md   |  2 +-
 files/zh-tw/web/http/methods/post/index.md    |  2 +-
 files/zh-tw/web/http/methods/put/index.md     |  2 +-
 files/zh-tw/web/http/methods/trace/index.md   |  2 +-
 files/zh-tw/web/performance/index.md          |  2 +-
 files/zh-tw/web/progressive_web_apps/index.md |  6 +--
 files/zh-tw/web/tutorials/index.md            |  4 +-
 files/zh-tw/webassembly/c_to_wasm/index.md    |  2 +-
 133 files changed, 567 insertions(+), 563 deletions(-)

diff --git a/files/zh-tw/glossary/dns/index.md b/files/zh-tw/glossary/dns/index.md
index ed7806d1a97540..62d4ebf585d647 100644
--- a/files/zh-tw/glossary/dns/index.md
+++ b/files/zh-tw/glossary/dns/index.md
@@ -11,5 +11,5 @@ DNS 主要的功能，是將人類易於辨識的域名（例如 mozilla.org）
 
 ## 參見
 
-- [什麼是域名?](/zh-TW/docs/Learn/Common_questions/Web_mechanics/What_is_a_domain_name)
+- [什麼是域名?](/zh-TW/docs/Learn_web_development/Howto/Web_mechanics/What_is_a_domain_name)
 - 維基百科上的[域名系統](https://zh.wikipedia.org/wiki/域名系统)
diff --git a/files/zh-tw/glossary/ftp/index.md b/files/zh-tw/glossary/ftp/index.md
index 7a5b9ad27e87bd..256f69cc390f34 100644
--- a/files/zh-tw/glossary/ftp/index.md
+++ b/files/zh-tw/glossary/ftp/index.md
@@ -11,5 +11,5 @@ slug: Glossary/FTP
 
 ### 基礎知識
 
-- [初學者指引通過 FTP 上傳文件](/zh-TW/docs/Learn/Common_questions/Tools_and_setup/Upload_files_to_a_web_server)
+- [初學者指引通過 FTP 上傳文件](/zh-TW/docs/Learn_web_development/Howto/Tools_and_setup/Upload_files_to_a_web_server)
 - 維基百科上的[FTP](https://zh.wikipedia.org/wiki/File_Transfer_Protocol)
diff --git a/files/zh-tw/glossary/mime_type/index.md b/files/zh-tw/glossary/mime_type/index.md
index 5f19f4933a0dbb..f85dffbd701371 100644
--- a/files/zh-tw/glossary/mime_type/index.md
+++ b/files/zh-tw/glossary/mime_type/index.md
@@ -13,7 +13,7 @@ slug: Glossary/MIME_type
 
 - 維基百科上的[網際網路媒體型式](https://zh.wikipedia.org/wiki/互联网媒体类型)
 - [MIME 類型列表](https://www.iana.org/assignments/media-types/media-types.xhtml)
-- [正確的伺服器 MIME 類型配置](/zh-TW/docs/Learn/Server-side/Configuring_server_MIME_types)
+- [正確的伺服器 MIME 類型配置](/zh-TW/docs/Learn_web_development/Extensions/Server-side/Configuring_server_MIME_types)
 - [MIME 類型](/zh-TW/docs/Web/HTTP/MIME_types)在 Web 上下文中的詳細用法
 - [MIME 類型的不完整列表](/zh-TW/docs/Web/HTTP/MIME_types/Common_types)
 - [MediaRecorder.mimeType](/zh-TW/docs/Web/API/MediaRecorder/mimeType)
diff --git a/files/zh-tw/glossary/progressive_enhancement/index.md b/files/zh-tw/glossary/progressive_enhancement/index.md
index 66bf73040e4c22..50e309ed4dcc35 100644
--- a/files/zh-tw/glossary/progressive_enhancement/index.md
+++ b/files/zh-tw/glossary/progressive_enhancement/index.md
@@ -9,7 +9,7 @@ slug: Glossary/Progressive_Enhancement
 
 漸進增強中的「漸進」指的是設計一個能夠在舊版瀏覽器或功能有限的設備上，實現「更簡單但仍可用」的體驗。同時並在新版瀏覽器或功能豐富的設備上實現更引人入勝、功能完整的體驗。
 
-技術上會使用[功能偵測](/zh-TW/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection)（Feature detection）來判斷瀏覽器是否支持更現代的功能。若偵測到設備不支援，則可以使用 JavaScript [polyfill](/zh-TW/docs/Glossary/Polyfill) 等技術來補充缺失的功能。
+技術上會使用[功能偵測](/zh-TW/docs/Learn_web_development/Extensions/Testing/Feature_detection)（Feature detection）來判斷瀏覽器是否支持更現代的功能。若偵測到設備不支援，則可以使用 JavaScript [polyfill](/zh-TW/docs/Glossary/Polyfill) 等技術來補充缺失的功能。
 
 遵照這個設計哲學，並要特別考慮到網頁親和性，盡可能在受限狀況下，仍然提供簡單但不犧牲親和力的替代方案。
 
diff --git a/files/zh-tw/glossary/url/index.md b/files/zh-tw/glossary/url/index.md
index 86fb93d7f7be62..e43d256fa3bf1b 100644
--- a/files/zh-tw/glossary/url/index.md
+++ b/files/zh-tw/glossary/url/index.md
@@ -19,8 +19,8 @@ URLs 同樣可以用於文件傳輸({{Glossary("FTP")}}) , 郵件 ({{Glossary("S
 
 ### 學習其他
 
-- [Understanding URLs and their structure](/zh-TW/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL)
+- [Understanding URLs and their structure](/zh-TW/docs/Learn_web_development/Howto/Web_mechanics/What_is_a_URL)
 
 ### Specification
 
-- [Understanding URLs and their structure](/zh-TW/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL)
+- [Understanding URLs and their structure](/zh-TW/docs/Learn_web_development/Howto/Web_mechanics/What_is_a_URL)
diff --git a/files/zh-tw/learn_web_development/core/accessibility/index.md b/files/zh-tw/learn_web_development/core/accessibility/index.md
index 32f32dd904ae01..736f924cf01daf 100644
--- a/files/zh-tw/learn_web_development/core/accessibility/index.md
+++ b/files/zh-tw/learn_web_development/core/accessibility/index.md
@@ -29,20 +29,20 @@ When someone describes a site as "accessible," they mean that any user can use a
 
 - [何謂無障礙網頁？](/zh-TW/docs/Learn_web_development/Core/Accessibility/What_is_accessibility)
   - : 這篇文章針對何謂無障礙網頁，起了一個好開頭。這模塊包含了要考慮哪些族群以及理由、不同族群會用什麼工具和 Web 互動、還有怎麼把無障礙網頁導入 Web 開發工作流程。
-- [HTML：無障礙網頁的好開始](/zh-TW/docs/Learn/Accessibility/HTML)
+- [HTML：無障礙網頁的好開始](/zh-TW/docs/Learn_web_development/Core/Accessibility/HTML)
   - : 只要確保在任何時候，正確的 HTML 元素都用於正確的目的，就能消除各種網頁的障礙。這篇文章詳述 HTML 如何確保網頁無障礙。
-- [充分實踐 CSS 與 JavaScript 的無障礙](/zh-TW/docs/Learn/Accessibility/CSS_and_JavaScript)
+- [充分實踐 CSS 與 JavaScript 的無障礙](/zh-TW/docs/Learn_web_development/Core/Accessibility/CSS_and_JavaScript)
   - : 如果 CSS 與 JavaScript 使用得當，將可以為無障礙網頁提供助力……反過來的話，就會嚴重影響無障礙體驗。這篇文章詳述如何在內容複雜的情況下，確保能充分實踐 CSS 與 JavaScript 的無障礙。
 - [WAI-ARIA 基礎](/zh-TW/docs/Learn_web_development/Core/Accessibility/WAI-ARIA_basics)
   - : 從之前的文章來看，有時製作要涉及到非語意的 HTML 還有動態 JavaScript 更新技術……等，會令複雜的 UI 控制變得很困難。WAI-ARIA 正是為了解決此一問題而生。它對瀏覽器和輔助技術添加進一步的語意，讓用戶能知道發生了什麼事。我們將介紹如何在基本層面使用此技術，以提昇無障礙。
-- [無障礙多媒體](/zh-TW/docs/Learn/Accessibility/Multimedia)
+- [無障礙多媒體](/zh-TW/docs/Learn_web_development/Core/Accessibility/Multimedia)
   - : 會導致無障礙網頁出問題的另一個根源是多媒體：影片、聲音、圖片等內容，需要有合適的文字替代，以便輔助技術和它的用戶能夠理解。我們將在這篇文章中闡明作法。
-- [行動無障礙網頁](/zh-TW/docs/Learn/Accessibility/Mobile)
+- [行動無障礙網頁](/zh-TW/docs/Learn_web_development/Core/Accessibility/Mobile)
   - : 隨著行動設備訪問漸受歡迎、還有像是 iOS 與 Android 這般熱門平台，已經具備完善的輔助工具，考慮到如何在這些平台上實踐無障礙網頁，就變得十分重要。這篇文章將討論行動裝置特有的無障礙網頁相關議題。
 
 ## 評估
 
-- [無障礙網頁偵錯](/zh-TW/docs/Learn/Accessibility/Accessibility_troubleshooting)
+- [無障礙網頁偵錯](/zh-TW/docs/Learn_web_development/Core/Accessibility/Accessibility_troubleshooting)
   - : 要評估本模塊，我們會提出一些簡單的網站，你需要偵測有哪些無障礙的問題並修復之。
 
 ## 參見
diff --git a/files/zh-tw/learn_web_development/core/accessibility/wai-aria_basics/index.md b/files/zh-tw/learn_web_development/core/accessibility/wai-aria_basics/index.md
index 3a9c002277dcdb..618079a9bba3e9 100644
--- a/files/zh-tw/learn_web_development/core/accessibility/wai-aria_basics/index.md
+++ b/files/zh-tw/learn_web_development/core/accessibility/wai-aria_basics/index.md
@@ -4,7 +4,7 @@ slug: Learn_web_development/Core/Accessibility/WAI-ARIA_basics
 original_slug: Learn/Accessibility/WAI-ARIA_basics
 ---
 
-{{LearnSidebar}}{{PreviousMenuNext("Learn/Accessibility/CSS_and_JavaScript","Learn/Accessibility/Multimedia", "Learn/Accessibility")}}
+{{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Core/Accessibility/CSS_and_JavaScript","Learn_web_development/Core/Accessibility/Multimedia", "Learn_web_development/Core/Accessibility")}}
 
 接續之前的文章，有時在涉及非語意 HTML 與動態 JavaScript 更新的內容製作複雜的 UI 控制措施將是個難題。WAI-ARIA 即是一個能藉由添加進一步的語意幫助處理這種問題的技術 ，讓瀏覽器與輔助科技可以辨識及用以讓使用者知道發生甚麼事情。這裡我們將展示如何以基本水準的運用來增進無障礙使用。
 
@@ -105,7 +105,7 @@ original_slug: Learn/Accessibility/WAI-ARIA_basics
 
 在下一個章節我們將更仔細地看看這 4 個領域，並附帶實際的範例。在繼續之前，你應該將備妥螢幕報讀器測試設置，以便在過程中你可以測試這些範例。
 
-更多資訊請參見[螢幕報讀器測試](/zh-TW/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders)章節。
+更多資訊請參見[螢幕報讀器測試](/zh-TW/docs/Learn_web_development/Core/Accessibility/Tooling#Screenreaders)章節。
 
 ### 路標/地標
 
@@ -232,7 +232,7 @@ var intervalID = window.setInterval(showQuote, 10000);
 這將使螢幕報讀器在內容更新時讀出更新的內容。
 
 > [!NOTE]
-> 如果你嘗試從 `XMLHttpRequest` 執行 `file://` URL`，`大部分的瀏覽器會拋出安全異常，例如你直接上傳該檔案到瀏覽器(透過雙擊滑鼠鍵等)。為了這項可以執行，你需要將檔案上傳到一個網站伺服器如 [GitHub](/zh-TW/docs/Learn/Common_questions/Tools_and_setup/Using_GitHub_pages)，或本機網站伺服器如 [Python's SimpleHTTPServer](http://www.pythonforbeginners.com/modules-in-python/how-to-use-simplehttpserver/)。
+> 如果你嘗試從 `XMLHttpRequest` 執行 `file://` URL`，`大部分的瀏覽器會拋出安全異常，例如你直接上傳該檔案到瀏覽器(透過雙擊滑鼠鍵等)。為了這項可以執行，你需要將檔案上傳到一個網站伺服器如 [GitHub](/zh-TW/docs/Learn_web_development/Howto/Tools_and_setup/Using_GitHub_pages)，或本機網站伺服器如 [Python's SimpleHTTPServer](http://www.pythonforbeginners.com/modules-in-python/how-to-use-simplehttpserver/)。
 
 這裡有一項額外的考量—只有文字更新才讀出。如果我們也總是讀出標題，那將很好，以讓使用者記住讀出的內容。為做到這樣，我們可以添加 [`aria-atomic`](https://www.w3.org/TR/wai-aria-1.1/#aria-atomic) 屬性到這個部分，再次更新你的 `<section>` 標籤如下所示：
 
@@ -258,7 +258,7 @@ var intervalID = window.setInterval(showQuote, 10000);
 - `tabindex="0"` —如上述，此值允許正常不被 tab 遊走到的元素變得可以 tab 遊走，這是`tabindex`最有用的值。
 - `tabindex="-1"` — 此允許正常不被 tab 遊走到的元素，可以程式化地獲得焦點，如透過 JavaScript 或作為連結的對象。
 
-我們更詳細討論這一點並在我們的 HTML 無障礙文章中展示典型的實作—請參見 [Building keyboard accessibility back in](/zh-TW/docs/Learn/Accessibility/HTML#Building_keyboard_accessibility_back_in).
+我們更詳細討論這一點並在我們的 HTML 無障礙文章中展示典型的實作—請參見 [Building keyboard accessibility back in](/zh-TW/docs/Learn_web_development/Core/Accessibility/HTML#Building_keyboard_accessibility_back_in).
 
 ### 非語意控制措施的無障礙
 
@@ -266,7 +266,7 @@ var intervalID = window.setInterval(showQuote, 10000);
 
 #### 表單驗證與錯誤警告
 
-首先，讓我們再看一次在我們的 CSS 與 JavaScript 無障礙文章中第一次看的表單範例(請閱讀 [Keeping it unobtrusive](/zh-TW/docs/Learn/Accessibility/CSS_and_JavaScript#Keeping_it_unobtrusive)完整回顧)。在本章節文末我們展示當你試著送出表單而驗證錯誤時，出現我們包含一些在錯誤訊息框的 ARIA 屬性。
+首先，讓我們再看一次在我們的 CSS 與 JavaScript 無障礙文章中第一次看的表單範例(請閱讀 [Keeping it unobtrusive](/zh-TW/docs/Learn_web_development/Core/Accessibility/CSS_and_JavaScript#Keeping_it_unobtrusive)完整回顧)。在本章節文末我們展示當你試著送出表單而驗證錯誤時，出現我們包含一些在錯誤訊息框的 ARIA 屬性。
 
 ```html
 <div class="errors" role="alert" aria-relevant="all">
@@ -343,7 +343,7 @@ function toggleMusician(bool) {
 
 #### 描述非語意按鈕為按鈕
 
-本課程我們已經談過幾次按鈕、連結或表單元素(參見 HTML 無障礙文章的 [UI controls](/zh-TW/docs/Learn/Accessibility/HTML#UI_controls) ，以及前述[增強鍵盤無障礙](#增強鍵盤無障礙)的原生無障礙(以及在使用其他元素偽造背後的無障礙議題)。基本上，使用 `tabindex` 與一些 JavaScript，在很多情況下，你可以在沒有太多困難下增加鍵盤無障礙支援功能。
+本課程我們已經談過幾次按鈕、連結或表單元素(參見 HTML 無障礙文章的 [UI controls](/zh-TW/docs/Learn_web_development/Core/Accessibility/HTML#UI_controls) ，以及前述[增強鍵盤無障礙](#增強鍵盤無障礙)的原生無障礙(以及在使用其他元素偽造背後的無障礙議題)。基本上，使用 `tabindex` 與一些 JavaScript，在很多情況下，你可以在沒有太多困難下增加鍵盤無障礙支援功能。
 
 但螢幕報讀器的情況如何呢？他們仍然無法將這些元素視為按鈕。如果我們用螢幕報讀器測試我們的 [fake-div-buttons.html](https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html) 範例，我們偽造的按鈕將會用句子如 "Click me!, group"讀出，很顯然地令人困惑。
 
@@ -364,7 +364,7 @@ function toggleMusician(bool) {
 
 除了標準 HTML 可用外，還有一堆其他[角色](https://www.w3.org/TR/wai-aria-1.1/#role_definitions)可以辨識非語意的元素結構作為一般的使用者介面特徵，例如 [`combobox`](https://www.w3.org/TR/wai-aria-1.1/#combobox), [`slider`](https://www.w3.org/TR/wai-aria-1.1/#slider), [`tabpanel`](https://www.w3.org/TR/wai-aria-1.1/#tabpanel), [`tree`](https://www.w3.org/TR/wai-aria-1.1/#tree)。你可在 [Deque university code library](https://dequeuniversity.com/library/)中找到很多有用的範例，可給你這些控制措施如何做到無障礙的想法。
 
-我們來看看我們自己的範例，我們回到我們簡單的絕對位置頁籤的介面(參見在我們的 CSS 與 JavaScript 無障礙文章中的 [Hiding things](/zh-TW/docs/Learn/Accessibility/CSS_and_JavaScript#Hiding_things) )，你可以找到 [頁籤資訊框範例](https://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html)(看[原始碼](https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html)).
+我們來看看我們自己的範例，我們回到我們簡單的絕對位置頁籤的介面(參見在我們的 CSS 與 JavaScript 無障礙文章中的 [Hiding things](/zh-TW/docs/Learn_web_development/Core/Accessibility/CSS_and_JavaScript#Hiding_things) )，你可以找到 [頁籤資訊框範例](https://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html)(看[原始碼](https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html)).
 
 本範例以鍵盤無障礙而言運作正常—你可以開心地在不同的頁籤間跳位，並且選擇他們顯示該頁籤的內容，也相當地容易操作—你可以滾動內容並使用標題來導覽，即使你看不到螢幕上正發生的事情。然而內容是甚麼並非很明顯—螢幕報讀器目前以連結的清單報讀內容，以及有三個標題的內容。這樣無法給你了解內容之間的關係。最好給予使用者更多關於內容結構的線索。
 
@@ -436,4 +436,4 @@ function toggleMusician(bool) {
 - [WAI-ARIA Authoring Practices](http://w3c.github.io/aria-practices/) — 由 W3C 發佈之非常詳細的設計模型，解釋如何使用 WAI-ARIA 特徵實作不同類型的複雜 UI 控制措施無障礙
 - [ARIA in HTML](https://www.w3.org/TR/html-aria/) — W3C 標準針對每一個 HTML 特徵定義由瀏覽器設置隱含特徵的無障礙(ARIA)語意，以及如果需要額外的語意，你可以設置的 WAI-ARIA 特徵。
 
-{{PreviousMenuNext("Learn/Accessibility/CSS_and_JavaScript","Learn/Accessibility/Multimedia", "Learn/Accessibility")}}
+{{PreviousMenuNext("Learn_web_development/Core/Accessibility/CSS_and_JavaScript","Learn_web_development/Core/Accessibility/Multimedia", "Learn_web_development/Core/Accessibility")}}
diff --git a/files/zh-tw/learn_web_development/core/accessibility/what_is_accessibility/index.md b/files/zh-tw/learn_web_development/core/accessibility/what_is_accessibility/index.md
index 4b49b6a874cbb5..fef5f134b215e4 100644
--- a/files/zh-tw/learn_web_development/core/accessibility/what_is_accessibility/index.md
+++ b/files/zh-tw/learn_web_development/core/accessibility/what_is_accessibility/index.md
@@ -4,7 +4,7 @@ slug: Learn_web_development/Core/Accessibility/What_is_accessibility
 original_slug: Learn/Accessibility/What_is_accessibility
 ---
 
-{{LearnSidebar}}{{NextMenu("Learn/Accessibility/HTML", "Learn/Accessibility")}}
+{{LearnSidebar}}{{NextMenu("Learn_web_development/Core/Accessibility/Tooling", "Learn_web_development/Core/Accessibility")}}
 
 這篇文章給「到底什麼是無障礙網頁」的模塊，開了個好起頭：以下將包括我們該考慮什麼樣的用戶以及理由、不同的人要在 web 用什麼工具互動、還有如何令無障礙網頁成為 web 開發的一部分。
 
@@ -51,7 +51,7 @@ original_slug: Learn/Accessibility/What_is_accessibility
 - 也有些是自由軟體，例如 [NVDA](http://www.nvaccess.org/)（Windows）、[ChromeVox](http://www.chromevox.com/)（Chrome、Windows、Mac OS X）、[Orca](https://wiki.gnome.org/Projects/Orca)（Linux）
 - 還有些是系統內建，例如 [VoiceOver](https://www.apple.com/accessibility/osx/voiceover/)（Mac OS X 與 iOS）、[Narrator](https://support.microsoft.com/en-us/help/22798/windows-10-narrator-get-started)（Microsoft Windows）、[ChromeVox](http://www.chromevox.com/)（ChromeOS）、[TalkBack](https://play.google.com/store/apps/details?id=com.google.android.marvin.talkback)（Android）。
 
-熟悉螢幕閱讀器是個好主意；你得設定好螢幕閱讀器、還要會使用它，以理解其工作原理。請參見[cross browser testing screen readers guide](/zh-TW/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders)以深入理解。以下影片提供了簡單的體驗。
+熟悉螢幕閱讀器是個好主意；你得設定好螢幕閱讀器、還要會使用它，以理解其工作原理。請參見[cross browser testing screen readers guide](/zh-TW/docs/Learn_web_development/Core/Accessibility/Tooling#Screenreaders)以深入理解。以下影片提供了簡單的體驗。
 
 {{EmbedYouTube("IK97XMibEws")}}
 
@@ -71,7 +71,7 @@ original_slug: Learn/Accessibility/What_is_accessibility
 
 這些殘疾也可能是老化的結果，而不是受到創傷或疾病，或可能是硬體的限制——有些使用者可能沒有滑鼠。
 
-通常影響開發者開發網站的需求是要能使用鍵盤操作網頁——我們會在後續的文內討論使用鍵盤操作網頁。雖然這個需求有些麻煩，但這是一個很好的主意，請開發者嘗試看看。例如：你可以使用 Tab 鍵在表單中切換填寫項目嗎？你可以在我們的[跨瀏覽器測試中找到更多關於使用鍵盤控制網頁的相關資訊](/zh-TW/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Using_native_keyboard_accessibility)。
+通常影響開發者開發網站的需求是要能使用鍵盤操作網頁——我們會在後續的文內討論使用鍵盤操作網頁。雖然這個需求有些麻煩，但這是一個很好的主意，請開發者嘗試看看。例如：你可以使用 Tab 鍵在表單中切換填寫項目嗎？你可以在我們的[跨瀏覽器測試中找到更多關於使用鍵盤控制網頁的相關資訊](/zh-TW/docs/Learn_web_development/Core/Accessibility/Tooling#Using_native_keyboard_accessibility)。
 
 統計數據顯示，許多人有行動障礙。 美國疾病控制和預防中心的[殘疾統計數據（涵蓋範圍為非法人的 18 歲以上成人）](http://www.cdc.gov/nchs/fastats/disability.htm)顯示，在美國，有身體機能障礙者佔成人人口的 15.1% 。
 
@@ -111,7 +111,7 @@ original_slug: Learn/Accessibility/What_is_accessibility
 如果在專案初期就考慮到無障礙網頁，大多數無障礙內容的成本可以最小化。
 
 當在規劃專案時，將無障礙測試納入你的測試中，就像測試其他功能一樣（例如：移動裝置 UI 測試）。
-及早測試、經常測試，理想情況是運行自動化測試以檢測缺少的功能（例如：圖片缺少[替代文字](/zh-TW/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Text_alternatives)、不好的連結文字 － 請參見 [Element relationships and context](/zh-TW/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Element_relationships_and_context)），並做一些測試，為了讓殘疾人士能夠操作更複雜的網站功能。例如：
+及早測試、經常測試，理想情況是運行自動化測試以檢測缺少的功能（例如：圖片缺少[替代文字](/zh-TW/docs/Learn_web_development/Core/Accessibility/Tooling#Text_alternatives)、不好的連結文字 － 請參見 [Element relationships and context](/zh-TW/docs/Learn_web_development/Core/Accessibility/Tooling#Element_relationships_and_context)），並做一些測試，為了讓殘疾人士能夠操作更複雜的網站功能。例如：
 
 - 日期選擇器是否可以提供給螢幕閱讀器的人使用？
 - 如果內容動態更新了，視障人士是否能馬上收到資訊？
@@ -128,7 +128,7 @@ original_slug: Learn/Accessibility/What_is_accessibility
 為了表明你對無障礙網頁的關心，請在你的網站上發佈無障礙網頁聲明，並詳細說明你為無障礙網頁做了哪些事情、採取了哪些步驟。如果有人抱怨你的網站存在無障礙問題，請他們回報給你們，並嘗試解決。
 
 > [!NOTE]
-> 我們的 [Handling common accessibility problems article](/zh-TW/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility) 包含了應該進行詳細測試的無障礙網頁規範。
+> 我們的 [Handling common accessibility problems article](/zh-TW/docs/Learn_web_development/Core/Accessibility/Tooling) 包含了應該進行詳細測試的無障礙網頁規範。
 
 總而言之：
 
@@ -166,4 +166,4 @@ original_slug: Learn/Accessibility/What_is_accessibility
 
 本文應當使你對無障礙網頁有著概括性的認知、明白其重要性、並在知道如何在工作流程中安排它。你也該對知道如何實做無障礙網頁的細節有興趣。我們將在下個章節開始闡明為什麼 HTML 是無障礙網頁的好基礎。
 
-{{NextMenu("Learn/Accessibility/HTML", "Learn/Accessibility")}}
+{{NextMenu("Learn_web_development/Core/Accessibility/Tooling", "Learn_web_development/Core/Accessibility")}}
diff --git a/files/zh-tw/learn_web_development/core/css_layout/index.md b/files/zh-tw/learn_web_development/core/css_layout/index.md
index 29a0f3f9a93585..6236321e3e3845 100644
--- a/files/zh-tw/learn_web_development/core/css_layout/index.md
+++ b/files/zh-tw/learn_web_development/core/css_layout/index.md
@@ -14,7 +14,7 @@ original_slug: Learn/CSS/CSS_layout
 
 1. 對 HTML 有基本的認知，如 [HTML 簡介](/zh-TW/docs/Learn_web_development/Core/Structuring_content) 單元中所述。
 2. 熟悉 CSS 基本原理，如 [CSS 簡介](/zh-TW/docs/Learn_web_development/Core/Styling_basics)中所述。
-3. 了解如何 [樣式框](/zh-TW/docs/Learn/CSS/Building_blocks)。
+3. 了解如何 [樣式框](/zh-TW/docs/Learn_web_development/Core/Styling_basics)。
 
 > [!NOTE]
 > 如果你正在使用的電腦/平板/其他設備讓你無法建立自己的文件，你可以透過線上工具如 [JSBin](https://jsbin.com/) 或 [Glitch](https://glitch.com/) 編輯並嘗試（大部分的）範例程式碼。
@@ -23,28 +23,28 @@ original_slug: Learn/CSS/CSS_layout
 
 這些文章旨在提供關於 CSS 中可用的技術以及基本排版工具和技術的指導。在課程的結尾有一個評估測驗——配置一個網頁的版面，這可以幫助你了解你對 CSS 排版方式的理解程度。
 
-- [CSS 排版介紹](/zh-TW/docs/Learn/CSS/CSS_layout/Introduction)
+- [CSS 排版介紹](/zh-TW/docs/Learn_web_development/Core/CSS_layout/Introduction)
   - : 這篇文章將回顧一些之前單元中提過的 CSS 排版特性，像是不同的{{cssxref("display")}} 參數，藉由這個單元我們將介紹一些基本概念。
-- [常規流](/zh-TW/docs/Learn/CSS/CSS_layout/Normal_Flow)
+- [常規流](/zh-TW/docs/Learn_web_development/Core/CSS_layout/Introduction)
   - : 在我們做任何事之前，網頁上的元素會根據常規流自行排列。這篇文章解釋常規流的基礎知識，用來學習如何改變它。
-- [彈性盒子](/zh-TW/docs/Learn/CSS/CSS_layout/Flexbox)
+- [彈性盒子](/zh-TW/docs/Learn_web_development/Core/CSS_layout/Flexbox)
   - : [彈性盒子](/zh-TW/docs/Web/CSS/CSS_flexible_box_layout/Typical_use_cases_of_flexbox)是一維空間的排版方式，用來讓項目以行或列的方式排列。項目會延展或限縮來符合較大或較小的空間。這篇文章會解釋基礎原理。
-- [網格](/zh-TW/docs/Learn/CSS/CSS_layout/Grids)
+- [網格](/zh-TW/docs/Learn_web_development/Core/CSS_layout/Grids)
   - : CSS 網格排版是一個二維空間的網頁排版系統。它讓你將內容排入行與列中，且它有許多功能讓你在建立複雜的排版時變得簡單明瞭。這篇文章會告訴你全部。
-- [浮動](/zh-TW/docs/Learn/CSS/CSS_layout/Floats)
+- [浮動](/zh-TW/docs/Learn_web_development/Core/CSS_layout/Floats)
   - : 最初是為了在文字區塊中浮動排列圖片，而後為了在網頁中建造多攔排版{{cssxref("float")}} 屬性成為了最常用的工具之一。這篇文章會解釋如何使用。
-- [定位](/zh-TW/docs/Learn/CSS/CSS_layout/Positioning)
+- [定位](/zh-TW/docs/Learn_web_development/Core/CSS_layout/Positioning)
   - : 定位准許將元素從正常的文檔流中脫離出來，讓他們表現不同，例如設置在另一個模塊的上方，或使模塊在瀏覽器視窗內部始終停留在相同的地方。這篇文章將解釋不同的{{cssxref("position")}} 值和如何使用它們。
-- [多欄排版](/zh-TW/docs/Learn/CSS/CSS_layout/Multiple-column_Layout)
+- [多欄排版](/zh-TW/docs/Learn_web_development/Core/CSS_layout/Multiple-column_Layout)
   - : 多欄排版規格提供你將內容排進欄位的排版方式，像你可能在報紙上看到的那樣。這篇文章會解釋如何使用這個功能。
-- [舊式排版方式](/zh-TW/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods)
+- [舊式排版方式](/zh-TW/docs/Learn_web_development/Core/CSS_layout/Legacy_Layout_Methods)
   - : 網格系統是另一個在 CSS 排版中非常常用的特性，在網格排版出現之前，它通常使用浮動或其他佈局來實現。想像你的佈局為一組列數（如 4, 6, 或 12），然後將你的內容放置在這些虛構的列中。在這篇文章中我們將隨著創建網格系統、看看使用網格框架提供現成的網格框架和體驗 CSS 網格來結束-一個新興的瀏覽器特性使得在 Web 實現網格設計變得大為容易等來探索這些基本的想法。
-- [支援舊版瀏覽器](/zh-TW/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers)
+- [支援舊版瀏覽器](/zh-TW/docs/Learn_web_development/Core/CSS_layout/Supporting_Older_Browsers)
   - : 在這個單元，我們建議你使用彈性盒子和網格作為主要的設計方式。但是有些造訪你網站的人會使用舊版瀏覽器，或者他使用的瀏覽器不支援你的設計方式。以下情形在網路上一定會發生——當新功能開發出來了，不同的瀏覽器會有不同的支援優先級。這篇文章會解釋如何使用現代網頁技術且不遺漏舊技術的使用者。
-- [基礎排版理解測驗](/zh-TW/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension)
+- [基礎排版理解測驗](/zh-TW/docs/Learn_web_development/Core/CSS_layout/Fundamental_Layout_Comprehension)
   - : 配置網頁版面，這是一個測試你對於不同排版方式理解程度的測驗。
 
 ## 參見
 
-- [實際的定位排版範例](/zh-TW/docs/Learn/CSS/CSS_layout/Practical_positioning_examples)
+- [實際的定位排版範例](/zh-TW/docs/Learn_web_development/Core/CSS_layout/Practical_positioning_examples)
   - : 這篇文章會告訴你如何建立一些真實的範例來說明什麼樣的情況你可以使用定位排版。
diff --git a/files/zh-tw/learn_web_development/core/frameworks_libraries/angular_building/index.md b/files/zh-tw/learn_web_development/core/frameworks_libraries/angular_building/index.md
index 6bff24248adc6a..504ad41a248335 100644
--- a/files/zh-tw/learn_web_development/core/frameworks_libraries/angular_building/index.md
+++ b/files/zh-tw/learn_web_development/core/frameworks_libraries/angular_building/index.md
@@ -13,14 +13,14 @@ original_slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular
     <tr>
       <th scope="row">預備知識：</th>
       <td>
-        熟悉 <a href="/zh-TW/docs/Learn/HTML">HTML</a>、<a
-          href="/zh-TW/docs/Learn/CSS"
+        熟悉 <a href="/zh-TW/docs/Learn_web_development/Core/Structuring_content">HTML</a>、<a
+          href="/zh-TW/docs/Learn_web_development/Core/Styling_basics"
           >CSS</a
         >
         和
-        <a href="/zh-TW/docs/Learn/JavaScript">JavaScript</a> 的主要概念，以及
+        <a href="/zh-TW/docs/Learn_web_development/Core/Scripting">JavaScript</a> 的主要概念，以及
         <a
-          href="/zh-TW/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line"
+          href="/zh-TW/docs/Learn_web_development/Getting_started/Environment_setup/Command_line"
           >終端機／命令列</a
         >
         的知識。
diff --git a/files/zh-tw/learn_web_development/core/frameworks_libraries/angular_filtering/index.md b/files/zh-tw/learn_web_development/core/frameworks_libraries/angular_filtering/index.md
index ed5e53d7bb068a..9e4fd9d29ea509 100644
--- a/files/zh-tw/learn_web_development/core/frameworks_libraries/angular_filtering/index.md
+++ b/files/zh-tw/learn_web_development/core/frameworks_libraries/angular_filtering/index.md
@@ -4,7 +4,7 @@ slug: Learn_web_development/Core/Frameworks_libraries/Angular_filtering
 original_slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_filtering
 ---
 
-{{LearnSidebar}}{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_item_component","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_building", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
+{{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Core/Frameworks_libraries/Angular_item_component","Learn_web_development/Core/Frameworks_libraries/Angular_building", "Learn_web_development/Core/Frameworks_libraries")}}
 
 現在讓我們來增加功能，讓使用者篩選待辦事項，這樣他們就可以選擇查看進行中、已完成，或是全部的事項。
 
@@ -13,10 +13,10 @@ original_slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular
     <tr>
       <th scope="row">預備知識：</th>
       <td>
-        熟悉基礎的 <a href="/zh-TW/docs/Learn/HTML">HTML</a> ，
-        <a href="/zh-TW/docs/Learn/CSS">CSS</a> 與
-        <a href="/zh-TW/docs/Learn/JavaScript">JavaScript</a> 語言，以及<a
-          href="/zh-TW/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line"
+        熟悉基礎的 <a href="/zh-TW/docs/Learn_web_development/Core/Structuring_content">HTML</a> ，
+        <a href="/zh-TW/docs/Learn_web_development/Core/Styling_basics">CSS</a> 與
+        <a href="/zh-TW/docs/Learn_web_development/Core/Scripting">JavaScript</a> 語言，以及<a
+          href="/zh-TW/docs/Learn_web_development/Getting_started/Environment_setup/Command_line"
           >終端機/命令列</a
         >的知識。
       </td>
@@ -91,4 +91,4 @@ class 屬性可以用使用方括號 `[]` 來綁定，控制按鍵上的文字
 
 真是快！因為你已經有了 `filter` 的程式碼在 `app.component.ts` 中，你所需要做的就是編輯模板，以便於提供篩選項的控制項。我們的下一個，同時也是最後一個主題，探討了如何建立用於生產環境的 Angular 應用程式，並且提供了近一步的資源來帶領繼續你踏上學習之旅。
 
-{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_item_component","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_building", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
+{{PreviousMenuNext("Learn_web_development/Core/Frameworks_libraries/Angular_item_component","Learn_web_development/Core/Frameworks_libraries/Angular_building", "Learn_web_development/Core/Frameworks_libraries")}}
diff --git a/files/zh-tw/learn_web_development/core/frameworks_libraries/angular_getting_started/index.md b/files/zh-tw/learn_web_development/core/frameworks_libraries/angular_getting_started/index.md
index e1dc344dce185c..848555f53b9315 100644
--- a/files/zh-tw/learn_web_development/core/frameworks_libraries/angular_getting_started/index.md
+++ b/files/zh-tw/learn_web_development/core/frameworks_libraries/angular_getting_started/index.md
@@ -4,7 +4,7 @@ slug: Learn_web_development/Core/Frameworks_libraries/Angular_getting_started
 original_slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_getting_started
 ---
 
-{{LearnSidebar}}{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_todo_list_beginning", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
+{{LearnSidebar}}{{NextMenu("Learn_web_development/Core/Frameworks_libraries/Angular_todo_list_beginning", "Learn_web_development/Core/Frameworks_libraries")}}
 
 現在該看一下 Google 的 Angular 框架了，這是另一個你經常會遇到的前端框架。在本文中，我們將會探索 Angular 所提供的功能、安裝必備工具、建立範例應用程式，並進一步瞭解 Angular 的基本架構。
 
@@ -13,11 +13,11 @@ original_slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular
     <tr>
       <th scope="row">預備知識：</th>
       <td>
-        熟悉基本的<a href="/zh-TW/docs/Learn/HTML">HTML</a>、
-        <a href="/zh-TW/docs/Learn/CSS">CSS</a>、以及
-        <a href="/zh-TW/docs/Learn/JavaScript">JavaScript</a>程式語言，具備
+        熟悉基本的<a href="/zh-TW/docs/Learn_web_development/Core/Structuring_content">HTML</a>、
+        <a href="/zh-TW/docs/Learn_web_development/Core/Styling_basics">CSS</a>、以及
+        <a href="/zh-TW/docs/Learn_web_development/Core/Scripting">JavaScript</a>程式語言，具備
         <a
-          href="/zh-TW/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line"
+          href="/zh-TW/docs/Learn_web_development/Getting_started/Environment_setup/Command_line"
           >終端機/命令列環境</a
         >的基本知識。
       </td>
@@ -276,4 +276,4 @@ export class AppComponent {
 
 以上這些就是關於 Angular 的簡介。這時候的你，應該已經對 Angular 的運作有基本的了解，並準備建立一個 Angular 的專案。在下一篇文章裡，我們會更深入的應用這些知識，並且試著用 Angular 去寫一個「待辦清單」。
 
-{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_todo_list_beginning", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
+{{NextMenu("Learn_web_development/Core/Frameworks_libraries/Angular_todo_list_beginning", "Learn_web_development/Core/Frameworks_libraries")}}
diff --git a/files/zh-tw/learn_web_development/core/frameworks_libraries/angular_item_component/index.md b/files/zh-tw/learn_web_development/core/frameworks_libraries/angular_item_component/index.md
index cb237a04220908..bea3107dd127a8 100644
--- a/files/zh-tw/learn_web_development/core/frameworks_libraries/angular_item_component/index.md
+++ b/files/zh-tw/learn_web_development/core/frameworks_libraries/angular_item_component/index.md
@@ -4,7 +4,7 @@ slug: Learn_web_development/Core/Frameworks_libraries/Angular_item_component
 original_slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_item_component
 ---
 
-{{LearnSidebar}}{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_styling","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_filtering", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
+{{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Core/Frameworks_libraries/Angular_styling","Learn_web_development/Core/Frameworks_libraries/Angular_filtering", "Learn_web_development/Core/Frameworks_libraries")}}
 
 元件可以用來幫助你組織你的應用程式。這篇文章會引導你建立一個元件，用來管理清單列表中的個別項目，包含加入核取方塊、編輯和刪除功能。這邊也會介紹 Angular 事件模型。
 
@@ -13,12 +13,12 @@ original_slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular
     <tr>
       <th scope="row">預備知識：</th>
       <td>
-        熟悉主要的 <a href="/zh-TW/docs/Learn/HTML">HTML</a>，<a
-          href="/zh-TW/docs/Learn/CSS"
+        熟悉主要的 <a href="/zh-TW/docs/Learn_web_development/Core/Structuring_content">HTML</a>，<a
+          href="/zh-TW/docs/Learn_web_development/Core/Styling_basics"
           >CSS</a
         >
-        和 <a href="/zh-TW/docs/Learn/JavaScript">JavaScript</a> 語言和<a
-          href="/zh-TW/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line"
+        和 <a href="/zh-TW/docs/Learn_web_development/Core/Scripting">JavaScript</a> 語言和<a
+          href="/zh-TW/docs/Learn_web_development/Getting_started/Environment_setup/Command_line"
           >terminal/command line</a
         >知識。
       </td>
@@ -377,4 +377,4 @@ Adapted from https://css-tricks.com/the-checkbox-hack/#custom-designed-radio-but
 
 你現在應該擁有一個樣式化的 Angular 待辦事項列表應用程序，該應用程序可以添加，編輯和刪除項目。下一步是加入過濾功能，以便你可以查看符合特定條件的項目。
 
-{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_styling","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_filtering", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
+{{PreviousMenuNext("Learn_web_development/Core/Frameworks_libraries/Angular_styling","Learn_web_development/Core/Frameworks_libraries/Angular_filtering", "Learn_web_development/Core/Frameworks_libraries")}}
diff --git a/files/zh-tw/learn_web_development/core/frameworks_libraries/angular_styling/index.md b/files/zh-tw/learn_web_development/core/frameworks_libraries/angular_styling/index.md
index c04cf00763deb5..4cb6cd0e039685 100644
--- a/files/zh-tw/learn_web_development/core/frameworks_libraries/angular_styling/index.md
+++ b/files/zh-tw/learn_web_development/core/frameworks_libraries/angular_styling/index.md
@@ -4,7 +4,7 @@ slug: Learn_web_development/Core/Frameworks_libraries/Angular_styling
 original_slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_styling
 ---
 
-{{LearnSidebar}}{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_todo_list_beginning","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_item_component", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
+{{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Core/Frameworks_libraries/Angular_todo_list_beginning","Learn_web_development/Core/Frameworks_libraries/Angular_item_component", "Learn_web_development/Core/Frameworks_libraries")}}
 
 現在，我們已經建立了基本的應用程式結構，並加入了內容，接著我們就要來對應用程式進行樣式的調整，透過本篇文章來學習如何使用樣式點綴我們的 Angular 應用程式。
 
@@ -13,13 +13,13 @@ original_slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular
     <tr>
       <th scope="row">預備知識：</th>
       <td>
-        熟悉 <a href="/zh-TW/docs/Learn/HTML">HTML</a>、<a
-          href="/zh-TW/docs/Learn/CSS"
+        熟悉 <a href="/zh-TW/docs/Learn_web_development/Core/Structuring_content">HTML</a>、<a
+          href="/zh-TW/docs/Learn_web_development/Core/Styling_basics"
           >CSS</a
         >
-        以及 <a href="/zh-TW/docs/Learn/JavaScript">JavaScript</a> 的核心，了解
+        以及 <a href="/zh-TW/docs/Learn_web_development/Core/Scripting">JavaScript</a> 的核心，了解
         <a
-          href="/zh-TW/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line"
+          href="/zh-TW/docs/Learn_web_development/Getting_started/Environment_setup/Command_line"
           >終端機/命令列（terminal/command line）</a
         >相關知識。
       </td>
@@ -172,4 +172,4 @@ ul li {
 
 我們對 Angular 樣式的簡介也告一個段落了，接下來讓我們開始幫應用程式加上功能吧。在下一篇文章中，我們將建立一個適用於待辦事項的元件，並使其成為可以讓你標示完成、編輯以及刪除待辦事項。
 
-{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_todo_list_beginning","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_item_component", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
+{{PreviousMenuNext("Learn_web_development/Core/Frameworks_libraries/Angular_todo_list_beginning","Learn_web_development/Core/Frameworks_libraries/Angular_item_component", "Learn_web_development/Core/Frameworks_libraries")}}
diff --git a/files/zh-tw/learn_web_development/core/frameworks_libraries/angular_todo_list_beginning/index.md b/files/zh-tw/learn_web_development/core/frameworks_libraries/angular_todo_list_beginning/index.md
index f5919b94d4a410..3978f5db73ffe0 100644
--- a/files/zh-tw/learn_web_development/core/frameworks_libraries/angular_todo_list_beginning/index.md
+++ b/files/zh-tw/learn_web_development/core/frameworks_libraries/angular_todo_list_beginning/index.md
@@ -4,7 +4,7 @@ slug: Learn_web_development/Core/Frameworks_libraries/Angular_todo_list_beginnin
 original_slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_todo_list_beginning
 ---
 
-{{LearnSidebar}}{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_getting_started","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_styling", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
+{{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Core/Frameworks_libraries/Angular_getting_started","Learn_web_development/Core/Frameworks_libraries/Angular_styling", "Learn_web_development/Core/Frameworks_libraries")}}
 
 此刻，我們已準備好使用 Angular 來創建我們的待辦事項應用程式。完成後的應用程式將具有顯示待辦項目列表，並包含編輯、刪除與新增項目等功能。在本篇中，你將學到應用程式的結構，以及建立一個可顯示待辦項目的基礎列表。
 
@@ -13,11 +13,11 @@ original_slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular
     <tr>
       <th scope="row">預備知識：</th>
       <td>
-        熟悉網頁核心語言 <a href="/zh-TW/docs/Learn/HTML">HTML</a> 、
-        <a href="/zh-TW/docs/Learn/CSS">CSS</a> 與
-        <a href="/zh-TW/docs/Learn/JavaScript">JavaScript</a> ，並具備
+        熟悉網頁核心語言 <a href="/zh-TW/docs/Learn_web_development/Core/Structuring_content">HTML</a> 、
+        <a href="/zh-TW/docs/Learn_web_development/Core/Styling_basics">CSS</a> 與
+        <a href="/zh-TW/docs/Learn_web_development/Core/Scripting">JavaScript</a> ，並具備
         <a
-          href="/zh-TW/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line"
+          href="/zh-TW/docs/Learn_web_development/Getting_started/Environment_setup/Command_line"
           >terminal/command line</a
         >
         相關知識。
@@ -217,4 +217,4 @@ addItem(description: string) {
 
 目前為止，你應該已經在你的瀏覽器中顯示待辦事項列表。這是很大的進展！當然，我們仍有很多事要做。在下一篇文章，我們將研究在應用程式中加入一些樣式。
 
-{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_getting_started","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_styling", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
+{{PreviousMenuNext("Learn_web_development/Core/Frameworks_libraries/Angular_getting_started","Learn_web_development/Core/Frameworks_libraries/Angular_styling", "Learn_web_development/Core/Frameworks_libraries")}}
diff --git a/files/zh-tw/learn_web_development/core/frameworks_libraries/index.md b/files/zh-tw/learn_web_development/core/frameworks_libraries/index.md
index 56dfce6093fe92..41629482e9bf88 100644
--- a/files/zh-tw/learn_web_development/core/frameworks_libraries/index.md
+++ b/files/zh-tw/learn_web_development/core/frameworks_libraries/index.md
@@ -31,7 +31,7 @@ JavaScript 框架在前端開發佔有重要的地位：它能讓前端工程師
 
 - [1. 前端框架介紹](/zh-TW/docs/Learn_web_development/Core/Frameworks_libraries/Introduction)
   - : 我們從整體概述來探討框架、提供 JavaScript 與框架的簡要歷史、框架存在的理由、他們提供什麼東西、如何決定選擇哪個框架、以及前端框架的的替代方案。
-- [2. 框架的主要功能](/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features)
+- [2. 框架的主要功能](/zh-TW/docs/Learn_web_development/Core/Frameworks_libraries/Main_features)
   - : 大多數主要的 JavaScript 前端框架在更動 DOM、處理瀏覽器事件、還有提供良好的開發體驗方面，使出了不同的方法。這篇文章將探討「四大框架」的主要功能、看看他們如完成高層次工作、以及這四個框架的相異之處。
 
 ## React 教學
@@ -45,15 +45,15 @@ JavaScript 框架在前端開發佔有重要的地位：它能讓前端工程師
   - : 在這裡我們將開始與 React 打招呼。我們將探索其背景和用途的一些細節、在自己的電腦建立 React 全家桶、還有建立與把玩簡單的程式，以理解 React 是怎麼跑的。
 - [2. 建立我們的 React todo list](/zh-TW/docs/Learn_web_development/Core/Frameworks_libraries/React_todo_list_beginning)
   - : 我們的任務是驗證 React 的概念（proof-of-concept）：我們將建立一個能讓使用者添加、編輯、刪除需要的工作，同時在不刪除工作的情況下，將它們標記為完成。本文將完成 `App` 組件的基本架構與樣式，以便為下個文章將探討的組件定義與響應性做準備。
-- [3. 把 React app 組件化](/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components)
+- [3. 把 React app 組件化](/zh-TW/docs/Learn_web_development/Core/Frameworks_libraries/React_components)
   - : 現在，我們的 app 整個黏在一起了。在做其他事情前，最好把這個程式切成一個個能管理，描述性也好的組件（component）。React 本身對組件的定義不多：那是取決於你的考量！我們將展示如何以聰明的方法，把程式切成一個個組件。
-- [4. 響應性 React：事件與狀態](/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state)
+- [4. 響應性 React：事件與狀態](/zh-TW/docs/Learn_web_development/Core/Frameworks_libraries/React_interactivity_events_state)
   - : 在組件化以後，現在開始把原本靜態的 UI，能開始與我們實際互動，並修改資料吧。在這裡除了做這件事以外，我們還會深入探討事件和狀態。
-- [5. 響應性 React：編輯、過濾、條件式過濾](/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering)
+- [5. 響應性 React：編輯、過濾、條件式過濾](/zh-TW/docs/Learn_web_development/Core/Frameworks_libraries/React_interactivity_filtering_conditional_rendering)
   - : 在初學 React 之路即將結束前（至少從現在來說），我們將在 Todo list app 裡面，添加畫龍點睛的主要功能：包括編輯已存在的工作、透過給定條件過濾全部、已完成、或未完成的工作。我們將不斷探討條件式 UI 渲染。
-- [6. React 無障礙](/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility)
+- [6. React 無障礙](/zh-TW/docs/Learn_web_development/Core/Frameworks_libraries/React_accessibility)
   - : 在教學最後，我們將削除最後的障礙：像是能增進可用性，同時降低鍵盤與螢幕報讀用戶困惑的 focus 管理。
-- [7. React 的資源](/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources)
+- [7. React 的資源](/zh-TW/docs/Learn_web_development/Core/Frameworks_libraries/React_resources)
   - : 最後的最後，我們將提供鑽研 React 所需的資源。
 
 ## Ember 教學
@@ -63,17 +63,17 @@ JavaScript 框架在前端開發佔有重要的地位：它能讓前端工程師
 >
 > 如果想看看最新的程式，可以從我們的 [ember-todomvc-tutorial repository](https://github.com/NullVoxPopuli/ember-todomvc-tutorial/tree/master/steps/00-finished-todomvc/todomvc) 或互動性的 <https://nullvoxpopuli.github.io/ember-todomvc-tutorial/> 看。注意：部分功能沒有放在教學裡面。
 
-- [1. 開始學 Ember](/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started)
+- [1. 開始學 Ember](/zh-TW/docs/Learn_web_development/Core/Frameworks_libraries/Ember_getting_started)
   - : 首先我們將探討 Ember 的原理與用途，還有如何安裝 Ember 全家桶，建立簡單的 app，最後還有完成開發環境。
-- [2. Ember app 架構與組件](/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization)
+- [2. Ember app 架構與組件](/zh-TW/docs/Learn_web_development/Core/Frameworks_libraries/Ember_structure_componentization)
   - : In this article we'll get right on with planning out the structure of our TodoMVC Ember app, adding in the HTML for it, and then breaking that HTML structure into components.
-- [3. 響應性 Ember：事件、類別、狀態](/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state)
+- [3. 響應性 Ember：事件、類別、狀態](/zh-TW/docs/Learn_web_development/Core/Frameworks_libraries/Ember_interactivity_events_state)
   - : 此時，我們將開始給 app 添加一些響應性，從而能夠添加和顯示新的待辦事項。在此過程中，我們將研究如何在 Ember 中使用事件，創建組件類以包含用於控制交互功能的 JavaScript 程式，以及設置服務來跟踪應用程序的資料狀態。
-- [4. 響應性 Ember：Footer 功能、條件式渲染](/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer)
+- [4. 響應性 Ember：Footer 功能、條件式渲染](/zh-TW/docs/Learn_web_development/Core/Frameworks_libraries/Ember_conditional_footer)
   - : 現在是時候開始處理我們應用程序中的 Footer 功能了。在這裡，我們將更新待辦事項計數器，以顯示仍需完成的正確待辦事項數量，並將樣式正確應用於已完成待辦事項（即已選中復選框的位置）。我們還將連接「清除完成」按鈕。在此過程中，我們將學習在模板中使用條件式渲染的知識。
-- [5. Ember 的路由](/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing)
+- [5. Ember 的路由](/zh-TW/docs/Learn_web_development/Core/Frameworks_libraries/Ember_routing)
   - : 在本文中，我們學習了路由，有時也稱為基於 URL 的過濾。我們將使用它為三個 Todo 視圖（「全部」、「活動」、「已完成」）中的每個視圖提供唯一的 URL。
-- [6. Ember 的資源與除錯](/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources)
+- [6. Ember 的資源與除錯](/zh-TW/docs/Learn_web_development/Core/Frameworks_libraries/Ember_resources)
   - : 最後的最後，我們將提供鑽研 Ember 所需的資源，以及好用的相關資訊。
 
 ## Vue 教學
@@ -87,19 +87,19 @@ JavaScript 框架在前端開發佔有重要的地位：它能讓前端工程師
   - : 我們首先來介紹 Vue 吧。首先我們將聊聊 Vue 的背景、理解如何安裝新的專案、研究專案的整體架構與單一組件、如何讓專案在自己的電腦執行、並準備好建立一個新範例。
 - [2. 建立第一個 Vue 組件](/zh-TW/docs/Learn_web_development/Core/Frameworks_libraries/Vue_first_component)
   - : 現在來開始鑽研 Vue 並建立第一個組件吧：我們將給 todo list 的各個單元建立獨立的組件。在此同時，我們將學習一些重要概念：比如說在組件內使用組件、透過 prop 傳送資料、還有儲存資料的狀態。
-- [3. 渲染 Vue 組件的列表](/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists)
+- [3. 渲染 Vue 組件的列表](/zh-TW/docs/Learn_web_development/Core/Frameworks_libraries/Vue_rendering_lists)
   - : 現在我們已經有了一個能動的組件；現在將要給我們的 App 添加 `ToDoItem` 這個組件了。在這裡，我們將專精於如何給 `App.vue` 組件，添加一組 todo 的資料，接著使用 `v-for` 指令（directive）讓 `ToDoItem` 透過迴圈顯示出來。
-- [4. 寫一個 todo 表單：Vue 的事件、方法、model](/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models)
+- [4. 寫一個 todo 表單：Vue 的事件、方法、model](/zh-TW/docs/Learn_web_development/Core/Frameworks_libraries/Vue_methods_events_models)
   - : 我們已經放了一些資料，同時也透過迴圈把 `ToDoItem` 渲染出來了。接下來，我們將讓使用者輸入 todo 項目、同時需要文字 `<input>`、submit 之後的事件觸發、還有能控制資料的 model。這些就是我們會探討的重點。
-- [5. 透過 CSS 樣式化 Vue 組件](/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling)
+- [5. 透過 CSS 樣式化 Vue 組件](/zh-TW/docs/Learn_web_development/Core/Frameworks_libraries/Vue_styling)
   - : 我們的程式看起來終於要漂亮一點了。我們將探討如何透過 CSS 樣式化 Vue 組件。
-- [6. 使用 Vue 的計算屬性](/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties)
+- [6. 使用 Vue 的計算屬性](/zh-TW/docs/Learn_web_development/Core/Frameworks_libraries/Vue_computed_properties)
   - : 在這裡我們將使用 Vue 的計算（computed）屬性，加上一個 counter 已便顯示完成工作的數量。計算屬性的功能與 methods 類似，但它只會在資料更新時變動資料。
-- [7. Vue 的條件式渲染：編輯已存在的待辦](/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering)
+- [7. Vue 的條件式渲染：編輯已存在的待辦](/zh-TW/docs/Learn_web_development/Core/Frameworks_libraries/Vue_conditional_rendering)
   - : 現在來添加一個還沒探討到的重要功能吧：那就是編輯已經存在的項目。要完成這件事，我們將借用 Vue 在條件式渲染的長才——也就是 `v-if` 與 `v-else`——在現有 todo 項目視圖間切換，同時編輯能更新的視圖。我們還會探討如何添加刪除待辦的功能。
-- [8. 重點管理 Vue ref](/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management)
+- [8. 重點管理 Vue ref](/zh-TW/docs/Learn_web_development/Core/Frameworks_libraries/Vue_refs_focus_management)
   - : 我們快講完 Vue 了。最後要看的功能是 focus 管理，或者換句話說，如何消除鍵盤用戶的障礙。我們會看看怎麼透過 Vue ref 完成這件事：這是一項能透過虛擬 DOM、或組件的內部 DOM 結構，直接訪問 DOM 節點的進階功能。
-- [9. Vue 的資源](/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources)
+- [9. Vue 的資源](/zh-TW/docs/Learn_web_development/Core/Frameworks_libraries/Vue_resources)
   - : 最後的最後，我們將提供鑽研 Vue 所需的資源，以及有用的資訊。
 
 ## Svelte 教學
@@ -115,15 +115,15 @@ JavaScript 框架在前端開發佔有重要的地位：它能讓前端工程師
   - : Now that we have a basic understanding of how things work in Svelte, we can start building our example app: a todo list. In this article we will first have a look at the desired functionality of our app, then we'll create a `Todos.svelte` component and put static markup and styles in place, leaving everything ready to start developing our To-Do list app features, which we'll go on to in subsequent articles.
 - [3. Dynamic behavior in Svelte: working with variables and props](/zh-TW/docs/Learn_web_development/Core/Frameworks_libraries/Svelte_variables_props)
   - : Now that we have our markup and styles ready we can start developing the required features for our Svelte To-Do list app. In this article we'll be using variables and props to make our app dynamic, allowing us to add and delete todos, mark them as complete, and filter them by status.
-- [4. Componentizing our Svelte app](/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_components)
+- [4. Componentizing our Svelte app](/zh-TW/docs/Learn_web_development/Core/Frameworks_libraries/Svelte_components)
   - : The central objective of this article is to look at how to break our app into manageable components and share information between them. We'll componentize our app, then add more functionality to allow users to update existing components.
-- [5. Advanced Svelte: Reactivity, lifecycle, accessibility](/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_reactivity_lifecycle_accessibility)
+- [5. Advanced Svelte: Reactivity, lifecycle, accessibility](/zh-TW/docs/Learn_web_development/Core/Frameworks_libraries/Svelte_reactivity_lifecycle_accessibility)
   - : In this article we will add the app's final features and further componentize our app. We will learn how to deal with reactivity issues related to updating objects and arrays. To avoid common pitfalls, we'll have to dig a little deeper into Svelte's reactivity system. We'll also look at solving some accessibility focus issues, and more besides.
-- [6. Working with Svelte stores](/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_stores)
+- [6. Working with Svelte stores](/zh-TW/docs/Learn_web_development/Core/Frameworks_libraries/Svelte_stores)
   - : In this article we will show another way to handle state management in Svelte — [Stores](https://svelte.dev/tutorial/writable-stores). Stores are global data repositories that hold values. Components can subscribe to stores and receive notifications when their values change.
-- [7. TypeScript support in Svelte](/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript)
+- [7. TypeScript support in Svelte](/zh-TW/docs/Learn_web_development/Core/Frameworks_libraries/Svelte_TypeScript)
   - : We will now learn how to use TypeScript in Svelte applications. First we'll learn what TypeScript is and what benefits it can bring us. Then we'll see how to configure our project to work with TypeScript files. Finally we will go over our app and see what modifications we have to make to fully take advantage of TypeScript features.
-- [8. Deployment and next steps](/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next)
+- [8. Deployment and next steps](/zh-TW/docs/Learn_web_development/Core/Frameworks_libraries/Svelte_deployment_next)
   - : In this final article we will look at how to deploy your application and get it online, and also share some of the resources that you should go on to, to continue your Svelte learning journey.
 
 ## Angular 教學
diff --git a/files/zh-tw/learn_web_development/core/frameworks_libraries/introduction/index.md b/files/zh-tw/learn_web_development/core/frameworks_libraries/introduction/index.md
index e5795d57c8fda1..a57288489f2206 100644
--- a/files/zh-tw/learn_web_development/core/frameworks_libraries/introduction/index.md
+++ b/files/zh-tw/learn_web_development/core/frameworks_libraries/introduction/index.md
@@ -4,7 +4,7 @@ slug: Learn_web_development/Core/Frameworks_libraries/Introduction
 original_slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction
 ---
 
-{{LearnSidebar}}{{NextMenu("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
+{{LearnSidebar}}{{NextMenu("Learn_web_development/Core/Frameworks_libraries/Main_features", "Learn_web_development/Core/Frameworks_libraries")}}
 
 我們從整體概述來探討框架、提供 JavaScript 與框架的簡要歷史、框架存在的理由、他們提供什麼東西、如何決定選擇哪個框架、以及前端框架的的替代方案。
 
@@ -13,10 +13,10 @@ original_slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introdu
     <tr>
       <th scope="row">先決條件：</th>
       <td>
-        熟悉 <a href="/zh-TW/docs/Learn/HTML">HTML</a>、<a
-          href="/zh-TW/docs/Learn/CSS"
+        熟悉 <a href="/zh-TW/docs/Learn_web_development/Core/Structuring_content">HTML</a>、<a
+          href="/zh-TW/docs/Learn_web_development/Core/Styling_basics"
           >CSS</a
-        >、<a href="/zh-TW/docs/Learn/JavaScript">JavaScript</a> 這些核心技術。
+        >、<a href="/zh-TW/docs/Learn_web_development/Core/Scripting">JavaScript</a> 這些核心技術。
       </td>
     </tr>
     <tr>
@@ -188,7 +188,7 @@ JavaScript 框架都會提供一種能更加*宣告性*撰寫介面的方法。
 本模塊提到的幾個框架，背後都有著龐大而活躍的社群；這些社群形成了各種生態圈、並提供能增進開發體驗的工具：像是確保功能正常的測試、或著維持程式一致性的 linting。
 
 > [!NOTE]
-> 如果對這方面的概念有興趣，請看看 [Client-side tooling overview](/zh-TW/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview)。
+> 如果對這方面的概念有興趣，請看看 [Client-side tooling overview](/zh-TW/docs/Learn_web_development/Extensions/Client-side_tools/Overview)。
 
 ### 切分
 
@@ -319,4 +319,4 @@ Vue 的開發團隊也寫了[有關 Vue 與其他框架的詳盡比較](https://
 
 我們的下一篇文章，將探討更底層的東西，著眼於框架傾向於提供的特定種類的功能，以及它們為什麼能動。
 
-{{NextMenu("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
+{{NextMenu("Learn_web_development/Core/Frameworks_libraries/Main_features", "Learn_web_development/Core/Frameworks_libraries")}}
diff --git a/files/zh-tw/learn_web_development/core/frameworks_libraries/react_getting_started/index.md b/files/zh-tw/learn_web_development/core/frameworks_libraries/react_getting_started/index.md
index bfe7941cd56e49..29798aa6ccd2b5 100644
--- a/files/zh-tw/learn_web_development/core/frameworks_libraries/react_getting_started/index.md
+++ b/files/zh-tw/learn_web_development/core/frameworks_libraries/react_getting_started/index.md
@@ -4,7 +4,7 @@ slug: Learn_web_development/Core/Frameworks_libraries/React_getting_started
 original_slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started
 ---
 
-{{LearnSidebar}}{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
+{{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Core/Frameworks_libraries/Main_features","Learn_web_development/Core/Frameworks_libraries/React_todo_list_beginning", "Learn_web_development/Core/Frameworks_libraries")}}
 
 在本文中，我們將向 React 打個招呼。我們將探索其背後與範例的一些細節，在自己電腦設置基本的 React 工具鏈環境，並建立一個簡單入門的應用程式——好瞭解 React 基本架構。
 
@@ -14,12 +14,12 @@ original_slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_g
       <th scope="row">預備知識：</th>
       <td>
         <p>
-          熟悉基本的<a href="/zh-TW/docs/Learn/HTML">HTML</a>、<a
-            href="/zh-TW/docs/Learn/CSS"
+          熟悉基本的<a href="/zh-TW/docs/Learn_web_development/Core/Structuring_content">HTML</a>、<a
+            href="/zh-TW/docs/Learn_web_development/Core/Styling_basics"
             >CSS</a
-          >、以及<a href="/zh-TW/docs/Learn/JavaScript">JavaScript</a
+          >、以及<a href="/zh-TW/docs/Learn_web_development/Core/Scripting">JavaScript</a
           >程式語言，具備<a
-            href="/zh-TW/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line"
+            href="/zh-TW/docs/Learn_web_development/Getting_started/Environment_setup/Command_line"
             >終端機/命令列環境</a
           >的基本知識。
         </p>
@@ -114,9 +114,9 @@ const header = React.createElement(
 
 為了使用[create-react-app](https://create-react-app.dev/)，你需要先安裝[Node.js](https://nodejs.org/en/)。建議你使用長期支援（LTS）版本。Node.js 包括 npm（Node.js 套件管理器）和 npx（Node.js 套件運行器）。
 
-你也可以使用 Yarn 套件管理器作為替代方案，但我們假設你在這個教學中使用 npm。參閱[Package management basics](/zh-TW/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management)可取得有關 npm 和 yarn 的更多資訊。
+你也可以使用 Yarn 套件管理器作為替代方案，但我們假設你在這個教學中使用 npm。參閱[Package management basics](/zh-TW/docs/Learn_web_development/Extensions/Client-side_tools/Package_management)可取得有關 npm 和 yarn 的更多資訊。
 
-如果你使用的系統是 Windows，你需要安裝一些軟體來讓 Windows 與 Unix/macOS 的終端機 terminal 保持同等環境，以便使用本教學中提到的 terminal 終端機指令。**Gitbash**（它包含在[git for Windows toolset](https://gitforwindows.org/)工具的其中之一）或者**[Windows Subsystem for Linux](https://docs.microsoft.com/en-us/windows/wsl/about)**（**WSL**）也同樣適合。有關這些以及一般終端指令的詳細資訊，可以參閱[Command line crash course](/zh-TW/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line)。
+如果你使用的系統是 Windows，你需要安裝一些軟體來讓 Windows 與 Unix/macOS 的終端機 terminal 保持同等環境，以便使用本教學中提到的 terminal 終端機指令。**Gitbash**（它包含在[git for Windows toolset](https://gitforwindows.org/)工具的其中之一）或者**[Windows Subsystem for Linux](https://docs.microsoft.com/en-us/windows/wsl/about)**（**WSL**）也同樣適合。有關這些以及一般終端指令的詳細資訊，可以參閱[Command line crash course](/zh-TW/docs/Learn_web_development/Getting_started/Environment_setup/Command_line)。
 
 另外要記住的是，React 和 ReactDOM 建立的應用程式只能在相當現代的瀏覽器上執行——通過一些 polyfills 才可以在 IE9+上運作。建議你使用現代瀏覽器來學習這些教學，例如：Firefox、Microsoft Edge、Safari 或 Chrome 等。
 
@@ -183,9 +183,9 @@ The **`src`** directory is where we'll spend most of our time, as it's where the
 
 The **`public`** directory contains files that will be read by your browser while you're developing the app; the most important of these is `index.html`. React injects your code into this file so that your browser can run it. There's some other markup that helps create-react-app function, so take care not to edit it unless you know what you're doing. You very much should change the text inside the [`<title>`](/zh-TW/docs/Web/HTML/Element/title) element in this file to reflect the title of your application. Accurate page titles are important for accessibility!
 
-The `public` directory will also be published when you build and deploy a production version of your app. We won't cover deployment in this tutorial, but you should be able to use a similar solution to that described in our [Deploying our app](/zh-TW/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Deployment) tutorial.
+The `public` directory will also be published when you build and deploy a production version of your app. We won't cover deployment in this tutorial, but you should be able to use a similar solution to that described in our [Deploying our app](/zh-TW/docs/Learn_web_development/Extensions/Client-side_tools/Deployment) tutorial.
 
-The `package.json` file contains information about our project that Node.js/npm uses to keep it organized. This file is not unique to React applications; create-react-app merely populates it. You don't need to understand this file at all to complete this tutorial, however, if you'd like to learn more about it, you can read [What is the file \`package.json\`? on NodeJS.org](https://nodejs.org/en/knowledge/getting-started/npm/what-is-the-file-package-json/); we also talk about it in our [Package management basics](/zh-TW/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management) tutorial.
+The `package.json` file contains information about our project that Node.js/npm uses to keep it organized. This file is not unique to React applications; create-react-app merely populates it. You don't need to understand this file at all to complete this tutorial, however, if you'd like to learn more about it, you can read [What is the file \`package.json\`? on NodeJS.org](https://nodejs.org/en/knowledge/getting-started/npm/what-is-the-file-package-json/); we also talk about it in our [Package management basics](/zh-TW/docs/Learn_web_development/Extensions/Client-side_tools/Package_management) tutorial.
 
 ## 探索我們的第一個 React 元件——`<App/>`
 
@@ -459,4 +459,4 @@ function App(props) {
 - 某些 JSX 屬性與 HTML 屬性不同，因此它們不會與 JavaScript 保留字衝突。例如，HTML 中的`class`在 JSX 中會轉成`className`。注意多字組合而成的屬性名稱是駝峰式（camel-cased）命名的。
 - Props 就像元件中被調用的屬性一樣被撰寫並傳遞到元件中。
 
-{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
+{{PreviousMenuNext("Learn_web_development/Core/Frameworks_libraries/Main_features","Learn_web_development/Core/Frameworks_libraries/React_todo_list_beginning", "Learn_web_development/Core/Frameworks_libraries")}}
diff --git a/files/zh-tw/learn_web_development/core/frameworks_libraries/react_todo_list_beginning/index.md b/files/zh-tw/learn_web_development/core/frameworks_libraries/react_todo_list_beginning/index.md
index e82c8ce8f266e0..72f0524c263d73 100644
--- a/files/zh-tw/learn_web_development/core/frameworks_libraries/react_todo_list_beginning/index.md
+++ b/files/zh-tw/learn_web_development/core/frameworks_libraries/react_todo_list_beginning/index.md
@@ -4,7 +4,9 @@ slug: Learn_web_development/Core/Frameworks_libraries/React_todo_list_beginning
 original_slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning
 ---
 
-{{LearnSidebar}}{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}我們被賦予做出一個 React 原型 app 的任務--這個 app 將允許使用者新增、編輯、刪除任務；且可以標記任務完成而不被刪除。文章將會與你一起完成一個基本 `App` component 的結構與畫面，以便稍後與其他 component 互動。
+{{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Core/Frameworks_libraries/React_getting_started","Learn_web_development/Core/Frameworks_libraries/React_components", "Learn_web_development/Core/Frameworks_libraries")}}
+
+我們被賦予做出一個 React 原型 app 的任務--這個 app 將允許使用者新增、編輯、刪除任務；且可以標記任務完成而不被刪除。文章將會與你一起完成一個基本 `App` component 的結構與畫面，以便稍後與其他 component 互動。
 
 > [!NOTE]
 > 如果你需要檢查自己的程式碼與範例之間的差異，可以連到 [todo-react repository](https://github.com/mdn/todo-react)，這裡有我們完整的程式碼。 Todo list 作品示範：<https://mdn.github.io/todo-react-build/>。
@@ -15,13 +17,13 @@ original_slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_t
       <th scope="row">預備知識：</th>
       <td>
         <p>
-          知道 <a href="/zh-TW/docs/Learn/HTML">HTML</a>,
-          <a href="/zh-TW/docs/Learn/CSS">CSS</a>與<a
-            href="/zh-TW/docs/Learn/JavaScript"
+          知道 <a href="/zh-TW/docs/Learn_web_development/Core/Structuring_content">HTML</a>,
+          <a href="/zh-TW/docs/Learn_web_development/Core/Styling_basics">CSS</a>與<a
+            href="/zh-TW/docs/Learn_web_development/Core/Scripting"
             >JavaScript</a
           >的核心語法、操作基本終端機指令
           <a
-            href="/zh-TW/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line"
+            href="/zh-TW/docs/Learn_web_development/Getting_started/Environment_setup/Command_line"
             >terminal/command line</a
           >.
         </p>
@@ -554,4 +556,4 @@ body {
 
 現在我們的待辦清單 app 終於比較像真正的 app 了！問題是它還沒真正提供功能，我們將在下一章解決這個問題。
 
-{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
+{{PreviousMenuNext("Learn_web_development/Core/Frameworks_libraries/React_getting_started","Learn_web_development/Core/Frameworks_libraries/React_components", "Learn_web_development/Core/Frameworks_libraries")}}
diff --git a/files/zh-tw/learn_web_development/core/frameworks_libraries/svelte_getting_started/index.md b/files/zh-tw/learn_web_development/core/frameworks_libraries/svelte_getting_started/index.md
index 1bb713e4c4608b..1e0d901fc354ea 100644
--- a/files/zh-tw/learn_web_development/core/frameworks_libraries/svelte_getting_started/index.md
+++ b/files/zh-tw/learn_web_development/core/frameworks_libraries/svelte_getting_started/index.md
@@ -5,7 +5,7 @@ original_slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_
 ---
 
 {{LearnSidebar}}
-{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_todo_list_beginning", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
+{{NextMenu("Learn_web_development/Core/Frameworks_libraries/Svelte_todo_list_beginning", "Learn_web_development/Core/Frameworks_libraries")}}
 
 此篇文章我們將摘要說明 [Svelte 框架](https://svelte.dev/)。我們將會看到 Svelte 如何運作，以及它與其它框架和工具的不同之處。接著我們將學習如何設置我們的開發環境並建立一個範例應用程式，了解其專案結構及如何在本地運行，最後可以將其建置於正式環境。
 
@@ -16,11 +16,11 @@ original_slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_
       <td>
         <p>
           推薦你至少需熟悉基本的
-          <a href="/zh-TW/docs/Learn/HTML">HTML</a>、
-          <a href="/zh-TW/docs/Learn/CSS">CSS</a> 與
-          <a href="/zh-TW/docs/Learn/JavaScript">JavaScript</a>
+          <a href="/zh-TW/docs/Learn_web_development/Core/Structuring_content">HTML</a>、
+          <a href="/zh-TW/docs/Learn_web_development/Core/Styling_basics">CSS</a> 與
+          <a href="/zh-TW/docs/Learn_web_development/Core/Scripting">JavaScript</a>
           等程式語言且具備<a
-            href="/zh-TW/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line"
+            href="/zh-TW/docs/Learn_web_development/Getting_started/Environment_setup/Command_line"
             >終端機/命令列環境</a
           >基本知識。
         </p>
@@ -81,9 +81,9 @@ Svelte 可以被用來開發一小塊介面或整個應用程式。你也可以
 
 ### 需求
 
-為了使用 Svelte，你會需要安裝 [Node.js](https://nodejs.org/en/)。推薦你使用長期支援版本（LTS）。Node 包含 npm（the node package manager）和 npx（the node package runner）。另外你也可以使用 Yarn 套件管理工具來代替 npm，但我們先假定你會用 npm 來走完這個教學系列。若想知道更多 npm 和 yarn 的相關資訊可以至[基礎套件管理](/zh-TW/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management)了解。
+為了使用 Svelte，你會需要安裝 [Node.js](https://nodejs.org/en/)。推薦你使用長期支援版本（LTS）。Node 包含 npm（the node package manager）和 npx（the node package runner）。另外你也可以使用 Yarn 套件管理工具來代替 npm，但我們先假定你會用 npm 來走完這個教學系列。若想知道更多 npm 和 yarn 的相關資訊可以至[基礎套件管理](/zh-TW/docs/Learn_web_development/Extensions/Client-side_tools/Package_management)了解。
 
-如果你是使用 Windows 的話，你將會需要安裝一些軟體來達到和 Unix/macOS 作業系統使用終端機一樣的行為，為的是接下來走教學系列時，可以使用到一些被提及的終端機指令。Gitbash（[適用於 Windows 的 git 工具集](https://gitforwindows.org/)中的一部分功能）或使用[適用於 Linux 的 Windows 子系統（WSL）](https://docs.microsoft.com/zh-TW/windows/wsl/about)，這些都是蠻合適的解決方案。若想知道更多命令列的相關資訊可以至[命令列課程](/zh-TW/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line)了解。
+如果你是使用 Windows 的話，你將會需要安裝一些軟體來達到和 Unix/macOS 作業系統使用終端機一樣的行為，為的是接下來走教學系列時，可以使用到一些被提及的終端機指令。Gitbash（[適用於 Windows 的 git 工具集](https://gitforwindows.org/)中的一部分功能）或使用[適用於 Linux 的 Windows 子系統（WSL）](https://docs.microsoft.com/zh-TW/windows/wsl/about)，這些都是蠻合適的解決方案。若想知道更多命令列的相關資訊可以至[命令列課程](/zh-TW/docs/Learn_web_development/Getting_started/Environment_setup/Command_line)了解。
 
 若想知道更多相關資訊也可以至下列去閱讀：
 
@@ -140,7 +140,7 @@ moz-todo-svelte
 
 內容解釋如下：
 
-- `package.json` 和 `package-lock.json`：Node.js/npm 用它來組織化管理你的專案，相關資訊可以在這邊找到。在這個教學系列中，你不需要完全了解這個檔案，但如果你想要學習更多的話，你可以至 NodeJS.org 閱讀[什麼是 `package.json` 檔案](https://nodejs.org/en/knowledge/getting-started/npm/what-is-the-file-package-json/)？我們在[基礎套件管理教學系列](/zh-TW/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management)也有談到。
+- `package.json` 和 `package-lock.json`：Node.js/npm 用它來組織化管理你的專案，相關資訊可以在這邊找到。在這個教學系列中，你不需要完全了解這個檔案，但如果你想要學習更多的話，你可以至 NodeJS.org 閱讀[什麼是 `package.json` 檔案](https://nodejs.org/en/knowledge/getting-started/npm/what-is-the-file-package-json/)？我們在[基礎套件管理教學系列](/zh-TW/docs/Learn_web_development/Extensions/Client-side_tools/Package_management)也有談到。
 - `node_modules`：這裡是 node 存放專案相依套件的地方。這些相依套件在正式環境不會看到，只有開發時才會被使用到。
 - `.gitignore`：告訴 git 有哪些檔案或資料夾不要納入專案版本控制——透過它可以決定哪些檔案要納入專案版本控制，還蠻實用的！
 - `rollup.config.js`：Svelte 使用 [rollup.js](https://rollupjs.org/) 做為模組包裝工具。這個組態檔案告訴 rollup 如何編譯和建構你的應用程式。假如你偏好使用 [webpack](https://webpack.js.org/)，你可以改執行 `npx degit sveltejs/template-webpack svelte-app` 來建構你的初始應用程式。
@@ -507,4 +507,4 @@ npx degit opensas/mdn-svelte-tutorial/01-getting-started
 - 元件中的頂層變數會構成其元件狀態。
 - 當指定新數值給頂層變數時，將會觸發其反應性。
 
-{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_todo_list_beginning", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
+{{NextMenu("Learn_web_development/Core/Frameworks_libraries/Svelte_todo_list_beginning", "Learn_web_development/Core/Frameworks_libraries")}}
diff --git a/files/zh-tw/learn_web_development/core/frameworks_libraries/svelte_todo_list_beginning/index.md b/files/zh-tw/learn_web_development/core/frameworks_libraries/svelte_todo_list_beginning/index.md
index 6797f4d32625c7..e6993aa6ec7da1 100644
--- a/files/zh-tw/learn_web_development/core/frameworks_libraries/svelte_todo_list_beginning/index.md
+++ b/files/zh-tw/learn_web_development/core/frameworks_libraries/svelte_todo_list_beginning/index.md
@@ -5,7 +5,7 @@ original_slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_
 ---
 
 {{LearnSidebar}}
-{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
+{{PreviousMenuNext("Learn_web_development/Core/Frameworks_libraries/Svelte_getting_started","Learn_web_development/Core/Frameworks_libraries/Svelte_variables_props", "Learn_web_development/Core/Frameworks_libraries")}}
 
 現在我們已經對 Svelte 運作機制有初步的了解後，就能開始建構我們的範例應用程式：一個待辦清單。此篇文章中，我們會先確認應用程式所需的功能有哪些，接著我們會建立 `Todos.svelte` 元件並寫一些靜態標記（markup）語言和樣式，待一切準備就緒後，就能開始開發我們待辦清單應用程式的相關功能，隨著後續文章會逐漸充實它。
 
@@ -18,11 +18,11 @@ original_slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_
       <td>
         <p>
           推薦你至少需熟悉基本的
-          <a href="/zh-TW/docs/Learn/HTML">HTML</a>、
-          <a href="/zh-TW/docs/Learn/CSS">CSS</a> 與
-          <a href="/zh-TW/docs/Learn/JavaScript">JavaScript</a>
+          <a href="/zh-TW/docs/Learn_web_development/Core/Structuring_content">HTML</a>、
+          <a href="/zh-TW/docs/Learn_web_development/Core/Styling_basics">CSS</a> 與
+          <a href="/zh-TW/docs/Learn_web_development/Core/Scripting">JavaScript</a>
           等程式語言且具備<a
-            href="/zh-TW/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line"
+            href="/zh-TW/docs/Learn_web_development/Getting_started/Environment_setup/Command_line"
             >終端機/命令列環境</a
           >基本知識。
         </p>
@@ -729,4 +729,4 @@ npx degit opensas/mdn-svelte-tutorial/03-adding-dynamic-behavior
 
 隨著我們對標記語言加上樣式後，待辦清單應用程式開始逐漸成形，我們終於可以專注在需要實現的功能上了。
 
-{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
+{{PreviousMenuNext("Learn_web_development/Core/Frameworks_libraries/Svelte_getting_started","Learn_web_development/Core/Frameworks_libraries/Svelte_variables_props", "Learn_web_development/Core/Frameworks_libraries")}}
diff --git a/files/zh-tw/learn_web_development/core/frameworks_libraries/svelte_variables_props/index.md b/files/zh-tw/learn_web_development/core/frameworks_libraries/svelte_variables_props/index.md
index 1c2cb78ae60257..4cadbdd458829d 100644
--- a/files/zh-tw/learn_web_development/core/frameworks_libraries/svelte_variables_props/index.md
+++ b/files/zh-tw/learn_web_development/core/frameworks_libraries/svelte_variables_props/index.md
@@ -5,7 +5,7 @@ original_slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_
 ---
 
 {{LearnSidebar}}
-{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_Todo_list_beginning","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_components", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
+{{PreviousMenuNext("Learn_web_development/Core/Frameworks_libraries/Svelte_Todo_list_beginning","Learn_web_development/Core/Frameworks_libraries/Svelte_components", "Learn_web_development/Core/Frameworks_libraries")}}
 
 現在我們已經準備好了標記語言及樣式，我們可以開始為 Svelte 待辦清單應用程式開發所需的功能。在此篇文章中，我們將使用變數及屬性使我們的應用程式動態化，允許我們新增及刪除待辦事項，標記它們為完成及藉由狀態過濾它們。
 
@@ -16,11 +16,11 @@ original_slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_
       <td>
         <p>
           推薦你至少需熟悉基本的
-          <a href="/zh-TW/docs/Learn/HTML">HTML</a>、
-          <a href="/zh-TW/docs/Learn/CSS">CSS</a> 與
-          <a href="/zh-TW/docs/Learn/JavaScript">JavaScript</a>
+          <a href="/zh-TW/docs/Learn_web_development/Core/Structuring_content">HTML</a>、
+          <a href="/zh-TW/docs/Learn_web_development/Core/Styling_basics">CSS</a> 與
+          <a href="/zh-TW/docs/Learn_web_development/Core/Scripting">JavaScript</a>
           等程式語言且具備<a
-            href="/zh-TW/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line"
+            href="/zh-TW/docs/Learn_web_development/Getting_started/Environment_setup/Command_line"
             >終端機/命令列環境</a
           >基本知識。
         </p>
@@ -493,4 +493,4 @@ npx degit opensas/mdn-svelte-tutorial/04-componentizing-our-app
 
 在下一篇文章中，我們將新增更多功能，允許使用者編輯待辦事項。
 
-{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_Todo_list_beginning","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_components", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
+{{PreviousMenuNext("Learn_web_development/Core/Frameworks_libraries/Svelte_Todo_list_beginning","Learn_web_development/Core/Frameworks_libraries/Svelte_components", "Learn_web_development/Core/Frameworks_libraries")}}
diff --git a/files/zh-tw/learn_web_development/core/frameworks_libraries/vue_first_component/index.md b/files/zh-tw/learn_web_development/core/frameworks_libraries/vue_first_component/index.md
index efe8c46539d10f..8aea751b228fea 100644
--- a/files/zh-tw/learn_web_development/core/frameworks_libraries/vue_first_component/index.md
+++ b/files/zh-tw/learn_web_development/core/frameworks_libraries/vue_first_component/index.md
@@ -4,7 +4,7 @@ slug: Learn_web_development/Core/Frameworks_libraries/Vue_first_component
 original_slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component
 ---
 
-{{LearnSidebar}}{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
+{{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Core/Frameworks_libraries/Vue_getting_started","Learn_web_development/Core/Frameworks_libraries/Vue_rendering_lists", "Learn_web_development/Core/Frameworks_libraries")}}
 
 現在是時候來更深入了解 Vue ，以及建立我們自訂的元件——我們將從建立一個元件開始，這個元件代表待辦清單裡的每一個項目。在過程中，我們會學到一些重要的概念，例如在元件裡面調用其他元件，使用 props 傳遞資料，以及儲存它的狀態（ state ）。
 
@@ -17,11 +17,11 @@ original_slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_fir
       <th scope="row">預備知識：</th>
       <td>
         <p>
-          熟悉 <a href="/zh-TW/docs/Learn/HTML">HTML</a> 、
-          <a href="/zh-TW/docs/Learn/CSS">CSS</a> 以及
-          <a href="/zh-TW/docs/Learn/JavaScript">JavaScript</a> 核心語言，具備
+          熟悉 <a href="/zh-TW/docs/Learn_web_development/Core/Structuring_content">HTML</a> 、
+          <a href="/zh-TW/docs/Learn_web_development/Core/Styling_basics">CSS</a> 以及
+          <a href="/zh-TW/docs/Learn_web_development/Core/Scripting">JavaScript</a> 核心語言，具備
           <a
-            href="/zh-TW/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line"
+            href="/zh-TW/docs/Learn_web_development/Getting_started/Environment_setup/Command_line"
             >terminal/command line</a
           >
           的知識。
@@ -350,4 +350,4 @@ And that will do for this article. At this point we have a nicely-working `ToDoI
 
 Now we're ready to add multiple `ToDoItem` components to our App. In our next article we'll look at adding a set of todo item data to our `App.vue` component, which we'll then loop through and display inside `ToDoItem` components using the `v-for` directive.
 
-{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
+{{PreviousMenuNext("Learn_web_development/Core/Frameworks_libraries/Vue_getting_started","Learn_web_development/Core/Frameworks_libraries/Vue_rendering_lists", "Learn_web_development/Core/Frameworks_libraries")}}
diff --git a/files/zh-tw/learn_web_development/core/frameworks_libraries/vue_getting_started/index.md b/files/zh-tw/learn_web_development/core/frameworks_libraries/vue_getting_started/index.md
index f432bb3f58118d..0741cd06a5a330 100644
--- a/files/zh-tw/learn_web_development/core/frameworks_libraries/vue_getting_started/index.md
+++ b/files/zh-tw/learn_web_development/core/frameworks_libraries/vue_getting_started/index.md
@@ -4,7 +4,7 @@ slug: Learn_web_development/Core/Frameworks_libraries/Vue_getting_started
 original_slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started
 ---
 
-{{LearnSidebar}}{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
+{{LearnSidebar}}{{NextMenu("Learn_web_development/Core/Frameworks_libraries/Vue_first_component", "Learn_web_development/Core/Frameworks_libraries")}}
 
 現在來介紹我們的第三個框架 Vue 。在這篇文章中，我們會介紹 Vue 的背景，如何安裝 Vue 及建立一個新專案，學習整個 Vue 專案的高階架構及一個獨立的元件，學習如何在本地端運行專案，以及開始建構我們的範例。
 
@@ -14,11 +14,11 @@ original_slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_get
       <th scope="row">預備知識</th>
       <td>
         <p>
-          熟悉 <a href="/zh-TW/docs/Learn/HTML">HTML</a> 、
-          <a href="/zh-TW/docs/Learn/CSS">CSS</a> 、以及
-          <a href="/zh-TW/docs/Learn/JavaScript">JavaScript</a>
+          熟悉 <a href="/zh-TW/docs/Learn_web_development/Core/Structuring_content">HTML</a> 、
+          <a href="/zh-TW/docs/Learn_web_development/Core/Styling_basics">CSS</a> 、以及
+          <a href="/zh-TW/docs/Learn_web_development/Core/Scripting">JavaScript</a>
           的核心知識，知道如何使用<a
-            href="/zh-TW/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line"
+            href="/zh-TW/docs/Learn_web_development/Getting_started/Environment_setup/Command_line"
             >終端機/命令列工具（ terminal/command line ）</a
           >。
         </p>
@@ -71,7 +71,7 @@ Vue 是一個新穎的 Javascript 框架，它提供了很多有用的功能來
 2. npm 或 yarn
 
 > [!NOTE]
-> 如果你沒有安裝以上工具，請參考[關於安裝 npm 及 Node.js](/zh-TW/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line#adding_powerups) 。
+> 如果你沒有安裝以上工具，請參考[關於安裝 npm 及 Node.js](/zh-TW/docs/Learn_web_development/Getting_started/Environment_setup/Command_line#adding_powerups) 。
 
 在你的終端機執行以下命令來安裝 CLI ：
 
@@ -257,4 +257,4 @@ components: {
 
 在下一篇文章中，我們將會建立第一個客製元件，研究一些重要的概念，像是透過 props 傳遞資料及儲存它的資料狀態。
 
-{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
+{{NextMenu("Learn_web_development/Core/Frameworks_libraries/Vue_first_component", "Learn_web_development/Core/Frameworks_libraries")}}
diff --git a/files/zh-tw/learn_web_development/core/scripting/a_first_splash/index.md b/files/zh-tw/learn_web_development/core/scripting/a_first_splash/index.md
index 7eaddc8bad309e..13c744a4890cba 100644
--- a/files/zh-tw/learn_web_development/core/scripting/a_first_splash/index.md
+++ b/files/zh-tw/learn_web_development/core/scripting/a_first_splash/index.md
@@ -4,7 +4,7 @@ slug: Learn_web_development/Core/Scripting/A_first_splash
 original_slug: Learn/JavaScript/First_steps/A_first_splash
 ---
 
-{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}}
+{{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Core/Scripting/What_is_JavaScript", "Learn_web_development/Core/Scripting/What_went_wrong", "Learn_web_development/Core/Scripting")}}
 
 目前你已經學會了一些 JavaScript 的理論，以及你能用它做些什麼。我們現在要透過一個完整的實際範例給你一個 JavaScript 基本功能的速成班。你將能一步一步地做出一個簡單的"猜數字"遊戲
 
@@ -276,7 +276,7 @@ function checkGuess() {
 
 輸入函式名稱與括號便可以執行函式。
 
-讓我們來試試吧。儲存你的程式碼並重新整理瀏覽器畫面。進入 [開發者工具 JavaScript console](/zh-TW/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools), 並輸入下面這行：
+讓我們來試試吧。儲存你的程式碼並重新整理瀏覽器畫面。進入 [開發者工具 JavaScript console](/zh-TW/docs/Learn_web_development/Howto/Tools_and_setup/What_are_browser_developer_tools)，並輸入下面這行：
 
 ```js
 checkGuess();
@@ -291,7 +291,7 @@ checkGuess();
 
 JavaScript 運算子可以讓我們執行比較、數學運算、連接字符串等。
 
-儲存我們的程式碼並重整頁面，開啟 [開發者工具 JavaScript console](/zh-TW/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools) 。接下來你可以試著輸入以下的範例 —— 輸入跟每個「範例」欄位中一樣的內容，每輸入一個就按下<kbd>Return</kbd> / <kbd>Enter</kbd>， 接著看看回傳的結果。
+儲存我們的程式碼並重整頁面，開啟[開發者工具 JavaScript console](/zh-TW/docs/Learn_web_development/Howto/Tools_and_setup/What_are_browser_developer_tools)。接下來你可以試著輸入以下的範例 —— 輸入跟每個「範例」欄位中一樣的內容，每輸入一個就按下<kbd>Return</kbd> / <kbd>Enter</kbd>， 接著看看回傳的結果。
 
 如果你不能快速打開瀏覽器開發工具， 你可以使用内嵌的應用程式中輸入以下範例：
 
@@ -575,7 +575,7 @@ function resetGame() {
 
 上面的程式碼中，一個我們需要仔細看看的部份是 [for](/zh-TW/docs/Web/JavaScript/Reference/Statements/for) 迴圈。迴圈在程式設計中是一個非常重要的內容，可以讓你在滿足條件前反覆執行同一段程式碼。
 
-開始吧，打開你的 [開發者工具 JavaScript console](/zh-TW/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools)，然後輸入下面這行：
+開始吧，打開你的[開發者工具 JavaScript console](/zh-TW/docs/Learn_web_development/Howto/Tools_and_setup/What_are_browser_developer_tools)，然後輸入下面這行：
 
 ```js
 for (var i = 1; i < 21; i++) {
@@ -620,7 +620,7 @@ guessField.focus();
 var guessField = document.querySelector(".guessField");
 ```
 
-我們使用了 {{domxref("document.querySelector", "querySelector()")}} 來取得這個參照，前者是 {{domxref("document")}} 物件的方法。`querySelector()` 接受一個參數 — 一個 [CSS 選擇器](/zh-TW/docs/Learn/CSS/Building_blocks/Selectors)， 會回傳你想要的元素參照。
+我們使用了 {{domxref("document.querySelector", "querySelector()")}} 來取得這個參照，前者是 {{domxref("document")}} 物件的方法。`querySelector()` 接受一個參數——一個 [CSS 選擇器](/zh-TW/docs/Learn_web_development/Core/Styling_basics/Basic_selectors)，會回傳你想要的元素參照。
 
 因為現在 `guessField` 中存著一個指向 {{htmlelement("input")}} 元素的參照，它現在可以存取這個元素的屬性（基本上就是存在物件中的變數，其中有一些可能會是常數）和方法（基本上就是存在物件中的函式）了。文字輸入欄的其中一個方法便是 `focus()`，我們便可以透過呼叫這個方法來給予其焦點：
 
@@ -636,7 +636,7 @@ guessField.focus();
 讓我們來稍微玩一點瀏覽器內建的物件吧。
 
 1. 首先在瀏覽器中開啟你的程式。
-2. 接下來，打開你的[開發者工具 JavaScript console](/zh-TW/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools)。
+2. 接下來，打開你的[開發者工具 JavaScript console](/zh-TW/docs/Learn_web_development/Howto/Tools_and_setup/What_are_browser_developer_tools)。
 3. 輸入 `guessField`，可以看到主控台顯示這個變數儲存著一個 {{htmlelement("input")}} 元素。你還可以發現主控台會自動幫你完成已存在的物件名稱！
 4. 接下來輸入：
 
@@ -689,4 +689,4 @@ guessField.focus();
 
 這就是我們的範例 — 你順利地來到結尾了，做得不錯！試試你的最終成品，或試試[我們的版本](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/first-splash/number-guessing-game.html)。如果你仍然有困難沒有解決，再看看[我們的原始碼](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game.html)。
 
-{{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}}
+{{PreviousMenuNext("Learn_web_development/Core/Scripting/What_is_JavaScript", "Learn_web_development/Core/Scripting/What_went_wrong", "Learn_web_development/Core/Scripting")}}
diff --git a/files/zh-tw/learn_web_development/core/scripting/arrays/index.md b/files/zh-tw/learn_web_development/core/scripting/arrays/index.md
index a3fafaac02cabf..0be2de05c77c84 100644
--- a/files/zh-tw/learn_web_development/core/scripting/arrays/index.md
+++ b/files/zh-tw/learn_web_development/core/scripting/arrays/index.md
@@ -4,7 +4,7 @@ slug: Learn_web_development/Core/Scripting/Arrays
 original_slug: Learn/JavaScript/First_steps/Arrays
 ---
 
-{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps/Silly_story_generator", "Learn/JavaScript/First_steps")}}
+{{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Core/Scripting/Useful_string_methods", "Learn_web_development/Core/Scripting/Silly_story_generator", "Learn_web_development/Core/Scripting")}}
 
 在本單元的最後一篇文章中，我們將介紹陣列——一種在單個變數名下儲存資料項列表的簡潔方法。在這裡，我們看看為什麼這很有用，然後探討如何建立陣列，檢索、增加和刪除儲存在陣列中的項目等等。
 
@@ -574,4 +574,4 @@ The only thing left to do is work through this module's assessment, which will t
 - [Indexed collections](/zh-TW/docs/Web/JavaScript/Guide/Indexed_collections) — an advanced level guide to arrays and their cousins, typed arrays.
 - {{jsxref("Array")}} — the `Array` object reference page — for a detailed reference guide to the features discussed in this page, and many more.
 
-{{PreviousMenuNext("Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps/Silly_story_generator", "Learn/JavaScript/First_steps")}}
+{{PreviousMenuNext("Learn_web_development/Core/Scripting/Useful_string_methods", "Learn_web_development/Core/Scripting/Silly_story_generator", "Learn_web_development/Core/Scripting")}}
diff --git a/files/zh-tw/learn_web_development/core/scripting/conditionals/index.md b/files/zh-tw/learn_web_development/core/scripting/conditionals/index.md
index b57914371d125d..4af7794588e81f 100644
--- a/files/zh-tw/learn_web_development/core/scripting/conditionals/index.md
+++ b/files/zh-tw/learn_web_development/core/scripting/conditionals/index.md
@@ -4,7 +4,7 @@ slug: Learn_web_development/Core/Scripting/Conditionals
 original_slug: Learn/JavaScript/Building_blocks/conditionals
 ---
 
-{{LearnSidebar}}{{NextMenu("Learn/JavaScript/Building_blocks/Looping_code", "Learn/JavaScript/Building_blocks")}}
+{{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Core/Scripting/Silly_story_generator", "Learn_web_development/Core/Scripting/Loops", "Learn_web_development/Core/Scripting")}}
 
 在任何編程語言中，代碼都需要根據不同的輸入做出決策並相應地執行操作。 例如，在遊戲中，如果玩家的生命數量為 0，則遊戲結束。 在天氣應用程序中，如果在早上查看，則顯示日出圖形; 如果是夜晚，則顯示星星和月亮。 在本文中，我們將探討條件結構如何在 JavaScript 中工作。
 
@@ -14,7 +14,7 @@ original_slug: Learn/JavaScript/Building_blocks/conditionals
       <th scope="row">Prerequisites:</th>
       <td>
         Basic computer literacy, a basic understanding of HTML and CSS,
-        <a href="/zh-TW/docs/Learn/JavaScript/First_steps"
+        <a href="/zh-TW/docs/Learn_web_development/Core/Scripting"
           >JavaScript first steps</a
         >.
       </td>
@@ -803,11 +803,11 @@ textarea.onkeyup = function () {
 
 And that's all you really need to know about conditional structures in JavaScript right now! I'm sure you'll have understood these concepts and worked through the examples with ease; if there is anything you didn't understand, feel free to read through the article again, or [contact us](/zh-TW/docs/Learn_web_development#contact_us) to ask for help.
 
-## See also
+## 參見
 
 - [Comparison operators](/zh-TW/docs/Learn_web_development/Core/Scripting/Math#comparison_operators)
 - [Conditional statements in detail](/zh-TW/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#conditional_statements)
 - [if...else reference](/zh-TW/docs/Web/JavaScript/Reference/Statements/if...else)
 - [Conditional (ternary) operator reference](/zh-TW/docs/Web/JavaScript/Reference/Operators/Conditional_operator)
 
-{{NextMenu("Learn/JavaScript/Building_blocks/Looping_code", "Learn/JavaScript/Building_blocks")}}
+{{PreviousMenuNext("Learn_web_development/Core/Scripting/Silly_story_generator", "Learn_web_development/Core/Scripting/Loops", "Learn_web_development/Core/Scripting")}}
diff --git a/files/zh-tw/learn_web_development/core/scripting/functions/index.md b/files/zh-tw/learn_web_development/core/scripting/functions/index.md
index 1facde3a5f83a8..5d0c35675af67c 100644
--- a/files/zh-tw/learn_web_development/core/scripting/functions/index.md
+++ b/files/zh-tw/learn_web_development/core/scripting/functions/index.md
@@ -4,7 +4,7 @@ slug: Learn_web_development/Core/Scripting/Functions
 original_slug: Learn/JavaScript/Building_blocks/Functions
 ---
 
-{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Looping_code","Learn/JavaScript/Building_blocks/Build_your_own_function", "Learn/JavaScript/Building_blocks")}}
+{{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Core/Scripting/Loops","Learn_web_development/Core/Scripting/Build_your_own_function", "Learn_web_development/Core/Scripting")}}
 
 程式設計的另一個基本概念是函數，它允許你儲存一段程式碼，該程式碼在定義的區塊內執行單個任務，然後在需要時使用一個簡短命令調用該程式碼區塊，而不必多次輸入相同的程式碼。 在本文中，我們將探索函數背後的基本概念，例如基本語法、如何調用和定義它們、作用域範圍與參數。
 
@@ -13,7 +13,7 @@ original_slug: Learn/JavaScript/Building_blocks/Functions
     <tr>
       <th scope="row">先備知識：</th>
       <td>
-        基礎電腦術語、對 HTML 及 CSS 有基本認識、<a href="/zh-TW/docs/Learn/JavaScript/First_steps"
+        基礎電腦術語、對 HTML 及 CSS 有基本認識、<a href="/zh-TW/docs/Learn_web_development/Core/Scripting"
           >JavaScript 的第一步</a>。
       </td>
     </tr>
@@ -441,4 +441,4 @@ function subFunction3(value) {
 - [函數參考文件](/zh-TW/docs/Web/JavaScript/Reference/Functions)
 - [預設參數](/zh-TW/docs/Web/JavaScript/Reference/Functions/Default_parameters)、[箭頭函數](/zh-TW/docs/Web/JavaScript/Reference/Functions/Arrow_functions) — 進階概念參考文件
 
-{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Looping_code","Learn/JavaScript/Building_blocks/Build_your_own_function", "Learn/JavaScript/Building_blocks")}}
+{{PreviousMenuNext("Learn_web_development/Core/Scripting/Loops","Learn_web_development/Core/Scripting/Build_your_own_function", "Learn_web_development/Core/Scripting")}}
diff --git a/files/zh-tw/learn_web_development/core/scripting/index.md b/files/zh-tw/learn_web_development/core/scripting/index.md
index 435d2f3defa619..595aac87f2d896 100644
--- a/files/zh-tw/learn_web_development/core/scripting/index.md
+++ b/files/zh-tw/learn_web_development/core/scripting/index.md
@@ -23,11 +23,11 @@ original_slug: Learn/JavaScript/Building_blocks
   - : 有時候你需要超過一行的程式碼完成一項任務，舉例來說：尋找一個擁有許多名字的清單。透過編輯程式，迴圈可以幫助你完美的完成這項工作，在本文中，我們將探討迴圈的結構如何在 JavaScript 中運作。
 - [函式 — 可重複使用的程式碼區塊](/zh-TW/docs/Learn_web_development/Core/Scripting/Functions)
   - : 撰寫程式的另一個基本概念是函式 (function)，它允許你在一個定義好的區塊內，存放一些程式碼。定義好的函式後，無論你需要在一個單一簡短的指令列用到它，或者是重複使用相同的片段程式碼，你都可以不段重複地呼叫這些函式執行對應的內容。在本文中，我們將探索函式的基本概念，像是基本語法、如何定義函式內容、以及函式將會使用的參數。
-- [建立自己的函式](/zh-TW/docs/Learn/JavaScript/Building_blocks/Build_your_own_function)
+- [建立自己的函式](/zh-TW/docs/Learn_web_development/Core/Scripting/Build_your_own_function)
   - : 前面許多文章已經提到大部分的基本理論基礎了，在本文中，我們將分享一個實際的經驗，你將學習到關於打造自定義函式的實務範例。透過這樣的學習方式，我們也進一步解釋一些函式相關的細節知識。
-- [函式回傳值](/zh-TW/docs/Learn/JavaScript/Building_blocks/Return_values)
+- [函式回傳值](/zh-TW/docs/Learn_web_development/Core/Scripting/Return_values)
   - : 這堂課程中最後一個想要說明的基本概念就是函式的回傳值，一些函式執行完畢後，不會回傳一個數值；但有些函式則會。理解這些函式的回傳值是重要的概念，本文中，你將學會如何在自定義的函式中，回傳有用的數值提供給其他函式使用。
-- [事件介紹](/zh-TW/docs/Learn/JavaScript/Building_blocks/Events)
+- [事件介紹](/zh-TW/docs/Learn_web_development/Core/Scripting/Events)
   - : 事件代表你所撰寫的程式在一套系統內所產生的動作或發生的事情，舉例來說：假如一位使用者在網頁點擊一個按鈕時，你可能想要讓使用者點擊該按鈕後，在畫面呈現一個訊息方塊。在本課程最後一篇文章內，我們將討論一些與事件相關的重要概念、以及這些事件在瀏覽器中，如何呈現給使用者。
 
 ## 評量
diff --git a/files/zh-tw/learn_web_development/core/scripting/json/index.md b/files/zh-tw/learn_web_development/core/scripting/json/index.md
index acc4568237912f..ff43a42b5ae417 100644
--- a/files/zh-tw/learn_web_development/core/scripting/json/index.md
+++ b/files/zh-tw/learn_web_development/core/scripting/json/index.md
@@ -4,7 +4,7 @@ slug: Learn_web_development/Core/Scripting/JSON
 original_slug: Learn/JavaScript/Objects/JSON
 ---
 
-{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}}
+{{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Core/Scripting/Network_requests","Learn_web_development/Core/Scripting/Debugging_JavaScript", "Learn_web_development/Core/Scripting")}}
 
 JavaScript Object Notation (JSON) 為將結構化資料 (structured data) 呈現為 JavaScript 物件的標準格式，常用於網站上的資料呈現、傳輸 (例如將資料從伺服器送至用戶端，以利顯示網頁)。你應該會常常遇到，因此本文將說明 JavaScript 搭配 JSON 時所應知道的觀念，包含如何在 JSON 物件中存取資料項目，並寫出你自己的 JSON。
 
@@ -14,12 +14,12 @@ JavaScript Object Notation (JSON) 為將結構化資料 (structured data) 呈現
       <th scope="row">必要條件：</th>
       <td>
         基礎的計算機素養、了解 HTML 與 CSS 的基本概念、熟悉 JavaScript (參閱〈<a
-          href="/zh-TW/docs/Learn/JavaScript/First_steps"
+          href="/zh-TW/docs/Learn_web_development/Core/Scripting"
           >First steps</a
-        >〉與〈<a href="/zh-TW/docs/Learn/JavaScript/Building_blocks"
+        >〉與〈<a href="/zh-TW/docs/Learn_web_development/Core/Scripting"
           >Building blocks</a
         >〉) 與 OOJS 基本概念 (參閱〈<a
-          href="/zh-TW/docs/Learn/JavaScript/Object-oriented/Introduction"
+          href="/zh-TW/docs/Learn_web_development/Core/Scripting/Object_basics"
           >Introduction to objects</a
         >〉)。
       </td>
@@ -340,4 +340,4 @@ myString;
 - [使用 XMLHttpRequest](/zh-TW/docs/Web/API/XMLHttpRequest_API/Using_XMLHttpRequest)
 - [HTTP 請求函式](/zh-TW/docs/Web/HTTP/Methods)
 
-{{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}}
+{{PreviousMenuNext("Learn_web_development/Core/Scripting/Network_requests","Learn_web_development/Core/Scripting/Debugging_JavaScript", "Learn_web_development/Core/Scripting")}}
diff --git a/files/zh-tw/learn_web_development/core/scripting/loops/index.md b/files/zh-tw/learn_web_development/core/scripting/loops/index.md
index 65a464cc497207..4889a194a20829 100644
--- a/files/zh-tw/learn_web_development/core/scripting/loops/index.md
+++ b/files/zh-tw/learn_web_development/core/scripting/loops/index.md
@@ -4,7 +4,7 @@ slug: Learn_web_development/Core/Scripting/Loops
 original_slug: Learn/JavaScript/Building_blocks/Looping_code
 ---
 
-{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Building_blocks/conditionals","Learn/JavaScript/Building_blocks/Functions", "Learn/JavaScript/Building_blocks")}}
+{{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Core/Scripting/Conditionals","Learn_web_development/Core/Scripting/Functions", "Learn_web_development/Core/Scripting")}}
 
 編程語言對於快速完成重複性任務非常有用，從多個基本計算到幾乎任何其他需要完成大量類似工作的情況。 在這裡，我們將看看 JavaScript 中可用於處理此類需求的循環結構。
 
@@ -14,7 +14,7 @@ original_slug: Learn/JavaScript/Building_blocks/Looping_code
       <th scope="row">Prerequisites:</th>
       <td>
         Basic computer literacy, a basic understanding of HTML and CSS,
-        <a href="/zh-TW/docs/Learn/JavaScript/First_steps"
+        <a href="/zh-TW/docs/Learn_web_development/Core/Scripting"
           >JavaScript first steps</a
         >.
       </td>
@@ -886,4 +886,4 @@ If there is anything you didn't understand, feel free to read through the articl
 - [break](/zh-TW/docs/Web/JavaScript/Reference/Statements/break) and [continue](/zh-TW/docs/Web/JavaScript/Reference/Statements/continue) references
 - [What's the Best Way to Write a JavaScript For Loop?](https://www.impressivewebs.com/javascript-for-loop/) — some advanced loop best practices
 
-{{PreviousMenuNext("Learn/JavaScript/Building_blocks/conditionals","Learn/JavaScript/Building_blocks/Functions", "Learn/JavaScript/Building_blocks")}}
+{{PreviousMenuNext("Learn_web_development/Core/Scripting/Conditionals","Learn_web_development/Core/Scripting/Functions", "Learn_web_development/Core/Scripting")}}
diff --git a/files/zh-tw/learn_web_development/core/scripting/math/index.md b/files/zh-tw/learn_web_development/core/scripting/math/index.md
index 40b24810d29a3d..9d6165f55c0ed0 100644
--- a/files/zh-tw/learn_web_development/core/scripting/math/index.md
+++ b/files/zh-tw/learn_web_development/core/scripting/math/index.md
@@ -4,7 +4,7 @@ slug: Learn_web_development/Core/Scripting/Math
 original_slug: Learn/JavaScript/First_steps/Math
 ---
 
-{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps")}}
+{{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Core/Scripting/Variables", "Learn_web_development/Core/Scripting/Strings", "Learn_web_development/Core/Scripting")}}
 
 在本課程的這一點上，我們將討論 JavaScript 中的數學 - 我們如何使用{{Glossary("Operator","operators")}} 和其他功能來成功操縱數字來進行我們的出價。
 
@@ -39,7 +39,7 @@ original_slug: Learn/JavaScript/First_steps/Math
 
 - **二進位** —計算機的最底層語言；0 和 1。
 - **八進位** —以 8 為單位，每列使用 0–7。
-- **十六進位** —以 16 為單位，在每列中使用 0–9，然後使用 a–f。你之前在 CSS 中設置[顏色](/zh-TW/docs/Learn/CSS/Building_blocks/Values_and_units#hexadecimal_values)時，可能已經遇到過這些數字。
+- **十六進位** —以 16 為單位，在每列中使用 0–9，然後使用 a–f。你之前在 CSS 中設置[顏色](/zh-TW/docs/Learn_web_development/Core/Styling_basics/Values_and_units#hexadecimal_values)時，可能已經遇到過這些數字。
 
 **在開始擔心大腦融化之前，先等等！**首先，我們將在整個課程中完全使用十進位數；你很少會想到其他類型的需求，如果有的話。
 
@@ -50,7 +50,7 @@ original_slug: Learn/JavaScript/First_steps/Math
 
 ### 我怎麼看都是些數字!
 
-讓我們來快速操作一些數字來重新認識一下我們會需要用到的基本語法。將下面的需求表輸入進你的開發者工具 js 控制台([developer tools JavaScript console](/zh-TW/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools))，或是簡單建立在任何你偏好的控制台。
+讓我們來快速操作一些數字來重新認識一下我們會需要用到的基本語法。將下面的需求表輸入進你的開發者工具 js 控制台([developer tools JavaScript console](/zh-TW/docs/Learn_web_development/Howto/Tools_and_setup/What_are_browser_developer_tools))，或是簡單建立在任何你偏好的控制台。
 
 1. 首先，先來宣告兩個變數，並分別賦予他們初始值為整數與浮點數，然後接著打上變數名稱來確認萬事預備:
 
@@ -144,7 +144,7 @@ Arithmetic operators are the basic operators that we use to do sums:
 
 **備註：** You may sometimes see exponents expressed using the older {{jsxref("Math.pow()")}} method, which works in a very similar way. For example, in `Math.pow(7, 3)`, `7` is the base and `3` is the exponent, so the result of the expression is `343`. `Math.pow(7, 3)` is equivalent to `7**3`.
 
-We probably don't need to teach you how to do basic math, but we would like to test your understanding of the syntax involved. Try entering the examples below into your [developer tools JavaScript console](/zh-TW/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools), or use the simple built in console seen earlier if you'd prefer, to familiarize yourself with the syntax.
+We probably don't need to teach you how to do basic math, but we would like to test your understanding of the syntax involved. Try entering the examples below into your [developer tools JavaScript console](/zh-TW/docs/Learn_web_development/Howto/Tools_and_setup/What_are_browser_developer_tools), or use the simple built in console seen earlier if you'd prefer, to familiarize yourself with the syntax.
 
 1. First try entering some simple examples of your own, such as
 
@@ -355,4 +355,4 @@ In the next article, we'll explore text and how JavaScript allows us to manipula
 > [!NOTE]
 > If you do enjoy math and want to read more about how it is implemented in JavaScript, you can find a lot more detail in MDN's main JavaScript section. Great places to start are our [Numbers and dates](/zh-TW/docs/Web/JavaScript/Guide/Numbers_and_dates) and [Expressions and operators](/zh-TW/docs/Web/JavaScript/Guide/Expressions_and_operators) articles.
 
-{{PreviousMenuNext("Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps")}}
+{{PreviousMenuNext("Learn_web_development/Core/Scripting/Variables", "Learn_web_development/Core/Scripting/Strings", "Learn_web_development/Core/Scripting")}}
diff --git a/files/zh-tw/learn_web_development/core/scripting/object_basics/index.md b/files/zh-tw/learn_web_development/core/scripting/object_basics/index.md
index 8d509203eb84fe..d3091c8af383e8 100644
--- a/files/zh-tw/learn_web_development/core/scripting/object_basics/index.md
+++ b/files/zh-tw/learn_web_development/core/scripting/object_basics/index.md
@@ -4,7 +4,7 @@ slug: Learn_web_development/Core/Scripting/Object_basics
 original_slug: Learn/JavaScript/Objects/Basics
 ---
 
-{{LearnSidebar}}{{NextMenu("Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}}
+{{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Core/Scripting/Image_gallery","Learn_web_development/Core/Scripting/DOM_scripting", "Learn_web_development/Core/Scripting")}}
 
 第一篇談到 JavaScript 物件的文章中，我們了解到基本的 JavaScript 物件語法，複習了某些先前提過的 JavaScript 功能，也再次強調你現正使用中的許多功能其實就是物件。
 
@@ -14,8 +14,8 @@ original_slug: Learn/JavaScript/Objects/Basics
       <th scope="row">必要條件：</th>
       <td>
         基本的電腦素養、對 HTML 與 CSS 已有初步認識、熟悉 JavaScript 基本概念
-        (參閱〈<a href="/zh-TW/docs/Learn/JavaScript/First_steps">First steps</a
-        >〉與〈<a href="/zh-TW/docs/Learn/JavaScript/Building_blocks"
+        (參閱〈<a href="/zh-TW/docs/Learn_web_development/Core/Scripting">First steps</a
+        >〉與〈<a href="/zh-TW/docs/Learn_web_development/Core/Scripting"
           >Building blocks</a
         >〉)。
       </td>
@@ -310,4 +310,4 @@ var myNotification = new Notification("Hello!");
 
 下一篇文章將說明「物件導向程式設計 (OOP)」理論，並了解相關技術是如何用於 JavaScript 之中。
 
-{{NextMenu("Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}}
+{{PreviousMenuNext("Learn_web_development/Core/Scripting/Image_gallery","Learn_web_development/Core/Scripting/DOM_scripting", "Learn_web_development/Core/Scripting")}}
diff --git a/files/zh-tw/learn_web_development/core/scripting/strings/index.md b/files/zh-tw/learn_web_development/core/scripting/strings/index.md
index e079d72076371a..9a12367f97ab67 100644
--- a/files/zh-tw/learn_web_development/core/scripting/strings/index.md
+++ b/files/zh-tw/learn_web_development/core/scripting/strings/index.md
@@ -4,7 +4,7 @@ slug: Learn_web_development/Core/Scripting/Strings
 original_slug: Learn/JavaScript/First_steps/Strings
 ---
 
-{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps")}}
+{{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Core/Scripting/Math", "Learn_web_development/Core/Scripting/Useful_string_methods", "Learn_web_development/Core/Scripting")}}
 
 接下來我們將把注意力轉向字串——這就是程式設計中調用的文字片段。在本文中，我們將介紹在學習 JavaScript 時你應該了解所有有關字串的常見事項，例如建立字串，跳脫字串中的引號以及將字串連接在一起。
 
@@ -31,7 +31,7 @@ original_slug: Learn/JavaScript/First_steps/Strings
 
 ## 字串 — 基礎
 
-剛開始你會覺得字串與數字的處理方式很類似，但當你越深入就會了解到一些明顯的差異。讓我們從在 console 裡輸入一些基本的程式行來熟悉它吧！在下方，我們提供一個 Console （你也可以另開一個頁籤或視窗[使用他](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/index.html) ，或者使用瀏覽器的[開發者工具](/zh-TW/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools)）。
+剛開始你會覺得字串與數字的處理方式很類似，但當你越深入就會了解到一些明顯的差異。讓我們從在 console 裡輸入一些基本的程式行來熟悉它吧！在下方，我們提供一個 Console （你也可以另開一個頁籤或視窗[使用他](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/index.html) ，或者使用瀏覽器的[開發者工具](/zh-TW/docs/Learn_web_development/Howto/Tools_and_setup/What_are_browser_developer_tools)）。
 
 ```html hidden
 <!doctype html>
@@ -389,10 +389,10 @@ I gave it a score of ${(score / highestScore) * 100}%.`;
 ## 測試你的技能！
 
 你已到達文章的結尾了，但你能記得最重要的資訊嗎?
-在繼續學習之前，你可以找些難一點的測驗，來檢測你有記得這些知識 — [Test your skills: Strings](/zh-TW/docs/Learn/JavaScript/First_steps/Test_your_skills:_Strings). 記住，接下來的文章也需要這些知識，所以你可能想先看看。
+在繼續學習之前，你可以找些難一點的測驗，來檢測你有記得這些知識 — [Test your skills: Strings](/zh-TW/docs/Learn_web_development/Core/Scripting/Test_your_skills:_Strings). 記住，接下來的文章也需要這些知識，所以你可能想先看看。
 
 ## 結語
 
 以上是 JavaScript 中基礎的字串觀念。下個文章中，我們會依循這些概念並試試一些適用於字串的內建方法，進而運用這些方法讓字串能照我們想要的方式呈現。
 
-{{PreviousMenuNext("Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps")}}
+{{PreviousMenuNext("Learn_web_development/Core/Scripting/Math", "Learn_web_development/Core/Scripting/Useful_string_methods", "Learn_web_development/Core/Scripting")}}
diff --git a/files/zh-tw/learn_web_development/core/scripting/useful_string_methods/index.md b/files/zh-tw/learn_web_development/core/scripting/useful_string_methods/index.md
index 9f7841399a67a7..285d1a4ee5cb5e 100644
--- a/files/zh-tw/learn_web_development/core/scripting/useful_string_methods/index.md
+++ b/files/zh-tw/learn_web_development/core/scripting/useful_string_methods/index.md
@@ -4,7 +4,7 @@ slug: Learn_web_development/Core/Scripting/Useful_string_methods
 original_slug: Learn/JavaScript/First_steps/Useful_string_methods
 ---
 
-{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}
+{{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Core/Scripting/Strings", "Learn_web_development/Core/Scripting/Arrays", "Learn_web_development/Core/Scripting")}}
 
 現在我們已經了解了字符串的基礎知識，讓我們開始思考我們可以使用內置方法對字符串執行哪些有用的操作，例如查找文本字符串的長度，連接和拆分字符串 ，將字符串中的一個字符替換為另一個字符，等等。
 
@@ -35,7 +35,7 @@ var string = "This is my string";
 
 **好的，在你腦袋燒壞之前先別擔心！**在這趟學習旅程中，關於這些大部分對於現在的你其實還不需要知道。不過有一些你可能會經常使用，我們將在這裡介紹。
 
-Let's enter some examples into a fresh console. We've provided one below (you can also [open this console](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/index.html) in a separate tab or window, or use the [browser developer console](/zh-TW/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools) if you'd prefer).
+Let's enter some examples into a fresh console. We've provided one below (you can also [open this console](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/index.html) in a separate tab or window, or use the [browser developer console](/zh-TW/docs/Learn_web_development/Howto/Tools_and_setup/What_are_browser_developer_tools) if you'd prefer).
 
 ```html hidden
 <!doctype html>
@@ -718,4 +718,4 @@ textarea.onkeyup = function () {
 
 不可否認當網站在跟人們互相溝通時，處理文字和句子在程式設計中是相當重要的，尤其是在 JavaScript 中。這篇文章已經傳授你如何去處理字串的方法，應該對以後深入了解其他更複雜主題的你會很有幫助。接下來，我們將會看看最後一個近期內我們需要關注的主要的資料型態 — 陣列。
 
-{{PreviousMenuNext("Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}
+{{PreviousMenuNext("Learn_web_development/Core/Scripting/Strings", "Learn_web_development/Core/Scripting/Arrays", "Learn_web_development/Core/Scripting")}}
diff --git a/files/zh-tw/learn_web_development/core/scripting/variables/index.md b/files/zh-tw/learn_web_development/core/scripting/variables/index.md
index f2841c762de4dd..a3f59e3210c68d 100644
--- a/files/zh-tw/learn_web_development/core/scripting/variables/index.md
+++ b/files/zh-tw/learn_web_development/core/scripting/variables/index.md
@@ -4,7 +4,7 @@ slug: Learn_web_development/Core/Scripting/Variables
 original_slug: Learn/JavaScript/First_steps/Variables
 ---
 
-{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps")}}
+{{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Core/Scripting/What_went_wrong", "Learn_web_development/Core/Scripting/Math", "Learn_web_development/Core/Scripting")}}
 
 閱讀完最後幾篇文章之後，你現在應該知道 JavaScript 是什麼，它可以為你做什麼，如何將它與其他 Web 技術一起使用，以及它的主要功能從高層看起來如何。 在本文中，我們將深入了解真正的基礎知識，了解如何使用 JavaScript 的大多數基本構建塊 - 變數。
 
@@ -23,7 +23,7 @@ original_slug: Learn/JavaScript/First_steps/Variables
 
 ## 你需要的工具
 
-在此篇文章中，你將被要求輸入程式碼行來測試你對內容的理解。如果你使用的是網頁瀏覽器，最適合輸入代碼的地方便是 JavaScript 主控台, (請參閱[什麼是瀏覽器開發工具](/zh-TW/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools)這篇文章以取得更多關於此工具的資訊).
+在此篇文章中，你將被要求輸入程式碼行來測試你對內容的理解。如果你使用的是網頁瀏覽器，最適合輸入代碼的地方便是 JavaScript 主控台, (請參閱[什麼是瀏覽器開發工具](/zh-TW/docs/Learn_web_development/Howto/Tools_and_setup/What_are_browser_developer_tools)這篇文章以取得更多關於此工具的資訊).
 
 ## 什麼是變量／變數？
 
@@ -366,4 +366,4 @@ daysInWeek = 8;
 
 By now you should know a reasonable amount about JavaScript variables and how to create them. In the next article, we'll focus on numbers in more detail, looking at how to do basic math in JavaScript.
 
-{{PreviousMenuNext("Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps/Maths", "Learn/JavaScript/First_steps")}}
+{{PreviousMenuNext("Learn_web_development/Core/Scripting/What_went_wrong", "Learn_web_development/Core/Scripting/Math", "Learn_web_development/Core/Scripting")}}
diff --git a/files/zh-tw/learn_web_development/core/scripting/what_is_javascript/index.md b/files/zh-tw/learn_web_development/core/scripting/what_is_javascript/index.md
index cf496410c22087..6f060e8d21edb6 100644
--- a/files/zh-tw/learn_web_development/core/scripting/what_is_javascript/index.md
+++ b/files/zh-tw/learn_web_development/core/scripting/what_is_javascript/index.md
@@ -4,7 +4,7 @@ slug: Learn_web_development/Core/Scripting/What_is_JavaScript
 original_slug: Learn/JavaScript/First_steps/What_is_JavaScript
 ---
 
-{{LearnSidebar}}{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}
+{{LearnSidebar}}{{NextMenu("Learn_web_development/Core/Scripting/A_first_splash", "Learn_web_development/Core/Scripting")}}
 
 歡迎來到 MDN 的 JavaScript 初學者課程！我們將在這個章節綜觀 JavaScript ，回答一些像是「它什麼？」和「可以使用它作什麼？」之的問題，並確保你了解 JavaScript 的特性。
 
@@ -150,7 +150,7 @@ function updateName() {
 
 這裡我們選擇了一個文字段落（第 1 行），然後加上事件偵聽器，所以當段落被點擊的時候，`updateName()` 程式區塊（5 到 8 行 ）會被執行。`updateName()` 程式區塊（這種可以重複使用的程式區塊被稱為「函數 function」）會向使用者要一個新的名字，然後將插到段落中，更新顯示的內容。
 
-如果你交換前兩行的程式碼，它將不再正常運作。取而代之的，[瀏覽器開發主控台](/zh-TW/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools)會回報一個錯誤訊息：「`TypeError: para is undefined`」，意思是 `para` 物件尚不存在，所以我們在它上頭增加事件偵聽器。
+如果你交換前兩行的程式碼，它將不再正常運作。取而代之的，[瀏覽器開發主控台](/zh-TW/docs/Learn_web_development/Howto/Tools_and_setup/What_are_browser_developer_tools)會回報一個錯誤訊息：「`TypeError: para is undefined`」，意思是 `para` 物件尚不存在，所以我們在它上頭增加事件偵聽器。
 
 > [!NOTE]
 > 這是一個很常見的錯誤，在你嘗試對物件進行操作之前，你需要注意它們已經存在。
@@ -292,7 +292,7 @@ for (var i = 0; i < buttons.length ; i++) {
 
 ### 腳本載入策略
 
-在正確的時機載入腳本涉及一些要注意的東西。並不如它看起來的簡單！其中一個常見的問題是，所有的 HTML 是根據出現順序載入。假如你使用 JavaScript 操作頁面中的元素（精確地來說是 [DOM 元素](/zh-TW/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents#The_document_object_model)），如果 JavaScript 在這些 HTML 操作對象前被讀取及解析，你的程式將無法運作。
+在正確的時機載入腳本涉及一些要注意的東西。並不如它看起來的簡單！其中一個常見的問題是，所有的 HTML 是根據出現順序載入。假如你使用 JavaScript 操作頁面中的元素（精確地來說是 [DOM 元素](/zh-TW/docs/Learn_web_development/Core/Scripting/DOM_scripting#The_document_object_model)），如果 JavaScript 在這些 HTML 操作對象前被讀取及解析，你的程式將無法運作。
 
 上面的範例中，內部和外部 JavaScript 範例裡的程式碼都放在 HTML 的 head 區域，在 body 區被載入前就先被解析。這樣會造成一些問題，所以我們載入與執行在文件(HTML 檔)的開頭，是 HTML `body` 還沒解析之前。這可能會產生錯誤，所以我們使用一些模式來處理它。
 
@@ -304,7 +304,7 @@ document.addEventListener("DOMContentLoaded", function() {
 });
 ```
 
-這是一個事件偵聽器，它偵聽瀏覽器的「DOMContentLoaded」事件，它是在 HTML body 部分已經完全載入與解析發出。區塊內（... 的部分）的 JavaScript 直到事件被發出後才會執行，這樣子問題就被避開了。（你將會在這個課程中[學習到什麼是事件](/zh-TW/docs/Learn/JavaScript/Building_blocks/Events)）
+這是一個事件偵聽器，它偵聽瀏覽器的「DOMContentLoaded」事件，它是在 HTML body 部分已經完全載入與解析發出。區塊內（... 的部分）的 JavaScript 直到事件被發出後才會執行，這樣子問題就被避開了。（你將會在這個課程中[學習到什麼是事件](/zh-TW/docs/Learn_web_development/Core/Scripting/Events)）
 
 在外部程式的範例中，我們使用比較現代的 JavaScript 特性來解決這個問題，`defer` 屬性，它告訴瀏覽器碰到這種 `<script>` 標籤時，繼續下載後面其他的 HTML 內容。
 
@@ -410,4 +410,4 @@ for (var i = 0; i < buttons.length; i++) {
 
 JavaScript 目前可能看起來有一點嚇人，然而不用擔心，在本課程我們會透過簡單的步驟，帶著你建立觀念並繼續向前。 在下一章節，我們將會[投入更實用的知識](/zh-TW/docs/Learn_web_development/Core/Scripting/A_first_splash)，帶你直接入門並建立你自己的 JavaScript 作品。
 
-{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}
+{{NextMenu("Learn_web_development/Core/Scripting/A_first_splash", "Learn_web_development/Core/Scripting")}}
diff --git a/files/zh-tw/learn_web_development/core/scripting/what_went_wrong/index.md b/files/zh-tw/learn_web_development/core/scripting/what_went_wrong/index.md
index 0baa1089e54291..7c90d50c87e84c 100644
--- a/files/zh-tw/learn_web_development/core/scripting/what_went_wrong/index.md
+++ b/files/zh-tw/learn_web_development/core/scripting/what_went_wrong/index.md
@@ -4,7 +4,7 @@ slug: Learn_web_development/Core/Scripting/What_went_wrong
 original_slug: Learn/JavaScript/First_steps/What_went_wrong
 ---
 
-{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps")}}
+{{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Core/Scripting/A_first_splash", "Learn_web_development/Core/Scripting/Variables", "Learn_web_development/Core/Scripting")}}
 
 當你在練習撰寫上一節的「猜數字」遊戲時，你可能會發現它無法運作。不用擔心，本文將會把你從快被拔光的頭髮中拯救出來，並且給你一些小提示，讓你知道怎麼找出及修正 Javascript 的程式運行錯誤。
 
@@ -44,7 +44,7 @@ original_slug: Learn/JavaScript/First_steps/What_went_wrong
 
 ## 修復語法錯誤
 
-在前篇文章中我們讓你在[開發者工具 JavaScript console](/zh-TW/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools)中輸入了一些 JavaScript 指令（如果你不記得怎麼打開這個東西，點選前面的連結複習一下）。更重要的是，主控台在瀏覽器的 JavaScript 引擎讀取到有語法錯誤的 JavaScript 時會提示一些錯誤訊息。現在讓我們來看看：
+在前篇文章中我們讓你在[開發者工具 JavaScript console](/zh-TW/docs/Learn_web_development/Howto/Tools_and_setup/What_are_browser_developer_tools)中輸入了一些 JavaScript 指令（如果你不記得怎麼打開這個東西，點選前面的連結複習一下）。更重要的是，主控台在瀏覽器的 JavaScript 引擎讀取到有語法錯誤的 JavaScript 時會提示一些錯誤訊息。現在讓我們來看看：
 
 1. 切換到你開啟了`number-game-errors.html` 的分頁，然後打開你的 JavaScript 主控台。你應該會看到如下的幾行錯誤訊息：![](not-a-function.png)
 2. 這是一個非常容易追尋的錯誤，而且瀏覽器還給你了不少有用的資訊來幫助你（這張截圖是 Firefox 的，但其他瀏覽器也會提示相似的錯誤訊息）。從左到右，我們可以看到：
@@ -251,9 +251,9 @@ function checkGuess( {
 
 那麼，我們得到它了——能在簡易 JavaScript 程式中找出錯誤的基礎知識。解決程式碼中的錯誤並不總是那麼簡單，但至少本章節可以為你省下幾小時的時間好用來睡覺，並讓你在早期學習過程更快的解決問題。
 
-## 另可參閱
+## 參見
 
 - 還有許多類型的錯誤未列在此頁，我們正在編輯一份參考資料好詳細解釋了它們的含義——可參閱[JavaScript error reference](/zh-TW/docs/Web/JavaScript/Reference/Errors)。
 - 如果你在閱讀本章節遇到了某些程式錯誤而且不知道如何修正，你可以尋求援助！可以至[Learning Area Discourse thread](https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294)發問，或者到[Mozilla IRC](https://wiki.mozilla.org/IRC)的[#mdn](irc://irc.mozilla.org/mdn)頻道提問。告訴我們你遇到什麼錯誤，我們會盡力幫助你。若能附上你的程式碼會更有幫助。
 
-{{PreviousMenuNext("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps")}}
+{{PreviousMenuNext("Learn_web_development/Core/Scripting/A_first_splash", "Learn_web_development/Core/Scripting/Variables", "Learn_web_development/Core/Scripting")}}
diff --git a/files/zh-tw/learn_web_development/core/structuring_content/basic_html_syntax/index.md b/files/zh-tw/learn_web_development/core/structuring_content/basic_html_syntax/index.md
index abbec7ec05626e..40b5af1eee93e7 100644
--- a/files/zh-tw/learn_web_development/core/structuring_content/basic_html_syntax/index.md
+++ b/files/zh-tw/learn_web_development/core/structuring_content/basic_html_syntax/index.md
@@ -4,7 +4,7 @@ slug: Learn_web_development/Core/Structuring_content/Basic_HTML_syntax
 original_slug: Learn/HTML/Introduction_to_HTML/Getting_started
 ---
 
-{{LearnSidebar}}{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}
+{{LearnSidebar}}{{NextMenu("Learn_web_development/Core/Structuring_content/Webpage_metadata", "Learn_web_development/Core/Structuring_content")}}
 
 本文將探討 HTML 最基本的部分。首先，我們將會定義元素（element）、屬性（attribute）以及其它你可能聽過的重要名詞，然後講解該如何使用它們。我們也會告訴你典型的 HTML 頁面以及其中的元素是如何構成的，以及解釋其他重要的基礎語言特性。在此過程中，我們會撰寫一些 HTML 來引發你的興趣！
 
@@ -619,4 +619,4 @@ HTML 就像大部分的程式語言，提供了一種能讓我們可以在原始
 
 - [用 CSS 為 HTML 元素修改顏色](/zh-TW/docs/Web/CSS/CSS_colors/Applying_color)
 
-{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}
+{{NextMenu("Learn_web_development/Core/Structuring_content/Webpage_metadata", "Learn_web_development/Core/Structuring_content")}}
diff --git a/files/zh-tw/learn_web_development/core/structuring_content/creating_links/index.md b/files/zh-tw/learn_web_development/core/structuring_content/creating_links/index.md
index 1fc2627430e0eb..92c6caa9f9f779 100644
--- a/files/zh-tw/learn_web_development/core/structuring_content/creating_links/index.md
+++ b/files/zh-tw/learn_web_development/core/structuring_content/creating_links/index.md
@@ -4,7 +4,7 @@ slug: Learn_web_development/Core/Structuring_content/Creating_links
 original_slug: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks
 ---
 
-{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}
+{{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/Advanced_text_features", "Learn_web_development/Core/Structuring_content/Marking_up_a_letter", "Learn_web_development/Core/Structuring_content")}}
 
 超連結(Hyperlinks)真的超級重要 — 它造就了我們現今所熟知的網路。這篇文章將會介紹超連結的使用語法，並且探討建立它們的最佳實踐方法。
 
@@ -14,12 +14,12 @@ original_slug: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks
       <th scope="row">需求：</th>
       <td>
         我們在
-        <a href="/zh-TW/docs/Learn/HTML/Introduction_to_HTML/Getting_started"
+        <a href="/zh-TW/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax"
           >HTML 入門</a
         >
         中介紹過的 HTML 基礎，以及在
         <a
-          href="/zh-TW/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals"
+          href="/zh-TW/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs"
           >HTML 的文字基礎知識</a
         >
         中介紹過的文字格式化技巧。
@@ -312,7 +312,7 @@ URL 利用路徑來找到檔案，而路徑會指出你所感興趣的檔案位
 ```
 
 > [!NOTE]
-> 每一個欄位的值必須以 URL 編碼，也就是將空白及不可印字元(不可見的字元如縮排(tabs)、回車(carriage return)、換頁(page breaks)等等)轉換成[百分號編碼](http://en.wikipedia.org/wiki/Percent-encoding)。也請注意這裡使用問號(`?`)來分隔主要 URL 和其他欄位；以 & 來分隔 `mailto:` URL 中的不同的欄位，這是標準的 URL 查詢記號(query notation)。你可以閱讀 [GET 方法](/zh-TW/docs/Learn/Forms/Sending_and_retrieving_form_data#the_get_method)來得知有那些常用的查詢記號。
+> 每一個欄位的值必須以 URL 編碼，也就是將空白及不可印字元(不可見的字元如縮排(tabs)、回車(carriage return)、換頁(page breaks)等等)轉換成[百分號編碼](http://en.wikipedia.org/wiki/Percent-encoding)。也請注意這裡使用問號(`?`)來分隔主要 URL 和其他欄位；以 & 來分隔 `mailto:` URL 中的不同的欄位，這是標準的 URL 查詢記號(query notation)。你可以閱讀 [GET 方法](/zh-TW/docs/Learn_web_development/Extensions/Forms/Sending_and_retrieving_form_data#the_get_method)來得知有那些常用的查詢記號。
 
 以下是 `mailto` URL 的其他例子：
 
@@ -324,10 +324,10 @@ URL 利用路徑來找到檔案，而路徑會指出你所感興趣的檔案位
 
 ## 小試身手！
 
-你已經讀完這個章節囉，但你有掌握箇中的重點嗎？你可以在繼續閱讀後面的章節之前，先進行一些測驗 — 請前往[小試身手：超連結。](/zh-TW/docs/Learn/HTML/Introduction_to_HTML/Test_your_skills:_Links)
+你已經讀完這個章節囉，但你有掌握箇中的重點嗎？你可以在繼續閱讀後面的章節之前，先進行一些測驗 — 請前往[小試身手：超連結。](/zh-TW/docs/Learn_web_development/Core/Structuring_content/Test_your_skills:_Links)
 
 ## 總結
 
 總而言之，以上就是超連結的介紹了！ 稍後你在後續的課程中學到如何位連結增添樣式時，還會再碰到它們。HTML 的下一章，我們將繼續討論文字語義(text semantics)，並看一些進階／不常見的特性，相信你會獲益良多的 — 下一站是：進階文字格式化技巧！
 
-{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}
+{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/Advanced_text_features", "Learn_web_development/Core/Structuring_content/Marking_up_a_letter", "Learn_web_development/Core/Structuring_content")}}
diff --git a/files/zh-tw/learn_web_development/core/structuring_content/headings_and_paragraphs/index.md b/files/zh-tw/learn_web_development/core/structuring_content/headings_and_paragraphs/index.md
index ae7126d54b8494..3ab327d2aacaa9 100644
--- a/files/zh-tw/learn_web_development/core/structuring_content/headings_and_paragraphs/index.md
+++ b/files/zh-tw/learn_web_development/core/structuring_content/headings_and_paragraphs/index.md
@@ -4,7 +4,7 @@ slug: Learn_web_development/Core/Structuring_content/Headings_and_paragraphs
 original_slug: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals
 ---
 
-{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}
+{{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/Webpage_metadata", "Learn_web_development/Core/Structuring_content/Emphasis_and_importance", "Learn_web_development/Core/Structuring_content")}}
 
 HTML 的其中一件核心工作，就是給出文件的結構和含義（又稱{{glossary("semantics")}}），以便瀏覽器正確顯示。本文章旨在說明 {{glossary("HTML")}} 可透過增加標題、章節、強調、建立清單等，建立結構化的頁面。
 
@@ -14,7 +14,7 @@ HTML 的其中一件核心工作，就是給出文件的結構和含義（又稱
       <th scope="row">需求：</th>
       <td>
         熟悉基本 HTML、在
-        <a href="/zh-TW/docs/Learn/HTML/Introduction_to_HTML/Getting_started"
+        <a href="/zh-TW/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax"
           >Getting started with HTML</a
         >
         有講解。
@@ -1028,4 +1028,4 @@ Here's the best rule of thumb: it's likely appropriate to use `<b>`, `<i>`, or `
 
 That's it for now! This article should have given you a good idea of how to start marking up text in HTML, and introduced you to some of the most important elements in this area. There are a lot more semantic elements to cover in this area, and we'll look at a lot more in our 'More Semantic Elements' article, later on in the course. In the next article, we'll be looking in detail at how to [create hyperlinks](/zh-TW/docs/Learn_web_development/Core/Structuring_content/Creating_links), possibly the most important element on the Web.
 
-{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}
+{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/Webpage_metadata", "Learn_web_development/Core/Structuring_content/Emphasis_and_importance", "Learn_web_development/Core/Structuring_content")}}
diff --git a/files/zh-tw/learn_web_development/core/structuring_content/html_images/index.md b/files/zh-tw/learn_web_development/core/structuring_content/html_images/index.md
index 4788679ff92eee..75f37a23ced570 100644
--- a/files/zh-tw/learn_web_development/core/structuring_content/html_images/index.md
+++ b/files/zh-tw/learn_web_development/core/structuring_content/html_images/index.md
@@ -4,11 +4,11 @@ slug: Learn_web_development/Core/Structuring_content/HTML_images
 original_slug: Learn/HTML/Multimedia_and_embedding/Images_in_HTML
 ---
 
-{{LearnSidebar}}{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}
+{{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content", "Learn_web_development/Core/Structuring_content/HTML_video_and_audio", "Learn_web_development/Core/Structuring_content")}}
 
 最初的網頁最初的發展階段，只是文字。而只有文字想當然爾令網頁讀起來十分的枯燥乏味。然而幸運的是沒有多久，將圖片（以及其他更有趣的內容類型）嵌入網頁的功能就誕生了。 在多媒體嵌入網頁的學習中，從 [element embeds an image into the document.">`<img>`](/zh-TW/docs/Web/HTML/Element/img)元素開始是相對適當，因為該元素用於在網頁中嵌入簡單的圖像。 在本文中，我們將研究如何深入使用它，包括在網頁中嵌入簡單圖像的基礎知識，使用\<figure>增加標題說明以做註釋，以及詳細說明它與 CSS 背景圖片的關係。
 
-<table class="learn-box standard-table">
+<table>
   <tbody>
     <tr>
       <th scope="row">課成需求:</th>
@@ -105,13 +105,13 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Images_in_HTML
 
 - **裝飾：** 你可以用 [CSS 背景圖片](#css_背景圖片) 加入裝飾圖片，但如果必須使用 HTML，可以添加一個空的 `alt=""`。如果圖片不是內容的一部分，那麼就不應該讓螢幕閱讀器浪費時間去閱讀它。
 - **內容：** 如果你的圖片提供了重要的資訊，請在簡短的`alt`文字中提供相同的資訊，甚至最好在所有人都能看到的主要文字中提供相同的資訊。請不要撰寫冗餘替代文字，試想如果所有段落都在主要內容中寫了兩次，對於用視力觀看的使用者有多煩人。如果圖像在正文中已充分敘述，請使用 `alt=""`。
-- **連結：** 如果你在{{htmlelement("a")}} 標籤中放了圖片使其轉入連結，你仍應該提供[明確的字詞](/zh-TW/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#%E4%BD%BF%E7%94%A8%E6%98%8E%E7%A2%BA%E7%9A%84%E5%AD%97%E8%A9%9E)。在这种情况下，你可以根據適合你的情況，将其写在相同的`<a>`元素内，或是写在图像的`alt` 属性内。
+- **連結：** 如果你在{{htmlelement("a")}} 標籤中放了圖片使其轉入連結，你仍應該提供[明確的字詞](/zh-TW/docs/Learn_web_development/Core/Structuring_content/Creating_links#使用明確的字詞)。在这种情况下，你可以根據適合你的情況，将其写在相同的`<a>`元素内，或是写在图像的`alt` 属性内。
 - **文字：** 請不要在圖片中寫字。如果你的主要目的是為標題加上下拉式陰影，你可以[使用 CSS](/zh-TW/docs/Web/CSS/text-shadow)更甚於在圖片中描繪文字。 但如果你無法避免這麼做，也請將文字敘述加在`alt` 属性内。
 
 本質上，關鍵是即使在看不見圖片的情況下也能提供相同的體驗。這樣可以確保所有使用者都不會丟失任何內容。嘗試在瀏覽器中關閉圖像，然後查看外觀。你很快就會意識到，如果看不到圖片，替代文字會很有幫助。
 
 > [!NOTE]
-> For more information, see our guide to [Text Alternatives](/zh-TW/docs/Learn/Accessibility/HTML#Text_alternatives).
+> For more information, see our guide to [Text Alternatives](/zh-TW/docs/Learn_web_development/Core/Accessibility/HTML#Text_alternatives).
 
 ### 寬與高
 
@@ -139,7 +139,7 @@ However, you shouldn't alter the size of your images using HTML attributes. If y
 
 ### 圖片標題
 
-As [with links](/zh-TW/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#Adding_supporting_information_with_%3Ctitle%3E), you can also add `title` attributes to images, to provide further supporting information if needed. In our example, we could do this:
+As [with links](/zh-TW/docs/Learn_web_development/Core/Structuring_content/Creating_links#Adding_supporting_information_with_%3Ctitle%3E), you can also add `title` attributes to images, to provide further supporting information if needed. In our example, we could do this:
 
 ```html
 <img
@@ -511,10 +511,10 @@ p {
 
 ## 試試看!
 
-你已經來到了本文的末端，但是你還記得最重要的內容嗎？在繼續往下之前，這裡有些測驗讓你驗證看看你是否都學會了——[測驗：HTML 圖像](/zh-TW/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML/Test_your_skills:_HTML_images)。
+你已經來到了本文的末端，但是你還記得最重要的內容嗎？在繼續往下之前，這裡有些測驗讓你驗證看看你是否都學會了——[測驗：HTML 圖像](/zh-TW/docs/Learn_web_development/Core/Structuring_content/HTML_images/Test_your_skills:_HTML_images)。
 
 ## 總結
 
 目前就是這樣啦。 我們已經詳細介紹了圖片和標題說明。 在下一篇文章中我們將進一步介紹，如何使用 HTML 將視頻和音頻嵌入在網頁中。
 
-{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}
+{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content", "Learn_web_development/Core/Structuring_content/HTML_video_and_audio", "Learn_web_development/Core/Structuring_content")}}
diff --git a/files/zh-tw/learn_web_development/core/structuring_content/html_table_basics/index.md b/files/zh-tw/learn_web_development/core/structuring_content/html_table_basics/index.md
index c2f4fdcabeb40b..fb3cc0963d9864 100644
--- a/files/zh-tw/learn_web_development/core/structuring_content/html_table_basics/index.md
+++ b/files/zh-tw/learn_web_development/core/structuring_content/html_table_basics/index.md
@@ -4,17 +4,17 @@ slug: Learn_web_development/Core/Structuring_content/HTML_table_basics
 original_slug: Learn/HTML/Tables/Basics
 ---
 
-{{LearnSidebar}}{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}
+{{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/Mozilla_splash_page", "Learn_web_development/Core/Structuring_content/Table_accessibility", "Learn_web_development/Core/Structuring_content")}}
 
 這篇文章將帶你從列、格、標頭，以及將各格以數欄、數列的方式合併等基礎開始探索 HTML 表格。
 
-<table class="learn-box standard-table">
+<table>
   <tbody>
     <tr>
       <th scope="row">先備知識:</th>
       <td>
         <p>
-          HTML的基礎(見<a href="/zh-TW/docs/Learn/HTML/Introduction_to_HTML"
+          HTML的基礎(見<a href="/zh-TW/docs/Learn_web_development/Core/Structuring_content"
             >介紹HTML</a
           >)
         </p>
@@ -191,19 +191,19 @@ original_slug: Learn/HTML/Tables/Basics
 
 你也可以在 [GitHub](https://mdn.github.io/learning-area/html/tables/assessment-finished/planets-data.html) 上看看實際範例 ! 而你也許會注意到那裡的表格似乎更容易閱讀。那是因為這裡的表格只有加上很少樣式，而 GitHub 上的版本卻應用上了更多明顯的 CSS 。
 
-需要弄清楚的一點是 : 要讓表格在網頁上有效呈現需要提供紮實的 HTML 架構和 CSS 樣式資訊，但將在這個模組中聚焦在 HTML 的部分。若想瞭解 CSS 的部分，可以在完成這部分閱讀之後造訪[表格樣式設計](/zh-TW/docs/Learn/CSS/Building_blocks/Styling_tables)的文章。
+需要弄清楚的一點是 : 要讓表格在網頁上有效呈現需要提供紮實的 HTML 架構和 CSS 樣式資訊，但將在這個模組中聚焦在 HTML 的部分。若想瞭解 CSS 的部分，可以在完成這部分閱讀之後造訪[表格樣式設計](/zh-TW/docs/Learn_web_development/Core/Styling_basics/Tables)的文章。
 
 在這個單元裡我們將不會聚焦在 CSS 上，但是我們提供基本的 CSS 樣式表讓你做使用，這將會使你製作的表格比起毫無修飾的預設樣式更方便閱讀。你能在這找到[樣式表](https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css)，並且你也能找到一個適用於樣式表的[HTML 模版](https://github.com/mdn/learning-area/blob/master/html/tables/basic/blank-template.html) — 他們能一起讓你有個好起點來實驗 HTML 表格。
 
 ### 當何時你不應該使用 HTML 表格?
 
 HTML 表格應該被使用在結構化資料(tabular data)上 — 這就是它們被設計的目的。
-不幸地是，許多人習慣使用 HTML 表格去排版他們的網頁，例如: 使用一列去當 header，一列當做內容欄位，一列當作 footer...等等，你能在我們的[輔助學習單元](/zh-TW/docs/Learn_web_development/Core/Accessibility)裡的[頁面輸出](/zh-TW/docs/Learn/Accessibility/HTML#Page_layouts)發現更多細節以及一個範例。它曾經被這麼使用是因為 CSS 過去在不同瀏覽器之間的支援程度十分可怕; 如今，已非常少在用表格做排版，但你仍然可能在網路的一些邊邊角角見到。
+不幸地是，許多人習慣使用 HTML 表格去排版他們的網頁，例如: 使用一列去當 header，一列當做內容欄位，一列當作 footer...等等，你能在我們的[輔助學習單元](/zh-TW/docs/Learn_web_development/Core/Accessibility)裡的[頁面輸出](/zh-TW/docs/Learn_web_development/Core/Accessibility/HTML#Page_layouts)發現更多細節以及一個範例。它曾經被這麼使用是因為 CSS 過去在不同瀏覽器之間的支援程度十分可怕; 如今，已非常少在用表格做排版，但你仍然可能在網路的一些邊邊角角見到。
 
 簡單來說，使用表格排版而非使用[CSS 排版技術](/zh-TW/docs/Learn_web_development/Core/CSS_layout)是一件很糟的事情。
 下列是主要原因:
 
-1. **表格排版會減少對視障使用者的輔助** : 視障者使用的[螢幕閱讀器](/zh-TW/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders)會翻譯存在於 HTML 網頁的標籤並對使用者念出內容。由於表格並不是正確的排版工具，並且標示方式遠複雜於 CSS 排版技術，所以螢幕閱讀器輸出的內容會使他們的使用者感到困惑。
+1. **表格排版會減少對視障使用者的輔助**: 視障者使用的[螢幕閱讀器](/zh-TW/docs/Learn_web_development/Core/Accessibility/Tooling#Screenreaders)會翻譯存在於 HTML 網頁的標籤並對使用者念出內容。由於表格並不是正確的排版工具，並且標示方式遠複雜於 CSS 排版技術，所以螢幕閱讀器輸出的內容會使他們的使用者感到困惑。
 2. **表格會產生標籤雜燴(tag soup)**: 就像上面提到的，表格排版通常會比一般適當的輸出技術包含更複雜的標籤結構。這會導致程式碼本身更難撰寫、維護及 debug。
 3. **表格不會自適應(automatically responsive)**: 當你使用合適的排版容器(像是{htmlelement("header")}, {{htmlelement("section")}}) 或是 {{htmlelement("div")}}),它們的寬度相對於父層預設為 100%，而表格的預設大小是依據它們的內容物，所以當表格樣式要有效的在不同的裝置之間運行時，會需要做額外的測量調整。
 
@@ -536,4 +536,4 @@ See how you get on with the example. If you get stuck, or want to check your wor
 
 That just about wraps up the basics of HTML Tables. In the next article we will look at some slightly more advanced table features, and start to think how accessible they are for visually impaired people.
 
-{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}
+{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/Mozilla_splash_page", "Learn_web_development/Core/Structuring_content/Table_accessibility", "Learn_web_development/Core/Structuring_content")}}
diff --git a/files/zh-tw/learn_web_development/core/structuring_content/html_video_and_audio/test_your_skills_colon__multimedia_and_embedding/index.md b/files/zh-tw/learn_web_development/core/structuring_content/html_video_and_audio/test_your_skills_colon__multimedia_and_embedding/index.md
index 1af626d5e12480..07b6579cd49bdc 100644
--- a/files/zh-tw/learn_web_development/core/structuring_content/html_video_and_audio/test_your_skills_colon__multimedia_and_embedding/index.md
+++ b/files/zh-tw/learn_web_development/core/structuring_content/html_video_and_audio/test_your_skills_colon__multimedia_and_embedding/index.md
@@ -4,7 +4,9 @@ slug: Learn_web_development/Core/Structuring_content/HTML_video_and_audio/Test_y
 original_slug: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content/Test_your_skills:_Multimedia_and_embedding
 ---
 
-{{learnsidebar}}這項技能測試的目的是評估你是否了解我們的[視訊和音訊內容](/zh-TW/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content)以及[從物件到 iframe 的其他嵌入技術](/zh-TW/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies)文章。
+{{learnsidebar}}
+
+這項技能測試的目的是評估你是否了解我們的[視訊和音訊內容](/zh-TW/docs/Learn_web_development/Core/Structuring_content/HTML_video_and_audio)以及[從物件到 iframe 的其他嵌入技術](/zh-TW/docs/Learn_web_development/Core/Structuring_content/General_embedding_technologies)文章。
 
 > [!NOTE]
 > 你可以在下面的交互式編輯器中嘗試解決方案，但是下載代碼並使用在線工具如 [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/) 去完成測試。
diff --git a/files/zh-tw/learn_web_development/core/structuring_content/structuring_documents/index.md b/files/zh-tw/learn_web_development/core/structuring_content/structuring_documents/index.md
index bb517424845d3f..c8c3b811926067 100644
--- a/files/zh-tw/learn_web_development/core/structuring_content/structuring_documents/index.md
+++ b/files/zh-tw/learn_web_development/core/structuring_content/structuring_documents/index.md
@@ -4,7 +4,7 @@ slug: Learn_web_development/Core/Structuring_content/Structuring_documents
 original_slug: Learn/HTML/Introduction_to_HTML/Document_and_website_structure
 ---
 
-{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}
+{{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/Lists", "Learn_web_development/Core/Structuring_content/Advanced_text_features", "Learn_web_development/Core/Structuring_content")}}
 
 {{glossary("HTML")}} 不僅能夠定義網頁的單獨部分（例如「段落」或「圖片」），還可以使用區塊級元素（例如「標題欄」、「導覽選單」、「主內容列」）來定義網站中的複合區域。本文將探討如何規劃基本的網站結構，並根據規劃的結構來編寫 HTML。
 
@@ -14,15 +14,15 @@ original_slug: Learn/HTML/Introduction_to_HTML/Document_and_website_structure
       <th scope="row">預備知識:</th>
       <td>
         Basic HTML familiarity, as covered in
-        <a href="/zh-TW/docs/Learn/HTML/Introduction_to_HTML/Getting_started"
+        <a href="/zh-TW/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax"
           >Getting started with HTML</a
         >. HTML text formatting, as covered in
         <a
-          href="/zh-TW/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals"
+          href="/zh-TW/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs"
           >HTML text fundamentals</a
         >. How hyperlinks work, as covered in
         <a
-          href="/zh-TW/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks"
+          href="/zh-TW/docs/Learn_web_development/Core/Structuring_content/Creating_links"
           >Creating hyperlinks</a
         >.
       </td>
@@ -306,7 +306,7 @@ Try carrying out the above exercise for a website of your own creation. What wou
 
 ## Test your skills!
 
-You've reached the end of this article, but can you remember the most important information? You can find a detailed assessment that tests these skills at the end of the module; see [Structuring a page of content](/zh-TW/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content). We'd advise going through the next article in the series first and not just skipping to it though!
+You've reached the end of this article, but can you remember the most important information? You can find a detailed assessment that tests these skills at the end of the module; see [Structuring a page of content](/zh-TW/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content). We'd advise going through the next article in the series first and not just skipping to it though!
 
 ## Summary
 
@@ -316,4 +316,4 @@ At this point you should have a better idea about how to structure a web page/si
 
 - [Using HTML sections and outlines](/zh-TW/docs/Web/HTML/Element/Heading_Elements): Advanced guide to HTML5 semantic elements and the HTML5 outline algorithm.
 
-{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}
+{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/Lists", "Learn_web_development/Core/Structuring_content/Advanced_text_features", "Learn_web_development/Core/Structuring_content")}}
diff --git a/files/zh-tw/learn_web_development/core/structuring_content/webpage_metadata/index.md b/files/zh-tw/learn_web_development/core/structuring_content/webpage_metadata/index.md
index bc2363911f2fe2..2cd21074813df9 100644
--- a/files/zh-tw/learn_web_development/core/structuring_content/webpage_metadata/index.md
+++ b/files/zh-tw/learn_web_development/core/structuring_content/webpage_metadata/index.md
@@ -4,7 +4,7 @@ slug: Learn_web_development/Core/Structuring_content/Webpage_metadata
 original_slug: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
 ---
 
-{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}
+{{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/Basic_HTML_syntax", "Learn_web_development/Core/Structuring_content/Headings_and_paragraphs", "Learn_web_development/Core/Structuring_content")}}
 
 HTML 文件的 {{glossary("Head", "head")}} 是網頁在加載完畢之後，不會顯示在瀏覽器上的部分。其中包含一些資訊，如頁面的標題({{htmlelement("title")}})、{{glossary("CSS")}} 的連結 (當你想利用 CSS 來妝點你的頁面 HTML 時，你會用到它們)、網頁圖示(favicon)的連結，以及 metadata (裡頭承載了有關於該 HTML 的資料，如作者、描述該文件的關鍵詞等)。在這一章節裡，我們會討論以上的內容，甚至更多，藉此替你打下標記網頁的根基。
 
@@ -14,7 +14,7 @@ HTML 文件的 {{glossary("Head", "head")}} 是網頁在加載完畢之後，不
       <th scope="row">需求：</th>
       <td>
         對 HTML 的基礎認識，內容我們已在
-        <a href="/zh-TW/docs/Learn/HTML/Introduction_to_HTML/Getting_started"
+        <a href="/zh-TW/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax"
           >HTML 入門</a
         >中提及。
       </td>
@@ -55,7 +55,7 @@ HTML 的 head 就是 {{htmlelement("head")}} 元素裡面的內容 — 跟 {{htm
 </head>
 ```
 
-假如換作是較大型的網頁，head 裡面可能就會有非常多東西了。現在你可以先到幾個你常去的網站，並利用[開發者工具](/zh-TW/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools)來檢視它們的 head。我們在這裡並不打算要向你展示所有能放在 head 中的東西，而是教你使用一些常用的元素，讓你熟悉熟悉它們。總而言之，讓我們開始吧！
+假如換作是較大型的網頁，head 裡面可能就會有非常多東西了。現在你可以先到幾個你常去的網站，並利用[開發者工具](/zh-TW/docs/Learn_web_development/Howto/Tools_and_setup/What_are_browser_developer_tools)來檢視它們的 head。我們在這裡並不打算要向你展示所有能放在 head 中的東西，而是教你使用一些常用的元素，讓你熟悉熟悉它們。總而言之，讓我們開始吧！
 
 ## 加入標題(title)
 
@@ -297,4 +297,4 @@ These codes are defined by the [ISO 639-1](https://en.wikipedia.org/wiki/ISO_639
 
 That marks the end of our quickfire tour of the HTML head — there's a lot more you can do in here, but an exhaustive tour would be boring and confusing at this stage, and we just wanted to give you an idea of the most common things you'll find in there for now! In the next article we'll be looking at HTML text fundamentals.
 
-{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}
+{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/Basic_HTML_syntax", "Learn_web_development/Core/Structuring_content/Headings_and_paragraphs", "Learn_web_development/Core/Structuring_content")}}
diff --git a/files/zh-tw/learn_web_development/core/styling_basics/getting_started/index.md b/files/zh-tw/learn_web_development/core/styling_basics/getting_started/index.md
index df71be73db7ab2..186057676e03c3 100644
--- a/files/zh-tw/learn_web_development/core/styling_basics/getting_started/index.md
+++ b/files/zh-tw/learn_web_development/core/styling_basics/getting_started/index.md
@@ -4,7 +4,7 @@ slug: Learn_web_development/Core/Styling_basics/Getting_started
 original_slug: Learn/CSS/First_steps/Getting_started
 ---
 
-{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}
+{{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Core/Styling_basics/What_is_CSS", "Learn_web_development/Core/Styling_basics/Styling_a_bio_page", "Learn_web_development/Core/Styling_basics")}}
 
 在這個主題中，我們將 CSS 套用到一個簡單的 HTML 文件上，在過程中學習這個語言一些實際的東西。
 
@@ -14,13 +14,13 @@ original_slug: Learn/CSS/First_steps/Getting_started
       <th scope="row">先備知識：</th>
       <td>
         基本的電腦概念、能夠<a
-          href="/zh-TW/docs/Learn/Getting_started_with_the_web/Installing_basic_software"
+          href="/zh-TW/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software"
           >安裝基本軟體</a
         >，基本<a
-          href="/zh-TW/docs/Learn/Getting_started_with_the_web/Dealing_with_files"
+          href="/zh-TW/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files"
           >與各種檔案打交道</a
         >的能力，以及 HTML 的基礎（由<a
-          href="/zh-TW/docs/Learn/HTML/Introduction_to_HTML"
+          href="/zh-TW/docs/Learn_web_development/Core/Structuring_content"
           >HTML介紹</a
         >學到）。
       </td>
@@ -214,7 +214,7 @@ h1 + p {
 {{EmbedGHLiveSample("css-examples/learn/getting-started/started2.html", '100%', 1100)}}
 
 > [!NOTE]
-> 如你所見， CSS 提供我們一些方法來選擇元素，而目前為止我們只涉及到表面！我們將在課程後面的[選擇器](/zh-TW/docs/Learn/CSS/Building_blocks/Selectors)章節裡有更深入的探討。
+> 如你所見， CSS 提供我們一些方法來選擇元素，而目前為止我們只涉及到表面！我們將在課程後面的[選擇器](/zh-TW/docs/Learn_web_development/Core/Styling_basics/Basic_selectors)章節裡有更深入的探討。
 
 ## 依狀態指定樣式
 
@@ -289,4 +289,4 @@ body h1 + p .special {
 
 在下一個課程中，我們將看看 CSS 的結構是如何。
 
-{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}
+{{PreviousMenuNext("Learn_web_development/Core/Styling_basics/What_is_CSS", "Learn_web_development/Core/Styling_basics/Styling_a_bio_page", "Learn_web_development/Core/Styling_basics")}}
diff --git a/files/zh-tw/learn_web_development/core/styling_basics/index.md b/files/zh-tw/learn_web_development/core/styling_basics/index.md
index d500a6b20d555b..1c287d3b8f56a7 100644
--- a/files/zh-tw/learn_web_development/core/styling_basics/index.md
+++ b/files/zh-tw/learn_web_development/core/styling_basics/index.md
@@ -33,11 +33,11 @@ CSS（階層式樣式表）被用來設定網頁的樣式及佈局。舉例來
   - : **{{Glossary("CSS")}}** （階層式樣式表）讓你能夠建立好看的網頁，但是它骨子是是怎麼運作的？這個主題用一個簡單的語法範例來解釋 CSS 是什麼，並涵蓋有關這個語言的一些關鍵術語。
 - [開始使用 CSS](/zh-TW/docs/Learn_web_development/Core/Styling_basics/Getting_started)
   - : 這個主題中，我們將把 CSS 套用到一個簡單的 HTML 文件上，逐步學習有關這個語言的一些實用知識。
-- [CSS 的結構](/zh-TW/docs/Learn/CSS/First_steps/How_CSS_is_structured)
+- [CSS 的結構](/zh-TW/docs/Learn_web_development/Core/Styling_basics/Getting_started)
   - : 現在你對 CSS 是什麼以及基本使用方法有了一些概念，是時候去更深入看看這個語言的結構了。我們在這裡討論了許多的觀念；如果之後你對任何概念感到模糊，可以到這裡來回顧。
 - [CSS 的運作方式](/zh-TW/docs/Learn_web_development/Core/Styling_basics/What_is_CSS)
   - : 我們已經學到了什麼是 CSS 以及如何寫一個簡單樣式表的基礎概念。我們會在這堂課裡看看瀏覽器是如何依據 CSS 和 HTML 的內容轉化為網頁的呈現。
-- [使用你的新知識](/zh-TW/docs/Learn/CSS/First_steps/Styling_a_biography_page)
+- [使用你的新知識](/zh-TW/docs/Learn_web_development/Core/Styling_basics/Styling_a_bio_page)
   - : 透過你在前面堂課所學到的東西，你應該會發現你可以對簡單的文字內套用 CSS 設定，加入你想要的樣式。這個主題給你一個機會來做這件事。
 
 ## 參見
diff --git a/files/zh-tw/learn_web_development/core/styling_basics/what_is_css/index.md b/files/zh-tw/learn_web_development/core/styling_basics/what_is_css/index.md
index a0651a80f30a2d..78b2b9a8b3a37c 100644
--- a/files/zh-tw/learn_web_development/core/styling_basics/what_is_css/index.md
+++ b/files/zh-tw/learn_web_development/core/styling_basics/what_is_css/index.md
@@ -5,7 +5,7 @@ original_slug: Learn/CSS/First_steps/How_CSS_works
 ---
 
 {{LearnSidebar}}
-{{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}}
+{{NextMenu("Learn_web_development/Core/Styling_basics/Getting_started", "Learn_web_development/Core/Styling_basics")}}
 
 我們已經學會基本 CSS 的用途與用法了，這堂課我們就來看看瀏覽器是如何將 CSS 和 HTML 變化成網頁的吧。
 
@@ -15,13 +15,13 @@ original_slug: Learn/CSS/First_steps/How_CSS_works
       <th scope="row">需求：</th>
       <td>
         基本電腦操作、<a
-          href="/zh-TW/docs/Learn/Getting_started_with_the_web/Installing_basic_software"
+          href="/zh-TW/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software"
           >已安裝基本的軟體</a
         >、
-        <a href="/zh-TW/docs/Learn/Getting_started_with_the_web/Dealing_with_files"
+        <a href="/zh-TW/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files"
           >檔案處理的基本知識</a
         >、HTML 基礎 (請參閱
-        <a href="/zh-TW/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>)。
+        <a href="/zh-TW/docs/Learn_web_development/Core/Structuring_content">HTML 入門</a>)。
       </td>
     </tr>
     <tr>
@@ -121,7 +121,7 @@ span {
 
 {{EmbedLiveSample('將_CSS_套用至_DOM', '100%', 55)}}
 
-在下個主題裡的[為 CSS 除錯](/zh-TW/docs/Learn/CSS/Building_blocks/Debugging_CSS)中我們將會使用瀏覽器的 DevTools 來為 CSS 除錯，屆時我們將會學到更多瀏覽器解析 CSS 的方法。
+在下個主題裡的[為 CSS 除錯](/zh-TW/docs/Learn_web_development/Core/Styling_basics/Debugging_CSS)中我們將會使用瀏覽器的 DevTools 來為 CSS 除錯，屆時我們將會學到更多瀏覽器解析 CSS 的方法。
 
 ## 瀏覽器遇到不認識的 CSS 時會發生什麼事？
 
@@ -164,6 +164,6 @@ p {
 
 ## 最後
 
-你已經快完成這個主題了，但是還差臨門一腳，在下篇文章裡，你將會[利用你學到的新知識](/zh-TW/docs/Learn/CSS/First_steps/Styling_a_biography_page)來重新美化一個範例，並在過程中重溫你所學到的 CSS 技巧。
+你已經快完成這個主題了，但是還差臨門一腳，在下篇文章裡，你將會[利用你學到的新知識](/zh-TW/docs/Learn_web_development/Core/Styling_basics/Styling_a_bio_page)來重新美化一個範例，並在過程中重溫你所學到的 CSS 技巧。
 
-{{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}}
+{{NextMenu("Learn_web_development/Core/Styling_basics/Getting_started", "Learn_web_development/Core/Styling_basics")}}
diff --git a/files/zh-tw/learn_web_development/core/text_styling/index.md b/files/zh-tw/learn_web_development/core/text_styling/index.md
index c4c273639e820c..2edfe1fd352a7f 100644
--- a/files/zh-tw/learn_web_development/core/text_styling/index.md
+++ b/files/zh-tw/learn_web_development/core/text_styling/index.md
@@ -19,18 +19,18 @@ original_slug: Learn/CSS/Styling_text
 
 這個單元包含以下的文章會教導你?設定 HTML 文字內容樣式的全部要領。
 
-- [基本的字形及文字樣式](/zh-TW/docs/Learn/CSS/Styling_text/Fundamentals)
+- [基本的字形及文字樣式](/zh-TW/docs/Learn_web_development/Core/Text_styling/Fundamentals)
   - : In this article we go through all the basics of text/font styling in detail, including setting font weight, family and style, font shorthand, text alignment and other effects, and line and letter spacing.
-- [清單樣式](/zh-TW/docs/Learn/CSS/Styling_text/Styling_lists)
+- [清單樣式](/zh-TW/docs/Learn_web_development/Core/Text_styling/Styling_lists)
   - : Lists behave like any other text for the most part, but there are some CSS properties specific to lists that you need to know about, and some best practices to consider. This article explains all.
-- [連結樣式](/zh-TW/docs/Learn/CSS/Styling_text/Styling_links)
+- [連結樣式](/zh-TW/docs/Learn_web_development/Core/Text_styling/Styling_links)
   - : When styling links, it is important to understand how to make use of pseudo-classes to style link states effectively, and how to style links for use in common varied interface features such as navigation menus and tabs. We'll look at all these topics in this article.
-- [網頁字形](/zh-TW/docs/Learn/CSS/Styling_text/Web_fonts)
+- [網頁字形](/zh-TW/docs/Learn_web_development/Core/Text_styling/Web_fonts)
   - : Here we will explore web fonts in detail — these allow you to download custom fonts along with your web page, to allow for more varied, custom text styling.
 
 ## Assessments
 
 The following assessments will test your understanding of the text styling techniques covered in the guides above.
 
-- [Typesetting a community school homepage](/zh-TW/docs/Learn/CSS/Styling_text/Typesetting_a_homepage)
+- [Typesetting a community school homepage](/zh-TW/docs/Learn_web_development/Core/Text_styling/Typesetting_a_homepage)
   - : In this assessment we'll test your understanding of styling text by getting you to style the text for a community school's homepage.
diff --git a/files/zh-tw/learn_web_development/extensions/advanced_javascript_objects/adding_bouncing_balls_features/index.md b/files/zh-tw/learn_web_development/extensions/advanced_javascript_objects/adding_bouncing_balls_features/index.md
index 8e1e12a1842d79..5d8cf08b7dc149 100644
--- a/files/zh-tw/learn_web_development/extensions/advanced_javascript_objects/adding_bouncing_balls_features/index.md
+++ b/files/zh-tw/learn_web_development/extensions/advanced_javascript_objects/adding_bouncing_balls_features/index.md
@@ -4,7 +4,7 @@ slug: Learn_web_development/Extensions/Advanced_JavaScript_objects/Adding_bounci
 original_slug: Learn/JavaScript/Objects/Adding_bouncing_balls_features
 ---
 
-{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Objects/Object_building_practice", "", "Learn/JavaScript/Objects")}}
+{{LearnSidebar}}{{PreviousMenu("Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_building_practice", "Learn_web_development/Extensions/Advanced_JavaScript_objects")}}
 
 在本文中，你將繼續使用前一篇文章的彈跳彩球展示程式，另外加入幾項有趣的新功能。
 
@@ -161,4 +161,4 @@ To implement the score counter, follow the following steps:
 
 如果你是在某個課堂上操作這份作業，那麼請將成品交給你的老師 / 助教；如果你是自學者，在我們的[專屬討論區](https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294)或 [Mozilla IRC](https://wiki.mozilla.org/IRC) 上的 [#mdn](irc://irc.mozilla.org/mdn) 頻道都可以很輕鬆地找到人給予指教。記得先認真做一下習題，要怎麼收獲先那麼栽呀！
 
-{{PreviousMenuNext("Learn/JavaScript/Objects/Object_building_practice", "", "Learn/JavaScript/Objects")}}
+{{PreviousMenu("Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_building_practice", "Learn_web_development/Extensions/Advanced_JavaScript_objects")}}
diff --git a/files/zh-tw/learn_web_development/extensions/advanced_javascript_objects/classes_in_javascript/index.md b/files/zh-tw/learn_web_development/extensions/advanced_javascript_objects/classes_in_javascript/index.md
index 3c8bafa3b373b3..82849f16dd7435 100644
--- a/files/zh-tw/learn_web_development/extensions/advanced_javascript_objects/classes_in_javascript/index.md
+++ b/files/zh-tw/learn_web_development/extensions/advanced_javascript_objects/classes_in_javascript/index.md
@@ -4,7 +4,7 @@ slug: Learn_web_development/Extensions/Advanced_JavaScript_objects/Classes_in_Ja
 original_slug: Learn/JavaScript/Objects/Classes_in_JavaScript
 ---
 
-{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects")}}
+{{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Extensions/Advanced_JavaScript_objects/Object-oriented_programming", "Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_building_practice", "Learn_web_development/Extensions/Advanced_JavaScript_objects")}}
 
 在解釋過大部分的 OOJS 細節之後，本文將說明該如何建立「子」物件類別 (建構子)，並從其「母」類別繼承功能。此外，也將建議開發者應於何時、於何處使用 OOJS。
 
@@ -14,12 +14,12 @@ original_slug: Learn/JavaScript/Objects/Classes_in_JavaScript
       <th scope="row">必備條件：</th>
       <td>
         基本的電腦素養、已了解 HTML 與 CSS 基本概念、熟悉 JavaScript 基礎
-        (可參閱〈<a href="/zh-TW/docs/Learn/JavaScript/First_steps"
+        (可參閱〈<a href="/zh-TW/docs/Learn_web_development/Core/Scripting"
           >First steps</a
-        >〉與〈<a href="/zh-TW/docs/Learn/JavaScript/Building_blocks"
+        >〉與〈<a href="/zh-TW/docs/Learn_web_development/Core/Scripting"
           >Building blocks</a
         >〉) 與 OOJS 的基礎 (可參閱〈<a
-          href="/zh-TW/docs/Learn/JavaScript/Object-oriented/Introduction"
+          href="/zh-TW/docs/Learn_web_development/Core/Scripting/Object_basics"
           >Introduction to objects</a
         >〉)。
       </td>
@@ -248,10 +248,10 @@ teacher1.greeting();
 
 下篇文章就要來看看該如何搭配 JavaScript Object Notation (JSON)，使用 JavaScript 物件的常見資料交換格式。
 
-## 另可參閱
+## 參見
 
 - [ObjectPlayground.com](http://www.objectplayground.com/) — 互動式學習網站，讓你了解物件。
 - [Secrets of the JavaScript Ninja](https://www.amazon.com/gp/product/193398869X/) 的第六章 — 進階 JavaScript 概念與技術的好書。第六章講述了原型與繼承的概念。此書有紙本與線上版。
 - [You Don't Know JS: this & Object Prototypes](https://github.com/getify/You-Dont-Know-JS/blob/master/this%20&%20object%20prototypes/README.md#you-dont-know-js-this--object-prototypes) — Kyle Simpson 絕佳 JavaScript 手冊系列的一部分。第五章特別深入講述了原型。我們透過本文為初學者提供簡易概念，但 Kyle 則說明得更深入、更精確。
 
-{{PreviousMenuNext("Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects")}}
+{{PreviousMenuNext("Learn_web_development/Extensions/Advanced_JavaScript_objects/Object-oriented_programming", "Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_building_practice", "Learn_web_development/Extensions/Advanced_JavaScript_objects")}}
diff --git a/files/zh-tw/learn_web_development/extensions/advanced_javascript_objects/object_building_practice/index.md b/files/zh-tw/learn_web_development/extensions/advanced_javascript_objects/object_building_practice/index.md
index 3f59bab5722c53..8e6f3a7a4fef39 100644
--- a/files/zh-tw/learn_web_development/extensions/advanced_javascript_objects/object_building_practice/index.md
+++ b/files/zh-tw/learn_web_development/extensions/advanced_javascript_objects/object_building_practice/index.md
@@ -4,7 +4,7 @@ slug: Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_buildi
 original_slug: Learn/JavaScript/Objects/Object_building_practice
 ---
 
-{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects/Adding_bouncing_balls_features", "Learn/JavaScript/Objects")}}
+{{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Extensions/Advanced_JavaScript_objects/Classes_in_JavaScript", "Learn_web_development/Extensions/Advanced_JavaScript_objects/Adding_bouncing_balls_features", "Learn_web_development/Extensions/Advanced_JavaScript_objects")}}
 
 我們解說完必要的 JavaScript 物件理論以及語法細節，想先幫你把根紮好。接著就透過實作範例，讓你實際建立自己有趣又多彩的 JavaScript 物件。
 
@@ -14,12 +14,12 @@ original_slug: Learn/JavaScript/Objects/Object_building_practice
       <th scope="row">必備條件：</th>
       <td>
         基礎的計算機素養、了解 HTML 與 CSS 的基本概念、熟悉 JavaScript (參閱〈<a
-          href="/zh-TW/docs/Learn/JavaScript/First_steps"
+          href="/zh-TW/docs/Learn_web_development/Core/Scripting"
           >First steps</a
-        >〉與〈<a href="/zh-TW/docs/Learn/JavaScript/Building_blocks"
+        >〉與〈<a href="/zh-TW/docs/Learn_web_development/Core/Scripting"
           >Building blocks</a
         >〉) 與 OOJS 基本概念 (參閱〈<a
-          href="/zh-TW/docs/Learn/JavaScript/Object-oriented/Introduction"
+          href="/zh-TW/docs/Learn_web_development/Core/Scripting/Object_basics"
           >Introduction to objects</a
         >〉)。
       </td>
@@ -296,7 +296,7 @@ Ball.prototype.update = function () {
 
 物件實體就到這裡。接著就是你要磨練自己的物件技術了！
 
-## 另可參閱
+## 參見
 
 - [Canvas 線上教學](/zh-TW/docs/Web/API/Canvas_API/Tutorial) — 2D canvas 初學者指南
 - [requestAnimationFrame()](/zh-TW/docs/Web/API/Window/requestAnimationFrame)
@@ -305,4 +305,4 @@ Ball.prototype.update = function () {
 - [只使用 JavaScript 的 2D 打磚塊遊戲](/zh-TW/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript) — 2D 遊戲開發初學者的絕佳線上教學
 - [剖析器 (Phaser) 的 2D 打磚塊遊戲](/zh-TW/docs/Games/Tutorials/2D_breakout_game_Phaser) — 以 JavaScript 遊戲函式庫建構 2D 遊戲的基本概念
 
-{{PreviousMenuNext("Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects/Adding_bouncing_balls_features", "Learn/JavaScript/Objects")}}
+{{PreviousMenuNext("Learn_web_development/Extensions/Advanced_JavaScript_objects/Classes_in_JavaScript", "Learn_web_development/Extensions/Advanced_JavaScript_objects/Adding_bouncing_balls_features", "Learn_web_development/Extensions/Advanced_JavaScript_objects")}}
diff --git a/files/zh-tw/learn_web_development/extensions/advanced_javascript_objects/object_prototypes/index.md b/files/zh-tw/learn_web_development/extensions/advanced_javascript_objects/object_prototypes/index.md
index d2dd35e2ea965e..7df1163af5a51f 100644
--- a/files/zh-tw/learn_web_development/extensions/advanced_javascript_objects/object_prototypes/index.md
+++ b/files/zh-tw/learn_web_development/extensions/advanced_javascript_objects/object_prototypes/index.md
@@ -4,7 +4,7 @@ slug: Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_protot
 original_slug: Learn/JavaScript/Objects/Object_prototypes
 ---
 
-{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects")}}
+{{LearnSidebar}}{{NextMenu("Learn_web_development/Extensions/Advanced_JavaScript_objects/Object-oriented_programming", "Learn_web_development/Extensions/Advanced_JavaScript_objects")}}
 
 JavaScript 的物件即透過原型 (Prototype) 機制相互繼承功能，且與典型的物件導向 (OO) 程式語言相較，其運作方式有所差異。我們將透過本文說明相異之處、解釋原型鍊 (Prototype chain) 運作的方式，並了解原型屬性是如何將函式新增至現有的建構子 (Constructor) 之中。
 
@@ -14,12 +14,12 @@ JavaScript 的物件即透過原型 (Prototype) 機制相互繼承功能，且
       <th scope="row">必備條件：</th>
       <td>
         基本的電腦素養、已初步了解 HTML 與 CSS、熟悉 JavaScript (參閱〈<a
-          href="/zh-TW/docs/Learn/JavaScript/First_steps"
+          href="/zh-TW/docs/Learn_web_development/Core/Scripting"
           >First steps</a
-        >〉與〈<a href="/zh-TW/docs/Learn/JavaScript/Building_blocks"
+        >〉與〈<a href="/zh-TW/docs/Learn_web_development/Core/Scripting"
           >Building blocks</a
         >〉以及 OOJS 基礎概念 (參閱〈<a
-          href="/zh-TW/docs/Learn/JavaScript/Object-oriented/Introduction"
+          href="/zh-TW/docs/Learn_web_development/Core/Scripting/Object_basics"
           >Introduction to objects</a
         >〉。
       </td>
@@ -274,4 +274,4 @@ Test.prototype.y = function () { ... }
 
 接著我們將讓你在自己的任 2 個自訂物件之間，實作功能的繼承。
 
-{{PreviousMenuNext("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects")}}
+{{NextMenu("Learn_web_development/Extensions/Advanced_JavaScript_objects/Object-oriented_programming", "Learn_web_development/Extensions/Advanced_JavaScript_objects")}}
diff --git a/files/zh-tw/learn_web_development/extensions/async_js/index.md b/files/zh-tw/learn_web_development/extensions/async_js/index.md
index ddd3df3b648781..9b7628c37326cc 100644
--- a/files/zh-tw/learn_web_development/extensions/async_js/index.md
+++ b/files/zh-tw/learn_web_development/extensions/async_js/index.md
@@ -33,9 +33,9 @@ original_slug: Learn/JavaScript/Asynchronous
   - : 在本篇文章中我們會先簡短的回顧我們在同步的 JavaScript 中所遭遇到的問題，並預先看看稍後將會使用哪些非同步的 JavaScript 技巧來解決此問題。
 - [協同的非同步 JavaScript ： Timeout 和 interval](/zh-TW/docs/Learn_web_development/Extensions/Async_JS)
   - : 在這裡看看我們在傳統上是如何透過設定的時間到期或是透過定時的方式（例如：每秒發生的次數）讓 Javascript 能夠以非同步的方式執行程式碼，談談這些方法有哪些用處以及存在哪些既有的問題。
-- [優雅的使用 Promise 來處理非同步操作](/zh-TW/docs/Learn/JavaScript/Asynchronous/Promises)
+- [優雅的使用 Promise 來處理非同步操作](/zh-TW/docs/Learn_web_development/Extensions/Async_JS/Promises)
   - : Promise 是在 Javascript 語言中相對較新的功能，它能夠讓你延遲活動直到先前的活動回報完成或失敗。這方法對設置一連串的操作並讓其正確的循序執行相當有用。本篇文章向你展示 Promise 是如何運作，你將會看到如何被使用在 WebAPI ，以及如何寫出屬於自己的 Promise 。
-- [利用 async 及 await 讓非同步程式設計變得更容易](/zh-TW/docs/Learn/JavaScript/Asynchronous/Promises)
+- [利用 async 及 await 讓非同步程式設計變得更容易](/zh-TW/docs/Learn_web_development/Extensions/Async_JS/Promises)
   - : Promise 在設置上可能會有些複雜並難以理解，因此現代瀏覽器已經實作出 `async` 函式以及 `await` 運算子。前者能夠讓標準的函式隱含的使用 Promise 方式來實現非同步行為，然而後者可以被用在 `async` 函式內部，讓程式碼繼續執行之前去等待一個 Promise 完成。這能讓我們在鏈結一連串的 Promise 的情況之下更加簡潔易懂。
 
 ## 參閱
diff --git a/files/zh-tw/learn_web_development/extensions/async_js/introducing/index.md b/files/zh-tw/learn_web_development/extensions/async_js/introducing/index.md
index 23a75641d55fbe..f2de2b96d7192f 100644
--- a/files/zh-tw/learn_web_development/extensions/async_js/introducing/index.md
+++ b/files/zh-tw/learn_web_development/extensions/async_js/introducing/index.md
@@ -4,7 +4,7 @@ slug: Learn_web_development/Extensions/Async_JS/Introducing
 original_slug: Learn/JavaScript/Asynchronous/Introducing
 ---
 
-{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Concepts", "Learn/JavaScript/Asynchronous/Timeouts_and_intervals", "Learn/JavaScript/Asynchronous")}}
+{{LearnSidebar}}{{NextMenu("Learn_web_development/Extensions/Async_JS/Promises", "Learn_web_development/Extensions/Async_JS")}}
 
 在本篇文章中我們會先簡短回顧在同步的 JavaScript 中所遭遇到的問題，並預先看看往後將會使用哪些非同步的 JavaScript 技巧來解決此問題。
 
@@ -168,7 +168,7 @@ fetch("products.json")
 我們可以透過練習來習慣這個概念；在動作上它感覺有點像是 [薛丁格的貓](https://zh.wikipedia.org/wiki/薛丁格的貓)。任何可能的結果已經發生，所以 fetch 指令正在等待瀏覽器在未來的某個時間點完成操作後並回傳的結果。我們接著在 `fetch()` 的結束會鏈結三個程式區塊：
 
 - 兩個 [`then()`](/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Promise/then) 區塊。兩個都含有回呼函式且先前的操作成功時就會執行，每一個回呼函式都會收到上一個成功完成操作的結果，因此你可以繼續執行一些事情。每一個 `.then()` 區塊都會回傳另一個 promise ，代表你可以將多個 `.then()` 區塊彼此作連結，所以多個非同步操作可以一個接著一個被用來依序執行。
-- 如果任何一個 `.then()` 區塊失敗就會跑到 [`catch()`](/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Promise/catch) 區塊——類似像在同步區塊內部的 [`try...catch`](/zh-TW/docs/Web/JavaScript/Reference/Statements/try...catch) 做法，在 `catch()` 內部會提供一個失敗的物件，可以用來報告是發生甚麼類型的錯誤。要注意到同步的 `try...catch` 不能與 promises 一起做使用，儘管它可以和 [async ／ await](/zh-TW/docs/Learn/JavaScript/Asynchronous/Promises) 待配使用，這稍後將會學習到。
+- 如果任何一個 `.then()` 區塊失敗就會跑到 [`catch()`](/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Promise/catch) 區塊——類似像在同步區塊內部的 [`try...catch`](/zh-TW/docs/Web/JavaScript/Reference/Statements/try...catch) 做法，在 `catch()` 內部會提供一個失敗的物件，可以用來報告是發生甚麼類型的錯誤。要注意到同步的 `try...catch` 不能與 promises 一起做使用，儘管它可以和 [async ／ await](/zh-TW/docs/Learn_web_development/Extensions/Async_JS/Promises) 待配使用，這稍後將會學習到。
 
 > [!NOTE]
 > 你將會在稍後的單元學習到更多關於 promise 的觀念，即使現在尚未完全理解你也不需要太擔心。
@@ -257,14 +257,14 @@ TypeError: image is undefined; can't access its "src" property
 這是因為在這個時間點瀏覽器試著去執行最後的 `console.log()` 時 `fetch()` 還沒有完成執行，所以 `image` 變數尚未賦予值因而導致錯誤。
 
 > [!NOTE]
-> 由於安全性考量，你沒辦法呼叫 `fetch()` 從你的本地檔案系統抓取資料（或者其他在本地的相關操作）如果要在本地執行上面的範例，你需要在本地架起一個[網路伺服器](/zh-TW/docs/Learn/Common_questions/Tools_and_setup/set_up_a_local_testing_server)來執行。
+> 由於安全性考量，你沒辦法呼叫 `fetch()` 從你的本地檔案系統抓取資料（或者其他在本地的相關操作）如果要在本地執行上面的範例，你需要在本地架起一個[網路伺服器](/zh-TW/docs/Learn_web_development/Howto/Tools_and_setup/set_up_a_local_testing_server)來執行。
 
 ## 主動學習：讓一切非同步化！
 
 為了修復 `fetch()` 這個有問題的範例讓三個 `console.log()` 的敘述可以依序被執行你可以讓第三個 `console.log()` 也非同步的被執行。你可以新增一個新的 `.then()` 再將其放在裡面，這個新增的 `.then()` 再串連 promise 區塊的倒數第二個結尾；或者也可以將其放入原本的 `.then()` 中來解決這個問題。試著現在修復這個問題吧。
 
 > [!NOTE]
-> 如果你的想法卡住，你可以[在這裡](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/async-sync-fixed.html)找到解答（[線上範例](https://mdn.github.io/learning-area/javascript/asynchronous/introducing/async-sync-fixed.html)）。你也可以在我們稍後的[優雅的使用 Promise 來處理非同步操作](/zh-TW/docs/Learn/JavaScript/Asynchronous/Promises) 這個單元找到更多關於 promise 的資訊。
+> 如果你的想法卡住，你可以[在這裡](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/async-sync-fixed.html)找到解答（[線上範例](https://mdn.github.io/learning-area/javascript/asynchronous/introducing/async-sync-fixed.html)）。你也可以在我們稍後的[優雅的使用 Promise 來處理非同步操作](/zh-TW/docs/Learn_web_development/Extensions/Async_JS/Promises) 這個單元找到更多關於 promise 的資訊。
 
 ## 結論
 
@@ -276,4 +276,4 @@ Javascript 基本上是一個同步性的、阻塞的，且是跑在單一執行
 
 如果我們正在執行一些需要花一點時間的操作，就好比查詢資料庫並將結果填充到模板上，最好的方式是不要在主執行緒上執行並用非同步的方法來完成。隨著時間的學習，你將會了解到在更多的情況下，選擇使用非同步的技巧會比選擇同步的方式來的更合理。
 
-{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Concepts", "Learn/JavaScript/Asynchronous/Timeouts_and_intervals", "Learn/JavaScript/Asynchronous")}}
+{{NextMenu("Learn_web_development/Extensions/Async_JS/Promises", "Learn_web_development/Extensions/Async_JS")}}
diff --git a/files/zh-tw/learn_web_development/extensions/client-side_apis/index.md b/files/zh-tw/learn_web_development/extensions/client-side_apis/index.md
index 355bcabe64b49a..301afdc4d83ae2 100644
--- a/files/zh-tw/learn_web_development/extensions/client-side_apis/index.md
+++ b/files/zh-tw/learn_web_development/extensions/client-side_apis/index.md
@@ -19,17 +19,17 @@ original_slug: Learn/JavaScript/Client-side_web_APIs
 
 ## 概觀
 
-- [Web API 簡介](/zh-TW/docs/Learn/JavaScript/Client-side_web_APIs/Introduction)
+- [Web API 簡介](/zh-TW/docs/Learn_web_development/Extensions/Client-side_APIs/Introduction)
   - : 首先，我們將從 API 的宏觀視角開始看起——它是什麼、如何運作、如何在程式碼裡運用，以及它是如何建構起來的？我們還將探討不同 API 主要類別分別是什麼，以及它們有什麼功能。
-- [文件操作](/zh-TW/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents)
+- [文件操作](/zh-TW/docs/Learn_web_development/Core/Scripting/DOM_scripting)
   - : 在撰寫網頁或應用程式時，你會想做的其中一件最常見的事情，是透過某個辦法操控網頁文件。這通常藉由使用文件物件模型（Document Object Model，簡稱 DOM）達成，這是一組 API，用來控制 HTML 與修飾大量使用 {{domxref("Document")}} 物件的訊息。這篇文章中，我們將深入探索如何使用 DOM，以及其它一些能把你的環境變得很有趣的好玩 API。
 - [從伺服器獲取資料](/zh-TW/docs/Learn_web_development/Core/Scripting/Network_requests)
   - : 另一個在當今網站與應用程式非常常見的任務是從伺服器獲取個別資料來更新網頁的一部份而不用重新渲染整個網頁。這個似乎不起眼的小細節對網站效能與表現有著巨大影響。這篇文章中，我們將解釋概念，並看看讓這件事成真的技術，像是 {{domxref("XMLHttpRequest")}} 以及 [Fetch API](/zh-TW/docs/Web/API/Fetch_API)。
-- [第三方 API](/zh-TW/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs)
+- [第三方 API](/zh-TW/docs/Learn_web_development/Extensions/Client-side_APIs/Third_party_APIs)
   - : 我們到目前為止提到的 API 皆內建在瀏覽器裡，但並非所有 API 都是。許多像 Google 地圖、Twitter、Facebook、PayPal 等等的大型網站與服務皆提供 API 讓開發者能利用他們的資料（例如將 Twitter 貼文顯示在你的部落格上）或服務（例如將自訂 Google 地圖顯示在你的網站上、或讓你的使用者透過 Facebook 帳號登入）。這篇文章會看到瀏覽器 API 與第三方 API 的區別，以及後者的一些典型用法。
-- [繪製圖形](/zh-TW/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics)
+- [繪製圖形](/zh-TW/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics)
   - : 瀏覽器含有一些非常強大的圖形程式設計工具，從可縮放向量圖形（[SVG](/zh-TW/docs/Web/SVG)）語言，到用來在 HTML {{htmlelement("canvas")}} 元素與 [WebGL](/zh-TW/docs/Web/API/WebGL_API)) 上繪圖的 API。這篇文章介紹 Canvas API，並提供讓你能深入學習的資源。
-- [視訊及音訊 API](/zh-TW/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs)
+- [視訊及音訊 API](/zh-TW/docs/Learn_web_development/Extensions/Client-side_APIs/Video_and_audio_APIs)
   - : HTML5 擁有將多媒體嵌入到文件中的元素——{{htmlelement("video")}} 及 {{htmlelement("audio")}}——並衍生出用來控制播放、查詢等等的它們自己的 API。這篇文章向你展示如何做到諸如創造自訂播放器等常見任務。
-- [用戶端儲存](/zh-TW/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage)
+- [用戶端儲存](/zh-TW/docs/Learn_web_development/Extensions/Client-side_APIs/Client-side_storage)
   - : 當今網路瀏覽器提供很多不同技術，讓你能儲存網站相關的資料並在需要時取出，使你能長期保存資料、離線儲存網站，以及更多。這篇文章用最簡單的方式解釋這些如何運作。
diff --git a/files/zh-tw/learn_web_development/extensions/forms/how_to_structure_a_web_form/index.md b/files/zh-tw/learn_web_development/extensions/forms/how_to_structure_a_web_form/index.md
index 79c0ec02330ce2..f96390ec2fc525 100644
--- a/files/zh-tw/learn_web_development/extensions/forms/how_to_structure_a_web_form/index.md
+++ b/files/zh-tw/learn_web_development/extensions/forms/how_to_structure_a_web_form/index.md
@@ -4,7 +4,7 @@ slug: Learn_web_development/Extensions/Forms/How_to_structure_a_web_form
 original_slug: Learn/Forms/How_to_structure_a_web_form
 ---
 
-{{LearnSidebar}}{{PreviousMenuNext("Learn/Forms/Your_first_form", "Learn/Forms/Basic_native_form_controls", "Learn/Forms")}}
+{{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Extensions/Forms/Your_first_form", "Learn_web_development/Extensions/Forms/Basic_native_form_controls", "Learn_web_development/Extensions/Forms")}}
 
 有了基礎後，我們就能探討表單元素，所提供的結構與文意之詳細資訊；還有各表單部份的相異之處。
 
@@ -14,7 +14,7 @@ original_slug: Learn/Forms/How_to_structure_a_web_form
       <th scope="row">先決條件：</th>
       <td>
         對電腦還有
-        <a href="/zh-TW/docs/Learn/HTML/Introduction_to_HTML">HTML</a>
+        <a href="/zh-TW/docs/Learn_web_development/Core/Structuring_content">HTML</a>
         有基本理解。
       </td>
     </tr>
@@ -75,7 +75,7 @@ original_slug: Learn/Forms/How_to_structure_a_web_form
 
 這個示例的是最重要的用法之一：每次有一組 radio 按鈕時，就該在裡面放一個 {{HTMLElement("fieldset")}} 元素。{{HTMLElement("fieldset")}} 也能用在表單的其他地方。理想上，要是表單一長，就要把他放到其他頁面。但如果做不到這點，那將不同的相關部分，放在不同的 fieldsets 之中，也可以提高可用性。
 
-由於 {{HTMLElement("fieldset")}} 對輔助技術的影響，這個元素是建立無障礙表單的基石，但請注意不要濫用這個元素。可以的話，[聽聽螢幕報讀是怎麼講的](/zh-TW/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders)。如果踢起來怪怪的，那就試著改進表單。
+由於 {{HTMLElement("fieldset")}} 對輔助技術的影響，這個元素是建立無障礙表單的基石，但請注意不要濫用這個元素。可以的話，[聽聽螢幕報讀是怎麼講的](/zh-TW/docs/Learn_web_development/Core/Accessibility/Tooling#Screenreaders)。如果踢起來怪怪的，那就試著改進表單。
 
 ## \<label> 元素
 
@@ -185,7 +185,7 @@ Above all, it is up to you to find a comfortable coding style that results in ac
 
 ### 主動學習：建立表單結構
 
-Let's put these ideas into practice and build a slightly more involved form — a payment form. This form will contain a number of control types that you may not yet understand. Don't worry about this for now; you'll find out how they work in the next article ([Basic native form controls](/zh-TW/docs/Learn/Forms/Basic_native_form_controls)). For now, read the descriptions carefully as you follow the below instructions, and start to form an appreciation of which wrapper elements we are using to structure the form, and why.
+Let's put these ideas into practice and build a slightly more involved form — a payment form. This form will contain a number of control types that you may not yet understand. Don't worry about this for now; you'll find out how they work in the next article ([Basic native form controls](/zh-TW/docs/Learn_web_development/Extensions/Forms/Basic_native_form_controls)). For now, read the descriptions carefully as you follow the below instructions, and start to form an appreciation of which wrapper elements we are using to structure the form, and why.
 
 1. To start with, make a local copy of our [blank template file](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html) and the [CSS for our payment form](https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/payment-form.css) in a new directory on your computer.
 2. Apply the CSS to the HTML by adding the following line inside the HTML {{htmlelement("head")}}:
@@ -263,7 +263,7 @@ Let's put these ideas into practice and build a slightly more involved form —
    </section>
    ```
 
-6. The second `<section>` of our form is the payment information. We have three distinct controls along with their labels, each contained inside a `<p>`. The first is a drop-down menu ({{htmlelement("select")}}) for selecting credit card type. The second is an `<input>` element of type `tel`, for entering a credit card number; while we could have used the `number` type, we don't want the number's spinner UI. The last one is an `<input>` element of type `date`, for entering the expiration date of the card; this one will come up with a date picker widget in supporting browsers, and fall back to a normal text input in non-supporting browsers. These newer input types are reintroduced in [The HTML5 input types](/zh-TW/docs/Learn/Forms/HTML5_input_types).
+6. The second `<section>` of our form is the payment information. We have three distinct controls along with their labels, each contained inside a `<p>`. The first is a drop-down menu ({{htmlelement("select")}}) for selecting credit card type. The second is an `<input>` element of type `tel`, for entering a credit card number; while we could have used the `number` type, we don't want the number's spinner UI. The last one is an `<input>` element of type `date`, for entering the expiration date of the card; this one will come up with a date picker widget in supporting browsers, and fall back to a normal text input in non-supporting browsers. These newer input types are reintroduced in [The HTML5 input types](/zh-TW/docs/Learn_web_development/Extensions/Forms/HTML5_input_types).
 
    Enter the following below the previous section:
 
@@ -316,4 +316,4 @@ You can see the finished form in action below (also find it on GitHub — see ou
 
 - [A List Apart: _Sensible Forms: A Form Usability Checklist_](https://www.alistapart.com/articles/sensibleforms/)
 
-{{PreviousMenuNext("Learn/Forms/Your_first_form", "Learn/Forms/Basic_native_form_controls", "Learn/Forms")}}
+{{PreviousMenuNext("Learn_web_development/Extensions/Forms/Your_first_form", "Learn_web_development/Extensions/Forms/Basic_native_form_controls", "Learn_web_development/Extensions/Forms")}}
diff --git a/files/zh-tw/learn_web_development/extensions/forms/index.md b/files/zh-tw/learn_web_development/extensions/forms/index.md
index 63ece1bd5da76c..5340c780b7d585 100644
--- a/files/zh-tw/learn_web_development/extensions/forms/index.md
+++ b/files/zh-tw/learn_web_development/extensions/forms/index.md
@@ -10,23 +10,23 @@ original_slug: Learn/Forms
 
 ## 參考文章列表
 
-1. [我的第一個 HTML 表單](/zh-TW/docs/Learn/Forms/Your_first_form)
+1. [我的第一個 HTML 表單](/zh-TW/docs/Learn_web_development/Extensions/Forms/Your_first_form)
 2. [如何構建 HTML 表單](/zh-TW/docs/Learn_web_development/Extensions/Forms/How_to_structure_a_web_form)
-3. [本機表單控件](/zh-TW/docs/Learn/Forms/Basic_native_form_controls)
+3. [本機表單控件](/zh-TW/docs/Learn_web_development/Extensions/Forms/Basic_native_form_controls)
 4. CSS 和 HTML 表單
 
-   1. [造型 HTML 表單](/zh-TW/docs/Learn/Forms/Styling_web_forms)
-   2. [HTML 表單高級造型](/zh-TW/docs/Learn/Forms/Advanced_form_styling)
-   3. [表單控件屬性兼容表](/zh-TW/docs/Learn/Forms/Property_compatibility_table_for_form_controls)
+   1. [造型 HTML 表單](/zh-TW/docs/Learn_web_development/Extensions/Forms/Styling_web_forms)
+   2. [HTML 表單高級造型](/zh-TW/docs/Learn_web_development/Extensions/Forms/Advanced_form_styling)
+   3. [表單控件屬性兼容表](/zh-TW/docs/Learn_web_development/Extensions/Forms)
 
-5. [發送和檢索表單數據](/zh-TW/docs/Learn/Forms/Sending_and_retrieving_form_data)
-6. [數據表單驗證](/zh-TW/docs/Learn/Forms/Form_validation)
-7. [如何創建自定義表單控件](/zh-TW/docs/Learn/Forms/How_to_build_custom_form_controls)
-8. [通過 JavaScript 發送形式](/zh-TW/docs/Learn/Forms/Sending_forms_through_JavaScript)
+5. [發送和檢索表單數據](/zh-TW/docs/Learn_web_development/Extensions/Forms/Sending_and_retrieving_form_data)
+6. [數據表單驗證](/zh-TW/docs/Learn_web_development/Extensions/Forms/Form_validation)
+7. [如何創建自定義表單控件](/zh-TW/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls)
+8. [通過 JavaScript 發送形式](/zh-TW/docs/Learn_web_development/Extensions/Forms/Sending_forms_through_JavaScript)
 
    1. [使用 FORMDATA 對象](/zh-TW/docs/DOM/XMLHttpRequest/XMLHttpRequest_API/Using_FormData_Objects)
 
-9. [在傳統的瀏覽器的 HTML 表單](/zh-TW/docs/Learn/Forms/HTML_forms_in_legacy_browsers)
+9. [在傳統的瀏覽器的 HTML 表單](/zh-TW/docs/Learn_web_development/Extensions/Forms/HTML_forms_in_legacy_browsers)
 
 ## HTML 文件
 
diff --git a/files/zh-tw/learn_web_development/extensions/server-side/django/admin_site/index.md b/files/zh-tw/learn_web_development/extensions/server-side/django/admin_site/index.md
index 235ab42fbb0d6b..4160e2c39c8544 100644
--- a/files/zh-tw/learn_web_development/extensions/server-side/django/admin_site/index.md
+++ b/files/zh-tw/learn_web_development/extensions/server-side/django/admin_site/index.md
@@ -4,7 +4,7 @@ slug: Learn_web_development/Extensions/Server-side/Django/Admin_site
 original_slug: Learn/Server-side/Django/Admin_site
 ---
 
-{{LearnSidebar}}{{PreviousMenuNext("Learn/Server-side/Django/Models", "Learn/Server-side/Django/Home_page", "Learn/Server-side/Django")}}
+{{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Extensions/Server-side/Django/Models", "Learn_web_development/Extensions/Server-side/Django/Home_page", "Learn_web_development/Extensions/Server-side/Django")}}
 
 現在，我們已經為本地圖書館網站 [LocalLibrary](/zh-TW/docs/Learn_web_development/Extensions/Server-side/Django/Tutorial_local_library_website) 創建了模型，我們接下來使用 Django 管理網站，去添加 一些 「真實的」 書本數據。首先，我們展示如何用管理網站註冊模型，然後展示如何登錄和創建一些數據。本文最後，我們介紹可以進一步改進管理網站的建議。
 
@@ -14,7 +14,7 @@ original_slug: Learn/Server-side/Django/Admin_site
       <th scope="row">前提:</th>
       <td>
         先完成:
-        <a href="/zh-TW/docs/Learn/Server-side/Django/Models"
+        <a href="/zh-TW/docs/Learn_web_development/Extensions/Server-side/Django/Models"
           >Django Tutorial Part 3: Using models</a
         >.
       </td>
@@ -341,4 +341,4 @@ In this case all we've done is declare our tabular inline class, which just adds
 - [Writing your first Django app, part 2: Introducing the Django Admin](https://docs.djangoproject.com/en/2.0/intro/tutorial02/#introducing-the-django-admin) (Django docs)
 - [The Django Admin site](https://docs.djangoproject.com/en/2.0/ref/contrib/admin/) (Django Docs)
 
-{{PreviousMenuNext("Learn/Server-side/Django/Models", "Learn/Server-side/Django/Home_page", "Learn/Server-side/Django")}}
+{{PreviousMenuNext("Learn_web_development/Extensions/Server-side/Django/Models", "Learn_web_development/Extensions/Server-side/Django/Home_page", "Learn_web_development/Extensions/Server-side/Django")}}
diff --git a/files/zh-tw/learn_web_development/extensions/server-side/django/authentication/index.md b/files/zh-tw/learn_web_development/extensions/server-side/django/authentication/index.md
index 50bdfb9db1a338..9eaf21e48ad314 100644
--- a/files/zh-tw/learn_web_development/extensions/server-side/django/authentication/index.md
+++ b/files/zh-tw/learn_web_development/extensions/server-side/django/authentication/index.md
@@ -4,7 +4,7 @@ slug: Learn_web_development/Extensions/Server-side/Django/Authentication
 original_slug: Learn/Server-side/Django/Authentication
 ---
 
-{{LearnSidebar}}{{PreviousMenuNext("Learn/Server-side/Django/Sessions", "Learn/Server-side/Django/Forms", "Learn/Server-side/Django")}}
+{{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Extensions/Server-side/Django/Sessions", "Learn_web_development/Extensions/Server-side/Django/Forms", "Learn_web_development/Extensions/Server-side/Django")}}
 
 在本教程中，我們將會展示如何允許用戶使用自己的帳戶登入到你的網站，以及如何根據用戶是否已登入和權限的不同來控制他們可以執行和查看的內容。作為展示的一部分，我們會擴展[本地圖書館](/zh-TW/docs/Learn_web_development/Extensions/Server-side/Django/Tutorial_local_library_website)網站，添加登入頁面和登出頁面，以及用來查看已借閱的圖書的頁面——分為用戶與員工兩種不同頁面。
 
@@ -14,7 +14,7 @@ original_slug: Learn/Server-side/Django/Authentication
       <th scope="row">前提:</th>
       <td>
         完成至
-        <a href="/zh-TW/docs/Learn/Server-side/Django/Sessions"
+        <a href="/zh-TW/docs/Learn_web_development/Extensions/Server-side/Django/Sessions"
           >Django 線上教學 7: 會話（Session）框架</a
         >為止的所有主題。
       </td>
@@ -699,4 +699,4 @@ class MyView(PermissionRequiredMixin, View):
 - [Using the (default) Django authentication system](https://docs.djangoproject.com/en/2.0/topics/auth/default//) (Django docs)
 - [Introduction to class-based views > Decorating class-based views](https://docs.djangoproject.com/en/2.0/topics/class-based-views/intro/#decorating-class-based-views) (Django docs)
 
-{{PreviousMenuNext("Learn/Server-side/Django/Sessions", "Learn/Server-side/Django/Forms", "Learn/Server-side/Django")}}
+{{PreviousMenuNext("Learn_web_development/Extensions/Server-side/Django/Sessions", "Learn_web_development/Extensions/Server-side/Django/Forms", "Learn_web_development/Extensions/Server-side/Django")}}
diff --git a/files/zh-tw/learn_web_development/extensions/server-side/django/development_environment/index.md b/files/zh-tw/learn_web_development/extensions/server-side/django/development_environment/index.md
index bd835568f9e27a..8ea8a195de27e9 100644
--- a/files/zh-tw/learn_web_development/extensions/server-side/django/development_environment/index.md
+++ b/files/zh-tw/learn_web_development/extensions/server-side/django/development_environment/index.md
@@ -4,7 +4,7 @@ slug: Learn_web_development/Extensions/Server-side/Django/development_environmen
 original_slug: Learn/Server-side/Django/development_environment
 ---
 
-{{LearnSidebar}}{{PreviousMenuNext("Learn/Server-side/Django/Introduction", "Learn/Server-side/Django/Tutorial_local_library_website", "Learn/Server-side/Django")}}
+{{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Extensions/Server-side/Django/Introduction", "Learn_web_development/Extensions/Server-side/Django/Tutorial_local_library_website", "Learn_web_development/Extensions/Server-side/Django")}}
 
 現在，你知道什麼是 Django。那麼我們將向你展示如何在 Windows，Linux（Ubuntu）和 Mac OSX 上設置和測試 Django 開發環境—無論你常用哪種操作系統，本文應該都能讓你開始開發 Django 應用程序。
 
@@ -33,7 +33,7 @@ Django 使你輕鬆設置自己的電腦，以便開始開發網絡應用。這
 
 Django 本身提供的主要工具，是一組用於創建和使用 Django 項目的 Python 腳本，以及可用於在你的計算機的瀏覽器上，測試本地（即，你的計算機，而不是外部 Web 服務器）Django 網絡應用程序的簡單開發網路服務器 。
 
-還有其他外部工具, 它們構成了開發環境的一部分, 我們將不再贅述。這些包括 文本編輯器 [text editor](/zh-TW/docs/Learn/Common_questions/Tools_and_setup/Available_text_editors) 或編輯代碼的 IDE，以及像 [Git](https://git-scm.com/) 這樣的源代碼控制管理工具，用於安全地管理不同版本的代碼。我們假設你已經安裝了一個文本編輯器。
+還有其他外部工具, 它們構成了開發環境的一部分, 我們將不再贅述。這些包括 文本編輯器 [text editor](/zh-TW/docs/Learn_web_development/Howto/Tools_and_setup/Available_text_editors) 或編輯代碼的 IDE，以及像 [Git](https://git-scm.com/) 這樣的源代碼控制管理工具，用於安全地管理不同版本的代碼。我們假設你已經安裝了一個文本編輯器。
 
 ### 什麼是 Django 設置選項?
 
@@ -410,4 +410,4 @@ Quit the server with CONTROL-C.
 - [How to install Django — Complete guide](https://docs.djangoproject.com/en/2.0/topics/install/) (Django docs) - includes information on how to remove Django
 - [How to install Django on Windows](https://docs.djangoproject.com/en/2.0/howto/windows/) (Django docs)
 
-{{PreviousMenuNext("Learn/Server-side/Django/Introduction", "Learn/Server-side/Django/Tutorial_local_library_website", "Learn/Server-side/Django")}}
+{{PreviousMenuNext("Learn_web_development/Extensions/Server-side/Django/Introduction", "Learn_web_development/Extensions/Server-side/Django/Tutorial_local_library_website", "Learn_web_development/Extensions/Server-side/Django")}}
diff --git a/files/zh-tw/learn_web_development/extensions/server-side/django/forms/index.md b/files/zh-tw/learn_web_development/extensions/server-side/django/forms/index.md
index 89a09b5bdad635..de96c10e2d8a72 100644
--- a/files/zh-tw/learn_web_development/extensions/server-side/django/forms/index.md
+++ b/files/zh-tw/learn_web_development/extensions/server-side/django/forms/index.md
@@ -4,7 +4,7 @@ slug: Learn_web_development/Extensions/Server-side/Django/Forms
 original_slug: Learn/Server-side/Django/Forms
 ---
 
-{{LearnSidebar}}{{PreviousMenuNext("Learn/Server-side/Django/authentication_and_sessions", "Learn/Server-side/Django/Testing", "Learn/Server-side/Django")}}
+{{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Extensions/Server-side/Django/Sessions", "Learn_web_development/Extensions/Server-side/Django/Testing", "Learn_web_development/Extensions/Server-side/Django")}}
 
 在本教程中，我們將向你展示，如何在 Django 中使用 HTML 表單，特別是編寫表單以創建，更新和刪除模型實例的最簡單方法。作為本演示的一部分，我們將擴展 [LocalLibrary](/zh-TW/docs/Learn_web_development/Extensions/Server-side/Django/Tutorial_local_library_website) 網站，以便圖書館員，可以使用我們自己的表單（而不是使用管理員應用程序）更新圖書，創建，更新和刪除作者。
 
@@ -15,7 +15,7 @@ original_slug: Learn/Server-side/Django/Forms
       <td>
         完成先前所有的教程, 包含
         <a
-          href="/zh-TW/docs/Learn/Server-side/Django/authentication_and_sessions"
+          href="/zh-TW/docs/Learn_web_development/Extensions/Server-side/Django/Authentication"
           >Django Tutorial Part 8: User authentication and permissions</a
         >.
       </td>
@@ -664,4 +664,4 @@ There is a lot more that can be done with forms (check out our See also list bel
 - [Creating forms from models](https://docs.djangoproject.com/en/2.0/topics/forms/modelforms/) (Django docs)
 - [Generic editing views](https://docs.djangoproject.com/en/2.0/ref/class-based-views/generic-editing/) (Django docs)
 
-{{PreviousMenuNext("Learn/Server-side/Django/authentication_and_sessions", "Learn/Server-side/Django/Testing", "Learn/Server-side/Django")}}
+{{PreviousMenuNext("Learn_web_development/Extensions/Server-side/Django/Sessions", "Learn_web_development/Extensions/Server-side/Django/Testing", "Learn_web_development/Extensions/Server-side/Django")}}
diff --git a/files/zh-tw/learn_web_development/extensions/server-side/django/generic_views/index.md b/files/zh-tw/learn_web_development/extensions/server-side/django/generic_views/index.md
index db1978f3ecfb6e..b240bb6d69bbaf 100644
--- a/files/zh-tw/learn_web_development/extensions/server-side/django/generic_views/index.md
+++ b/files/zh-tw/learn_web_development/extensions/server-side/django/generic_views/index.md
@@ -4,7 +4,7 @@ slug: Learn_web_development/Extensions/Server-side/Django/Generic_views
 original_slug: Learn/Server-side/Django/Generic_views
 ---
 
-{{LearnSidebar}}{{PreviousMenuNext("Learn/Server-side/Django/Home_page", "Learn/Server-side/Django/Sessions", "Learn/Server-side/Django")}}
+{{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Extensions/Server-side/Django/Home_page", "Learn_web_development/Extensions/Server-side/Django/Sessions", "Learn_web_development/Extensions/Server-side/Django")}}
 
 本教程擴充了 [LocalLibrary](/zh-TW/docs/Learn_web_development/Extensions/Server-side/Django/Tutorial_local_library_website) 網站，為書本與作者增加列表與細節頁面。此處我們將學到通用類別視圖，並演示如何降低你必須為一般使用案例撰寫的程式碼數量。我們也會更加深入 URL 處理細節，演示如何實施基本模式匹配。
 
@@ -14,7 +14,7 @@ original_slug: Learn/Server-side/Django/Generic_views
       <th scope="row">前提:</th>
       <td>
         Complete all previous tutorial topics, including
-        <a href="/zh-TW/docs/Learn/Server-side/Django/Home_page"
+        <a href="/zh-TW/docs/Learn_web_development/Extensions/Server-side/Django/Home_page"
           >Django Tutorial Part 5: Creating our home page</a
         >.
       </td>
@@ -596,4 +596,4 @@ In our next articles we'll extend this library to support user accounts, and the
 - [Built-in template tags and filters](https://docs.djangoproject.com/en/2.0/ref/templates/builtins) (Django docs).
 - [Pagination](https://docs.djangoproject.com/en/2.0/topics/pagination/) (Django docs)
 
-{{PreviousMenuNext("Learn/Server-side/Django/Home_page", "Learn/Server-side/Django/Sessions", "Learn/Server-side/Django")}}
+{{PreviousMenuNext("Learn_web_development/Extensions/Server-side/Django/Home_page", "Learn_web_development/Extensions/Server-side/Django/Sessions", "Learn_web_development/Extensions/Server-side/Django")}}
diff --git a/files/zh-tw/learn_web_development/extensions/server-side/django/home_page/index.md b/files/zh-tw/learn_web_development/extensions/server-side/django/home_page/index.md
index e38bc049594e4c..ecd3101407d9a8 100644
--- a/files/zh-tw/learn_web_development/extensions/server-side/django/home_page/index.md
+++ b/files/zh-tw/learn_web_development/extensions/server-side/django/home_page/index.md
@@ -4,7 +4,7 @@ slug: Learn_web_development/Extensions/Server-side/Django/Home_page
 original_slug: Learn/Server-side/Django/Home_page
 ---
 
-{{LearnSidebar}}{{PreviousMenuNext("Learn/Server-side/Django/Admin_site", "Learn/Server-side/Django/Generic_views", "Learn/Server-side/Django")}}
+{{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Extensions/Server-side/Django/Admin_site", "Learn_web_development/Extensions/Server-side/Django/Generic_views", "Learn_web_development/Extensions/Server-side/Django")}}
 
 我們現在可以添加代碼，來顯示我們的第一個完整頁面 - [LocalLibrary](/zh-TW/docs/Learn_web_development/Extensions/Server-side/Django/Tutorial_local_library_website) 網站的主頁，顯示每個模型類型有多少條記錄，並提供我們其他頁面的側邊欄導航鏈接。一路上，我們將獲得編寫基本 URL 地圖和視圖、從數據庫獲取記錄、以及使用模板的實踐經驗。
 
@@ -14,10 +14,10 @@ original_slug: Learn/Server-side/Django/Home_page
       <th scope="row">前提:</th>
       <td>
         讀 the
-        <a href="/zh-TW/docs/Learn/Server-side/Django/Introduction"
+        <a href="/zh-TW/docs/Learn_web_development/Extensions/Server-side/Django/Introduction"
           >Django Introduction</a
         >. 完成上章節 (including
-        <a href="/zh-TW/docs/Learn/Server-side/Django/Admin_site"
+        <a href="/zh-TW/docs/Learn_web_development/Extensions/Server-side/Django/Admin_site"
           >Django Tutorial Part 4: Django admin site</a
         >).
       </td>
@@ -382,4 +382,4 @@ return render(request, 'index.html', context=context)
 - [Managing static files](https://docs.djangoproject.com/en/2.0/howto/static-files/) (Django docs)
 - [Django shortcut functions](https://docs.djangoproject.com/en/2.0/topics/http/shortcuts/#django.shortcuts.render) (Django docs)
 
-{{PreviousMenuNext("Learn/Server-side/Django/Admin_site", "Learn/Server-side/Django/Generic_views", "Learn/Server-side/Django")}}
+{{PreviousMenuNext("Learn_web_development/Extensions/Server-side/Django/Admin_site", "Learn_web_development/Extensions/Server-side/Django/Generic_views", "Learn_web_development/Extensions/Server-side/Django")}}
diff --git a/files/zh-tw/learn_web_development/extensions/server-side/django/index.md b/files/zh-tw/learn_web_development/extensions/server-side/django/index.md
index 290c64cf676988..b62a0fcad5252b 100644
--- a/files/zh-tw/learn_web_development/extensions/server-side/django/index.md
+++ b/files/zh-tw/learn_web_development/extensions/server-side/django/index.md
@@ -41,11 +41,11 @@ Django 使用 Python 語言編寫，是一個廣受歡迎、且功能完整的
   - : 本教程，我們將向你展示，如何允許使用者用自己的賬戶，登錄到你的網站，以及如何根據他們是否登錄、及其權限，來控制他們可以做什麼、和看到什麼。作為此次演示的一部分，我們將擴展本地圖書館網站，添加登錄和登出頁面，以及使用者和工作人員特定頁面，以查看已借用的書籍。
 - [Django 教學 9: 使用表單](/zh-TW/docs/Learn_web_development/Extensions/Server-side/Django/Forms)
   - : 本教程，我們將向你展示如何使用 Django 中的 [HTML Forms](/zh-TW/docs/Learn_web_development/Extensions/Forms) 表單，特別是編寫表單以創建、更新、和刪除模型實例的最簡單方法。作為此次演示的一部分，我們將擴展本地圖書館網站，以便圖書館員，可以使用我們自己的表單 (而不是使用管理應用程序) 來更新書籍，創建、更新、刪除作者。
-- [Django 教學 10: 測試 Django 網頁應用](/zh-TW/docs/Learn/Server-side/Django/Testing)
+- [Django 教學 10: 測試 Django 網頁應用](/zh-TW/docs/Learn_web_development/Extensions/Server-side/Django/Testing)
   - : 隨著網站的的發展，手工測試越來越難測試—不僅要測試更多，而且隨著組件之間的相互作用變得越來越複雜，一個領域的一個小的變化，可能需要許多額外的測試，來驗證其對其他領域的影響。減輕這些問題的一種方法，是編寫自動化測試，每次更改時，都可以輕鬆可靠地運行。本教程將介紹如何使用 Django 的測試框架，對你的網站進行單元測試自動化。
-- [Django 教學 11: 部署 Django 到生產環境](/zh-TW/docs/Learn/Server-side/Django/Deployment)
+- [Django 教學 11: 部署 Django 到生產環境](/zh-TW/docs/Learn_web_development/Extensions/Server-side/Django/Deployment)
   - : 現在，你已創建（並測試）一個很酷的 「本地圖書館網站」，你將要把它安裝在公共 Web 服務器上，以便圖書館員工和成員，可以通過 Internet 訪問。本文概述如何找到主機，來部署你的網站，以及你需要做什麼，才能使你的網站準備好投入生產環境。
-- [Django 網頁應用安全](/zh-TW/docs/Learn/Server-side/Django/web_application_security)
+- [Django 網頁應用安全](/zh-TW/docs/Learn_web_development/Extensions/Server-side/Django/web_application_security)
   - : 保護用戶數據，是任何網站設計的重要組成部分，我們以前解釋了 Web 安全文章中，一些更常見的安全威脅—本文提供了 Django 內置、如何保護處理這種危險的實際演示。
 
 ## 評估
diff --git a/files/zh-tw/learn_web_development/extensions/server-side/django/introduction/index.md b/files/zh-tw/learn_web_development/extensions/server-side/django/introduction/index.md
index c7c1ba85a2042b..7fdc985ed9a07b 100644
--- a/files/zh-tw/learn_web_development/extensions/server-side/django/introduction/index.md
+++ b/files/zh-tw/learn_web_development/extensions/server-side/django/introduction/index.md
@@ -4,20 +4,20 @@ slug: Learn_web_development/Extensions/Server-side/Django/Introduction
 original_slug: Learn/Server-side/Django/Introduction
 ---
 
-{{LearnSidebar}}{{NextMenu("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django")}}
+{{LearnSidebar}}{{NextMenu("Learn_web_development/Extensions/Server-side/Django/development_environment", "Learn_web_development/Extensions/Server-side/Django")}}
 
 在這第一篇 Django 文章中，我們將回答「什麼是 Django」這個問題，並概述這個網絡框架有什麼特性。我們將描述主要功能，包括一些高級功能，但我們並不會在本單元中詳細介紹。我們還會展示一些 Django 應用程序的主要構建模塊（儘管此時你還沒有要測試的開發環境）。
 
-<table class="learn-box standard-table">
+<table>
   <tbody>
     <tr>
       <th scope="row">先備知識:</th>
       <td>
-        基本的電腦知識.對<a href="/zh-TW/docs/Learn/Server-side/First_steps"
+        基本的電腦知識.對<a href="/zh-TW/docs/Learn_web_development/Extensions/Server-side/First_steps"
           >服務器端網站編程的一般了解</a
         >
         ,特別是<a
-          href="/zh-TW/docs/Learn/Server-side/First_steps/Client-Server_overview"
+          href="/zh-TW/docs/Learn_web_development/Extensions/Server-side/First_steps/Client-Server_overview"
           >網站中客戶端-服務器交互的機制</a
         >
         .
@@ -252,4 +252,4 @@ def index(request):
 
 你已經看到上面的一些真正的 Django 代碼，但與客戶端代碼不同，你需要設置一個開發環境來運行它。這是我們的下一步。
 
-{{NextMenu("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django")}}
+{{NextMenu("Learn_web_development/Extensions/Server-side/Django/development_environment", "Learn_web_development/Extensions/Server-side/Django")}}
diff --git a/files/zh-tw/learn_web_development/extensions/server-side/django/models/index.md b/files/zh-tw/learn_web_development/extensions/server-side/django/models/index.md
index ac080eaa168e89..9028f55cda7405 100644
--- a/files/zh-tw/learn_web_development/extensions/server-side/django/models/index.md
+++ b/files/zh-tw/learn_web_development/extensions/server-side/django/models/index.md
@@ -4,7 +4,7 @@ slug: Learn_web_development/Extensions/Server-side/Django/Models
 original_slug: Learn/Server-side/Django/Models
 ---
 
-{{LearnSidebar}}{{PreviousMenuNext("Learn/Server-side/Django/skeleton_website", "Learn/Server-side/Django/Admin_site", "Learn/Server-side/Django")}}
+{{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Extensions/Server-side/Django/skeleton_website", "Learn_web_development/Extensions/Server-side/Django/Admin_site", "Learn_web_development/Extensions/Server-side/Django")}}
 
 本文介紹如何為 [LocalLibrary](/zh-TW/docs/Learn_web_development/Extensions/Server-side/Django/Tutorial_local_library_website) 網站定義模型。它解釋了模型是什麼、聲明的方式以及一些主要字段類型。它還簡要展示了你可以訪問模型數據的幾個主要方法。
 
@@ -13,7 +13,7 @@ original_slug: Learn/Server-side/Django/Models
     <tr>
       <th scope="row">前提:</th>
       <td>
-        <a href="/zh-TW/docs/Learn/Server-side/Django/skeleton_website"
+        <a href="/zh-TW/docs/Learn_web_development/Extensions/Server-side/Django/skeleton_website"
           >Django 教學 2: 創建骨架網站。</a
         >
       </td>
@@ -442,4 +442,4 @@ _再來我們要稍微撇開建立網站，先來看看 Django 的管理站(Djan
 - [Making queries](https://docs.djangoproject.com/en/2.0/topics/db/queries/) (Django Docs)
 - [QuerySet API Reference](https://docs.djangoproject.com/en/2.0/ref/models/querysets/) (Django Docs)
 
-{{PreviousMenuNext("Learn/Server-side/Django/skeleton_website", "Learn/Server-side/Django/Admin_site", "Learn/Server-side/Django")}}
+{{PreviousMenuNext("Learn_web_development/Extensions/Server-side/Django/skeleton_website", "Learn_web_development/Extensions/Server-side/Django/Admin_site", "Learn_web_development/Extensions/Server-side/Django")}}
diff --git a/files/zh-tw/learn_web_development/extensions/server-side/django/sessions/index.md b/files/zh-tw/learn_web_development/extensions/server-side/django/sessions/index.md
index 6b1f10739b6ef8..ceaeafa70c0a58 100644
--- a/files/zh-tw/learn_web_development/extensions/server-side/django/sessions/index.md
+++ b/files/zh-tw/learn_web_development/extensions/server-side/django/sessions/index.md
@@ -4,7 +4,7 @@ slug: Learn_web_development/Extensions/Server-side/Django/Sessions
 original_slug: Learn/Server-side/Django/Sessions
 ---
 
-{{LearnSidebar}}{{PreviousMenuNext("Learn/Server-side/Django/Generic_views", "Learn/Server-side/Django/authentication_and_sessions", "Learn/Server-side/Django")}}
+{{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Extensions/Server-side/Django/Generic_views", "Learn_web_development/Extensions/Server-side/Django/Authentication", "Learn_web_development/Extensions/Server-side/Django")}}
 
 本教程擴展了我們的[LocalLibrary](/zh-TW/docs/Learn_web_development/Extensions/Server-side/Django/Tutorial_local_library_website) 網站，為主頁添加了一個基於會話的訪問計數器。這是一個相對簡單的例子，但它確實顯示了，如何使用會話框架，為匿名用戶提供持久的行為。
 
@@ -14,7 +14,7 @@ original_slug: Learn/Server-side/Django/Sessions
       <th scope="row">Prerequisites:</th>
       <td>
         Complete all previous tutorial topics, including
-        <a href="/zh-TW/docs/Learn/Server-side/Django/Generic_views"
+        <a href="/zh-TW/docs/Learn_web_development/Extensions/Server-side/Django/Generic_views"
           >Django Tutorial Part 6: Generic list and detail views</a
         >
       </td>
@@ -169,8 +169,8 @@ def index(request):
 
 在接下來的文章中，我們將說明身份驗證和授權（權限）框架，並向你展示如何支持用戶帳戶。
 
-## See also
+## 參見
 
 - [How to use sessions](https://docs.djangoproject.com/en/2.0/topics/http/sessions/) (Django docs)
 
-{{PreviousMenuNext("Learn/Server-side/Django/Generic_views", "Learn/Server-side/Django/Authentication", "Learn/Server-side/Django")}}
+{{PreviousMenuNext("Learn_web_development/Extensions/Server-side/Django/Generic_views", "Learn_web_development/Extensions/Server-side/Django/Authentication", "Learn_web_development/Extensions/Server-side/Django")}}
diff --git a/files/zh-tw/learn_web_development/extensions/server-side/django/skeleton_website/index.md b/files/zh-tw/learn_web_development/extensions/server-side/django/skeleton_website/index.md
index 725493e1cd5274..30e996f1a73870 100644
--- a/files/zh-tw/learn_web_development/extensions/server-side/django/skeleton_website/index.md
+++ b/files/zh-tw/learn_web_development/extensions/server-side/django/skeleton_website/index.md
@@ -4,7 +4,7 @@ slug: Learn_web_development/Extensions/Server-side/Django/skeleton_website
 original_slug: Learn/Server-side/Django/skeleton_website
 ---
 
-{{LearnSidebar}}{{PreviousMenuNext("Learn/Server-side/Django/Tutorial_local_library_website", "Learn/Server-side/Django/Models", "Learn/Server-side/Django")}}
+{{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Extensions/Server-side/Django/Tutorial_local_library_website", "Learn_web_development/Extensions/Server-side/Django/Models", "Learn_web_development/Extensions/Server-side/Django")}}
 
 Django 教學的第二篇文章，會展示怎樣創建一個網站的"框架"，在這個框架的基礎上，你可以繼續填充整站使用的 settings， urls，模型(models)，視圖(views)和模板(templates )。
 
@@ -363,4 +363,4 @@ python3 manage.py runserver
 - [Writing your first Django app - part 1](https://docs.djangoproject.com/en/2.0/intro/tutorial01/) (Django docs)
 - [Applications](https://docs.djangoproject.com/en/2.0/ref/applications/#configuring-applications) (Django Docs). Contains information on configuring applications.
 
-{{PreviousMenuNext("Learn/Server-side/Django/Tutorial_local_library_website", "Learn/Server-side/Django/Models", "Learn/Server-side/Django")}}
+{{PreviousMenuNext("Learn_web_development/Extensions/Server-side/Django/Tutorial_local_library_website", "Learn_web_development/Extensions/Server-side/Django/Models", "Learn_web_development/Extensions/Server-side/Django")}}
diff --git a/files/zh-tw/learn_web_development/extensions/server-side/django/tutorial_local_library_website/index.md b/files/zh-tw/learn_web_development/extensions/server-side/django/tutorial_local_library_website/index.md
index 35490095fe0cc7..58f61c1c73e033 100644
--- a/files/zh-tw/learn_web_development/extensions/server-side/django/tutorial_local_library_website/index.md
+++ b/files/zh-tw/learn_web_development/extensions/server-side/django/tutorial_local_library_website/index.md
@@ -4,7 +4,7 @@ slug: Learn_web_development/Extensions/Server-side/Django/Tutorial_local_library
 original_slug: Learn/Server-side/Django/Tutorial_local_library_website
 ---
 
-{{LearnSidebar}}{{PreviousMenuNext("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django/skeleton_website", "Learn/Server-side/Django")}}
+{{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Extensions/Server-side/Django/development_environment", "Learn_web_development/Extensions/Server-side/Django/skeleton_website", "Learn_web_development/Extensions/Server-side/Django")}}
 
 我們實戰教學系列的第一篇，會解釋你將學到什麼。並提供一個「本地圖書館」 的例子，作為概述。在接下來的教學裡，我們會不斷完善和改進這個網站。
 
@@ -62,4 +62,4 @@ original_slug: Learn/Server-side/Django/Tutorial_local_library_website
 
 現在你對本地圖書館網站有了一些了解並知道你會學到什麼。是時候創建我們例子會用到的[網站框架](/zh-TW/docs/Learn_web_development/Extensions/Server-side/Django/skeleton_website)了。
 
-{{PreviousMenuNext("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django/skeleton_website", "Learn/Server-side/Django")}}
+{{PreviousMenuNext("Learn_web_development/Extensions/Server-side/Django/development_environment", "Learn_web_development/Extensions/Server-side/Django/skeleton_website", "Learn_web_development/Extensions/Server-side/Django")}}
diff --git a/files/zh-tw/learn_web_development/extensions/server-side/express_nodejs/deployment/index.md b/files/zh-tw/learn_web_development/extensions/server-side/express_nodejs/deployment/index.md
index f632f2e71ebdd5..752b4f944cf1f4 100644
--- a/files/zh-tw/learn_web_development/extensions/server-side/express_nodejs/deployment/index.md
+++ b/files/zh-tw/learn_web_development/extensions/server-side/express_nodejs/deployment/index.md
@@ -14,7 +14,7 @@ original_slug: Learn/Server-side/Express_Nodejs/deployment
       <th scope="row">預備知識:</th>
       <td>
         完成前面所有的指南主題，包括
-        <a href="/zh-TW/docs/Learn/Server-side/Express_Nodejs/forms"
+        <a href="/zh-TW/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms"
           >Express Tutorial Part 6: Working with forms</a
         >.
       </td>
diff --git a/files/zh-tw/learn_web_development/extensions/server-side/express_nodejs/development_environment/index.md b/files/zh-tw/learn_web_development/extensions/server-side/express_nodejs/development_environment/index.md
index c1fb1b0b490d59..3bc44e8224e44b 100644
--- a/files/zh-tw/learn_web_development/extensions/server-side/express_nodejs/development_environment/index.md
+++ b/files/zh-tw/learn_web_development/extensions/server-side/express_nodejs/development_environment/index.md
@@ -4,7 +4,7 @@ slug: Learn_web_development/Extensions/Server-side/Express_Nodejs/development_en
 original_slug: Learn/Server-side/Express_Nodejs/development_environment
 ---
 
-{{LearnSidebar}}{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/Introduction", "Learn/Server-side/Express_Nodejs/Tutorial_local_library_website", "Learn/Server-side/Express_Nodejs")}}
+{{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Extensions/Server-side/Express_Nodejs/Introduction", "Learn_web_development/Extensions/Server-side/Express_Nodejs/Tutorial_local_library_website", "Learn_web_development/Extensions/Server-side/Express_Nodejs")}}
 
 現在你已經了解 Express 的目的了，接下來繼續說明如何設定和測試 Windows、Linux (Ubuntu)和 Mac OS X 上的 Node/Express 開發環境。不管你用的是什麼作業系統，你都能在本文中找到開發 Express 應用的入門需知。
 
@@ -38,7 +38,7 @@ NPM 也可用來安裝 Express 應用程式產生器(全域用)，一個方便
 > [!NOTE]
 > 與其他不包含單獨的 web 開發伺服器的 Web 框架不同。 在 Node / Express 中，Web 應用程式創建並運行自己的 Web 伺服器！
 
-典型的開發環境還包含其他工具，例如：編輯程式碼使用的[文字編輯器](/zh-TW/docs/Learn/Common_questions/Tools_and_setup/Available_text_editors)、IDE，進行版本控置管理不同版本程式碼的[Git](/zh-TW/docs/Glossary/Git)。這邊假設你已經有這種工具了(尤其是文字編輯器)
+典型的開發環境還包含其他工具，例如：編輯程式碼使用的[文字編輯器](/zh-TW/docs/Learn_web_development/Howto/Tools_and_setup/Available_text_editors)、IDE，進行版本控置管理不同版本程式碼的 [Git](/zh-TW/docs/Glossary/Git)。這邊假設你已經有這種工具了(尤其是文字編輯器)
 
 ### 哪些作業系統有支援?
 
@@ -373,11 +373,11 @@ We'll talk more about the generated app when we get to the article on generating
 
 下一篇文章，我們開始跟著教程一步一步實作，使用這個開發環境與搭配工具，建立一個完整的網頁應用。
 
-## See also
+## 參見
 
 - [Downloads](https://nodejs.org/en/download/) page (nodejs.org)
 - [Installing Node.js via package manager](https://nodejs.org/en/download/package-manager/) (nodejs.org)
 - [Installing Express](http://expressjs.com/en/starter/installing.html) (expressjs.com)
 - [Express Application Generator](https://expressjs.com/en/starter/generator.html) (expressjs.com)
 
-{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/Introduction", "Learn/Server-side/Express_Nodejs/Tutorial_local_library_website", "Learn/Server-side/Express_Nodejs")}}
+{{PreviousMenuNext("Learn_web_development/Extensions/Server-side/Express_Nodejs/Introduction", "Learn_web_development/Extensions/Server-side/Express_Nodejs/Tutorial_local_library_website", "Learn_web_development/Extensions/Server-side/Express_Nodejs")}}
diff --git a/files/zh-tw/learn_web_development/extensions/server-side/express_nodejs/displaying_data/index.md b/files/zh-tw/learn_web_development/extensions/server-side/express_nodejs/displaying_data/index.md
index 6b2bca75e19308..a6ef2a09ddfaca 100644
--- a/files/zh-tw/learn_web_development/extensions/server-side/express_nodejs/displaying_data/index.md
+++ b/files/zh-tw/learn_web_development/extensions/server-side/express_nodejs/displaying_data/index.md
@@ -4,7 +4,7 @@ slug: Learn_web_development/Extensions/Server-side/Express_Nodejs/Displaying_dat
 original_slug: Learn/Server-side/Express_Nodejs/Displaying_data
 ---
 
-{{LearnSidebar}}{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/routes", "Learn/Server-side/Express_Nodejs/forms", "Learn/Server-side/Express_Nodejs")}}
+{{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Extensions/Server-side/Express_Nodejs/routes", "Learn_web_development/Extensions/Server-side/Express_Nodejs/forms", "Learn_web_development/Extensions/Server-side/Express_Nodejs")}}
 
 我們現在準備好要新增網頁，以顯示本地圖書館網站的書本與其它資料。這些網頁將包括一個主頁 ，顯示我們每個模型的型態有多少筆紀錄，以及我們所有模型的清單與細節頁面。藉此，我們將得到從數據庫取得紀錄、以及使用樣版的實務經驗。
 
@@ -38,14 +38,14 @@ original_slug: Learn/Server-side/Express_Nodejs/Displaying_data
 
 本教程分為下列章節，說明為了顯示圖書館網站頁面，如何新增各種特性 。在進入下一個教程之前，你需要閱讀並逐一實作下列章節。
 
-1. [模板入門](/zh-TW/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Template_primer)
+1. [模板入門](/zh-TW/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Displaying_data/Template_primer)
 2. [本地圖書館基礎模板](/zh-TW/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Displaying_data/LocalLibrary_base_template)
-3. [主頁](/zh-TW/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Home_page)
+3. [主頁](/zh-TW/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Displaying_data/Home_page)
 4. [書本清單頁面](/zh-TW/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Displaying_data/Book_list_page)
 5. [書本實例清單頁面](/zh-TW/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Displaying_data/BookInstance_list_page)
 6. [日期格式化 - 使用 moment](/zh-TW/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Displaying_data/Date_formatting_using_moment)
-7. [作者清單頁面、分類清單頁面與自我挑戰](/zh-TW/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Author_list_page)
-8. [分類詳情頁面](/zh-TW/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Genre_detail_page)
+7. [作者清單頁面、分類清單頁面與自我挑戰](/zh-TW/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Displaying_data/Author_list_page)
+8. [分類詳情頁面](/zh-TW/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Displaying_data/Genre_detail_page)
 9. [書本詳情頁面](/zh-TW/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Displaying_data/Book_detail_page)
 10. [作者詳情頁面](/zh-TW/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Displaying_data/Author_detail_page)
 11. [書本實例詳情頁面與自我挑戰](/zh-TW/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Displaying_data/BookInstance_detail_page_and_challenge)
@@ -56,11 +56,11 @@ original_slug: Learn/Server-side/Express_Nodejs/Displaying_data
 
 在下一篇文章，我們將依據目前為止學到的知識，創建 HTML 表單以及表單管理代碼，開始修改儲存在網站中的資料。
 
-## 參閱
+## 參見
 
 - [Async module](http://caolan.github.io/async/docs.html) (Async docs)
 - [Using Template engines with Express](https://expressjs.com/en/guide/using-template-engines.html) (Express docs)
 - [Pug](https://pugjs.org/api/getting-started.html) (Pug docs)
 - [Moment](http://momentjs.com/docs/) (Moment docs)
 
-{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/routes", "Learn/Server-side/Express_Nodejs/forms", "Learn/Server-side/Express_Nodejs")}}
+{{PreviousMenuNext("Learn_web_development/Extensions/Server-side/Express_Nodejs/routes", "Learn_web_development/Extensions/Server-side/Express_Nodejs/forms", "Learn_web_development/Extensions/Server-side/Express_Nodejs")}}
diff --git a/files/zh-tw/learn_web_development/extensions/server-side/express_nodejs/forms/index.md b/files/zh-tw/learn_web_development/extensions/server-side/express_nodejs/forms/index.md
index 6315a0f39648dc..5e06dc6e3df58a 100644
--- a/files/zh-tw/learn_web_development/extensions/server-side/express_nodejs/forms/index.md
+++ b/files/zh-tw/learn_web_development/extensions/server-side/express_nodejs/forms/index.md
@@ -4,7 +4,7 @@ slug: Learn_web_development/Extensions/Server-side/Express_Nodejs/forms
 original_slug: Learn/Server-side/Express_Nodejs/forms
 ---
 
-{{LearnSidebar}}{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/Displaying_data", "Learn/Server-side/Express_Nodejs/deployment", "Learn/Server-side/Express_Nodejs")}}
+{{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Extensions/Server-side/Express_Nodejs/Displaying_data", "Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment", "Learn_web_development/Extensions/Server-side/Express_Nodejs")}}
 
 在此教程中，我們會教你如何使用 Express ，並且結合 Pug 來實現 HTML 表單，並且如何從數據庫中創建、更新、和刪除文檔。
 
@@ -201,12 +201,12 @@ router.post("/genre/create", genre_controller.genre_create_post);
 
 以下子文件，將帶我們完成向示例應用程序添加所需表單的過程。在進入下一個文件之前，你需要依次閱讀並解決每個問題。
 
-1. [創建種類表單](/zh-TW/docs/Learn/Server-side/Express_Nodejs/forms/Create_genre_form) — 定義我們的頁面以創建種類對象 `Genre`。
-2. [創建作者表單](/zh-TW/docs/Learn/Server-side/Express_Nodejs/forms/Create_author_form) — 定義用於創建作者對象 `Author` 的頁面。
-3. [創建書本表單](/zh-TW/docs/Learn/Server-side/Express_Nodejs/forms/Create_book_form) — 定義頁面/表單以創建書本對象 `Book` 。
-4. [創建書本實例表單](/zh-TW/docs/Learn/Server-side/Express_Nodejs/forms/Create_BookInstance_form) — 定義頁面/表單以創建書本實例對象 `BookInstance` 。
-5. [刪除作者表單](/zh-TW/docs/Learn/Server-side/Express_Nodejs/forms/Delete_author_form) — 定義要刪除作者對象 `Author`的頁面。
-6. [更新書本表單](/zh-TW/docs/Learn/Server-side/Express_Nodejs/forms/Update_Book_form) — 定義頁面以更新書本對象 `Book` 。
+1. [創建種類表單](/zh-TW/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms/Create_genre_form) — 定義我們的頁面以創建種類對象 `Genre`。
+2. [創建作者表單](/zh-TW/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms/Create_author_form) — 定義用於創建作者對象 `Author` 的頁面。
+3. [創建書本表單](/zh-TW/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms/Create_book_form) — 定義頁面/表單以創建書本對象 `Book` 。
+4. [創建書本實例表單](/zh-TW/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms/Create_BookInstance_form) — 定義頁面/表單以創建書本實例對象 `BookInstance` 。
+5. [刪除作者表單](/zh-TW/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms/Delete_author_form) — 定義要刪除作者對象 `Author`的頁面。
+6. [更新書本表單](/zh-TW/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms/Update_Book_form) — 定義頁面以更新書本對象 `Book` 。
 
 ## 挑戰自我
 
@@ -235,8 +235,8 @@ Express, node, 與 NPM 上面的第三方套件，提供你需要的每樣東西
 
 你現在應該了解如何新增基本表單，以及表單處理代碼到你的 node 網站！
 
-## 請參閱
+## 參見
 
 - [express-validator](https://www.npmjs.com/package/express-validator) (npm docs).
 
-{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/Displaying_data", "Learn/Server-side/Express_Nodejs/deployment", "Learn/Server-side/Express_Nodejs")}}
+{{PreviousMenuNext("Learn_web_development/Extensions/Server-side/Express_Nodejs/Displaying_data", "Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment", "Learn_web_development/Extensions/Server-side/Express_Nodejs")}}
diff --git a/files/zh-tw/learn_web_development/extensions/server-side/express_nodejs/introduction/index.md b/files/zh-tw/learn_web_development/extensions/server-side/express_nodejs/introduction/index.md
index 8d57b8433d6c32..74f09a940f6a81 100644
--- a/files/zh-tw/learn_web_development/extensions/server-side/express_nodejs/introduction/index.md
+++ b/files/zh-tw/learn_web_development/extensions/server-side/express_nodejs/introduction/index.md
@@ -6,19 +6,19 @@ original_slug: Learn/Server-side/Express_Nodejs/Introduction
 
 {{LearnSidebar}}
 
-{{NextMenu("Learn/Server-side/Express_Nodejs/development_environment", "Learn/Server-side/Express_Nodejs")}}
+{{NextMenu("Learn_web_development/Extensions/Server-side/Express_Nodejs/development_environment", "Learn_web_development/Extensions/Server-side/Express_Nodejs")}}
 
 在這篇文章中回答了「什麼是 Node？」和「什麼是 Express」，同時概述是什麼讓 Express 框架如此特別。本文將概述主要特性、展示一些 Express 應用的主要建構模塊(雖然此時你還沒有能測試它的開發環境)
 
-<table class="learn-box standard-table">
+<table>
   <tbody>
     <tr>
       <th scope="row">前置需求:</th>
       <td>
-        基本的電腦知識。 對<a href="/zh-TW/docs/Learn/Server-side/First_steps"
+        基本的電腦知識。 對<a href="/zh-TW/docs/Learn_web_development/Extensions/Server-side/First_steps"
           >伺服器端網站程式設計</a
         >的基本了解，特別是網站中<a
-          href="/zh-TW/docs/Learn/Server-side/First_steps/Client-Server_overview"
+          href="/zh-TW/docs/Learn_web_development/Extensions/Server-side/First_steps/Client-Server_overview"
           >客戶端 - 伺服器交互的機制</a
         >。
       </td>
@@ -493,7 +493,7 @@ In a later topic we'll use the _Express Application Generator_, which creates a
 
 當然，Express 是一個非常輕量級的 Web 應用程序框架，它的許多好處和潛力來自第三方函式庫和功能。我們將在以下文章中更詳細地介紹這些內容。在下一篇文章中，我們將介紹如何設置 Node 開發環境，以便你可以開始查看一些 Express 代碼。
 
-## See also
+## 參見
 
 - [Venkat.R - Manage Multiple Node versions](https://medium.com/@ramsunvtech/manage-multiple-node-versions-e3245d5ede44)
 - [Modules](https://nodejs.org/api/modules.html#modules_modules) (Node API docs)
@@ -507,4 +507,4 @@ In a later topic we'll use the _Express Application Generator_, which creates a
 - [Serving static files in Express](http://expressjs.com/en/starter/static-files.html) (Express docs)
 - [Error handling](http://expressjs.com/en/guide/error-handling.html) (Express docs)
 
-{{NextMenu("Learn/Server-side/Express_Nodejs/development_environment", "Learn/Server-side/Express_Nodejs")}}
+{{NextMenu("Learn_web_development/Extensions/Server-side/Express_Nodejs/development_environment", "Learn_web_development/Extensions/Server-side/Express_Nodejs")}}
diff --git a/files/zh-tw/learn_web_development/extensions/server-side/express_nodejs/mongoose/index.md b/files/zh-tw/learn_web_development/extensions/server-side/express_nodejs/mongoose/index.md
index 860b997a25aff6..4cb2cca6f8a1d3 100644
--- a/files/zh-tw/learn_web_development/extensions/server-side/express_nodejs/mongoose/index.md
+++ b/files/zh-tw/learn_web_development/extensions/server-side/express_nodejs/mongoose/index.md
@@ -1,10 +1,10 @@
 ---
-title: "Express 教學 3: 使用資料庫 ( Mongoose)"
+title: Express 教學 3：使用資料庫（Mongoose）
 slug: Learn_web_development/Extensions/Server-side/Express_Nodejs/mongoose
 original_slug: Learn/Server-side/Express_Nodejs/mongoose
 ---
 
-{{LearnSidebar}}{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/skeleton_website", "Learn/Server-side/Express_Nodejs/routes", "Learn/Server-side/Express_Nodejs")}}
+{{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Extensions/Server-side/Express_Nodejs/skeleton_website", "Learn_web_development/Extensions/Server-side/Express_Nodejs/routes", "Learn_web_development/Extensions/Server-side/Express_Nodejs")}}
 
 本文簡短介紹數據庫，以及如何搭配 Node / Express 應用，使用數據庫。接下來會演示我們如何使用 [Mongoose](http://mongoosejs.com/)，為本地圖書館提供數據庫存取。本文說明物件要求與模型如何宣告，主要的欄位型態，以及基本驗證。本文也簡短演示一些存取模型數據的主要方法。
 
@@ -13,7 +13,7 @@ original_slug: Learn/Server-side/Express_Nodejs/mongoose
     <tr>
       <th scope="row">前置條件:</th>
       <td>
-        <a href="/zh-TW/docs/Learn/Server-side/Express_Nodejs/skeleton_website"
+        <a href="/zh-TW/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/skeleton_website"
           >Express 教學 2: 創建一個骨架網站</a
         >
       </td>
@@ -733,7 +733,7 @@ module.exports = mongoose.model("BookInstance", BookInstanceSchema);
 
 最後，我們創建一些實例，以測試模型(使用獨立運作的命令稿)。下一篇文章，我們將關注於如何創建一些網頁，以呈現這些物件。
 
-## 參閱
+## 參見
 
 - [Database integration](https://expressjs.com/en/guide/database-integration.html) (Express docs)
 - [Mongoose website](http://mongoosejs.com/) (Mongoose docs)
@@ -744,4 +744,4 @@ module.exports = mongoose.model("BookInstance", BookInstanceSchema);
 - [Queries](http://mongoosejs.com/docs/queries.html) (Mongoose docs)
 - [Population](http://mongoosejs.com/docs/populate.html) (Mongoose docs)
 
-{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/skeleton_website", "Learn/Server-side/Express_Nodejs/routes", "Learn/Server-side/Express_Nodejs")}}
+{{PreviousMenuNext("Learn_web_development/Extensions/Server-side/Express_Nodejs/skeleton_website", "Learn_web_development/Extensions/Server-side/Express_Nodejs/routes", "Learn_web_development/Extensions/Server-side/Express_Nodejs")}}
diff --git a/files/zh-tw/learn_web_development/extensions/server-side/express_nodejs/routes/index.md b/files/zh-tw/learn_web_development/extensions/server-side/express_nodejs/routes/index.md
index fa801ab2ee1c1f..400a167b21f25e 100644
--- a/files/zh-tw/learn_web_development/extensions/server-side/express_nodejs/routes/index.md
+++ b/files/zh-tw/learn_web_development/extensions/server-side/express_nodejs/routes/index.md
@@ -4,7 +4,7 @@ slug: Learn_web_development/Extensions/Server-side/Express_Nodejs/routes
 original_slug: Learn/Server-side/Express_Nodejs/routes
 ---
 
-{{LearnSidebar}}{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/mongoose", "Learn/Server-side/Express_Nodejs/Displaying_data", "Learn/Server-side/Express_Nodejs")}}
+{{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Extensions/Server-side/Express_Nodejs/mongoose", "Learn_web_development/Extensions/Server-side/Express_Nodejs/Displaying_data", "Learn_web_development/Extensions/Server-side/Express_Nodejs")}}
 
 在本教程中，我們將為最終在 本地圖書館 網站中需要的所有資源端點，搭配 "空殼" 處理函式來配置路由 (URL handling code) 。完成後，我們的路由處理源碼將會有模組化結構，在接下來的文章中，我們可以用真實的處理函式加以擴充。我們也會對如何使用 Express 創建模組化路由，有更好的理解。
 
@@ -14,10 +14,10 @@ original_slug: Learn/Server-side/Express_Nodejs/routes
       <th scope="row">先備知識:</th>
       <td>
         閱讀
-        <a href="/zh-TW/docs/Learn/Server-side/Express_Nodejs/Introduction"
+        <a href="/zh-TW/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Introduction"
           >Express/Node 介紹</a
         >。 完成先前教學主題 (包含
-        <a href="/zh-TW/docs/Learn/Server-side/Express_Nodejs/mongoose"
+        <a href="/zh-TW/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/mongoose"
           >Express 教學 3: 使用資料庫 (Mongoose)</a
         >).
       </td>
@@ -647,9 +647,9 @@ app.use("/catalog", catalogRouter); // Add catalog routes to middleware chain.
 
 下一篇文章，我們將使用視圖（模板）和存在模型裡的信息，為網站創建一個合適的歡迎頁面。
 
-## 參閱
+## 參見
 
 - [Basic routing](http://expressjs.com/en/starter/basic-routing.html) (Express docs)
 - [Routing guide](http://expressjs.com/en/guide/routing.html) (Express docs)
 
-{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/mongoose", "Learn/Server-side/Express_Nodejs/Displaying_data", "Learn/Server-side/Express_Nodejs")}}
+{{PreviousMenuNext("Learn_web_development/Extensions/Server-side/Express_Nodejs/mongoose", "Learn_web_development/Extensions/Server-side/Express_Nodejs/Displaying_data", "Learn_web_development/Extensions/Server-side/Express_Nodejs")}}
diff --git a/files/zh-tw/learn_web_development/extensions/server-side/express_nodejs/skeleton_website/index.md b/files/zh-tw/learn_web_development/extensions/server-side/express_nodejs/skeleton_website/index.md
index 05f47e95327259..133ec70537b122 100644
--- a/files/zh-tw/learn_web_development/extensions/server-side/express_nodejs/skeleton_website/index.md
+++ b/files/zh-tw/learn_web_development/extensions/server-side/express_nodejs/skeleton_website/index.md
@@ -1,12 +1,12 @@
 ---
-title: "Express 教學 2: 創建一個骨架網站"
+title: Express 教學 2：創建一個骨架網站
 slug: Learn_web_development/Extensions/Server-side/Express_Nodejs/skeleton_website
 original_slug: Learn/Server-side/Express_Nodejs/skeleton_website
 ---
 
 {{LearnSidebar}}
 
-{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/Tutorial_local_library_website", "Learn/Server-side/Express_Nodejs/mongoose", "Learn/Server-side/Express_Nodejs")}}
+{{PreviousMenuNext("Learn_web_development/Extensions/Server-side/Express_Nodejs/Tutorial_local_library_website", "Learn_web_development/Extensions/Server-side/Express_Nodejs/mongoose", "Learn_web_development/Extensions/Server-side/Express_Nodejs")}}
 
 在 [Express 教程](/zh-TW/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Tutorial_local_library_website)的第二篇文章，演示如何創建一個 "骨架" 網站項目，你可以接著在裡面加入網站特定的路由、模板/視圖、和數据庫調用。
 
@@ -16,7 +16,7 @@ original_slug: Learn/Server-side/Express_Nodejs/skeleton_website
       <th scope="row">前置條件:</th>
       <td>
         <a
-          href="/zh-TW/docs/Learn/Server-side/Express_Nodejs/development_environment"
+          href="/zh-TW/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/development_environment"
           >架設一個Node 開發環境</a
         >。回顧Express 教程。
       </td>
@@ -497,9 +497,9 @@ block content
 
 接下來我們將開始修改骨架，讓它能像一個圖書館網站一樣運作。
 
-## 參閱
+## 參見
 
 - [Express application generator](https://expressjs.com/en/starter/generator.html) (Express docs)
 - [Using template engines with Express](https://expressjs.com/en/guide/using-template-engines.html) (Express docs)
 
-{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/Tutorial_local_library_website", "Learn/Server-side/Express_Nodejs/mongoose", "Learn/Server-side/Express_Nodejs")}}
+{{PreviousMenuNext("Learn_web_development/Extensions/Server-side/Express_Nodejs/Tutorial_local_library_website", "Learn_web_development/Extensions/Server-side/Express_Nodejs/mongoose", "Learn_web_development/Extensions/Server-side/Express_Nodejs")}}
diff --git a/files/zh-tw/learn_web_development/extensions/server-side/express_nodejs/tutorial_local_library_website/index.md b/files/zh-tw/learn_web_development/extensions/server-side/express_nodejs/tutorial_local_library_website/index.md
index 2861730808c459..3676a461f1158f 100644
--- a/files/zh-tw/learn_web_development/extensions/server-side/express_nodejs/tutorial_local_library_website/index.md
+++ b/files/zh-tw/learn_web_development/extensions/server-side/express_nodejs/tutorial_local_library_website/index.md
@@ -1,10 +1,10 @@
 ---
-title: "Express 教學 1: 本地圖書館網站"
+title: Express 教學 1：本地圖書館網站
 slug: Learn_web_development/Extensions/Server-side/Express_Nodejs/Tutorial_local_library_website
 original_slug: Learn/Server-side/Express_Nodejs/Tutorial_local_library_website
 ---
 
-{{LearnSidebar}}{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/development_environment", "Learn/Server-side/Express_Nodejs/skeleton_website", "Learn/Server-side/Express_Nodejs")}}
+{{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Extensions/Server-side/Express_Nodejs/development_environment", "Learn_web_development/Extensions/Server-side/Express_Nodejs/skeleton_website", "Learn_web_development/Extensions/Server-side/Express_Nodejs")}}
 
 我們實作教程系列的第一篇文章，會說明將學到什麼東西，並提供「本地圖書館」範例網站的概述 。我們將在接下來的文章中一步一步完成這個網站。
 
@@ -14,12 +14,12 @@ original_slug: Learn/Server-side/Express_Nodejs/Tutorial_local_library_website
       <th scope="row">前置條件:</th>
       <td>
         閱讀
-        <a href="/zh-TW/docs/Learn/Server-side/Express_Nodejs/Introduction"
+        <a href="/zh-TW/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Introduction"
           >Express 介紹。</a
         >
         在底下的教程，你將需要
         <a
-          href="/zh-TW/docs/Learn/Server-side/Express_Nodejs/development_environment"
+          href="/zh-TW/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/development_environment"
           >架設一個 Node 開發環境。</a
         >
       </td>
@@ -70,4 +70,4 @@ _我們接下來將創建，並隨著本系列教程發展的網站，名字是
 
 現在，你對本地圖書館網站以及將要學習的東西，有更多一點的認識，是時候開始創建一個[骨架項目](/zh-TW/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/skeleton_website)，以存放我們的範例。
 
-{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/development_environment", "Learn/Server-side/Express_Nodejs/skeleton_website", "Learn/Server-side/Express_Nodejs")}}
+{{PreviousMenuNext("Learn_web_development/Extensions/Server-side/Express_Nodejs/development_environment", "Learn_web_development/Extensions/Server-side/Express_Nodejs/skeleton_website", "Learn_web_development/Extensions/Server-side/Express_Nodejs")}}
diff --git a/files/zh-tw/learn_web_development/extensions/server-side/first_steps/index.md b/files/zh-tw/learn_web_development/extensions/server-side/first_steps/index.md
index c9126f6812476c..b4a1ceba5cbf5e 100644
--- a/files/zh-tw/learn_web_development/extensions/server-side/first_steps/index.md
+++ b/files/zh-tw/learn_web_development/extensions/server-side/first_steps/index.md
@@ -17,8 +17,8 @@ original_slug: Learn/Server-side/First_steps
 你必須知道「網路如何運作」。關於此，我們推薦以下主題：
 
 - [何謂網路伺服器](/zh-TW/docs/Learn_web_development/Howto/Web_mechanics/What_is_a_web_server)
-- [我需要什麼軟體來建立網站？](/zh-TW/docs/Learn/Common_questions/Tools_and_setup/What_software_do_I_need)
-- [如何把檔案上傳到網路伺服器？](/zh-TW/docs/Learn/Common_questions/Tools_and_setup/Upload_files_to_a_web_server)
+- [我需要什麼軟體來建立網站？](/zh-TW/docs/Learn_web_development/Howto/Tools_and_setup/What_software_do_I_need)
+- [如何把檔案上傳到網路伺服器？](/zh-TW/docs/Learn_web_development/Howto/Tools_and_setup/Upload_files_to_a_web_server)
 
 有了基本理解後，你就可以透過本章節的模組來完成工作。
 
@@ -26,11 +26,11 @@ original_slug: Learn/Server-side/First_steps
 
 - [伺服器端介紹](/zh-TW/docs/Learn_web_development/Extensions/Server-side/First_steps/Introduction)
   - : 歡迎來到 MDN 初學者的伺服器端程式設計課程！在這首篇文章中，我們將以很高的角度回答諸如「這是什麼？」、「它和用戶端程式設計有何不同？」、還有「為什麼它有用？」之類的問題。讀完以後，你會明白很多關於伺服器端程式設計的知識。
-- [用戶端概述](/zh-TW/docs/Learn/Server-side/First_steps/Client-Server_overview)
+- [用戶端概述](/zh-TW/docs/Learn_web_development/Extensions/Server-side/First_steps/Client-Server_overview)
   - : 現在你知道了伺服器端程式設計的目標與益處，而我們現在要檢驗一些細節：當伺服器從瀏覽器那邊收到「動態請求」的時候，究竟發生了什麼事。因為大多數網站都用相近的方法處理請求與回應，所以這一點會幫助你理解自己在撰寫程式碼的時候要幹什麼。
-- [伺服器端網路框架](/zh-TW/docs/Learn/Server-side/First_steps/Web_frameworks)
+- [伺服器端網路框架](/zh-TW/docs/Learn_web_development/Extensions/Server-side/First_steps/Web_frameworks)
   - : 最後一篇文章介紹了伺服器端網路程式，為了回應來自瀏覽器的請求，究竟需要些什麼。現在，我們會告訴你網路框架如何簡化那些工作，並幫助你選定自己的第一個網路程式，要用上什麼樣的框架。
-- [網站安全](/zh-TW/docs/Learn/Server-side/First_steps/Website_security)
+- [網站安全](/zh-TW/docs/Learn_web_development/Extensions/Server-side/First_steps/Website_security)
   - : 網站安全，有賴網頁設計時的高度警覺。這篇概要性的文章不是要讓你變成網站安全大神，而是幫你理解在強化網路程式免受大多數威脅時，第一要務為何。
 
 ## 評估
diff --git a/files/zh-tw/learn_web_development/extensions/server-side/first_steps/introduction/index.md b/files/zh-tw/learn_web_development/extensions/server-side/first_steps/introduction/index.md
index 3ed8c69291cc65..30d011a8367544 100644
--- a/files/zh-tw/learn_web_development/extensions/server-side/first_steps/introduction/index.md
+++ b/files/zh-tw/learn_web_development/extensions/server-side/first_steps/introduction/index.md
@@ -4,11 +4,11 @@ slug: Learn_web_development/Extensions/Server-side/First_steps/Introduction
 original_slug: Learn/Server-side/First_steps/Introduction
 ---
 
-{{LearnSidebar}}{{NextMenu("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps")}}
+{{LearnSidebar}}{{NextMenu("Learn_web_development/Extensions/Server-side/First_steps/Client-Server_overview", "Learn_web_development/Extensions/Server-side/First_steps")}}
 
 歡迎來到 MDN 伺服器端程式設計的初學者課程 ！在第一篇文章中，我們會用較為抽象的角度來探討 server-side programming，並且為你解答「這是什麼？」「這個和用戶端的程式有什麼不同？」以及「這個有什麼用？」 。在讀完這篇文章後，你將能明白如何透過 server-side coding 來為你的網站增添力量。
 
-<table class="learn-box standard-table">
+<table>
   <tbody>
     <tr>
       <th scope="row">先決條件:</th>
@@ -190,4 +190,4 @@ original_slug: Learn/Server-side/First_steps/Introduction
 
 在未來的文章，我們將協助你選擇最佳的網頁框架，做為你的第一個網站；接著，我們將帶你更詳細了解主要的用戶端-伺服端的互動。
 
-{{NextMenu("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps")}}
+{{NextMenu("Learn_web_development/Extensions/Server-side/First_steps/Client-Server_overview", "Learn_web_development/Extensions/Server-side/First_steps")}}
diff --git a/files/zh-tw/learn_web_development/extensions/testing/automated_testing/index.md b/files/zh-tw/learn_web_development/extensions/testing/automated_testing/index.md
index 82a4e187f132c2..eb3947e32c4ee5 100644
--- a/files/zh-tw/learn_web_development/extensions/testing/automated_testing/index.md
+++ b/files/zh-tw/learn_web_development/extensions/testing/automated_testing/index.md
@@ -4,7 +4,7 @@ slug: Learn_web_development/Extensions/Testing/Automated_testing
 original_slug: Learn/Tools_and_testing/Cross_browser_testing/Automated_testing
 ---
 
-{{LearnSidebar}}{{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/Feature_detection", "Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment", "Learn/Tools_and_testing/Cross_browser_testing")}}
+{{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Extensions/Testing/Feature_detection", "Learn_web_development/Extensions/Testing/Your_own_automation_environment", "Learn_web_development/Extensions/Testing")}}
 
 每天在好幾個瀏覽器與設備上，運行手動測試數次，既乏味又浪費時間。要有效率的處理這種事，就要開始熟悉自動化工具。我們會在這篇文章看看有哪些可用的工具、如何使用它們、以及如何使用如 Sauce Labs 與 Browser Stack 的商業化瀏覽器測試程式之基本講述。
 
@@ -13,12 +13,12 @@ original_slug: Learn/Tools_and_testing/Cross_browser_testing/Automated_testing
     <tr>
       <th scope="row">先決條件：</th>
       <td>
-        熟悉 <a href="/zh-TW/docs/Learn/HTML">HTML</a>、<a
-          href="/zh-TW/docs/Learn/CSS"
+        熟悉 <a href="/zh-TW/docs/Learn_web_development/Core/Structuring_content">HTML</a>、<a
+          href="/zh-TW/docs/Learn_web_development/Core/Styling_basics"
           >CSS</a
-        >、<a href="/zh-TW/docs/Learn/JavaScript">JavaScript</a>
+        >、<a href="/zh-TW/docs/Learn_web_development/Core/Scripting">JavaScript</a>
         核心語言的基本；<a
-          href="/zh-TW/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction"
+          href="/zh-TW/docs/Learn_web_development/Extensions/Testing/Introduction"
           >跨瀏覽器測試的重要原則</a
         >。
       </td>
@@ -413,4 +413,4 @@ Let's have a brief look at how we'd access the API using Node.js and [node-sauce
 
 下篇文章我們來關注怎麼用 Selenium 設定你自己的區域自動化系統，並與 Sauce Labs 做結合。
 
-{{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/Feature_detection", "Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment", "Learn/Tools_and_testing/Cross_browser_testing")}}
+{{PreviousMenuNext("Learn_web_development/Extensions/Testing/Feature_detection", "Learn_web_development/Extensions/Testing/Your_own_automation_environment", "Learn_web_development/Extensions/Testing")}}
diff --git a/files/zh-tw/learn_web_development/extensions/testing/index.md b/files/zh-tw/learn_web_development/extensions/testing/index.md
index 0b56153da22224..2ff2ed8643dab9 100644
--- a/files/zh-tw/learn_web_development/extensions/testing/index.md
+++ b/files/zh-tw/learn_web_development/extensions/testing/index.md
@@ -14,19 +14,19 @@ original_slug: Learn/Tools_and_testing/Cross_browser_testing
 
 ## 指引
 
-- [跨瀏覽器測試介紹](/zh-TW/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction)
+- [跨瀏覽器測試介紹](/zh-TW/docs/Learn_web_development/Extensions/Testing/Introduction)
   - : 這篇文章將透過給予跨瀏覽器測試概覽重點、回答諸如「何謂跨瀏覽器測試？」、「你最有可能碰上什麼問題？」、「測試、找出、並解決錯誤的主要方法有哪些？」的問題，以作為模組的開頭。
-- [測試進行策略](/zh-TW/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies)
+- [測試進行策略](/zh-TW/docs/Learn_web_development/Extensions/Testing/Testing_strategies)
   - : 接著，我們將針對測試執行深入研究、確定目標受眾（像是什麼瀏覽器、設備、或其他需要確認的地方）、低測試策略（low fi testing strategies，讓自己取得需要的設備、虛擬機、還有 adhoc 測試）、進階測試策略（自動化以及使用專用工具）、還有用戶群組間的測試。
-- [處理常見的 HTML 與 CSS 問題](/zh-TW/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS)
+- [處理常見的 HTML 與 CSS 問題](/zh-TW/docs/Learn_web_development/Extensions/Testing/HTML_and_CSS)
   - : 在這裡，我們將關注可能遇上的，常見跨瀏覽器 HTML 與 CSS 程式相關問題，還有能預防或修復淺在問題的工具。這裡面會有語法標示（linting code）、CSS 前輟處理、使用瀏覽器工具找出問題、使用 polyfill 支援瀏覽器、處理響應式網頁問題...等等。
 - [處理常見的 JavaScript 問題](/zh-TW/docs/Learn_web_development/Core/Scripting/Debugging_JavaScript)
   - : 我們會開始觀察常見的跨瀏覽器 JavaScript 程式問題，以及修復的辦法。使用瀏覽器工具追蹤並解決問題、使用 Polyfill 與函式庫解決問題、在老舊瀏覽器實作新功能...等等。
-- [處理常見的無障礙問題](/zh-TW/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility)
+- [處理常見的無障礙問題](/zh-TW/docs/Learn_web_development/Core/Accessibility/Tooling)
   - : 我們要關注無障礙網頁，並提供常見問題的資訊、如何簡易測試、還有使用檢測/自動化工具，以排查無障礙問題。
-- [功能檢測實做](/zh-TW/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection)
+- [功能檢測實做](/zh-TW/docs/Learn_web_development/Extensions/Testing/Feature_detection)
   - : 功能檢測牽涉到確定瀏覽器是否支持某個程式碼，是否依賴他執行不同的程式碼，以便部分瀏覽器能提供可執行的體驗，而不是直接崩潰/錯誤。本文詳細介紹如何編寫自己的簡單功能檢測，如何使用函式庫來加速實現，以及用於功能檢測的本機功能，例如 `@supports`。
 - [自動化測試介紹](/zh-TW/docs/Learn_web_development/Extensions/Testing/Automated_testing)
   - : 每天在好幾個瀏覽器與設備上，運行手動測試數次，既乏味又浪費時間。要有效率的處理這種事，就要開始熟悉自動化工具。我們會在這篇文章看看有哪些可用的工具、如何使用它們、以及如何使用如 Sauce Labs 與 Browser Stack 的商業化瀏覽器測試程式之基本講述。
-- [設定你的自動化測試環境](/zh-TW/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment)
+- [設定你的自動化測試環境](/zh-TW/docs/Learn_web_development/Extensions/Testing/Your_own_automation_environment)
   - : 我們會在這篇文章教你如何安裝自己的自動化測試環境、並透過 Selenium/WebDriver 以及 Node 的測試函式庫如 selenium-webdriver 來跑你的測試。我們還會講測試環境如何與上篇文章所講述的商業軟體做整合。
diff --git a/files/zh-tw/learn_web_development/getting_started/environment_setup/dealing_with_files/index.md b/files/zh-tw/learn_web_development/getting_started/environment_setup/dealing_with_files/index.md
index 0a229c1247ee56..054390523404b2 100644
--- a/files/zh-tw/learn_web_development/getting_started/environment_setup/dealing_with_files/index.md
+++ b/files/zh-tw/learn_web_development/getting_started/environment_setup/dealing_with_files/index.md
@@ -4,7 +4,7 @@ slug: Learn_web_development/Getting_started/Environment_setup/Dealing_with_files
 original_slug: Learn/Getting_started_with_the_web/Dealing_with_files
 ---
 
-{{LearnSidebar}}{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}
+{{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Getting_started/Environment_setup/Code_editors", "Learn_web_development/Getting_started/Environment_setup/Command_line", "Learn_web_development/Getting_started/Environment_setup")}}
 
 一個網站會包含許多檔案: 文字內容、程式碼、樣式表、影音內容......等。每當你建立一個網站時，你需要將這些檔案在你的電腦上合理架構好。以確保它們能夠互相溝通，並讓內容正常顯示。然後你接著才能[將你的網站發佈上線](/zh-TW/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website)。本篇文章將探討你應該注意的一些議題，以便讓你能夠為你的網站設定好合理的檔案架構。
 
@@ -80,4 +80,4 @@ original_slug: Learn/Getting_started_with_the_web/Dealing_with_files
 
 ![A file structure in mac os x finder, showing an images folder with an image in, empty scripts and styles folders, and an index.html file](file-structure.png)
 
-{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}
+{{PreviousMenuNext("Learn_web_development/Getting_started/Environment_setup/Code_editors", "Learn_web_development/Getting_started/Environment_setup/Command_line", "Learn_web_development/Getting_started/Environment_setup")}}
diff --git a/files/zh-tw/learn_web_development/getting_started/environment_setup/installing_software/index.md b/files/zh-tw/learn_web_development/getting_started/environment_setup/installing_software/index.md
index 38387c01c76c88..e6af414553a4b7 100644
--- a/files/zh-tw/learn_web_development/getting_started/environment_setup/installing_software/index.md
+++ b/files/zh-tw/learn_web_development/getting_started/environment_setup/installing_software/index.md
@@ -4,7 +4,7 @@ slug: Learn_web_development/Getting_started/Environment_setup/Installing_softwar
 original_slug: Learn/Getting_started_with_the_web/Installing_basic_software
 ---
 
-{{LearnSidebar}}{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}
+{{LearnSidebar}}{{NextMenu("Learn_web_development/Getting_started/Environment_setup/Browsing_the_web", "Learn_web_development/Getting_started/Environment_setup")}}
 
 在本文中，你會知道有哪些 Web 開發的簡易工具，以及正確的安裝方式。
 
@@ -45,6 +45,6 @@ original_slug: Learn/Getting_started_with_the_web/Installing_basic_software
 
 ### 安裝伺服器軟體
 
-有些例子需要使用伺服器軟體。你可以在 [How do you set up a local testing server?](/zh-TW/docs/Learn/Common_questions/Tools_and_setup/set_up_a_local_testing_server) 找到作法。
+有些例子需要使用伺服器軟體。你可以在 [How do you set up a local testing server?](/zh-TW/docs/Learn_web_development/Howto/Tools_and_setup/set_up_a_local_testing_server) 找到作法。
 
-{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}
+{{NextMenu("Learn_web_development/Getting_started/Environment_setup/Browsing_the_web", "Learn_web_development/Getting_started/Environment_setup")}}
diff --git a/files/zh-tw/learn_web_development/getting_started/web_standards/how_the_web_works/index.md b/files/zh-tw/learn_web_development/getting_started/web_standards/how_the_web_works/index.md
index 33a958dca3e69c..b2483d8f34dcfb 100644
--- a/files/zh-tw/learn_web_development/getting_started/web_standards/how_the_web_works/index.md
+++ b/files/zh-tw/learn_web_development/getting_started/web_standards/how_the_web_works/index.md
@@ -61,7 +61,7 @@ _〈網路如何運作〉將簡單介紹_，當你透過電腦或手機瀏覽器
 
 ## 參見
 
-- [How the Internet works](/zh-TW/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work)
+- [How the Internet works](/zh-TW/docs/Learn_web_development/Howto/Web_mechanics/How_does_the_Internet_work)
 - [HTTP — an Application-Level Protocol](https://dev.opera.com/articles/http-basic-introduction/)
 - [HTTP: Let's GET It On!](https://dev.opera.com/articles/http-lets-get-it-on/)
 - [HTTP: Response Codes](https://dev.opera.com/articles/http-response-codes/)
diff --git a/files/zh-tw/learn_web_development/getting_started/your_first_website/adding_interactivity/index.md b/files/zh-tw/learn_web_development/getting_started/your_first_website/adding_interactivity/index.md
index a6191973c8e45a..f72aae83b3d066 100644
--- a/files/zh-tw/learn_web_development/getting_started/your_first_website/adding_interactivity/index.md
+++ b/files/zh-tw/learn_web_development/getting_started/your_first_website/adding_interactivity/index.md
@@ -4,7 +4,7 @@ slug: Learn_web_development/Getting_started/Your_first_website/Adding_interactiv
 original_slug: Learn/Getting_started_with_the_web/JavaScript_basics
 ---
 
-{{LearnSidebar}}{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}
+{{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Getting_started/Your_first_website/Styling_the_content", "Learn_web_development/Getting_started/Your_first_website/Publishing_your_website", "Learn_web_development/Getting_started/Your_first_website")}}
 
 JavaScript 是一個可以幫你在網站裡加入互動功能的程式語言（舉例來說，一個遊戲可能會在按鈕按下或資料被輸入表單內時回應、動態更改樣式、以及展示動畫等）。這篇文章會幫助你踏上學習這個令人興奮的語言的旅程，並展示她可以實現的所有可能。
 
@@ -63,7 +63,7 @@ JavaScript 本身非常的簡潔，卻也充滿彈性，開發者們已經以 Ja
 接著我們來解釋一下 JavaScript 基本特性，以讓你更加地了解她是如何運作的。更好的事情是，這些特性基本上也存在於所有程式語言中。所以如果你可以充分理解這些基礎知識，你就可以撰寫程式來創造無限可能！
 
 > [!WARNING]
-> 在這篇文章中，請你試著將範例程式碼輸入到 JavaScript 主控台中，並觀察發生了什麼事。如果你想要了解更多 JavaScript 主控台的細節，請參閱 [Discover browser developer tools](/zh-TW/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools)。
+> 在這篇文章中，請你試著將範例程式碼輸入到 JavaScript 主控台中，並觀察發生了什麼事。如果你想要了解更多 JavaScript 主控台的細節，請參閱 [Discover browser developer tools](/zh-TW/docs/Learn_web_development/Howto/Tools_and_setup/What_are_browser_developer_tools)。
 
 ### 變數（Variables）
 
@@ -467,11 +467,11 @@ function setUserName() {
 
 在此，我們只稍稍體驗了 JavaScript 的一些皮毛。如果你非常享受這段學習的過程，並想要繼續深究，請你繼續瀏覽我們製作的 [JavaScript 指南](/zh-TW/docs/Web/JavaScript/Guide)。
 
-## See also
+## 參見
 
 - [JavaScript — Dynamic client-side scripting](/zh-TW/docs/Learn_web_development/Core/Scripting)
   - : Our JavaScript learning topic — dive into JavaScript in much more detail.
 - [Learn JavaScript](https://learnjavascript.online/)
   - : An excellent resource for aspiring web developers — Learn JavaScript in an interactive environment, with short lessons and interactive tests, guided by automated assessment. The first 40 lessons are free, and the complete course is available for a small one-time payment.
 
-{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}
+{{PreviousMenuNext("Learn_web_development/Getting_started/Your_first_website/Styling_the_content", "Learn_web_development/Getting_started/Your_first_website/Publishing_your_website", "Learn_web_development/Getting_started/Your_first_website")}}
diff --git a/files/zh-tw/learn_web_development/getting_started/your_first_website/creating_the_content/index.md b/files/zh-tw/learn_web_development/getting_started/your_first_website/creating_the_content/index.md
index ed81d3ef43c622..7f088c767b3f54 100644
--- a/files/zh-tw/learn_web_development/getting_started/your_first_website/creating_the_content/index.md
+++ b/files/zh-tw/learn_web_development/getting_started/your_first_website/creating_the_content/index.md
@@ -4,7 +4,7 @@ slug: Learn_web_development/Getting_started/Your_first_website/Creating_the_cont
 original_slug: Learn/Getting_started_with_the_web/HTML_basics
 ---
 
-{{LearnSidebar}}{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}
+{{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like", "Learn_web_development/Getting_started/Your_first_website/Styling_the_content", "Learn_web_development/Getting_started/Your_first_website")}}
 
 HTML（**H**ypertext **M**arkup **L**anguage），中文全名為「超文字標記語言」，是一種用來組織架構並呈現網頁內容的標記語言。網頁內容的組成，可能包含了段落、清單、圖片或表格...等。透過這篇文章，希望能幫助大家對 HTML 及其功能有基本的認識。
 
@@ -223,4 +223,4 @@ My cat is very grumpy
 
 這篇文章觸及的是非常基本的 HTML 介紹，若你有興趣想進一步了解，歡迎參考 [HTML Learning page](/zh-TW/docs/Learn_web_development/Core/Structuring_content)。
 
-{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}
+{{PreviousMenuNext("Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like", "Learn_web_development/Getting_started/Your_first_website/Styling_the_content", "Learn_web_development/Getting_started/Your_first_website")}}
diff --git a/files/zh-tw/learn_web_development/getting_started/your_first_website/publishing_your_website/index.md b/files/zh-tw/learn_web_development/getting_started/your_first_website/publishing_your_website/index.md
index ba436eb39f2379..43e9a9972e0dd4 100644
--- a/files/zh-tw/learn_web_development/getting_started/your_first_website/publishing_your_website/index.md
+++ b/files/zh-tw/learn_web_development/getting_started/your_first_website/publishing_your_website/index.md
@@ -4,7 +4,7 @@ slug: Learn_web_development/Getting_started/Your_first_website/Publishing_your_w
 original_slug: Learn/Getting_started_with_the_web/Publishing_your_website
 ---
 
-{{LearnSidebar}}{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}
+{{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Getting_started/Your_first_website/Adding_interactivity", "Learn_web_development/Getting_started/Web_standards", "Learn_web_development/Getting_started/Your_first_website")}}
 
 當你完成你的網頁程式碼後，你需要把它放到網路上，這樣人們才可以搜尋得到。這個章節將介紹如何快速的把你的程式碼放到網路上。
 
@@ -17,11 +17,11 @@ original_slug: Learn/Getting_started_with_the_web/Publishing_your_website
 如果想要完全掌控你發佈的網站，那你可能需要花錢買：
 
 - 主機：跟主機租借商（hosting company）的[網路伺服器](/zh-TW/docs/Learn_web_development/Howto/Web_mechanics/What_is_a_web_server)（web server）租一個放置檔案的空間。你把你建置的網頁檔案放到這個空間中，然後想要連結到網頁的人就能透過網頁伺服器連結到你的網站。
-- [網域名稱](/zh-TW/docs/Learn/Common_questions/Web_mechanics/What_is_a_domain_name)(domain name)：人們可以透過這個獨特的網址來尋找你的網站，像是 `http://www.mozilla.org` 或 `http://www.bbc.co.uk`。你需要向**網域名稱註冊商**（domain registrar）租借網域名稱。
+- [網域名稱](/zh-TW/docs/Learn_web_development/Howto/Web_mechanics/What_is_a_domain_name)(domain name)：人們可以透過這個獨特的網址來尋找你的網站，像是 `http://www.mozilla.org` 或 `http://www.bbc.co.uk`。你需要向**網域名稱註冊商**（domain registrar）租借網域名稱。
 
 許多專業的網站是用這個方法發佈的。
 
-除此之外，你還會需要一個 {{Glossary("FTP", "File Transfer Protocol (FTP)")}} 程式（點選 [How much does it cost: software](/zh-TW/docs/Learn/Common_questions/Tools_and_setup/How_much_does_it_cost#software) 來取得更多資訊），這樣才能真正的把你建置的網頁檔案傳達給伺服器。FTP 程式很廣泛，但一般來說，你可以用你公司提供的資訊，像是使用者名稱、密碼以及 host name 來登入你的網頁伺服器，它就會以兩個視窗的形式分別顯示你電腦裡的檔案和你網頁伺服器上的檔案，然後你就可以移動你的檔案。
+除此之外，你還會需要一個 {{Glossary("FTP", "File Transfer Protocol (FTP)")}} 程式（點選 [How much does it cost: software](/zh-TW/docs/Learn_web_development/Howto/Tools_and_setup/How_much_does_it_cost#software) 來取得更多資訊），這樣才能真正的把你建置的網頁檔案傳達給伺服器。FTP 程式很廣泛，但一般來說，你可以用你公司提供的資訊，像是使用者名稱、密碼以及 host name 來登入你的網頁伺服器，它就會以兩個視窗的形式分別顯示你電腦裡的檔案和你網頁伺服器上的檔案，然後你就可以移動你的檔案。
 
 ![](ftp.jpg)
 
@@ -37,7 +37,7 @@ original_slug: Learn/Getting_started_with_the_web/Publishing_your_website
 使用工具來發佈網站：
 
 - [GitHub](https://github.com/) 可以交流程式的平台，它提供你一個空間來存放程式碼，這個空間是基於 [Git](http://git-scm.com/) 的**版本控制系統，**你能夠透過系統共同編輯平台上的程式專案，而這個系統是開放資源，也就是說全世界的人都可以找到你的 GitHub code，包括使用它、從中學習並將它改得更好。GitHub 提供一個非常實用的工具— [GitHub Pages](https://pages.github.com/)，它能讓你發佈網站。
-- [Google App Engine](https://cloud.google.com/appengine/) 是一個強大的平台，不管是要從頭建置 multi-tiered web 程式還是託管靜態網站，它都能讓你在 Google 的基礎下建置和運行應用程式。點選 [How do you host your website on Google App Engine?](/zh-TW/docs/Learn/Common_questions/Tools_and_setup/How_do_you_host_your_website_on_Google_App_Engine) 以獲得更多資訊。
+- [Google App Engine](https://cloud.google.com/appengine/) 是一個強大的平台，不管是要從頭建置 multi-tiered web 程式還是託管靜態網站，它都能讓你在 Google 的基礎下建置和運行應用程式。點選 [How do you host your website on Google App Engine?](/zh-TW/docs/Learn_web_development/Howto/Tools_and_setup/How_do_you_host_your_website_on_Google_App_Engine) 以獲得更多資訊。
 
 這類工具和託管不同，通常他們都是免費的，不過功能當然也會受限。
 
@@ -77,9 +77,9 @@ original_slug: Learn/Getting_started_with_the_web/Publishing_your_website
 ## 參閱
 
 - [何謂網路伺服器](/zh-TW/docs/Learn_web_development/Howto/Web_mechanics/What_is_a_web_server)
-- [Understanding domain names](/zh-TW/docs/Learn/Common_questions/Web_mechanics/What_is_a_domain_name)
-- [How much does it cost to do something on the web?](/zh-TW/docs/Learn/Common_questions/Tools_and_setup/How_much_does_it_cost)
+- [Understanding domain names](/zh-TW/docs/Learn_web_development/Howto/Web_mechanics/What_is_a_domain_name)
+- [How much does it cost to do something on the web?](/zh-TW/docs/Learn_web_development/Howto/Tools_and_setup/How_much_does_it_cost)
 - [Deploy a Website](https://www.codecademy.com/learn/deploy-a-website): A nice tutorial from Codecademy that goes a bit further and shows some additional techniques.
 - [Cheap or Free Static Website Hosting](http://alignedleft.com/resources/cheap-web-hosting) by Scott Murray has some useful ideas on available services.
 
-{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}
+{{PreviousMenuNext("Learn_web_development/Getting_started/Your_first_website/Adding_interactivity", "Learn_web_development/Getting_started/Web_standards", "Learn_web_development/Getting_started/Your_first_website")}}
diff --git a/files/zh-tw/learn_web_development/getting_started/your_first_website/styling_the_content/index.md b/files/zh-tw/learn_web_development/getting_started/your_first_website/styling_the_content/index.md
index b0d603a1c57241..889e0d9a8ccb5d 100644
--- a/files/zh-tw/learn_web_development/getting_started/your_first_website/styling_the_content/index.md
+++ b/files/zh-tw/learn_web_development/getting_started/your_first_website/styling_the_content/index.md
@@ -4,7 +4,7 @@ slug: Learn_web_development/Getting_started/Your_first_website/Styling_the_conte
 original_slug: Learn/Getting_started_with_the_web/CSS_basics
 ---
 
-{{LearnSidebar}}{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}
+{{LearnSidebar}}{{PreviousMenuNext("Learn_web_development/Getting_started/Your_first_website/Creating_the_content", "Learn_web_development/Getting_started/Your_first_website/Adding_interactivity", "Learn_web_development/Getting_started/Your_first_website")}}
 
 **階層樣式表** (Cascading Stylesheets；CSS) 可用以塑造網站的特殊風格。例如這段文字要用一般的黑色，或是改用紅色標明重點？某段重要內容應該置於畫面的何處？想用什麼背景圖片及顏色裝飾你的網站？〈[CSS 基本概念](/zh-TW/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content)〉帶你入門。
 
@@ -142,7 +142,7 @@ h1 {
   </tbody>
 </table>
 
-還有很多值得探索的選擇器，你可以在我們的選擇器導引章節 [Selectors guide](/zh-TW/docs/Learn/CSS/Building_blocks/Selectors) 看到更多介紹。
+還有很多值得探索的選擇器，你可以在我們的[選擇器導引](/zh-TW/docs/Learn_web_development/Core/Styling_basics/Basic_selectors)章節看到更多介紹。
 
 ## 文字與字體
 
@@ -295,4 +295,4 @@ Finally, we'll center the image to make it look better. We could use the `margin
 
 這篇文章觸及的是非常基本的 CSS 介紹，若你有興趣想進一步了解，歡迎參考 [CSS Learning topic](/zh-TW/docs/Learn_web_development/Core/Styling_basics)。
 
-{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}
+{{PreviousMenuNext("Learn_web_development/Getting_started/Your_first_website/Creating_the_content", "Learn_web_development/Getting_started/Your_first_website/Adding_interactivity", "Learn_web_development/Getting_started/Your_first_website")}}
diff --git a/files/zh-tw/learn_web_development/getting_started/your_first_website/what_will_your_website_look_like/index.md b/files/zh-tw/learn_web_development/getting_started/your_first_website/what_will_your_website_look_like/index.md
index efa5efb8e7188c..068366dcae3738 100644
--- a/files/zh-tw/learn_web_development/getting_started/your_first_website/what_will_your_website_look_like/index.md
+++ b/files/zh-tw/learn_web_development/getting_started/your_first_website/what_will_your_website_look_like/index.md
@@ -4,7 +4,7 @@ slug: Learn_web_development/Getting_started/Your_first_website/What_will_your_we
 original_slug: Learn/Getting_started_with_the_web/What_will_your_website_look_like
 ---
 
-{{LearnSidebar}}{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}
+{{LearnSidebar}}{{NextMenu("Learn_web_development/Getting_started/Your_first_website/Creating_the_content", "Learn_web_development/Getting_started/Your_first_website")}}
 
 *你的網站看起來會是什麼樣子？*會說明你該為網站做的規劃與設計，決定自己的「網站該提供哪些資訊？」、「該使用哪些字型與色彩？」，以及「網站又該達到哪些目的？」
 
@@ -70,4 +70,4 @@ original_slug: Learn/Getting_started_with_the_web/What_will_your_website_look_li
 3. 點擊頁面底端的「使用 (Use)」按鈕。
 4. 進入下一頁，捲動到區塊 3 與區塊 4，將 Google 顯示的程式碼複製到你的文字編輯器中，儲存以待稍後利用。
 
-{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}
+{{NextMenu("Learn_web_development/Getting_started/Your_first_website/Creating_the_content", "Learn_web_development/Getting_started/Your_first_website")}}
diff --git a/files/zh-tw/learn_web_development/howto/index.md b/files/zh-tw/learn_web_development/howto/index.md
index 5c3c88faef98b3..d652dac4a1bfca 100644
--- a/files/zh-tw/learn_web_development/howto/index.md
+++ b/files/zh-tw/learn_web_development/howto/index.md
@@ -12,40 +12,40 @@ original_slug: Learn/Common_questions
 
 這個區塊包含網路運作機制——有關網路環境及其如何運作的一般知識。
 
-- [網際網路如何運作？](/zh-TW/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work)
+- [網際網路如何運作？](/zh-TW/docs/Learn_web_development/Howto/Web_mechanics/How_does_the_Internet_work)
   - : **網際網路**是網路的骨幹，讓網路成為現實的技術基礎架構。簡單來說，網際網路是讓所有電腦互相溝通的超大型網絡。這篇文章用最淺顯的文字探討它是如何運作的。
-- [網頁、網站、網路伺服器及搜尋引擎有什麼區別？](/zh-TW/docs/Learn/Common_questions/Web_mechanics/Pages_sites_servers_and_search_engines)
+- [網頁、網站、網路伺服器及搜尋引擎有什麼區別？](/zh-TW/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web)
   - : 這篇文章講述網路相關的各種概念：網頁、網站、網路伺服器及搜尋引擎。這些術語常常被新手混淆或誤用。讓我們來認識它們各自的意思吧！
-- [URL 是什麼？](/zh-TW/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL)
+- [URL 是什麼？](/zh-TW/docs/Learn_web_development/Howto/Web_mechanics/What_is_a_URL)
   - : 結合 {{Glossary("Hypertext")}} 與 {{Glossary("HTTP")}}，URL 是最重要的網路概念之一。它是被 {{Glossary("Browser","browsers")}} 用來獲取發佈到網路的任何資源的機制。
-- [網域名稱是什麼？](/zh-TW/docs/Learn/Common_questions/Web_mechanics/What_is_a_domain_name)
+- [網域名稱是什麼？](/zh-TW/docs/Learn_web_development/Howto/Web_mechanics/What_is_a_domain_name)
   - : 網域名稱是網際網路基礎架構中關鍵的一部份，它提供指向網際網路上可被找到的網路伺服器一個可被人讀懂的地址。
 - [網路伺服器是什麼？](/zh-TW/docs/Learn_web_development/Howto/Web_mechanics/What_is_a_web_server)
   - : 「網路伺服器」指能橫跨網路將網站提供給用戶端的硬體或軟體——或是軟硬體結合。這篇文章探討網路伺服器怎麼運作，以及為何它很重要。
-- [超連結是什麼？](/zh-TW/docs/Learn/Common_questions/Web_mechanics/What_are_hyperlinks)
+- [超連結是什麼？](/zh-TW/docs/Learn_web_development/Howto/Web_mechanics/What_are_hyperlinks)
   - : 這篇文章中，我們會學到超連結是什麼，以及為何它很重要。
 
 ## 工具與設定
 
 有關能用來建立網站的工具/軟體的問題。
 
-- [在網路上做事要花多少錢？](/zh-TW/docs/Learn/Common_questions/Tools_and_setup/How_much_does_it_cost)
+- [在網路上做事要花多少錢？](/zh-TW/docs/Learn_web_development/Howto/Tools_and_setup/How_much_does_it_cost)
   - : 當你啟動一個網站時，可能不用花錢，可能成本高得嚇人。這篇文章中我們會探討每個細節的成本，以及你花一筆錢（或者不花錢）能獲得什麼。
-- [架一個網站需要什麼軟體？](/zh-TW/docs/Learn/Common_questions/Tools_and_setup/What_software_do_I_need)
+- [架一個網站需要什麼軟體？](/zh-TW/docs/Learn_web_development/Howto/Tools_and_setup/What_software_do_I_need)
   - : 這篇文章解釋當你編輯、上傳或檢視網站時需要用到的軟體。
-- [哪個文字編輯器比較適合？](/zh-TW/docs/Learn/Common_questions/Tools_and_setup/Available_text_editors)
+- [哪個文字編輯器比較適合？](/zh-TW/docs/Learn_web_development/Howto/Tools_and_setup/Available_text_editors)
   - : 這篇文章中，我們列出為網路開發選擇與安裝文字編輯器時一些值得思考的重點。
-- [瀏覽器開發者工具是什麼？](/zh-TW/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools)
+- [瀏覽器開發者工具是什麼？](/zh-TW/docs/Learn_web_development/Howto/Tools_and_setup/What_are_browser_developer_tools)
   - : 每個瀏覽器皆有一系列對 HTML、CSS 及其它網路程式碼除錯的開發工具。這篇文章將解釋如何使用你的瀏覽器開發工具的基本功能。
-- [如何確保我的網站會正常運作？](/zh-TW/docs/Learn/Common_questions/Tools_and_setup/Checking_that_your_web_site_is_working_properly)
+- [如何確保我的網站會正常運作？](/zh-TW/docs/Learn_web_development/Howto/Tools_and_setup/Checking_that_your_web_site_is_working_properly)
   - : 你將你的網站發佈到網路上了——非常好！但是你確定它能正確運行嗎？這篇文章提供一些基本的問題解決步驟。
-- [如何架設本地端測試伺服器](/zh-TW/docs/Learn/Common_questions/Tools_and_setup/set_up_a_local_testing_server)
+- [如何架設本地端測試伺服器](/zh-TW/docs/Learn_web_development/Howto/Tools_and_setup/set_up_a_local_testing_server)
   - : 這篇文章將解釋如何在你的電腦上設置一個簡單的本地端測試伺服器，以及基本使用方式。
-- [如何上傳檔案到網路伺服器？](/zh-TW/docs/Learn/Common_questions/Tools_and_setup/Upload_files_to_a_web_server)
+- [如何上傳檔案到網路伺服器？](/zh-TW/docs/Learn_web_development/Howto/Tools_and_setup/Upload_files_to_a_web_server)
   - : 這篇文章示範如何透過 [FTP](/zh-TW/docs/Glossary/FTP) 工具將你的網站發佈到網路上——這是將網站放到線上，讓別人可從他們的電腦存取的常見方式之一。
-- [如何使用 GitHub 頁面？](/zh-TW/docs/Learn/Common_questions/Tools_and_setup/Using_GitHub_pages)
+- [如何使用 GitHub 頁面？](/zh-TW/docs/Learn_web_development/Howto/Tools_and_setup/Using_GitHub_pages)
   - : 這篇文章提供如何透過 Github 頁面發佈內容的基礎指南。
-- [如何在 Google App Engine 上架設網站？](/zh-TW/docs/Learn/Common_questions/Tools_and_setup/How_do_you_host_your_website_on_Google_App_Engine)
+- [如何在 Google App Engine 上架設網站？](/zh-TW/docs/Learn_web_development/Howto/Tools_and_setup/How_do_you_host_your_website_on_Google_App_Engine)
   - : 想找個地方架設你的網站嗎？這是一篇手把手教你在 Google App Engine 上架設網站的指南。
 - [為網站除錯及改良效能需要什麼工具？](https://firefox-source-docs.mozilla.org/devtools-user/performance/index.html)
   - : 本系列文章教你如何用 Firefox 開發者工具來除錯與改良網站效能，將會運用工具來檢視記憶體使用量、JavaScript Call Tree、被渲染的 DOM 節點數及其它東西。
@@ -54,15 +54,15 @@ original_slug: Learn/Common_questions
 
 這個區塊列舉有關美感、網頁架構、網頁親和力技巧等等的問題。
 
-- [如何開始設計我的網站？](/zh-TW/docs/Learn/Common_questions/Design_and_accessibility/Thinking_before_coding)
+- [如何開始設計我的網站？](/zh-TW/docs/Learn_web_development/Howto/Design_and_accessibility/Thinking_before_coding)
   - : 這篇文章會探討每個專案最重要的第一步：定義你想透過這個網站達成什麼目標？
-- [常見網頁布局包含什麼？](/zh-TW/docs/Learn/Common_questions/Design_and_accessibility/Common_web_layouts)
+- [常見網頁布局包含什麼？](/zh-TW/docs/Learn_web_development/Howto/Design_and_accessibility/Common_web_layouts)
   - : 當你為你的網站設計網頁時，最好對一些常見的布局有所了解。這篇文章帶你遍覽幾個典型的網頁布局，仔細檢視組成它的每個部份。
-- [網頁親和力是什麼？](/zh-TW/docs/Learn/Common_questions/Design_and_accessibility/What_is_accessibility)
+- [網頁親和力是什麼？](/zh-TW/docs/Learn_web_development/Howto/Design_and_accessibility/What_is_accessibility)
   - : 這篇文章將介紹網頁親和力背後的基本概念。
-- [如何設計能兼容所有使用者的網站？](/zh-TW/docs/Learn/Common_questions/Design_and_accessibility/Design_for_all_types_of_users)
+- [如何設計能兼容所有使用者的網站？](/zh-TW/docs/Learn_web_development/Howto/Design_and_accessibility/Design_for_all_types_of_users)
   - : 這篇文章提供幫助你設計能兼容所有使用者的網站的基本技巧。
-- [哪些 HTML 功能可以增進網頁親和力？](/zh-TW/docs/Learn/Common_questions/Design_and_accessibility/HTML_features_for_accessibility)
+- [哪些 HTML 功能可以增進網頁親和力？](/zh-TW/docs/Learn_web_development/Howto/Design_and_accessibility/HTML_features_for_accessibility)
   - : 這篇文章講述讓網頁對不同的身心障礙更顯親和的特定 HTML 功能。
 
 ## HTML、CSS 與 JavaScript 問題
diff --git a/files/zh-tw/learn_web_development/howto/solve_css_problems/index.md b/files/zh-tw/learn_web_development/howto/solve_css_problems/index.md
index fc8fe847143c33..b4d87b901dc956 100644
--- a/files/zh-tw/learn_web_development/howto/solve_css_problems/index.md
+++ b/files/zh-tw/learn_web_development/howto/solve_css_problems/index.md
@@ -10,41 +10,41 @@ original_slug: Learn/CSS/Howto
 
 ## 修飾盒子
 
-- [如何為元素新增 Drop-Shadow？](/zh-TW/docs/Learn/CSS/Howto/Add_a_shadow)
+- [如何為元素新增 Drop-Shadow？](/zh-TW/docs/Learn_web_development/Howto/Solve_CSS_problems/Add_a_shadow)
   - : 陰影可以透過 {{cssxref("box-shadow")}} 屬性添加給盒子。這個教學解釋它如何運作並提供範例。
-- [如何用圖片填滿盒子同時不讓該圖片變形？](/zh-TW/docs/Learn/CSS/Howto/Fill_a_box_with_an_image)
+- [如何用圖片填滿盒子同時不讓該圖片變形？](/zh-TW/docs/Learn_web_development/Howto/Solve_CSS_problems/Fill_a_box_with_an_image)
   - : {{cssxref("object-fit")}} 屬性提供將圖片置入長寬比不同的盒子中的各種方式。你能在這個教學中了解如何利用它們。
 - [什麼方法可以用來修飾盒子？](/zh-TW/docs/Learn/CSS/Howto/create_fancy_boxes)
   - : 展示一系列用 CSS 修飾盒子時能派上用場的屬性。
-- [如何把元素設為半透明？](/zh-TW/docs/Learn/CSS/Howto/Make_box_transparent)
+- [如何把元素設為半透明？](/zh-TW/docs/Learn_web_development/Howto/Solve_CSS_problems/Make_box_transparent)
   - : {{cssxref("opacity")}} 屬性及擁有 alpha 通道的顏色數值可以解決這個問題。
 
 ### 盒子修飾教學與指南
 
-- [盒子模型](/zh-TW/docs/Learn/CSS/Building_blocks/The_box_model)
-- [修飾背景與邊界](/zh-TW/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders)
+- [盒子模型](/zh-TW/docs/Learn_web_development/Core/Styling_basics/Box_model)
+- [修飾背景與邊界](/zh-TW/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders)
 
 ## CSS 與文字
 
-- [如何為文字新增 Drop-Shadow？](/zh-TW/docs/Learn/CSS/Howto/Add_a_text_shadow)
+- [如何為文字新增 Drop-Shadow？](/zh-TW/docs/Learn_web_development/Howto/Solve_CSS_problems/Add_a_text_shadow)
   - : 陰影可以透過 {{cssxref("text-shadow")}} 屬性添加給文字。這個教學解釋它如何運作並提供範例。
-- [如何強調段落第一行？](/zh-TW/docs/Learn/CSS/Howto/Highlight_first_line)
+- [如何強調段落第一行？](/zh-TW/docs/Learn_web_development/Howto/Solve_CSS_problems/Highlight_first_line)
   - : 了解如何透過偽元素 {{cssxref("::first-line")}} 抓到段落第一行。
-- [如何強調文章第一段？](/zh-TW/docs/Learn/CSS/Howto/Highlight_first_para)
+- [如何強調文章第一段？](/zh-TW/docs/Learn_web_development/Howto/Solve_CSS_problems/Highlight_first_para)
   - : 了解如何透過偽類別 {{cssxref("::first-child")}} 抓到第一個段落。
-- [如何僅強調出現在標題之後的第一段？](/zh-TW/docs/Learn/CSS/Howto/Highlight_para_after_h1)
+- [如何僅強調出現在標題之後的第一段？](/zh-TW/docs/Learn_web_development/Howto/Solve_CSS_problems/Highlight_para_after_h1)
   - : 組合器能幫助你基於文件裡的位置精準抓取元素；這個教學解釋如何使用讓 CSS 僅套用於出現在標題之後的第一段。
 
 ### 文字修飾教學與指南
 
-- [如何修飾文字？](/zh-TW/docs/Learn/CSS/Styling_text/Fundamentals)
-- [如何修飾列表元素？](/zh-TW/docs/Learn/CSS/Styling_text/Styling_lists)
-- [如何修飾超連結？](/zh-TW/docs/Learn/CSS/Styling_text/Styling_links)
-- [CSS 選擇器](/zh-TW/docs/Learn/CSS/Building_blocks/Selectors)
+- [如何修飾文字？](/zh-TW/docs/Learn_web_development/Core/Text_styling/Fundamentals)
+- [如何修飾列表元素？](/zh-TW/docs/Learn_web_development/Core/Text_styling/Styling_lists)
+- [如何修飾超連結？](/zh-TW/docs/Learn_web_development/Core/Text_styling/Styling_links)
+- [CSS 選擇器](/zh-TW/docs/Learn_web_development/Core/Styling_basics/Basic_selectors)
 
 ## CSS 布局
 
-- [如何置中項目？](/zh-TW/docs/Learn/CSS/Howto/Center_an_item)
+- [如何置中項目？](/zh-TW/docs/Learn_web_development/Howto/Solve_CSS_problems/Center_an_item)
   - : 在盒子裡將項目水平或垂直置中以前很麻煩，但現在彈性盒子讓它變得很簡單。
 
 ### 布局指南
@@ -52,7 +52,7 @@ original_slug: Learn/CSS/Howto
 - [使用 CSS 彈性盒子](/zh-TW/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)
 - [使用 CSS 多行布局](/zh-TW/docs/Web/CSS/CSS_multicol_layout/Using_multicol_layouts)
 - [使用 CSS 格線布局](/zh-TW/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout)
-- [使用 CSS 生成內容](/zh-TW/docs/Learn/CSS/Howto/Generated_content)
+- [使用 CSS 生成內容](/zh-TW/docs/Learn_web_development/Howto/Solve_CSS_problems/Generated_content)
 
 > [!NOTE]
 > 我們有一本針對 [CSS 布局解法](/zh-TW/docs/Web/CSS/Layout_cookbook)的食譜，內有可正常執行的範例與常見布局任務說明。
diff --git a/files/zh-tw/learn_web_development/howto/solve_html_problems/index.md b/files/zh-tw/learn_web_development/howto/solve_html_problems/index.md
index a9dfea08b18d36..c9a2fa211af08e 100644
--- a/files/zh-tw/learn_web_development/howto/solve_html_problems/index.md
+++ b/files/zh-tw/learn_web_development/howto/solve_html_problems/index.md
@@ -23,11 +23,11 @@ HTML 專攻於為文件提供語義資訊，因此 HTML 可以提供使用者更
 - [如何建立清單](/zh-TW/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs#lists)
 - [如何強調文件的內容](/zh-TW/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs#emphasis_and_importance)
 - [如何表示出一段文字的重要性](/zh-TW/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs#emphasis_and_importance)
-- [如何顯示程式碼](/zh-TW/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#representing_computer_code)
+- [如何顯示程式碼](/zh-TW/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features#representing_computer_code)
 - [如何為圖片加入註記](/zh-TW/docs/Learn_web_development/Core/Structuring_content/HTML_images#annotating_images_with_figures_and_figure_captions)
-- [如何標示並註記縮寫](/zh-TW/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#abbreviations)
-- [如何在網頁中加入引用](/zh-TW/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#quotations)
-- [如何加入詞語的定義](/zh-TW/docs/Learn/HTML/Howto/Define_terms_with_HTML)
+- [如何標示並註記縮寫](/zh-TW/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features#abbreviations)
+- [如何在網頁中加入引用](/zh-TW/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features#quotations)
+- [如何加入詞語的定義](/zh-TW/docs/Learn_web_development/Howto/Solve_HTML_problems/Define_terms_with_HTML)
 
 ### 超連結
 
@@ -39,20 +39,20 @@ HTML 專攻於為文件提供語義資訊，因此 HTML 可以提供使用者更
 ### 圖片與多媒體
 
 - [如何把圖片加進網頁](/zh-TW/docs/Learn_web_development/Core/Structuring_content/HTML_images#how_do_we_put_an_image_on_a_webpage)
-- [如何把視訊內容加進網頁](/zh-TW/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content)
-- [如何把音訊內容加進網頁](/zh-TW/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content)
+- [如何把視訊內容加進網頁](/zh-TW/docs/Learn_web_development/Core/Structuring_content/HTML_video_and_audio)
+- [如何把音訊內容加進網頁](/zh-TW/docs/Learn_web_development/Core/Structuring_content/HTML_video_and_audio)
 
 ### 腳本與樣式
 
 HTML 只建立文件的基礎架構，可以透過 {{glossary("CSS")}} 或腳本使內容呈現更具互動性。
 
 - [如何在網頁中使用 CSS](/zh-TW/docs/Learn_web_development/Core/Styling_basics/What_is_CSS#將_css_套用至_dom)
-- [如何在網頁中使用 JavaScript](/zh-TW/docs/Learn/HTML/Howto/Use_JavaScript_within_a_webpage)
+- [如何在網頁中使用 JavaScript](/zh-TW/docs/Learn_web_development/Howto/Solve_HTML_problems/Use_JavaScript_within_a_webpage)
 
 ### 嵌入內容
 
-- [如何在網頁中嵌入另一個網頁](/zh-TW/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies)
-- [如何在網頁中加入 FLASH 內容](/zh-TW/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies#The_%3Cembed%3E_and_%3Cobject%3E_elements)
+- [如何在網頁中嵌入另一個網頁](/zh-TW/docs/Learn_web_development/Core/Structuring_content/General_embedding_technologies)
+- [如何在網頁中加入 FLASH 內容](/zh-TW/docs/Learn_web_development/Core/Structuring_content/General_embedding_technologies#The_%3Cembed%3E_and_%3Cobject%3E_elements)
 
 ## 不常見或進階的問題
 
@@ -62,7 +62,7 @@ HTML 只建立文件的基礎架構，可以透過 {{glossary("CSS")}} 或腳本
 
 表單是一種用來把網頁資料傳送到網路伺服器的複雜 HTML 結構。我們鼓勵你讀一遍我們對此的[完整指南](/zh-TW/docs/Learn_web_development/Extensions/Forms)。你可以從以下文章開始：
 
-- [如何建立簡單的表單](/zh-TW/docs/Learn/Forms/Your_first_form)
+- [如何建立簡單的表單](/zh-TW/docs/Learn_web_development/Extensions/Forms/Your_first_form)
 - [如何組織表單的架構](/zh-TW/docs/Learn_web_development/Extensions/Forms/How_to_structure_a_web_form)
 
 ### 表格訊息
@@ -74,8 +74,8 @@ HTML 只建立文件的基礎架構，可以透過 {{glossary("CSS")}} 或腳本
 
 ### 資料表示方式
 
-- 如何用 HTML 表示數值——參見[上標與下標](/zh-TW/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#superscript_and_subscript)及[顯示電腦程式碼](/zh-TW/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#representing_computer_code)
-- [如何使用資料屬性](/zh-TW/docs/Learn/HTML/Howto/Use_data_attributes)
+- 如何用 HTML 表示數值——參見[上標與下標](/zh-TW/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features#superscript_and_subscript)及[顯示電腦程式碼](/zh-TW/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features#representing_computer_code)
+- [如何使用資料屬性](/zh-TW/docs/Learn_web_development/Howto/Solve_HTML_problems/Use_data_attributes)
 
 ### 進階文字語法
 
@@ -84,17 +84,17 @@ HTML 只建立文件的基礎架構，可以透過 {{glossary("CSS")}} 或腳本
 
 ### 進階圖片 & 多媒體
 
-- [如何在網頁中加入響應式圖片](/zh-TW/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)
-- [如何在網頁中加入向量圖片](/zh-TW/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web)
-- [如何在圖片上加入圖像映射](/zh-TW/docs/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image)
+- [如何在網頁中加入響應式圖片](/zh-TW/docs/Web/HTML/Responsive_images)
+- [如何在網頁中加入向量圖片](/zh-TW/docs/Learn_web_development/Core/Structuring_content/Including_vector_graphics_in_HTML)
+- [如何在圖片上加入圖像映射](/zh-TW/docs/Learn_web_development/Howto/Solve_HTML_problems/Add_a_hit_map_on_top_of_an_image)
 
 ### 國際化
 
 HTML 不只支援單一語言，它還有提供工具來處理常見的國際化問題。
 
 - [如何在單一網頁中加入多國語言](/zh-TW/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata#setting_the_primary_language_of_the_document)
-- [如何用 HTML 表示時間與日期](/zh-TW/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#marking_up_times_and_dates)
+- [如何用 HTML 表示時間與日期](/zh-TW/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features#marking_up_times_and_dates)
 
 ### 效能
 
-- [如何創建快速載入 HTML 網頁](/zh-TW/docs/Learn/HTML/Howto/Author_fast-loading_HTML_pages)
+- [如何創建快速載入 HTML 網頁](/zh-TW/docs/Learn_web_development/Howto/Solve_HTML_problems/Author_fast-loading_HTML_pages)
diff --git a/files/zh-tw/learn_web_development/howto/solve_javascript_problems/index.md b/files/zh-tw/learn_web_development/howto/solve_javascript_problems/index.md
index 03755989b92386..21e9aa44c35547 100644
--- a/files/zh-tw/learn_web_development/howto/solve_javascript_problems/index.md
+++ b/files/zh-tw/learn_web_development/howto/solve_javascript_problems/index.md
@@ -48,7 +48,7 @@ myFunction();
 
 #### 函數作用域
 
-記得[函數有自己的作用域](/zh-TW/docs/Learn_web_development/Core/Scripting/Functions#函數作用域及衝突)——你無法從函數外部存取函數內部宣告的變數，除非你將該變數設為全域變數（也就是不在任何函數內部），或是[回傳變數的值](/zh-TW/docs/Learn/JavaScript/Building_blocks/Return_values)。
+記得[函數有自己的作用域](/zh-TW/docs/Learn_web_development/Core/Scripting/Functions#函數作用域及衝突)——你無法從函數外部存取函數內部宣告的變數，除非你將該變數設為全域變數（也就是不在任何函數內部），或是[回傳變數的值](/zh-TW/docs/Learn_web_development/Core/Scripting/Return_values)。
 
 #### 在 return 敘述後執行語法
 
@@ -81,11 +81,11 @@ const myObject = {
 - [什麼是陣列？](/zh-TW/docs/Learn_web_development/Core/Scripting/Arrays#what_is_an_array)
 - [什麼是迴圈？](/zh-TW/docs/Learn_web_development/Core/Scripting/Loops)
 - [什麼是函數？](/zh-TW/docs/Learn_web_development/Core/Scripting/Functions)
-- [什麼是事件？](/zh-TW/docs/Learn/JavaScript/Building_blocks/Events)
+- [什麼是事件？](/zh-TW/docs/Learn_web_development/Core/Scripting/Events)
 - [什麼是物件？](/zh-TW/docs/Learn_web_development/Core/Scripting/Object_basics#物件基礎概念)
-- [什麼是 JSON？]/zh-TW/docs/Learn/JavaScript/Objects/JSON#說真的，到底什麼是\_json？)
-- [什麼是 Web API？](/zh-TW/docs/Learn/JavaScript/Client-side_web_APIs/Introduction#什麼是_api)
-- [什麼是 DOM？](/zh-TW/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents#the_document_object_model)
+- [什麼是 JSON？](/zh-TW/docs/Learn_web_development/Core/Scripting/JSON#說真的，到底什麼是_json？)
+- [什麼是 Web API？](/zh-TW/docs/Learn_web_development/Extensions/Client-side_APIs/Introduction#什麼是_api)
+- [什麼是 DOM？](/zh-TW/docs/Learn_web_development/Core/Scripting/DOM_scripting#the_document_object_model)
 
 ## 基本使用例子
 
@@ -134,7 +134,7 @@ const myObject = {
 ### JavaScript 除錯
 
 - [有哪些 error 的基本型態？](/zh-TW/docs/Learn_web_development/Core/Scripting/What_went_wrong#錯誤類型)
-- [什麼是瀏覽器開發人員工具以及如何獲取？](/zh-TW/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools)
+- [什麼是瀏覽器開發人員工具以及如何獲取？](/zh-TW/docs/Learn_web_development/Howto/Tools_and_setup/What_are_browser_developer_tools)
 - [如何在 JavaScript 主控台輸出一個值？](/zh-TW/docs/Learn_web_development/Core/Scripting/Debugging_JavaScript#the_console_api)
 - [如何使用中斷點及其它 JavaScript 除錯功能？](/zh-TW/docs/Learn_web_development/Core/Scripting/Debugging_JavaScript#using_the_javascript_debugger)
 
@@ -166,12 +166,12 @@ const myObject = {
 
 - [如何在瀏覽器裡找到函數](/zh-TW/docs/Learn_web_development/Core/Scripting/Functions#瀏覽器內建函數)
 - [函數（function）與方法（method）的區別是什麼？](/zh-TW/docs/Learn_web_development/Core/Scripting/Functions#函數（function）_vs_方法（method）))
-- [如何創建自己的函數？](/zh-TW/docs/Learn/JavaScript/Building_blocks/Build_your_own_function)
+- [如何創建自己的函數？](/zh-TW/docs/Learn_web_development/Core/Scripting/Build_your_own_function)
 - [如何執行（呼叫）一個函數？](/zh-TW/docs/Learn_web_development/Core/Scripting/Functions#呼叫函數)
 - [什麼是匿名函數？](/zh-TW/docs/Learn_web_development/Core/Scripting/Functions#匿名函數)
 - [如何在呼叫函數時指定參數？](/zh-TW/docs/Learn_web_development/Core/Scripting/Functions#函數參數)
 - [什麼是函數作用域？](/zh-TW/docs/Learn_web_development/Core/Scripting/Functions#函數作用域及衝突)
-- [什麼是回傳值以及如何利用它？](/zh-TW/docs/Learn/JavaScript/Building_blocks/Return_values)
+- [什麼是回傳值以及如何利用它？](/zh-TW/docs/Learn_web_development/Core/Scripting/Return_values)
 
 ### 物件
 
@@ -192,14 +192,14 @@ const myObject = {
 
 ### 事件
 
-- [什麼是事件處理器以及如何使用？](/zh-TW/docs/Learn/JavaScript/Building_blocks/Events#event_handler_properties)
-- [什麼是行內事件處理器？](/zh-TW/docs/Learn/JavaScript/Building_blocks/Events#inline_event_handlers_—_dont_use_these)
-- [`addEventListener()`函數在做什麼以及如何使用？](/zh-TW/docs/Learn/JavaScript/Building_blocks/Events#example_using_event_listeners)
-- [我該使用哪種機制來在網頁中新增事件程式嗎？](/zh-TW/docs/Learn/JavaScript/Building_blocks/Events#what_mechanism_should_I_use)
-- [什麼是事件物件以及如何使用？](/zh-TW/docs/Learn/JavaScript/Building_blocks/Events#event_objects)
-- [如何阻止事件預設行為？](/zh-TW/docs/Learn/JavaScript/Building_blocks/Events#preventing_default_behaviour)
-- [如何在巢狀元素中觸發事件？（事件傳遞機制：事件冒泡與捕獲）](/zh-TW/docs/Learn/JavaScript/Building_blocks/Events#event_bubbling_and_capture)
-- [什麼是事件指派以及如何運作？](/zh-TW/docs/Learn/JavaScript/Building_blocks/Events#event_delegation)
+- [什麼是事件處理器以及如何使用？](/zh-TW/docs/Learn_web_development/Core/Scripting/Events#event_handler_properties)
+- [什麼是行內事件處理器？](/zh-TW/docs/Learn_web_development/Core/Scripting/Events#inline_event_handlers_—_dont_use_these)
+- [`addEventListener()`函數在做什麼以及如何使用？](/zh-TW/docs/Learn_web_development/Core/Scripting/Events#example_using_event_listeners)
+- [我該使用哪種機制來在網頁中新增事件程式嗎？](/zh-TW/docs/Learn_web_development/Core/Scripting/Events#what_mechanism_should_I_use)
+- [什麼是事件物件以及如何使用？](/zh-TW/docs/Learn_web_development/Core/Scripting/Events#event_objects)
+- [如何阻止事件預設行為？](/zh-TW/docs/Learn_web_development/Core/Scripting/Events#preventing_default_behaviour)
+- [如何在巢狀元素中觸發事件？（事件傳遞機制：事件冒泡與捕獲）](/zh-TW/docs/Learn_web_development/Core/Scripting/Events#event_bubbling_and_capture)
+- [什麼是事件指派以及如何運作？](/zh-TW/docs/Learn_web_development/Core/Scripting/Events#event_delegation)
 
 ### JavaScript 物件導向
 
@@ -211,4 +211,4 @@ const myObject = {
 
 ### 網頁 Web API
 
-- [如何使用 JavaScript 操控 DOM（例如新增或移除元素）？](/zh-TW/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents#active_learning_basic_dom_manipulation)
+- [如何使用 JavaScript 操控 DOM（例如新增或移除元素）？](/zh-TW/docs/Learn_web_development/Core/Scripting/DOM_scripting#active_learning_basic_dom_manipulation)
diff --git a/files/zh-tw/learn_web_development/howto/web_mechanics/what_is_a_web_server/index.md b/files/zh-tw/learn_web_development/howto/web_mechanics/what_is_a_web_server/index.md
index 7ce31b84a529bc..9f0f016cdc608b 100644
--- a/files/zh-tw/learn_web_development/howto/web_mechanics/what_is_a_web_server/index.md
+++ b/files/zh-tw/learn_web_development/howto/web_mechanics/what_is_a_web_server/index.md
@@ -14,9 +14,9 @@ original_slug: Learn/Common_questions/Web_mechanics/What_is_a_web_server
       <th scope="row">要求：</th>
       <td>
         你要知道
-        <a href="/zh-TW/docs/Learn/How_the_Internet_works"
+        <a href="/zh-TW/docs/Learn_web_development/Howto/Web_mechanics/How_does_the_Internet_work"
           >Internet 是怎麼運作的</a
-        >、並<a href="/zh-TW/docs/Learn/page_vs_site_vs_server_vs_search_engine"
+        >、並<a href="/zh-TW/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web"
           >知道網頁、網站、網路伺服器的不同</a
         >。
       </td>
@@ -66,9 +66,9 @@ _目前還沒有好用的內容。[請考慮貢獻一下](/zh-TW/docs/MDN/Commun
 - 永遠都有相同的 IP 地址（不是所有{{Glossary("ISP", "網際網路提供者")}}都給家庭用戶提供固定的 IP 地址）
 - 由第三方提供者維護
 
-因此，找到優秀的託管提供者，是建立網站的重點之一。好好探索各大公司提供的服務、並選擇一個符合需求、預算也能負擔的方案（服務的價格從免費到上千美元都有）。你可以[在這篇文章](/zh-TW/docs/Learn/Common_questions/Tools_and_setup/How_much_does_it_cost#hosting)找到更多資訊。
+因此，找到優秀的託管提供者，是建立網站的重點之一。好好探索各大公司提供的服務、並選擇一個符合需求、預算也能負擔的方案（服務的價格從免費到上千美元都有）。你可以[在這篇文章](/zh-TW/docs/Learn_web_development/Howto/Tools_and_setup/How_much_does_it_cost#hosting)找到更多資訊。
 
-一旦找到適合的網絡託管解決方案，你只要[把文件上傳到網路伺服器](/zh-TW/docs/Learn/Common_questions/Tools_and_setup/Upload_files_to_a_web_server)就行了。
+一旦找到適合的網絡託管解決方案，你只要[把文件上傳到網路伺服器](/zh-TW/docs/Learn_web_development/Howto/Tools_and_setup/Upload_files_to_a_web_server)就行了。
 
 ### 透過 HTTP 溝通
 
@@ -107,6 +107,6 @@ HTTP 提供了用戶端與伺服器端，該如何溝通的明確規則。我們
 
 熟悉了伺服器以後可以：
 
-- 讀讀[how much it costs to do something on the web](/zh-TW/docs/Learn/Common_questions/Tools_and_setup/How_much_does_it_cost)
-- 了解[various software you need to create a website](/zh-TW/docs/Learn/Common_questions/Tools_and_setup/What_software_do_I_need)
-- 移駕到[how to upload files on a web server](/zh-TW/docs/Learn/Common_questions/Tools_and_setup/Upload_files_to_a_web_server)之類的實戰。
+- 讀讀[how much it costs to do something on the web](/zh-TW/docs/Learn_web_development/Howto/Tools_and_setup/How_much_does_it_cost)
+- 了解[various software you need to create a website](/zh-TW/docs/Learn_web_development/Howto/Tools_and_setup/What_software_do_I_need)
+- 移駕到[how to upload files on a web server](/zh-TW/docs/Learn_web_development/Howto/Tools_and_setup/Upload_files_to_a_web_server)之類的實戰。
diff --git a/files/zh-tw/mdn/writing_guidelines/writing_style_guide/index.md b/files/zh-tw/mdn/writing_guidelines/writing_style_guide/index.md
index 0c69a078d00aac..8e84ddddef53c0 100644
--- a/files/zh-tw/mdn/writing_guidelines/writing_style_guide/index.md
+++ b/files/zh-tw/mdn/writing_guidelines/writing_style_guide/index.md
@@ -93,7 +93,7 @@ slug: MDN/Writing_guidelines/Writing_style_guide
 
 > The {{domxref("CanvasRenderingContext2D")}} method **`strokeText()`**, part of the [Canvas 2D API](/zh-TW/docs/Web/API/Canvas_API), strokes—that is, draws the outlines of—the characters of a specified string, anchored at the position indicated by the given X and Y coordinates. The text is drawn using the context's current {{domxref("CanvasRenderingContext2D.font", "font")}}, and is justified and aligned according to the {{domxref("CanvasRenderingContext2D.textAlign", "textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline")}}, and {{domxref("CanvasRenderingContext2D.direction", "direction")}} properties.
 >
-> For more details and further examples, see the [Text](/zh-TW/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics#text) section on the Drawing graphics page as well as our main article on the subject, [Drawing text](/zh-TW/docs/Web/API/Canvas_API/Tutorial/Drawing_text).
+> For more details and further examples, see the [Text](/zh-TW/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics#text) section on the Drawing graphics page as well as our main article on the subject, [Drawing text](/zh-TW/docs/Web/API/Canvas_API/Tutorial/Drawing_text).
 
 #### 涵蓋所有相關的範例
 
diff --git a/files/zh-tw/web/accessibility/index.md b/files/zh-tw/web/accessibility/index.md
index cc71d7283883e8..243e2e798843bc 100644
--- a/files/zh-tw/web/accessibility/index.md
+++ b/files/zh-tw/web/accessibility/index.md
@@ -17,15 +17,15 @@ MDN [Accessibility Learning Area](/zh-TW/docs/Learn_web_development/Core/Accessi
 
 - [何謂無障礙網頁？](/zh-TW/docs/Learn_web_development/Core/Accessibility/What_is_accessibility)
   - : 這篇文章針對何謂無障礙網頁，起了一個好開頭。這模塊包含了要考慮哪些族群以及理由、不同族群會用什麼工具和 Web 互動、還有怎麼把無障礙網頁導入 Web 開發工作流程。
-- [HTML：無障礙網頁的好開始](/zh-TW/docs/Learn/Accessibility/HTML)
+- [HTML：無障礙網頁的好開始](/zh-TW/docs/Learn_web_development/Core/Accessibility/HTML)
   - : 只要確保在任何時候，正確的 HTML 元素都用於正確的目的，就能消除各種網頁的障礙。這篇文章詳述 HTML 如何確保網頁無障礙。
-- [充分實踐 CSS 與 JavaScript 的無障礙](/zh-TW/docs/Learn/Accessibility/CSS_and_JavaScript)
+- [充分實踐 CSS 與 JavaScript 的無障礙](/zh-TW/docs/Learn_web_development/Core/Accessibility/CSS_and_JavaScript)
   - : 如果 CSS 與 JavaScript 使用得當，將可以為無障礙網頁提供助力……反過來的話，就會嚴重影響無障礙體驗。這篇文章詳述如何在內容複雜的情況下，確保能充分實踐 CSS 與 JavaScript 的無障礙。
 - [WAI-ARIA 基礎](/zh-TW/docs/Learn_web_development/Core/Accessibility/WAI-ARIA_basics)
   - : 從之前的文章來看，有時製作要涉及到非語意的 HTML 還有動態 JavaScript 更新技術……等，會令複雜的 UI 控制變得很困難。WAI-ARIA 正是為了解決此一問題而生。它對瀏覽器和輔助技術添加進一步的語意，讓用戶能知道發生了什麼事。我們將介紹如何在基本層面使用此技術，以提昇無障礙。
-- [無障礙多媒體](/zh-TW/docs/Learn/Accessibility/Multimedia)
+- [無障礙多媒體](/zh-TW/docs/Learn_web_development/Core/Accessibility/Multimedia)
   - : 會導致無障礙網頁出問題的另一個根源是多媒體：影片、聲音、圖片等內容，需要有合適的文字替代，以便輔助技術和它的用戶能夠理解。我們將在這篇文章中闡明作法。
-- [行動無障礙網頁](/zh-TW/docs/Learn/Accessibility/Mobile)
+- [行動無障礙網頁](/zh-TW/docs/Learn_web_development/Core/Accessibility/Mobile)
   - : 隨著行動設備訪問漸受歡迎、還有像是 iOS 與 Android 這般熱門平台，已經具備完善的輔助工具，考慮到如何在這些平台上實踐無障礙網頁，就變得十分重要。這篇文章將討論行動裝置特有的無障礙網頁相關議題。
 
 ## 其他文件
diff --git a/files/zh-tw/web/api/cssstylesheet/insertrule/index.md b/files/zh-tw/web/api/cssstylesheet/insertrule/index.md
index bfabce77bec64c..b1ce6d273ed282 100644
--- a/files/zh-tw/web/api/cssstylesheet/insertrule/index.md
+++ b/files/zh-tw/web/api/cssstylesheet/insertrule/index.md
@@ -21,7 +21,7 @@ insertRule(rule, index)
 ### Parameters
 
 - `rule`
-  - : 一個 {{domxref("DOMString")}} 包含要被插入的規則，這份規則同時指定了選擇器（[selector](/zh-TW/docs/Learn/CSS/Building_blocks/Selectors)）和样式聲明，或 at 標識符和規則內容。
+  - : 一個 {{domxref("DOMString")}} 包含要被插入的規則，這份規則同時指定了選擇器（[selector](/zh-TW/docs/Learn_web_development/Core/Styling_basics/Basic_selectors)）和样式聲明，或 at 標識符和規則內容。
 - `index` {{optional_inline}}
   - : 無符號整數，代表在 `stylesheet.cssRules.length` 中插入的位置，其中 index-0 是第一個規則，而 index-max 就是最後一個規則，並且與 CSSStyleSheet 的長度相同。cssRules 在舊的實現中是必需的。查詢「瀏覽器兼容」取得詳細信息。 默認值為 0。
 
diff --git a/files/zh-tw/web/api/event/currenttarget/index.md b/files/zh-tw/web/api/event/currenttarget/index.md
index b067dfaece9088..fbecdf5f853acd 100644
--- a/files/zh-tw/web/api/event/currenttarget/index.md
+++ b/files/zh-tw/web/api/event/currenttarget/index.md
@@ -36,4 +36,4 @@ for (var i = 0; i < ps.length; i++) {
 
 ## 參見
 
-- [事件指向的比較](/zh-TW/docs/Learn/JavaScript/Building_blocks/Event_bubbling)
+- [事件指向的比較](/zh-TW/docs/Learn_web_development/Core/Scripting/Event_bubbling)
diff --git a/files/zh-tw/web/api/event/index.md b/files/zh-tw/web/api/event/index.md
index 86f2aaec89193a..dec4377f0efd33 100644
--- a/files/zh-tw/web/api/event/index.md
+++ b/files/zh-tw/web/api/event/index.md
@@ -13,7 +13,7 @@ slug: Web/API/Event
 
 許多 DOM 元素可被設定接受（accept，或稱為 listen "監聽"）這些事件，並在發生時執行處理（process、handle）事件的程式碼。事件處理器（Event-handlers）通常會使用 `EventTarget.addEventListener()` 來被連結（connected，或稱為 attached "附加"）至各個 [HTML 元素](/zh-TW/docs/Web/HTML/Element)（例如 \<button>、\<div>、\<div>、\<span> 等），且此方式一般也是用來取代舊的 HTML [事件處理器屬性（attributes）](/zh-TW/docs/Web/HTML/Global_attributes)。此外，在需要時也可以使用 [`removeEventListener()`](/zh-TW/docs/Web/API/EventTarget/removeEventListener) 來中斷事件處理器與元素的連結。請留意一個元素可以擁有多個事件處理器（即使是處理同一種事件的不同處理器），特別是那些被切分開來彼此獨立且有不同目標的程式模組（舉例來說，廣告及統計模組可以同時監控網頁中的影片觀看資訊）。
 
-When there are many nested elements, each with its own handler(s), event processing can become very complicated — especially where a parent element receives the very same event as its child elements because "spatially" they overlap so the event technically occurs in both, and the processing order of such events depends on the [Event bubbling and capture](/zh-TW/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture) settings of each handler triggered.
+When there are many nested elements, each with its own handler(s), event processing can become very complicated — especially where a parent element receives the very same event as its child elements because "spatially" they overlap so the event technically occurs in both, and the processing order of such events depends on the [Event bubbling and capture](/zh-TW/docs/Learn_web_development/Core/Scripting/Events#Event_bubbling_and_capture) settings of each handler triggered.
 
 ## 基於 `Event` 的子介面
 
@@ -153,7 +153,7 @@ Below is a list of interfaces which are based on the main `Event` interface, wit
 ## 參見
 
 - 可用的事件類型：[Event reference](/zh-TW/docs/Web/Events)
-- [各種 Event Targets 的比較](/zh-TW/docs/Learn/JavaScript/Building_blocks/Event_bubbling) (target vs currentTarget vs relatedTarget vs originalTarget)
+- [各種 Event Targets 的比較](/zh-TW/docs/Learn_web_development/Core/Scripting/Event_bubbling) (target vs currentTarget vs relatedTarget vs originalTarget)
 - [建立和觸發事件](/zh-TW/docs/Web/Events/Creating_and_triggering_events)
 - 給 Firefox 插件開發者：
 
diff --git a/files/zh-tw/web/api/event/target/index.md b/files/zh-tw/web/api/event/target/index.md
index ec5577b6938359..46d81e13641035 100644
--- a/files/zh-tw/web/api/event/target/index.md
+++ b/files/zh-tw/web/api/event/target/index.md
@@ -60,4 +60,4 @@ function hide(e) {
 
 ## 參見
 
-- [Comparison of Event Targets](/zh-TW/docs/Learn/JavaScript/Building_blocks/Event_bubbling)
+- [Comparison of Event Targets](/zh-TW/docs/Learn_web_development/Core/Scripting/Event_bubbling)
diff --git a/files/zh-tw/web/api/uievent/index.md b/files/zh-tw/web/api/uievent/index.md
index b7e5295e293bb1..e922cd0dd0abb3 100644
--- a/files/zh-tw/web/api/uievent/index.md
+++ b/files/zh-tw/web/api/uievent/index.md
@@ -58,5 +58,5 @@ _此介面亦繼承其父－－ {{domxref("Event")}} 的方法：_
 
 ## 參見
 
-- [Introduction to events](/zh-TW/docs/Learn/JavaScript/Building_blocks/Events)
+- [Introduction to events](/zh-TW/docs/Learn_web_development/Core/Scripting/Events)
 - {{domxref("Event")}}
diff --git a/files/zh-tw/web/css/@namespace/index.md b/files/zh-tw/web/css/@namespace/index.md
index 568f0e5ab19581..221d2a7e9e9b82 100644
--- a/files/zh-tw/web/css/@namespace/index.md
+++ b/files/zh-tw/web/css/@namespace/index.md
@@ -22,7 +22,7 @@ slug: Web/CSS/@namespace
 
 ## 說明
 
-`@namespace` 可以用来限制樣式的選擇器（包含[通用的](/zh-TW/docs/Web/CSS/Universal_selectors)、[元素選擇器](/zh-TW/docs/Web/CSS/Type_selectors)和[屬性](/zh-TW/docs/Web/CSS/Attribute_selectors)[選擇器](/zh-TW/docs/Learn/CSS/Building_blocks/Selectors)）僅套用於指定的命名空間。`@namespace` 通常在處理有多個命名空間的檔案時很有用——例如有內嵌 SVG 或 MathML 的 HTML、混和多個命名空間的 XML 等。
+`@namespace` 可以用来限制樣式的選擇器（包含[通用](/zh-TW/docs/Web/CSS/Universal_selectors)、[元素](/zh-TW/docs/Web/CSS/Type_selectors)和[屬性](/zh-TW/docs/Web/CSS/Attribute_selectors)[選擇器](/zh-TW/docs/Learn_web_development/Core/Styling_basics/Basic_selectors)）僅套用於指定的命名空間。`@namespace` 通常在處理有多個命名空間的檔案時很有用——例如有內嵌 SVG 或 MathML 的 HTML、混和多個命名空間的 XML 等。
 
 `@namespace` 必须放在 {{cssxref("@charset")}} 和 {{cssxref("@import")}} 規則之後，在其他 at-rule 及 [Style Declaration](/zh-TW/docs/Web/API/CSSStyleDeclaration) 之前。
 
diff --git a/files/zh-tw/web/css/css_fonts/index.md b/files/zh-tw/web/css/css_fonts/index.md
index 6aa1ef0687e72d..7fd26d9a36fe89 100644
--- a/files/zh-tw/web/css/css_fonts/index.md
+++ b/files/zh-tw/web/css/css_fonts/index.md
@@ -136,11 +136,11 @@ CSS 字型模組還支持可變字型。與常規字型不同的是，每種樣
 
 ## 指南
 
-- [文字和字型樣式基礎](/zh-TW/docs/Learn/CSS/Styling_text/Fundamentals)
+- [文字和字型樣式基礎](/zh-TW/docs/Learn_web_development/Core/Text_styling/Fundamentals)
 
   - : 在這篇給初學者的文章中，我們詳細說明了文字和字型樣式的基礎知識，包括瞭解如何使用 {{cssxref("font")}} 簡寫來設定字型粗細、字族和樣式，以及如何對齊文字以及管理行和字母間距。
 
-- [Web 字型](/zh-TW/docs/Learn/CSS/Styling_text/Web_fonts)
+- [Web 字型](/zh-TW/docs/Learn_web_development/Core/Text_styling/Web_fonts)
 
   - : 在這篇給初學者的文章中，我們詳細介紹如何在網頁上使用自訂字型以實現更多樣化的自訂文字樣式。
 
@@ -152,7 +152,7 @@ CSS 字型模組還支持可變字型。與常規字型不同的是，每種樣
 
   - : 本文將協助你開始使用可變字型。
 
-- [提升字型效能](/zh-TW/docs/Learn/Performance/CSS#improving_font_performance)
+- [提升字型效能](/zh-TW/docs/Learn_web_development/Extensions/Performance/CSS#improving_font_performance)
 
   - : 本文是 CSS 效能指南的一部分，討論字型載入、僅載入所需的字形以及使用 `font-display` 定義字型顯示行為。
 
diff --git a/files/zh-tw/web/css/index.md b/files/zh-tw/web/css/index.md
index 7283878ae00d7b..9724e6cf1121e4 100644
--- a/files/zh-tw/web/css/index.md
+++ b/files/zh-tw/web/css/index.md
@@ -29,7 +29,7 @@ slug: Web/CSS
   - : 此模組讓你理解 CSS 工作原理，包含選擇器與屬性、撰寫 CSS 規則、在 HTML 套用 CSS、如何在 CSS 指定長度、色彩、還有其它單位、階層與繼承、box model 基礎、以及針對 CSS 除錯。
 - [文字樣式](/zh-TW/docs/Learn_web_development/Core/Text_styling)
   - : 在這裡我們專注在文字樣式的基礎，包含設定字體、粗細、斜體、行距、字距、陰影以及其他文字屬性。最後以應用自訂字體、樣式化列表、樣式化連結結束。
-- [樣式化盒子](/zh-TW/docs/Learn/CSS/Building_blocks)
+- [樣式化盒子](/zh-TW/docs/Learn_web_development/Core/Styling_basics)
   - : 接著，我們關注樣式化盒子，這是網頁排版中一個基礎的環節。在這個系列中我們會複習盒子模型，然後操作盒子的排版，像是設定留白、邊框、邊距、背景顏色或圖片以及其他特色，還有一些酷炫的功能像是陰影、過濾器。
 - [CSS 排版](/zh-TW/docs/Learn_web_development/Core/CSS_layout)
   - : 到了這裡，我們已經看完 CSS 的基礎（樣式化文字、樣式化與操作盒子使你的內容可以合適的展示）。現在該來看看如何把你的盒子放在相對於可視區正確的地方。我們已經擁有必要的知識，所以你可以更深入了解 CSS 排版、看不同的顯示設定、傳統排版方法如浮動或定位、新的排版方法如彈性盒子。
diff --git a/files/zh-tw/web/css/syntax/index.md b/files/zh-tw/web/css/syntax/index.md
index bae4fb1058a5be..7d47c77cab85d1 100644
--- a/files/zh-tw/web/css/syntax/index.md
+++ b/files/zh-tw/web/css/syntax/index.md
@@ -41,7 +41,7 @@ CSS allows this by associating conditions with declarations blocks. Each (valid)
 
 ![css syntax - ruleset.png](ruleset.png)
 
-As an element of the page may be matched by several selectors, and therefore by several rules potentially containing a given property several times, with different values, the CSS standard defines which one has precedence over the other and must be applied: this is called the [cascade](/zh-TW/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance) algorithm.
+As an element of the page may be matched by several selectors, and therefore by several rules potentially containing a given property several times, with different values, the CSS standard defines which one has precedence over the other and must be applied: this is called the [cascade](/zh-TW/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts) algorithm.
 
 > [!NOTE]
 > It is important to note that even if a ruleset characterized by a group of selectors is a kind of shorthand replacing rulesets with a single selector each, this doesn't apply to the validity of the ruleset itself.
diff --git a/files/zh-tw/web/events/index.md b/files/zh-tw/web/events/index.md
index b9ea4305288ab8..c84091ecd54ec3 100644
--- a/files/zh-tw/web/events/index.md
+++ b/files/zh-tw/web/events/index.md
@@ -1388,6 +1388,6 @@ This article offers a list of events that can be sent; some are standard events
 
 <section id="Quick_links">
   <ol>
-    <li><a href="/zh-TW/docs/Learn/JavaScript/Building_blocks/Events">事件介紹</a></li>
+    <li><a href="/zh-TW/docs/Learn_web_development/Core/Scripting/Events">事件介紹</a></li>
   </ol>{{ListSubpages}}
 </section>
diff --git a/files/zh-tw/web/html/element/a/index.md b/files/zh-tw/web/html/element/a/index.md
index 241458c07a40d0..524a75d2304ba5 100644
--- a/files/zh-tw/web/html/element/a/index.md
+++ b/files/zh-tw/web/html/element/a/index.md
@@ -58,7 +58,7 @@ slug: Web/HTML/Element/a
 
     - `no-referrer`：不發送 {{HTTPHeader("Referer")}} 標頭。
     - `no-referrer-when-downgrade`：不發送 {{HTTPHeader("Referer")}} 標頭至沒有 {{Glossary("TLS")}}（{{Glossary("HTTPS")}}）的[來源](/zh-TW/docs/Web/Security/Same-origin_policy)。
-    - `origin`：發送的引用者將僅限於引用頁面的來源：其[協定](/zh-TW/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL)、{{Glossary("host", "主機")}}和{{Glossary("port", "通訊埠")}}。
+    - `origin`：發送的引用者將僅限於引用頁面的來源：其[協定](/zh-TW/docs/Learn_web_development/Howto/Web_mechanics/What_is_a_URL)、{{Glossary("host", "主機")}}和{{Glossary("port", "通訊埠")}}。
     - `origin-when-cross-origin`：發送給其他來源的引用者將僅限於協定、主機和端口。對同一來源的導航仍將包含路徑。
     - `same-origin`：對於{{Glossary("Same-origin policy", "同一來源")}}，將發送引用者，但跨來源請求將不包含引用者信息。
     - `strict-origin`：僅在協定安全級別保持不變時（HTTPS→HTTPS）發送文件的源作為引用者，但不要將其發送給不太安全的目的地（HTTPS→HTTP）。
diff --git a/files/zh-tw/web/html/element/abbr/index.md b/files/zh-tw/web/html/element/abbr/index.md
index b22a95658088fa..63c6f5d914225c 100644
--- a/files/zh-tw/web/html/element/abbr/index.md
+++ b/files/zh-tw/web/html/element/abbr/index.md
@@ -202,4 +202,4 @@ abbr {
 
 ## 參見
 
-- [使用 `<abbr>` 元素](/zh-TW/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#abbreviations)
+- [使用 `<abbr>` 元素](/zh-TW/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features#abbreviations)
diff --git a/files/zh-tw/web/html/element/area/index.md b/files/zh-tw/web/html/element/area/index.md
index f2d8cd14c74e1f..192e2e83e9720e 100644
--- a/files/zh-tw/web/html/element/area/index.md
+++ b/files/zh-tw/web/html/element/area/index.md
@@ -39,7 +39,7 @@ slug: Web/HTML/Element/area
 
     - `no-referrer`：不會發送 {{HTTPHeader("Referer")}} 標頭。
     - `no-referrer-when-downgrade`：不會將 {{HTTPHeader("Referer")}} 標頭發送給沒有 {{Glossary("TLS")}}（{{Glossary("HTTPS")}}）的 {{Glossary("origin")}}。
-    - `origin`：發送的引用網址將被限制為引用頁面的原始位置：其 [scheme](/zh-TW/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL)、{{Glossary("host")}} 和 {{Glossary("port")}}。
+    - `origin`：發送的引用網址將被限制為引用頁面的原始位置：其 [scheme](/zh-TW/docs/Learn_web_development/Howto/Web_mechanics/What_is_a_URL)、{{Glossary("host")}} 和 {{Glossary("port")}}。
     - `origin-when-cross-origin`：發送到其他來源的引用網址將被限制為方案、主機和端口。相同來源的導航仍將包括路徑。
     - `same-origin`：對於{{Glossary("Same-origin policy", "相同源策略")}}，將發送一個引用網址，但跨來源請求將不包含引用網址信息。
     - `strict-origin`：僅在協議安全等級保持不變（HTTPS→HTTPS）時發送文件的原始位置作為引用網址，但不要將其發送到較不安全的目的地（HTTPS→HTTP）。
diff --git a/files/zh-tw/web/html/element/audio/index.md b/files/zh-tw/web/html/element/audio/index.md
index 47758b9f9ab30c..936f2db2822687 100644
--- a/files/zh-tw/web/html/element/audio/index.md
+++ b/files/zh-tw/web/html/element/audio/index.md
@@ -247,7 +247,7 @@ slug: Web/HTML/Element/audio
 - `<audio>` 元素無法像 `<video>` 元素那樣與字幕或標題關聯。有關一些有用的信息和解決方法，請參見 Ian Devlin 的 [WebVTT 和音訊](https://www.iandevlin.com/blog/2015/12/html5/webvtt-and-audio/)。
 - 為了測試在支援該元素的瀏覽器中的回退內容，你可以將 `<audio>` 替換為一個不存在的元素，例如 `<notanaudio>`。
 
-有關使用 HTML `<audio>` 的一般信息，請參見初學者教程[影片和音訊內容](/zh-TW/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content)。
+有關使用 HTML `<audio>` 的一般信息，請參見初學者教程[影片和音訊內容](/zh-TW/docs/Learn_web_development/Core/Structuring_content/HTML_video_and_audio)。
 
 ### 使用 CSS 進行樣式設定
 
@@ -444,5 +444,5 @@ Welcome to the Time Keeper's podcast! In this episode we're discussing which Swi
 - {{domxref("HTMLAudioElement")}}
 - {{htmlelement("source")}}
 - {{htmlelement("video")}}
-- [學習區域：視訊和音訊內容](/zh-TW/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content)
+- [學習區域：視訊和音訊內容](/zh-TW/docs/Learn_web_development/Core/Structuring_content/HTML_video_and_audio)
 - [跨瀏覽器音訊基礎知識](/zh-TW/docs/Web/Media/Audio_and_video_delivery/Cross-browser_audio_basics)
diff --git a/files/zh-tw/web/html/element/button/index.md b/files/zh-tw/web/html/element/button/index.md
index 7ec4a90f7d74e9..9033d312e497c8 100644
--- a/files/zh-tw/web/html/element/button/index.md
+++ b/files/zh-tw/web/html/element/button/index.md
@@ -51,7 +51,7 @@ slug: Web/HTML/Element/button
 
 - `formnovalidate`
 
-  - : 如果按鈕是提交按鈕，此布林屬性指定提交表單時不應[驗證](/zh-TW/docs/Learn/Forms/Form_validation)表單。如果指定了此屬性，則它將覆蓋按鈕的表單所有者的 [`novalidate`](/zh-TW/docs/Web/HTML/Element/form#novalidate) 屬性。
+  - : 如果按鈕是提交按鈕，此布林屬性指定提交表單時不應[驗證](/zh-TW/docs/Learn_web_development/Extensions/Forms/Form_validation)表單。如果指定了此屬性，則它將覆蓋按鈕的表單所有者的 [`novalidate`](/zh-TW/docs/Web/HTML/Element/form#novalidate) 屬性。
 
     此屬性也適用於 [`<input type="image">`](/zh-TW/docs/Web/HTML/Element/input/image) 和 [`<input type="submit">`](/zh-TW/docs/Web/HTML/Element/input/submit) 元素。
 
diff --git a/files/zh-tw/web/html/element/canvas/index.md b/files/zh-tw/web/html/element/canvas/index.md
index 74a2c24e2cd4b0..1cbba576e59344 100644
--- a/files/zh-tw/web/html/element/canvas/index.md
+++ b/files/zh-tw/web/html/element/canvas/index.md
@@ -170,4 +170,4 @@ ctx.fillRect(10, 10, 100, 100);
 - [WebGL](/zh-TW/docs/Web/API/WebGL_API) API
 - {{HTMLElement("img")}}
 - [SVG](/zh-TW/docs/Web/SVG)
-- [使用 HTML 音頻和影片](/zh-TW/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content)
+- [使用 HTML 音頻和影片](/zh-TW/docs/Learn_web_development/Core/Structuring_content/HTML_video_and_audio)
diff --git a/files/zh-tw/web/html/element/div/index.md b/files/zh-tw/web/html/element/div/index.md
index 1ee84616fb7684..04e3ddd507b1f5 100644
--- a/files/zh-tw/web/html/element/div/index.md
+++ b/files/zh-tw/web/html/element/div/index.md
@@ -15,7 +15,7 @@ slug: Web/HTML/Element/div
 
 此元素包括[全域屬性](/zh-TW/docs/Web/HTML/Global_attributes)。
 
-> **備註：** `align` 屬性已廢棄；請不要再使用。取而代之應該使用 CSS 屬性或技術，例如 [CSS Grid](/zh-TW/docs/Web/CSS/CSS_grid_layout) 或 [CSS Flexbox](/zh-TW/docs/Learn/CSS/CSS_layout/Flexbox) 來對頁面上的 `<div>` 元素進行對齊和定位。
+> **備註：** `align` 屬性已廢棄；請不要再使用。取而代之應該使用 CSS 屬性或技術，例如 [CSS Grid](/zh-TW/docs/Web/CSS/CSS_grid_layout) 或 [CSS Flexbox](/zh-TW/docs/Learn_web_development/Core/CSS_layout/Flexbox) 來對頁面上的 `<div>` 元素進行對齊和定位。
 
 ## 使用注意事項
 
diff --git a/files/zh-tw/web/html/element/input/submit/index.md b/files/zh-tw/web/html/element/input/submit/index.md
index 4d8b371675f84c..9810fc2357f6de 100644
--- a/files/zh-tw/web/html/element/input/submit/index.md
+++ b/files/zh-tw/web/html/element/input/submit/index.md
@@ -62,7 +62,7 @@ slug: Web/HTML/Element/input/submit
 
 試著在文字區塊內輸入些文字，接著提交表單。
 
-提交時，送到伺服器的成對 name/value 資料會 be along the lines of `text=mytext`，視你在文字區塊內輸入了什麼。資料在哪裡並如何被送出，取決於 `<form>` 屬性和其他細節的設定：請參見[傳送表單資料](/zh-TW/docs/Learn/Forms/Sending_and_retrieving_form_data)。
+提交時，送到伺服器的成對 name/value 資料會 be along the lines of `text=mytext`，視你在文字區塊內輸入了什麼。資料在哪裡並如何被送出，取決於 `<form>` 屬性和其他細節的設定：請參見[傳送表單資料](/zh-TW/docs/Learn_web_development/Extensions/Forms/Sending_and_retrieving_form_data)。
 
 ### 增加提交的快捷鍵
 
diff --git a/files/zh-tw/web/html/element/table/index.md b/files/zh-tw/web/html/element/table/index.md
index 0202369904f57b..f2a2fa3d67eaf7 100644
--- a/files/zh-tw/web/html/element/table/index.md
+++ b/files/zh-tw/web/html/element/table/index.md
@@ -231,7 +231,7 @@ td {
 
 如此也能幫助螢幕閱讀器之類的輔具使用者、視力條件差、還有認知障礙的人。
 
-- [MDN Adding a caption to your table with \<caption>](/zh-TW/docs/Learn/HTML/Tables/Advanced#Adding_a_caption_to_your_table_with_<caption>)
+- [MDN Adding a caption to your table with \<caption>](/zh-TW/docs/Learn_web_development/Core/Structuring_content/Table_accessibility#Adding_a_caption_to_your_table_with_<caption>)
 - [Caption & Summary • Tables • W3C WAI Web Accessibility Tutorials](https://www.w3.org/WAI/tutorials/tables/caption-summary/)
 
 ### Scope 行列
@@ -270,7 +270,7 @@ td {
 
 在 {{HTMLElement("th")}} 元素提供 `scope="col"` 的宣告，有助於描述該單位屬於第一列。在 {{HTMLElement("td")}} 元素提供 `scope="row"` 則有助於描述該單位屬於第一行。
 
-- [MDN Tables for visually impaired users](/zh-TW/docs/Learn/HTML/Tables/Advanced#Tables_for_visually_impaired_users)
+- [MDN Tables for visually impaired users](/zh-TW/docs/Learn_web_development/Core/Structuring_content/Table_accessibility#Tables_for_visually_impaired_users)
 - [Tables with two headers • Tables • W3C WAI Web Accessibility Tutorials](https://www.w3.org/WAI/tutorials/tables/two-headers/)
 - [Tables with irregular headers • Tables • W3C WAI Web Accessibility Tutorials](https://www.w3.org/WAI/tutorials/tables/irregular/)
 - [H63: Using the scope attribute to associate header cells and data cells in data tables | W3C Techniques for WCAG 2.0](https://www.w3.org/TR/WCAG20-TECHS/H63.html)
@@ -283,7 +283,7 @@ td {
 
 `如果表格無法切分，請結合 [`id`](/zh-TW/docs/Web/HTML/Global_attributes#id) 與 [`headers`](/zh-TW/docs/Web/HTML/Element/td#headers) 使用，以便程序化地關聯各表格單位與標題。`
 
-- [`MDN Tables for visually impaired users`](/zh-TW/docs/Learn/HTML/Tables/Advanced#Tables_for_visually_impaired_users)
+- [`MDN Tables for visually impaired users`](/zh-TW/docs/Learn_web_development/Core/Structuring_content/Table_accessibility#Tables_for_visually_impaired_users)
 - [`Tables with multi-level headers • Tables • W3C WAI Web Accessibility Tutorials`](https://www.w3.org/WAI/tutorials/tables/multi-level/)
 - [`H43: Using id and headers attributes to associate data cells with header cells in data tables | Techniques for W3C WCAG 2.0`](https://www.w3.org/TR/WCAG20-TECHS/H43.html)
 
diff --git a/files/zh-tw/web/http/browser_detection_using_the_user_agent/index.md b/files/zh-tw/web/http/browser_detection_using_the_user_agent/index.md
index 77b3fdb3a7a8e9..85bcbe019cb436 100644
--- a/files/zh-tw/web/http/browser_detection_using_the_user_agent/index.md
+++ b/files/zh-tw/web/http/browser_detection_using_the_user_agent/index.md
@@ -116,13 +116,13 @@ slug: Web/HTTP/Browser_detection_using_the_user_agent
 
     針對螢幕尺寸，則使用 _window.innerWidth_ 與 _window.addEventListener("resize", function(){ /*更新螢幕尺寸依賴的東西*/ })_。
 
-    不要刪減小螢幕能看到的資訊，這只會激怒被逼著切到桌面版的用戶們；而是應該針對小螢幕，提供行列更少，但頁面更長的資訊；針對大螢幕，則提供行列更多，但頁面更短的資訊。這種效果能透過 [flexboxes](/zh-TW/docs/Learn/CSS/CSS_layout/Flexbox) 實現。如果需要有限支援舊版本，請使用 [floats](/zh-TW/docs/Learn/CSS/CSS_layout/Floats) 屬性。
+    不要刪減小螢幕能看到的資訊，這只會激怒被逼著切到桌面版的用戶們；而是應該針對小螢幕，提供行列更少，但頁面更長的資訊；針對大螢幕，則提供行列更多，但頁面更短的資訊。這種效果能透過 [flexboxes](/zh-TW/docs/Learn_web_development/Core/CSS_layout/Flexbox) 實現。如果需要有限支援舊版本，請使用 [floats](/zh-TW/docs/Learn_web_development/Core/CSS_layout/Floats) 屬性。
 
     另外，試著把不相關或不重要的資訊放到下面、然後把資料放得有意義。然後雖然有點離題，但下面的詳細示例，可能會給你有力的見解和想法，放棄用戶代理嗅探。
 
     我們先想像一個由各種貓貓或狗狗的訊息框，所組成的頁面；每個訊息框都有圖片、概覽、還有歷史趣聞；而圖片即使在大螢幕上，也要保持最大的合理尺寸。為了讓內容有意義的排列在一起，所有的貓貓訊息框都和狗狗訊息框分開、兩種動物都不會混在一起。在大螢幕上，會節省具有多列的空間，從而減少了圖片左右兩側的間距。訊息框則會透過平分而被拆分為多列。
 
-    現在我們能假設在原始碼裡面，狗狗訊息框都在上面、而貓貓訊息框都在下面。而這兩個框框都在同一個父元素之下。很明顯，有一個狗狗訊息框，就在貓貓訊息框的上面。第一個方法，就是使用水平的 [Flexbox](/zh-TW/docs/Learn/CSS/CSS_layout/Flexbox) 把內容組合起來。這樣，當頁面顯示給最終用戶時，狗狗訊息框就在頁面上方、而貓貓訊息框就在頁面下方；第二個方法，就是使用 [Column](/zh-TW/docs/Web/CSS/Layout_cookbook/Column_layouts) layout and resent 把所有的狗狗與貓貓排到右邊。在這種情況下，就能給沒有 flexboxes/multicolumns 的老舊版本提供適當的呈現：他們會呈現一列非常寬的框。
+    現在我們能假設在原始碼裡面，狗狗訊息框都在上面、而貓貓訊息框都在下面。而這兩個框框都在同一個父元素之下。很明顯，有一個狗狗訊息框，就在貓貓訊息框的上面。第一個方法，就是使用水平的 [Flexbox](/zh-TW/docs/Learn_web_development/Core/CSS_layout/Flexbox) 把內容組合起來。這樣，當頁面顯示給最終用戶時，狗狗訊息框就在頁面上方、而貓貓訊息框就在頁面下方；第二個方法，就是使用 [Column](/zh-TW/docs/Web/CSS/Layout_cookbook/Column_layouts) layout and resent 把所有的狗狗與貓貓排到右邊。在這種情況下，就能給沒有 flexboxes/multicolumns 的老舊版本提供適當的呈現：他們會呈現一列非常寬的框。
 
     再考慮一下這個例子：如果有人是想來看貓貓的，那我們就可以在原始碼裡面，把貓貓放到狗狗的上面。這樣一來，更多的人就可以在更小的螢幕上（內容折疊成一列）更快找到需要的內容。
 
diff --git a/files/zh-tw/web/http/cookies/index.md b/files/zh-tw/web/http/cookies/index.md
index 90cf53fe8903dc..d03aa17f196821 100644
--- a/files/zh-tw/web/http/cookies/index.md
+++ b/files/zh-tw/web/http/cookies/index.md
@@ -126,7 +126,7 @@ Set-Cookie: id=a3fWa; Expires=Thu, 21 Oct 2021 07:28:00 GMT; Secure; HttpOnly
 
 ##### Path 的默認值
 
-如果未設置 `Path` 屬性，則其默認值從設置 Cookie 的 URI 的[路徑](/zh-TW/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL#path_to_resource)計算，如下所示：
+如果未設置 `Path` 屬性，則其默認值從設置 Cookie 的 URI 的[路徑](/zh-TW/docs/Learn_web_development/Howto/Web_mechanics/What_is_a_URL#path_to_resource)計算，如下所示：
 
 - 如果路徑為空，不以 `"/"` 開頭，或者包含不超過一個 `"/"` 字符，則 `Path` 的默認值為 `"/"`。
 - 否則，`Path` 的默認值是從開始到最後一個 `"/"` 字符之前的路徑。
diff --git a/files/zh-tw/web/http/methods/connect/index.md b/files/zh-tw/web/http/methods/connect/index.md
index cb567cd8930c95..2606e11a4a7e4c 100644
--- a/files/zh-tw/web/http/methods/connect/index.md
+++ b/files/zh-tw/web/http/methods/connect/index.md
@@ -37,7 +37,7 @@ l10n:
     </tr>
     <tr>
       <th scope="row">
-        <a href="/zh-TW/docs/Learn/Forms">HTML 表單</a>中是否允許
+        <a href="/zh-TW/docs/Learn_web_development/Extensions/Forms">HTML 表單</a>中是否允許
       </th>
       <td>否</td>
     </tr>
diff --git a/files/zh-tw/web/http/methods/delete/index.md b/files/zh-tw/web/http/methods/delete/index.md
index fdca8b05a366e0..e207124b5cc4c0 100644
--- a/files/zh-tw/web/http/methods/delete/index.md
+++ b/files/zh-tw/web/http/methods/delete/index.md
@@ -33,7 +33,7 @@ l10n:
     </tr>
     <tr>
       <th scope="row">
-        <a href="/zh-TW/docs/Learn/Forms">HTML 表單</a>中是否允許
+        <a href="/zh-TW/docs/Learn_web_development/Extensions/Forms">HTML 表單</a>中是否允許
       </th>
       <td>否</td>
     </tr>
diff --git a/files/zh-tw/web/http/methods/get/index.md b/files/zh-tw/web/http/methods/get/index.md
index 1666533d3aac36..063667e1e2a4ca 100644
--- a/files/zh-tw/web/http/methods/get/index.md
+++ b/files/zh-tw/web/http/methods/get/index.md
@@ -35,7 +35,7 @@ l10n:
       <td>是</td>
     </tr>
     <tr>
-      <th scope="row"><a href="/zh-TW/docs/Learn/Forms">HTML 表單</a>中是否允許</th>
+      <th scope="row"><a href="/zh-TW/docs/Learn_web_development/Extensions/Forms">HTML 表單</a>中是否允許</th>
       <td>是</td>
     </tr>
   </tbody>
diff --git a/files/zh-tw/web/http/methods/head/index.md b/files/zh-tw/web/http/methods/head/index.md
index 34ef9ae8516d9f..914cd7f970db02 100644
--- a/files/zh-tw/web/http/methods/head/index.md
+++ b/files/zh-tw/web/http/methods/head/index.md
@@ -38,7 +38,7 @@ l10n:
     </tr>
     <tr>
       <th scope="row">
-        <a href="/zh-TW/docs/Learn/Forms">HTML 表單</a>中是否允許
+        <a href="/zh-TW/docs/Learn_web_development/Extensions/Forms">HTML 表單</a>中是否允許
       </th>
       <td>否</td>
     </tr>
diff --git a/files/zh-tw/web/http/methods/options/index.md b/files/zh-tw/web/http/methods/options/index.md
index 1fb2146417c5ac..0a7ae62ea53357 100644
--- a/files/zh-tw/web/http/methods/options/index.md
+++ b/files/zh-tw/web/http/methods/options/index.md
@@ -32,7 +32,7 @@ l10n:
       <td>否</td>
     </tr>
     <tr>
-      <th scope="row"><a href="/zh-TW/docs/Learn/Forms">HTML 表單</a>中是否允許</th>
+      <th scope="row"><a href="/zh-TW/docs/Learn_web_development/Extensions/Forms">HTML 表單</a>中是否允許</th>
       <td>否</td>
     </tr>
   </tbody>
diff --git a/files/zh-tw/web/http/methods/patch/index.md b/files/zh-tw/web/http/methods/patch/index.md
index 07c9f0423cb5dd..140d0c16cfe2be 100644
--- a/files/zh-tw/web/http/methods/patch/index.md
+++ b/files/zh-tw/web/http/methods/patch/index.md
@@ -45,7 +45,7 @@ l10n:
     </tr>
     <tr>
       <th scope="row">
-        <a href="/zh-TW/docs/Learn/Forms">HTML 表單</a>中是否允許
+        <a href="/zh-TW/docs/Learn_web_development/Extensions/Forms">HTML 表單</a>中是否允許
       </th>
       <td>否</td>
     </tr>
diff --git a/files/zh-tw/web/http/methods/post/index.md b/files/zh-tw/web/http/methods/post/index.md
index 500750f4d0be66..c7f0b9735fcdbc 100644
--- a/files/zh-tw/web/http/methods/post/index.md
+++ b/files/zh-tw/web/http/methods/post/index.md
@@ -49,7 +49,7 @@ l10n:
     </tr>
     <tr>
       <th scope="row">
-        <a href="/zh-TW/docs/Learn/Forms">HTML 表單</a>中是否允許
+        <a href="/zh-TW/docs/Learn_web_development/Extensions/Forms">HTML 表單</a>中是否允許
       </th>
       <td>是</td>
     </tr>
diff --git a/files/zh-tw/web/http/methods/put/index.md b/files/zh-tw/web/http/methods/put/index.md
index 9104ec3590dcc6..792c96ea0701c7 100644
--- a/files/zh-tw/web/http/methods/put/index.md
+++ b/files/zh-tw/web/http/methods/put/index.md
@@ -35,7 +35,7 @@ l10n:
     </tr>
     <tr>
       <th scope="row">
-        <a href="/zh-TW/docs/Learn/Forms">HTML 表單</a>中是否允許
+        <a href="/zh-TW/docs/Learn_web_development/Extensions/Forms">HTML 表單</a>中是否允許
       </th>
       <td>否</td>
     </tr>
diff --git a/files/zh-tw/web/http/methods/trace/index.md b/files/zh-tw/web/http/methods/trace/index.md
index 260c8978378916..12d56196124f14 100644
--- a/files/zh-tw/web/http/methods/trace/index.md
+++ b/files/zh-tw/web/http/methods/trace/index.md
@@ -36,7 +36,7 @@ l10n:
       <td>否</td>
     </tr>
     <tr>
-      <th scope="row"><a href="/zh-TW/docs/Learn/Forms">HTML 表單</a>中是否允許</th>
+      <th scope="row"><a href="/zh-TW/docs/Learn_web_development/Extensions/Forms">HTML 表單</a>中是否允許</th>
       <td>否</td>
     </tr>
   </tbody>
diff --git a/files/zh-tw/web/performance/index.md b/files/zh-tw/web/performance/index.md
index 08057a4b40708f..b0af4405eee1ea 100644
--- a/files/zh-tw/web/performance/index.md
+++ b/files/zh-tw/web/performance/index.md
@@ -155,7 +155,7 @@ HTML
 - [The `<source>` Element](/zh-TW/docs/Web/HTML/Element/source)
 - [The `<img> srcset` attribute](/zh-TW/docs/Web/HTML/Element/img#Attributes)
 
-  - [Responsive images](/zh-TW/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)
+  - [Responsive images](/zh-TW/docs/Web/HTML/Responsive_images)
 
 - [Preloading content with `rel="preload"`](/zh-TW/docs/Web/HTML/Attributes/rel/preload) - [https://w3c.github.io/preload/](https://w3c.github.io/preload/)
 
diff --git a/files/zh-tw/web/progressive_web_apps/index.md b/files/zh-tw/web/progressive_web_apps/index.md
index 2cbb3a1529dd01..bbe3ffe0853615 100644
--- a/files/zh-tw/web/progressive_web_apps/index.md
+++ b/files/zh-tw/web/progressive_web_apps/index.md
@@ -24,15 +24,15 @@ PWA 應該要可探索、可安裝、可連結、可獨立於網路、可漸進
 
 ## 技術教學
 
-- [用戶端儲存](/zh-TW/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage)：展示如何與何時使用 web storage、IndexedDB、service worker 的長篇教學。
+- [用戶端儲存](/zh-TW/docs/Learn_web_development/Extensions/Client-side_APIs/Client-side_storage)：展示如何與何時使用 web storage、IndexedDB、service worker 的長篇教學。
 - [使用 service worker](/zh-TW/docs/Web/API/Service_Worker_API/Using_Service_Workers)：涵蓋 Service Worker API 的深入教學
 - [使用 IndexedDB](/zh-TW/docs/Web/API/IndexedDB_API/Using_IndexedDB)：詳細解釋 IndexedDB 的基礎。
 - [使用 Web Storage API](/zh-TW/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API)：讓 Web storage API 變得簡單。
 - [Instant Loading Web Apps with An Application Shell Architecture](https://developer.chrome.com/blog/app-shell)：使用 App Shell 程式模式加快 app 的載入速度。
 - [使用 Push API](/zh-TW/docs/Web/API/Push_API)：了解 Web Push API 所需的一切。
 - [使用 Notifications API](/zh-TW/docs/Web/API/Notifications_API/Using_the_Notifications_API)：web notification 簡介。
-- [構建響應式設計](/zh-TW/docs/Learn/CSS/CSS_layout/Responsive_Design)：了解當今 app 佈局的關鍵——響應式設計——的基本。
-- [行動優先](/zh-TW/docs/Learn/CSS/CSS_layout/Responsive_Design)：建立響應式設計很常見，預設以行動裝置的佈局優先、接著設計更寬廣的佈局，是相當合理的。
+- [構建響應式設計](/zh-TW/docs/Learn_web_development/Core/CSS_layout/Responsive_Design)：了解當今 app 佈局的關鍵——響應式設計——的基本。
+- [行動優先](/zh-TW/docs/Learn_web_development/Core/CSS_layout/Responsive_Design)：建立響應式設計很常見，預設以行動裝置的佈局優先、接著設計更寬廣的佈局，是相當合理的。
 - [Add to home screen guide](/zh-TW/docs/Web/Progressive_web_apps/Guides/Making_PWAs_installable) — learn how your apps can take advantage of Add to home screen (A2HS).
 
 ## 工具
diff --git a/files/zh-tw/web/tutorials/index.md b/files/zh-tw/web/tutorials/index.md
index 2a803a6fcec1d6..ecd289b50a81c6 100644
--- a/files/zh-tw/web/tutorials/index.md
+++ b/files/zh-tw/web/tutorials/index.md
@@ -36,7 +36,7 @@ slug: Web/Tutorials
 
 - [HTML 表單](/zh-TW/docs/Learn_web_development/Extensions/Forms)
   - : 表單是網際網路一個非常重要的部分 - 這些涵蓋了網站互動所需的大部分功能，例如 : 註冊、登入、發送回饋，購買產品等。本文將幫助你開始創建客戶回饋表單。
-- **[給程式創作者快速載入 HTML 網頁的提示](/zh-TW/docs/Learn/HTML/Howto/Author_fast-loading_HTML_pages)**
+- **[給程式創作者快速載入 HTML 網頁的提示](/zh-TW/docs/Learn_web_development/Howto/Solve_HTML_problems/Author_fast-loading_HTML_pages)**
   - : 優化網頁，為使用者提供響應式網站，減少 web 服務器和 Internet 連線的負擔。
 
 ## CSS 教學
@@ -47,7 +47,7 @@ slug: Web/Tutorials
   - : CSS（層疊樣式表）是用於設置網頁樣式的編碼。 CSS Basics 將帶領你了解入門所需的內容。 我們將回答以下問題，例如：如何將文字設為黑色或紅色？ 如何讓我的內容顯示在螢幕上的這些地方？ 如何用背景圖片和顏色布置我的網頁？
 - [介紹 CSS](/zh-TW/docs/Learn_web_development/Core/Styling_basics)
   - : 本單元深入介紹 CSS 應用，包括選擇器和屬性，編寫 CSS 規則，將 CSS 應用於 HTML，如何指定 CSS 中的長度，顏色和其他單位，並列和繼承，框框模組基本知識和 CSS 除錯。
-- [樣式框](/zh-TW/docs/Learn/CSS/Building_blocks)
+- [樣式框](/zh-TW/docs/Learn_web_development/Core/Styling_basics)
   - : 接下來，我們來看看樣式框，這是建立網頁的基本步驟之一。 在本單元中，我們回顧一下框框模組，通過設置邊框和邊距，自定義背景顏色，圖像和其它以及酷炫的功能（如陰影和框上的濾鏡）來查看樣式框佈局。
 - [樣式文本](/zh-TW/docs/Learn_web_development/Core/Text_styling)
   - : 在此，我們看看文本樣式基礎，包括設置字體，粗體和斜體，線條和字母間距以及陰影和其他文本功能。 我們通過查看將自定義字體應用於頁面以及樣式列表和鏈接來完善模組。
diff --git a/files/zh-tw/webassembly/c_to_wasm/index.md b/files/zh-tw/webassembly/c_to_wasm/index.md
index 821bacb05e7ec7..16b68a7479ef85 100644
--- a/files/zh-tw/webassembly/c_to_wasm/index.md
+++ b/files/zh-tw/webassembly/c_to_wasm/index.md
@@ -60,7 +60,7 @@ slug: WebAssembly/C_to_Wasm
 現在只要使用一個支援 WebAssembly 的瀏覽器，加載產生的 `hello.html` 即可。自從 Firefox 52、Chrome 57、Edge 57 和 Opera 44 開始，已經預設啟用了 WebAssembly。
 
 > [!NOTE]
-> 如果你試圖直接從本機硬碟打開產生的 HTML 檔案（`hello.html`）（例如 `file://your_path/hello.html`），你會得到一個錯誤訊息，_`both async and sync fetching of the wasm failed`_。你需要藉由 HTTP 伺服器（`http://`）來執行你的 HTML 檔案——參見[如何設定本機測試伺服器？](/zh-TW/docs/Learn/Common_questions/Tools_and_setup/set_up_a_local_testing_server)來取得更多資訊。
+> 如果你試圖直接從本機硬碟打開產生的 HTML 檔案（`hello.html`）（例如 `file://your_path/hello.html`），你會得到一個錯誤訊息，_`both async and sync fetching of the wasm failed`_。你需要藉由 HTTP 伺服器（`http://`）來執行你的 HTML 檔案——參見[如何設定本機測試伺服器？](/zh-TW/docs/Learn_web_development/Howto/Tools_and_setup/set_up_a_local_testing_server)來取得更多資訊。
 
 如果一切順利，你應該可以在網頁上的 Emscripten 控制台和瀏覽器的 JavaScript 控制台中看到「Hello World」的輸出。