本單元簡介 CSS 中 FlexBox, Grid, RWD, 以及 Animation 的用法。

• FlexBox
• Grid
• RWD
• Animate

🎯 學習目標

• 了解 CSS 動畫（Animation） 的基本概念
• 學會使用 @keyframes 製作動畫
• 掌握 animation 相關屬性（duration, timing-function, iteration-count 等）
• 學會 transition 讓動畫更順滑
• 實作練習

🎯 學習目標

• 了解 CSS Grid 的基本概念
• 掌握 display: grid 的應用
• 學會 grid-template-columns 和 grid-template-rows 設定欄與列
• 使用 gap 調整間距
• 跨欄 (grid-column) 與跨列 (grid-row) 的用法
• 實作練習

🎯 學習目標

• 了解 響應式網頁設計（RWD） 的概念
• 學會使用 @media 媒體查詢
• 學會 流動布局 (width: 100%, max-width, vh/vw)
• 學會 彈性圖片 (img { max-width: 100% })
• 學會 Flexbox 與 Grid 來適應不同螢幕大小
• 完成實作練習：響應式導覽列與卡片設計

🎯 學習目標

• 了解 Flexbox 的基本概念
• 學會控制 主軸 (Main Axis) 和 交叉軸 (Cross Axis) 排列
• 熟悉 對齊、換行、子元素大小 的控制
• 實作練習

🔹 Flexbox 是什麼？

Flexbox（彈性盒子布局） 是 CSS 提供的一種 一維 排版技術，專門用來讓 子元素 在 水平方向或垂直方向 上 彈性排列。

📌 學習內容

• 了解 JavaScript 的基本語法
• 學習變數、運算符、條件判斷、迴圈等基礎概念
• 透過操作 DOM，讓 JavaScript 改變網頁內容
• 完成一個小練習，動手實作

1️⃣ JavaScript 簡介與環境設置

什麼是 JavaScript？

JavaScript 是一種 前端語言，主要用來操控 網頁互動，例如：
✅ 操控 HTML 和 CSS
✅ 監聽使用者行為（點擊、輸入）
✅ 進行網頁動態效果

📌 學習內容

🚀 Tailwind CSS 入門（使用 CDN）

📌 課程目標

• 了解 Tailwind CSS 是什麼
• 使用 CDN 快速載入 Tailwind CSS
• 學習 Tailwind 的基本概念與實作

1️⃣ 什麼是 Tailwind CSS？

📌 Tailwind CSS 簡介

Tailwind CSS 是一款 功能導向（Utility-First） 的 CSS 框架，透過「類別（class）」來控制樣式，讓開發者更快地設計頁面。

🎯 學習內容：

• 學習 CSS 的基礎語法
• 不同的樣式表會產生不同的頁面效果

CSS 語法

選擇器

• 元素選擇器 : 使用元素名稱，例如 h1, p, span...
• id 選擇器 : 在元素中設定 id="idname"，接著就可以使用 #idname 來選擇該元素，一般來說，元素名稱都是唯一的
• 類別選擇器 : 在元素中設定 class="clsname"，接著就可以使用 .clsname 來選擇該類別

🎯 學習內容：

• 學習 HTML 的基本元素

Headings

<h1>...<h6> : headings 1...6

🎯 學習內容：

• 學習 HTML 和 CSS 的基本概念與作用
• 學習在 HTML 中使用 CSS 的三種方式：行內（Inline）、內嵌（Internal）、外部（External）

1. HTML 與 CSS 基本概念

• HTML (HyperText Markup Language)：用於定義網頁的結構與內容，如文字、圖片、連結等。
• CSS (Cascading Style Sheets)：用於控制網頁的外觀與樣式，如顏色、字體、排版等。