洛奇的邪惡組織手札

本篇將整合過去基本課程 HTML, CSS, Bootstrap, JS 相關知識進行經驗整合，動手設計簡單一頁式且具備 RWD 之網站設計。由於考量部分學員尚未接觸 JS 課程進度與基礎認知，將集中最後小節於完成後補充。

本章節的 Components 元件算是資訊量很大且結構複雜的單元，但也不用特別去背，只要知道有哪些功能可以選（複製貼上大法）加以利用去點綴網頁即可。

本章節先跳至較為基礎操作的 Utilities 通用類型（各種局部調整或快建立公式），再介紹 Helpers 工具（主要為一些常使用的輔助調整），以及，最後回到 Forms 表單（完整的表單互動系統）進行說明。

本系列為 Bootstrap 版本號 v5.0 教學文章，在接觸 Bootstrap 之前需要擁有一定的 HTML5/CSS3 觀念，才能理解 Bootstrap 的原理應用以及調整技巧，如果你另具備了 JS/JQ 的開發能力，那更方便進一步的使用並控制這些 Bootstrap 套件工具。

Node.js 是能夠在伺服器上面運行 JavaScript 的應用平台環境，透過 Node.js 提供的函式庫與執行環境能完成伺服器端服務，提供各種網路應用。本篇資源版本與環境如下：

• 主題教材：
  • Node.js 官方網站 版本 v14.15.3
  • NVM 版本 v0.37.2
  • NVM-windows 版本 v1.1.7
• IDE 編譯器：VScode v1.52.1
• 作業系統：Windows 10 NT

Ajax 是「Asynchronous JavaScript and XML」（非同步的 JavaScript 與 XML 技術）的縮寫。我們知道靜態網頁都是一次性同步 (Synchronous HTTP Requests) 的請求與加載，每次要更新一個小部分都需要重新載入網頁。而透過 Ajax 能將網頁像電腦應用程式，不需要重新加載網頁情況下就能透過瀏覽器偷偷跟伺服器取得資料，並透過 DOM 技術更新一小部分的畫面。伺服器對 Ajax 資料請求回應通常是以三種資料格式其中之一（HTML、XML、JSON）

本篇主要為強化之前的新手文章教學（包含 HTML、CSS、JavaScript) 的不足之處，提供一些觀念與語法上深入知識與應用技巧。本篇內容寫法極為簡略，建議完成基本課程的對象重新再接觸本篇文章。

本篇為提供 HTML/CSS 的 Code 敲打練習使用（採用 VSCode 進行編譯），練習採用國內技術技能檢定中心之網頁設計丙級術科項目之題組一 (17300-104301) 且修訂版本為 109/08/21，實際內容可能不符合實際術科考照電腦環境使用（考場公告僅提供 Dreamweaver 並未表明提供 VSCode 文字編譯軟體）。

VSCode 為 Microsoft 所提供的免費編譯器軟體，是近幾年市佔率蠻高的選擇。因此認真研究寫了一篇使用 VSCode 所需要會的技巧。而這些資訊大部分從官方文件就能找到，只有擴充模組就看行圈內的流行性話題了。

什麼是 GIT? 是一種將開發代碼過程的工作變得輕鬆的版本控制工具，藉由不斷生成快照的方式將過程記錄歷史起來。每當需要在不同的階段進行調整時能，有效的跳躍時間點進行修改與合併。另外當你屬於多人團隊進行開發專案時，能協助你溝通整合批次的加入代碼使作業更妥善運作。另外也包含了參與開源專案的共享與請求作業。

本篇適合沒有 GIT 基礎觀念的對象，同時一律採用 VSCode 環境的角度來學習操作 GIT。本篇介紹過程中，初期依賴 VSCode 的終端機功能來進行 GIT 指令練習與處理。後期透過 VSCode 進行圖形化操作使用。