學習內容：
1.響應式設計的概念： 在當今的數位時代，響應式網頁設計變得愈加重要。響應式設計旨在使網站能夠根據不同設備（如手機、平板和桌面）的螢幕大小自動調整佈局和內容顯示。透過響應式設計，無論用戶使用何種設備，都能獲得良好的使用體驗。

2.媒體查詢（Media Queries）： 媒體查詢是實現響應式設計的一種技術。它允許根據設備的特性（如螢幕寬度、解析度）應用不同的 CSS 樣式。學員將學習媒體查詢的基本語法，包括如何針對特定設備定義樣式。例如：

@media (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}

**3.流式布局（Fluid Layouts）：**流式布局是一種使用百分比單位和相對單位（如 vw 和 vh）來創建靈活的網頁佈局的方法。這種布局能夠隨著視窗的變化而自動調整大小，從而提高用戶體驗。例如，設定一個寬度為 100% 的容器，可以確保其在任何裝置上都能完全顯示。

探索如何使用百分比單位（%）和相對單位（如 vw, vh）來創建流式布局。
示例：設定寬度為 100% 的容器。

4.彈性盒子模型（Flexbox）： Flexbox 是一種強大的 CSS 佈局工具，適用於簡化一維佈局。學員將學習如何使用 Flexbox 來進行元素的排列和對齊。透過簡單的 CSS 代碼，可以創建靈活的佈局，實現元素間的空間分配。
介紹 Flexbox 的基本概念及其用法。
學習如何使用 Flexbox 進行佈局。

.container {
    display: flex;
    justify-content: space-between;
}

**5.網格布局（Grid Layout）：**CSS Grid 允許設計者創建二維的網頁布局。學員將學會如何使用 Grid 來設計複雜的佈局，使內容能夠在多個行和列中排列。
瞭解 CSS Grid 的基本原則和使用方法。
實作一個簡單的網格布局。

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

6.實作響應式網站範例：
實際操作：將先前學習的網站轉換為響應式設計。
測試網站在不同設備和瀏覽器中的顯示效果。

7.測試和調試：
學習如何使用開發者工具（DevTools）檢查和調試響應式網站。
實踐如何調整 CSS 以改善顯示效果。