前端習作 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 程式碼。（困難）

📋 作答要點

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 屬性未指定