前端習作 1（中文）

HTML, CSS, JS | 前端網站開發課程

問題 1：HTML & CSS

基礎 HTML 程式碼：

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Hello Cocoa!</title>
  <style>
    /* 問題1a 的 internal CSS 寫喺呢度 */
  </style>
</head>

<body>
  <h1>Brownies</h1>

  <img id="hero" src="./brownies.jpeg" alt="brownies">

  <p>請選擇配料！</p>

  <ul>
    <li class="topping">核桃 Walnut</li>
    <li class="topping">焦糖 Caramel</li>
    <li class="topping">海鹽 Sea Salt</li>
    <li class="topping">抹茶淋醬 Matcha Drizzle</li>
    <li class="topping">草莓 Strawberry</li>
  </ul>
</body>
</html>

說明：以上述 HTML 為基礎，回答問題 1 的所有子問題。

1a. 請以「內部樣式表（Internal CSS）」修改所有列表項目（list items）至以下樣式：（困難）

字型大小（Font size）：28px
內距（Padding）：4px
文字顏色（Text color）：saddlebrown
背景顏色（Background color）：beige

1b. 請列出任意兩個可以選取上述 HTML 中圖片 `brownies.jpeg` 的 CSS 選取器（selectors），並使用正確 CSS 語法。（中等）

問題 2：JavaScript

基礎 JavaScript 程式碼：

var toppings = ["核桃 Walnut", "焦糖 Caramel", "海鹽 Sea Salt", "抹茶淋醬 Matcha Drizzle", "草莓 Strawberry"];

說明：以上述編碼為基礎，回答問題 2 的所有子問題。

2a. 請寫出一行 JavaScript 編碼，提取陣列 `toppings` 中的元素 "抹茶淋醬 Matcha Drizzle"。（容易）

2b. 請用一個有效方法，把新元素 "Oreo" 加到陣列 `toppings` 的尾端。（容易）

2c. 請編寫一個 `for` 迴圈，順序遍歷 `toppings` 的所有元素，並把每個元素輸出到 console。（困難）

前端習作 2（中文）

HTML, CSS, JS | 前端網站開發課程

問題 1：HTML & CSS

基礎 HTML 程式碼：

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Hello Cocoa!</title>
  <style>
    /* 問題1a 的 internal CSS 寫喺呢度 */
  </style>
</head>

<body>
  <h1>訂購表格</h1>

  <p>請輸入你的訂購資料。</p>

  <form>
    <label for="customer">姓名：</label><br>
    <input type="text" id="customer" name="customer"><br>

    <label for="phone">電話：</label><br>
    <input type="tel" id="phone" name="phone"><br>

    <label for="notes">備註：</label><br>
    <textarea id="notes" rows="4"></textarea><br>

    <input type="submit" value="送出">
  </form>
</body>
</html>

說明：以上述 HTML 為基礎，回答問題 1 的所有子問題。

1a. 請以「內部樣式表（Internal CSS）」修改所有 label 至以下樣式：（困難）

字型大小（Font size）：18px
字型（Font family）：Georgia
文字顏色（Text color）：darkgreen

1b. 請只在 `<form>` 標籤加入一個屬性（attribute），令按下「送出」後，表單資料會送到名為 `/order.php` 的 API。（中等）

問題 2：JavaScript

基礎 JavaScript 程式碼：

let orders = [{
  Customer: "Alice",
  Phone: "91234567",
  Item: "Brownie Box"
},{
  Customer: "Ben",
  Phone: "93456789",
  Item: "Cookie Jar"
}];

說明：以上述編碼為基礎，回答問題 2 的所有子問題。

2a. 請寫出執行以下編碼後的結果（輸出值）：（容易）

orders[1]["Customer"];

2b. 請寫出一個有效方法，提取 `orders` 陣列中 Alice 的電話號碼。（容易）

2c. 請把以下資料加入 `orders` 陣列的尾端：（困難）

Customer：Cindy
Phone：95556666
Item：Matcha Bonbon

前端習作 3（中文）

HTML, CSS, JS | 前端網站開發課程

問題 1：HTML & CSS

基礎 HTML 程式碼：

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Product Gallery</title>
  <style>
    /* 問題1a 的 CSS 寫喺呢度 */
  </style>
</head>

<body>
  <div class="container">
    <h1>產品展示</h1>
    
    <div class="gallery">
      <div class="product">
        <img src="./product1.jpg" alt="Product 1">
        <h3>巧克力蛋糕</h3>
        <p class="price">HK$45</p>
      </div>
      
      <div class="product">
        <img src="./product2.jpg" alt="Product 2">
        <h3>草莓起司蛋糕</h3>
        <p class="price">HK$55</p>
      </div>
      
      <div class="product">
        <img src="./product3.jpg" alt="Product 3">
        <h3>檸檬蛋糕</h3>
        <p class="price">HK$50</p>
      </div>
    </div>
  </div>
</body>
</html>

說明：以上述 HTML 為基礎，回答問題 1 的所有子問題。

1a. 請使用 CSS 將 `.gallery` 容器設置為 3 列的網格佈局，並為 `.product` 添加以下樣式：（困難）

邊框（border）：1px solid #ddd
內距（padding）：16px
圓角（border-radius）：8px
背景顏色：#f9f9f9

1b. 請為 `.product` 內的 `img` 標籤設置寬度為 `100%` 和高度為 `auto`，使圖片響應式顯示。（容易）

問題 2：JavaScript

基礎 JavaScript 程式碼：

let products = [
  { name: "巧克力蛋糕", price: 45, quantity: 10 },
  { name: "草莓起司蛋糕", price: 55, quantity: 8 },
  { name: "檸檬蛋糕", price: 50, quantity: 12 }
];

說明：以上述編碼為基礎，回答問題 2 的所有子問題。

2a. 請寫出計算所有產品總值（價格 × 數量）的 JavaScript 程式碼。（困難）

2b. 請寫出找出價格最高的產品名稱的 JavaScript 程式碼。（中等）

2c. 請寫出一個函數，接收產品陣列和產品名稱，回傳該產品的價格。（中等）

前端習作 4（中文）

HTML, CSS, JS | 前端網站開發課程

問題 1：HTML & CSS

基礎 HTML 程式碼：

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Task List</title>
  <style>
    /* 問題1a 的 CSS 寫喺呢度 */
  </style>
</head>

<body>
  <div class="container">
    <h1>待辦事項</h1>
    
    <ul id="taskList">
      <li class="task completed">購買食材</li>
      <li class="task">準備廚房</li>
      <li class="task">製作蛋糕</li>
      <li class="task">裝飾</li>
    </ul>
  </div>
</body>
</html>

說明：以上述 HTML 為基礎，回答問題 1 的所有子問題。

1a. 請為 `.task.completed` 添加樣式以表示已完成（例如：文字加刪除線、改為灰色）。（中等）

1b. 請為 `.task` 添加 `hover` 偽類樣式，使其在滑鼠懸停時改變背景顏色和添加陰影。（中等）

問題 2：JavaScript

基礎 JavaScript 程式碼：

let tasks = [
  { id: 1, name: "購買食材", completed: true },
  { id: 2, name: "準備廚房", completed: false },
  { id: 3, name: "製作蛋糕", completed: false },
  { id: 4, name: "裝飾", completed: false }
];

說明：以上述編碼為基礎，回答問題 2 的所有子問題。

2a. 請寫出計算已完成任務數量的 JavaScript 程式碼。（容易）

2b. 請寫出一個函數，根據任務 id 標記該任務為已完成（修改 completed 為 true）。（困難）

2c. 請寫出篩選所有未完成任務的 JavaScript 程式碼。（中等）

前端習作 5（中文）

HTML, CSS, JS | 前端網站開發課程

問題 1：HTML & CSS

基礎 HTML 程式碼：

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>User Profile</title>
  <style>
    /* 問題1a 的 CSS 寫喺呢度 */
  </style>
</head>

<body>
  <div class="profile-card">
    <div class="header"></div>
    <img class="avatar" src="./avatar.jpg" alt="Avatar">
    <h1>John Doe</h1>
    <p class="title">Web Developer</p>
    <p class="bio">熱愛前端開發和設計</p>
    <button class="follow-btn">Follow</button>
  </div>
</body>
</html>

說明：以上述 HTML 為基礎，回答問題 1 的所有子問題。

1a. 請使用 CSS 創建一個居中的卡片佈局，包括：（困難）

.profile-card 寬度：300px，邊框圓角，陰影
.header 高度：120px，漸層背景（從藍色到紫色）
.avatar 圓形圖片，邊框

1b. 請為 `.follow-btn` 添加樣式和 `hover` 效果，使其看起來像一個可互動的按鈕。（中等）

問題 2：JavaScript

基礎 JavaScript 程式碼：

let users = [
  { id: 1, name: "Alice", followers: 150, following: 80 },
  { id: 2, name: "Bob", followers: 200, following: 120 },
  { id: 3, name: "Charlie", followers: 180, following: 100 }
];

說明：以上述編碼為基礎，回答問題 2 的所有子問題。

2a. 請寫出找出粉絲數最多的用戶的 JavaScript 程式碼。（中等）

2b. 請寫出計算所有用戶的平均粉絲數的 JavaScript 程式碼。（困難）

2c. 請寫出一個函數，根據用戶名稱搜索並回傳該用戶的完整資訊。（困難）

前端習作 6（中文）

HTML, CSS, JS | 前端網站開發課程

問題 1：HTML & CSS

基礎 HTML 程式碼：

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Contact Form</title>
  <style>
    /* 問題1a 的 CSS 寫喺呢度 */
  </style>
</head>

<body>
  <div class="container">
    <h1>聯絡我們</h1>
    
    <form id="contactForm">
      <label for="name">姓名：</label><br>
      <input type="text" id="name" name="name" required><br>

      <label for="email">電郵：</label><br>
      <input type="email" id="email" name="email" required><br>

      <label for="message">訊息：</label><br>
      <textarea id="message" name="message" rows="5"></textarea><br>

      <button type="submit">送出</button>
    </form>
  </div>
</body>
</html>

說明：以上述 HTML 為基礎，回答問題 1 的所有子問題。

1a. 請為表單添加 `method` 和 `action` 屬性。使用 POST 方法並設置 action 為 `/api/contact`。（中等）

1b. 請為 `button` 添加以下樣式：（中等）

背景顏色：#3b82f6
文字顏色：white
內距：12px 24px
邊框：none
圓角：6px
游標：pointer

問題 2：JavaScript

基礎 JavaScript 程式碼：

let contacts = [
  { id: 1, name: "Alice", email: "alice@example.com", subject: "Question" },
  { id: 2, name: "Bob", email: "bob@example.com", subject: "Feedback" },
  { id: 3, name: "Charlie", email: "charlie@example.com", subject: "Support" }
];

說明：以上述編碼為基礎，回答問題 2 的所有子問題。

2a. 請寫出驗證電郵格式的 JavaScript 程式碼（檢查是否包含 @ 和 .）。（困難）

2b. 請寫出一個函數，將新的聯絡資訊物件添加到 contacts 陣列中。（中等）

2c. 請寫出根據 subject 篩選出所有 "Support" 類型的聯絡信息的 JavaScript 程式碼。（困難）

前端習作 7（中文）

HTML 基礎標籤 | 前端網站開發課程

問題 1：HTML 結構

1a. 請列出 HTML 文件的基本結構，包含以下必要標籤的正確順序：（容易）

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>
<body>

1b. 請解釋以下 HTML 標籤的用途：（容易）

<header>
<nav>
<main>
<article>
<section>
<aside>
<footer>

問題 2：HTML 實踐

場景：建立一個簡單的部落格頁面結構

2a. 請寫出一個包含 `<header>`、`<nav>`、`<main>` 和 `<footer>` 的基本 HTML 結構。（中等）

2b. 在 `<main>` 內添加一個 `<article>` 標籤，包含以下元素：（中等）

文章標題（<h1>）
發佈日期（<time> 標籤）
文章內容（<p> 標籤）
作者資訊（<p> 標籤）

2c. 請分別使用 `<strong>` 和 `<em>` 標籤標記以下文字：「這是重要且強調的內容」。（容易）

前端習作 8（中文）

CSS 選擇器與基本樣式 | 前端網站開發課程

問題 1：CSS 選擇器

基礎 HTML：

<div class="container">
  <p id="intro">介紹段落</p>
  <p class="highlight">重要段落</p>
  <p>普通段落</p>
</div>

1a. 請寫出選擇 `id="intro"` 元素的 CSS 選擇器。（容易）

1b. 請寫出選擇所有 class 為 `highlight` 的元素的 CSS 選擇器。（容易）

1c. 請寫出選擇 `.container` 內所有 `<p>` 標籤的 CSS 選擇器（至少兩種方式）。（中等）

問題 2：CSS 文字樣式

基礎 HTML：

<div class="text-demo">
  <p class="title">標題文字</p>
  <p class="content">內容文字</p>
</div>

2a. 請為 `.title` 添加以下樣式：（中等）

字型大小：32px
字型：Arial
字型粗度：bold
文字顏色：#2c3e50
行高：1.5

2b. 請為 `.content` 添加以下樣式：（中等）

字型大小：16px
文字顏色：#555
字母間距：0.5px
文字對齐：justify

2c. 請寫出讓文字產生陰影效果的 CSS 屬性和值。（困難）

前端習作 9（中文）

CSS 盒模型 | 前端網站開發課程

問題 1：盒模型概念

1a. 請解釋 CSS 盒模型（Box Model）的四個部分。（容易）

Content（內容）
Padding（內距）
Border（邊框）
Margin（外邊距）

1b. 請解釋 `box-sizing: border-box;` 和 `box-sizing: content-box;` 的區別。（中等）

問題 2：盒模型實踐

基礎 HTML：

<div class="box">
  <p>內容區域</p>
</div>

2a. 請為 `.box` 添加以下樣式：（中等）

寬度：300px
邊框：2px solid #333
內距：20px
外邊距：15px
背景顏色：#f0f0f0

2b. 請寫出將 `.box` 寬度設為 100%，且包含邊框和內距在寬度計算內的 CSS 程式碼。（困難）

2c. 請解釋邊距合併（Margin Collapsing）的概念，並舉例說明。（困難）

前端習作 10（中文）

CSS 佈局（Flexbox 和 Grid） | 前端網站開發課程

問題 1：Flexbox 佈局

基礎 HTML：

<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
</div>

1a. 請為 `.flex-container` 設置 Flexbox 佈局，使子元素水平排列。（容易）

1b. 請添加以下 Flexbox 屬性到 `.flex-container`：（中等）

主軸對齐：center（justify-content）
側軸對齐：center（align-items）
間距：20px（gap）

1c. 請為 `.flex-item` 設置 `flex: 1;`，解釋其含義。（困難）

問題 2：Grid 佈局

基礎 HTML：

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
</div>

2a. 請為 `.grid-container` 設置 Grid 佈局，將子元素排列為 3 列。（中等）

2b. 請設置行間距為 15px，列間距為 20px。（中等）

2c. 請解釋 `grid-template-columns: repeat(3, 1fr);` 的含義。（困難）

前端習作 11（中文）

JavaScript 資料型態 | 前端網站開發課程

問題 1：資料型態識別

1a. 請列出 JavaScript 的基本資料型態，並舉例說明。（容易）

1b. 請分別寫出以下資料型態的變數宣告：（容易）

字串（String）：變數名為 name，值為 "John"
數字（Number）：變數名為 age，值為 25
布林值（Boolean）：變數名為 isActive，值為 true
空值（Null）：變數名為 data
未定義（Undefined）：變數名為 result

問題 2：型態轉換

2a. 請使用 `typeof` 操作符，分別檢查以下變數的資料型態：（容易）

let x = 42;
let y = "hello";
let z = true;

2b. 請寫出將字串 `"123"` 轉換為數字的 JavaScript 程式碼（至少兩種方式）。（中等）

2c. 請解釋 JavaScript 的型態強轉（Type Coercion）並舉例說明。（困難）

前端習作 12（中文）

JavaScript 運算符與流程控制 | 前端網站開發課程

問題 1：運算符

1a. 請寫出以下運算符的運算結果：（容易）

10 + 5;
10 - 5;
10 * 5;
10 / 5;
10 % 3;
2 ** 3;

1b. 請解釋比較運算符的區別，並舉例說明：（中等）

== 和 ===
!= 和 !==

1c. 請寫出使用邏輯運算符（`&&`, `||`, `!`）的三個例子。（中等）

問題 2：流程控制

場景：根據分數判斷成績等級

2a. 請寫出 `if...else` 語句，根據分數變數 `score` 判斷：（中等）

score >= 80：輸出 "A"
score >= 70：輸出 "B"
score >= 60：輸出 "C"
否則：輸出 "F"

2b. 請使用 `switch` 語句改寫上述邏輯（根據成績等級輸出對應信息）。（困難）

2c. 請寫出一個三元運算符（Ternary Operator）的例子，判斷一個數字是奇數還是偶數。（中等）

前端習作 13（中文）

JavaScript 函數 | 前端網站開發課程

問題 1：函數宣告和呼叫

1a. 請寫出一個函數 `greet(name)`，接收一個名字參數，輸出「Hello, [name]!」。（容易）

1b. 請寫出一個函數 `add(a, b)`，計算兩個數的和並回傳結果。（容易）

1c. 請解釋函數宣告（Function Declaration）和函數表達式（Function Expression）的區別。（困難）

問題 2：進階函數概念

2a. 請寫出一個高階函數（Higher-Order Function），接收另一個函數作為參數。（困難）

2b. 請寫出一個使用預設參數的函數 `multiply(a, b = 1)`。（中等）

2c. 請寫出一個箭頭函數（Arrow Function）版本的 `add()` 函數。（中等）

前端習作 14（中文）

JavaScript 字串與陣列方法 | 前端網站開發課程

問題 1：字串方法

基礎變數：

let str = "Hello World";

1a. 請寫出以下字串方法的結果：（容易）

str.length
str.toUpperCase()
str.toLowerCase()
str.indexOf("o")
str.substring(0, 5)

1b. 請使用字串方法，將字串 "hello world" 轉換為 "Hello World"。（中等）

1c. 請解釋 `split()` 和 `join()` 方法的作用並舉例。（困難）

問題 2：陣列方法

基礎陣列：

let numbers = [1, 2, 3, 4, 5];

2a. 請寫出以下陣列方法的結果：（容易）

numbers.length
numbers[0]
numbers[numbers.length - 1]
numbers.indexOf(3)

2b. 請使用 `map()` 方法，將陣列中的每個元素乘以 2。（中等）

2c. 請使用 `filter()` 方法，篩選出陣列中所有大於 3 的數字。（困難）

前端習作 15（中文）

JavaScript DOM 操作 | 前端網站開發課程

問題 1：DOM 選擇

基礎 HTML：

<div id="main">
  <p class="intro">簡介</p>
  <p class="intro">更多內容</p>
  <button id="btn">點擊</button>
</div>

1a. 請寫出以下 DOM 選擇方法：（容易）

根據 id 選擇元素
根據 class 選擇元素
根據標籤名選擇元素

1b. 請寫出 `querySelector()` 和 `querySelectorAll()` 的區別。（中等）

問題 2：DOM 修改

2a. 請寫出修改元素內容的 JavaScript 程式碼（至少兩種方式）。（中等）

2b. 請寫出為按鈕添加點擊事件的程式碼，點擊時輸出 "Button clicked!"。（中等）

2c. 請寫出動態創建一個新元素並添加到 DOM 的程式碼。（困難）

前端習作 16（中文）

HTML 表單 | 前端網站開發課程

問題 1：表單結構

1a. 請列出常見的表單輸入類型和它們的用途：（容易）

type="text"
type="password"
type="email"
type="number"
type="checkbox"
type="radio"
type="date"
type="submit"

1b. 請寫出一個包含以下元素的登錄表單：（中等）

郵箱輸入框（type="email"）
密碼輸入框（type="password"）
記住密碼複選框（type="checkbox"）
登錄按鈕（type="submit"）

問題 2：表單驗證

基礎 HTML：

<form id="registerForm">
  <input type="text" id="username" name="username" required>
  <input type="email" id="email" name="email" required>
  <button type="submit">提交</button>
</form>

2a. 請解釋以下 HTML5 表單屬性的作用：（容易）

required
pattern
minlength 和 maxlength
disabled

2b. 請寫出 JavaScript 程式碼，驗證使用者名稱至少為 5 個字元。（中等）

2c. 請寫出在表單提交前驗證所有必填欄位的 JavaScript 程式碼。（困難）

前端習作 17（中文）

CSS 漸層與動畫 | 前端網站開發課程

問題 1：CSS 漸層

1a. 請寫出線性漸層（Linear Gradient）的 CSS 程式碼，從紅色漸變為藍色。（中等）

1b. 請寫出徑向漸層（Radial Gradient）的 CSS 程式碼。（中等）

1c. 請解釋漸層中 `to right`、`45deg` 等參數的含義。（困難）

問題 2：CSS 動畫和過渡

基礎 HTML：

<div class="box"></div>

2a. 請使用 CSS `transition` 屬性，使盒子在 1 秒內平滑地改變寬度。（中等）

2b. 請寫出 `@keyframes` 動畫，實現盒子從左邊滑入右邊的動畫效果。（困難）

2c. 請寫出為元素添加 `animation` 屬性的完整 CSS 程式碼，包括動畫名稱、持續時間、延遲時間和重複次數。（困難）

前端習作 18（中文）

JavaScript 物件與 JSON | 前端網站開發課程

問題 1：物件創建和操作

1a. 請寫出創建一個表示學生的物件的 JavaScript 程式碼，包含以下屬性：（容易）

name：姓名
age：年齡
grade：班級
gpa：平均績點

1b. 請寫出訪問物件屬性的三種方式，並解釋區別。（中等）

1c. 請寫出為物件添加新屬性和刪除屬性的 JavaScript 程式碼。（中等）

問題 2：JSON

2a. 請解釋 JSON 的格式規範和它與 JavaScript 物件的區別。（中等）

2b. 請寫出將 JavaScript 物件轉換為 JSON 字串的程式碼。（容易）

2c. 請寫出將 JSON 字串解析為 JavaScript 物件的程式碼。（容易）

📋 作答要點

HTML & CSS 部分：

CSS 選擇器（class、id、element）的正確語法
CSS 樣式規則（font-size、padding、color、background-color）
HTML 表單屬性（action、method、id、name）的作用

JavaScript 部分：

陣列索引訪問語法：array[index]
陣列添加元素方法：push()
對象屬性訪問：obj["property"] 或 obj.property
for 迴圈語法和 console.log() 輸出

常見錯誤：

遺漏分號或括號
CSS 選擇器語法錯誤
陣列/對象索引超出範圍
表單 action 屬性未指定

前端習作 1（中文）

問題 1：HTML & CSS

1a. 請以「內部樣式表（Internal CSS）」修改所有列表項目（list items）至以下樣式：（困難）

1b. 請列出任意兩個可以選取上述 HTML 中圖片 brownies.jpeg 的 CSS 選取器（selectors），並使用正確 CSS 語法。（中等）

問題 2：JavaScript

2a. 請寫出一行 JavaScript 編碼，提取陣列 toppings 中的元素 "抹茶淋醬 Matcha Drizzle"。（容易）

2b. 請用一個有效方法，把新元素 "Oreo" 加到陣列 toppings 的尾端。（容易）

2c. 請編寫一個 for 迴圈，順序遍歷 toppings 的所有元素，並把每個元素輸出到 console。（困難）

前端習作 2（中文）

問題 1：HTML & CSS

1a. 請以「內部樣式表（Internal CSS）」修改所有 label 至以下樣式：（困難）

1b. 請只在 <form> 標籤加入一個屬性（attribute），令按下「送出」後，表單資料會送到名為 /order.php 的 API。（中等）

問題 2：JavaScript

2a. 請寫出執行以下編碼後的結果（輸出值）：（容易）

2b. 請寫出一個有效方法，提取 orders 陣列中 Alice 的電話號碼。（容易）

2c. 請把以下資料加入 orders 陣列的尾端：（困難）

前端習作 3（中文）

問題 1：HTML & CSS

1a. 請使用 CSS 將 .gallery 容器設置為 3 列的網格佈局，並為 .product 添加以下樣式：（困難）

1b. 請為 .product 內的 img 標籤設置寬度為 100% 和高度為 auto，使圖片響應式顯示。（容易）

問題 2：JavaScript

2a. 請寫出計算所有產品總值（價格 × 數量）的 JavaScript 程式碼。（困難）

2b. 請寫出找出價格最高的產品名稱的 JavaScript 程式碼。（中等）

2c. 請寫出一個函數，接收產品陣列和產品名稱，回傳該產品的價格。（中等）

前端習作 4（中文）

問題 1：HTML & CSS

1a. 請為 .task.completed 添加樣式以表示已完成（例如：文字加刪除線、改為灰色）。（中等）

1b. 請為 .task 添加 hover 偽類樣式，使其在滑鼠懸停時改變背景顏色和添加陰影。（中等）

問題 2：JavaScript

2a. 請寫出計算已完成任務數量的 JavaScript 程式碼。（容易）

2b. 請寫出一個函數，根據任務 id 標記該任務為已完成（修改 completed 為 true）。（困難）

2c. 請寫出篩選所有未完成任務的 JavaScript 程式碼。（中等）

前端習作 5（中文）

問題 1：HTML & CSS

1a. 請使用 CSS 創建一個居中的卡片佈局，包括：（困難）

1b. 請為 .follow-btn 添加樣式和 hover 效果，使其看起來像一個可互動的按鈕。（中等）

問題 2：JavaScript

2a. 請寫出找出粉絲數最多的用戶的 JavaScript 程式碼。（中等）

2b. 請寫出計算所有用戶的平均粉絲數的 JavaScript 程式碼。（困難）

2c. 請寫出一個函數，根據用戶名稱搜索並回傳該用戶的完整資訊。（困難）

前端習作 6（中文）

問題 1：HTML & CSS

1a. 請為表單添加 method 和 action 屬性。使用 POST 方法並設置 action 為 /api/contact。（中等）

1b. 請為 button 添加以下樣式：（中等）

問題 2：JavaScript

2a. 請寫出驗證電郵格式的 JavaScript 程式碼（檢查是否包含 @ 和 .）。（困難）

2b. 請寫出一個函數，將新的聯絡資訊物件添加到 contacts 陣列中。（中等）

2c. 請寫出根據 subject 篩選出所有 "Support" 類型的聯絡信息的 JavaScript 程式碼。（困難）

前端習作 7（中文）

問題 1：HTML 結構

1a. 請列出 HTML 文件的基本結構，包含以下必要標籤的正確順序：（容易）

1b. 請解釋以下 HTML 標籤的用途：（容易）

問題 2：HTML 實踐

2a. 請寫出一個包含 <header>、<nav>、<main> 和 <footer> 的基本 HTML 結構。（中等）

2b. 在 <main> 內添加一個 <article> 標籤，包含以下元素：（中等）

2c. 請分別使用 <strong> 和 <em> 標籤標記以下文字：「這是 重要 且 強調 的內容」。（容易）

前端習作 8（中文）

問題 1：CSS 選擇器

1a. 請寫出選擇 id="intro" 元素的 CSS 選擇器。（容易）

1b. 請寫出選擇所有 class 為 highlight 的元素的 CSS 選擇器。（容易）

1c. 請寫出選擇 .container 內所有 <p> 標籤的 CSS 選擇器（至少兩種方式）。（中等）

問題 2：CSS 文字樣式

2a. 請為 .title 添加以下樣式：（中等）

2b. 請為 .content 添加以下樣式：（中等）

2c. 請寫出讓文字產生陰影效果的 CSS 屬性和值。（困難）

前端習作 9（中文）

問題 1：盒模型概念

1a. 請解釋 CSS 盒模型（Box Model）的四個部分。（容易）

1b. 請解釋 box-sizing: border-box; 和 box-sizing: content-box; 的區別。（中等）

問題 2：盒模型實踐

2a. 請為 .box 添加以下樣式：（中等）

2b. 請寫出將 .box 寬度設為 100%，且包含邊框和內距在寬度計算內的 CSS 程式碼。（困難）

2c. 請解釋邊距合併（Margin Collapsing）的概念，並舉例說明。（困難）

前端習作 10（中文）

問題 1：Flexbox 佈局

1a. 請為 .flex-container 設置 Flexbox 佈局，使子元素水平排列。（容易）

1b. 請添加以下 Flexbox 屬性到 .flex-container：（中等）

1c. 請為 .flex-item 設置 flex: 1;，解釋其含義。（困難）

問題 2：Grid 佈局

2a. 請為 .grid-container 設置 Grid 佈局，將子元素排列為 3 列。（中等）

1b. 請列出任意兩個可以選取上述 HTML 中圖片 `brownies.jpeg` 的 CSS 選取器（selectors），並使用正確 CSS 語法。（中等）

2a. 請寫出一行 JavaScript 編碼，提取陣列 `toppings` 中的元素 "抹茶淋醬 Matcha Drizzle"。（容易）

2b. 請用一個有效方法，把新元素 "Oreo" 加到陣列 `toppings` 的尾端。（容易）

2c. 請編寫一個 `for` 迴圈，順序遍歷 `toppings` 的所有元素，並把每個元素輸出到 console。（困難）

1b. 請只在 `<form>` 標籤加入一個屬性（attribute），令按下「送出」後，表單資料會送到名為 `/order.php` 的 API。（中等）

2b. 請寫出一個有效方法，提取 `orders` 陣列中 Alice 的電話號碼。（容易）

2c. 請把以下資料加入 `orders` 陣列的尾端：（困難）

1a. 請使用 CSS 將 `.gallery` 容器設置為 3 列的網格佈局，並為 `.product` 添加以下樣式：（困難）

1b. 請為 `.product` 內的 `img` 標籤設置寬度為 `100%` 和高度為 `auto`，使圖片響應式顯示。（容易）

1a. 請為 `.task.completed` 添加樣式以表示已完成（例如：文字加刪除線、改為灰色）。（中等）

1b. 請為 `.task` 添加 `hover` 偽類樣式，使其在滑鼠懸停時改變背景顏色和添加陰影。（中等）

1b. 請為 `.follow-btn` 添加樣式和 `hover` 效果，使其看起來像一個可互動的按鈕。（中等）

1a. 請為表單添加 `method` 和 `action` 屬性。使用 POST 方法並設置 action 為 `/api/contact`。（中等）

1b. 請為 `button` 添加以下樣式：（中等）

2a. 請寫出一個包含 `<header>`、`<nav>`、`<main>` 和 `<footer>` 的基本 HTML 結構。（中等）

2b. 在 `<main>` 內添加一個 `<article>` 標籤，包含以下元素：（中等）

2c. 請分別使用 `<strong>` 和 `<em>` 標籤標記以下文字：「這是重要且強調的內容」。（容易）

1a. 請寫出選擇 `id="intro"` 元素的 CSS 選擇器。（容易）

1b. 請寫出選擇所有 class 為 `highlight` 的元素的 CSS 選擇器。（容易）

1c. 請寫出選擇 `.container` 內所有 `<p>` 標籤的 CSS 選擇器（至少兩種方式）。（中等）

2a. 請為 `.title` 添加以下樣式：（中等）

2b. 請為 `.content` 添加以下樣式：（中等）

1b. 請解釋 `box-sizing: border-box;` 和 `box-sizing: content-box;` 的區別。（中等）

2a. 請為 `.box` 添加以下樣式：（中等）

2b. 請寫出將 `.box` 寬度設為 100%，且包含邊框和內距在寬度計算內的 CSS 程式碼。（困難）

1a. 請為 `.flex-container` 設置 Flexbox 佈局，使子元素水平排列。（容易）

1b. 請添加以下 Flexbox 屬性到 `.flex-container`：（中等）

1c. 請為 `.flex-item` 設置 `flex: 1;`，解釋其含義。（困難）

2a. 請為 `.grid-container` 設置 Grid 佈局，將子元素排列為 3 列。（中等）

2c. 請解釋 `grid-template-columns: repeat(3, 1fr);` 的含義。（困難）

2a. 請使用 `typeof` 操作符，分別檢查以下變數的資料型態：（容易）

2b. 請寫出將字串 `"123"` 轉換為數字的 JavaScript 程式碼（至少兩種方式）。（中等）

1c. 請寫出使用邏輯運算符（`&&`, `||`, `!`）的三個例子。（中等）

2a. 請寫出 `if...else` 語句，根據分數變數 `score` 判斷：（中等）

2b. 請使用 `switch` 語句改寫上述邏輯（根據成績等級輸出對應信息）。（困難）

1a. 請寫出一個函數 `greet(name)`，接收一個名字參數，輸出「Hello, [name]!」。（容易）

1b. 請寫出一個函數 `add(a, b)`，計算兩個數的和並回傳結果。（容易）

2b. 請寫出一個使用預設參數的函數 `multiply(a, b = 1)`。（中等）

2c. 請寫出一個箭頭函數（Arrow Function）版本的 `add()` 函數。（中等）

1c. 請解釋 `split()` 和 `join()` 方法的作用並舉例。（困難）

2b. 請使用 `map()` 方法，將陣列中的每個元素乘以 2。（中等）

2c. 請使用 `filter()` 方法，篩選出陣列中所有大於 3 的數字。（困難）

1b. 請寫出 `querySelector()` 和 `querySelectorAll()` 的區別。（中等）

1c. 請解釋漸層中 `to right`、`45deg` 等參數的含義。（困難）

2a. 請使用 CSS `transition` 屬性，使盒子在 1 秒內平滑地改變寬度。（中等）

2b. 請寫出 `@keyframes` 動畫，實現盒子從左邊滑入右邊的動畫效果。（困難）

2c. 請寫出為元素添加 `animation` 屬性的完整 CSS 程式碼，包括動畫名稱、持續時間、延遲時間和重複次數。（困難）