從「需求」出發

當看到一個網站或想做一個功能時，先問自己：

有哪些元素？（HTML）

• 按鈕？表單？圖片？清單？
• 骨架清單

這些元素要長怎樣？（CSS）

• 排版？顏色？字體？大小？
• 美化介面

需要什麼互動？（JS）

• 點擊後要有反應嗎？
• 會動嗎？要存資料嗎？
• 行為規則

心智圖

[需求拆解]
├─ 資訊架構(有哪些區塊/元件？)
├─ 視覺/版型(怎麼排？手機到桌機的RWD？)
└─ 互動規格(誰觸發？回饋是什麼？要記住狀態嗎？)

→ [HTML骨架] 先放語意化標籤 + 可存取性(aria/label/role)
→ [CSS版型] 先排版(布局/間距) → 再細節(色彩/狀態/動畫)
→ [JS互動] 資料(state) 與 畫面(view) 分離：事件 → 更新state → render()
→ [驗收/優化] 無障礙(A11y)｜效能(少重排)｜相容性(漸進式增強)

1. 從 0 開始的工作順序

1. 先寫 HTML（語意化 + 能沒有 JS 也能閱讀）
2. 再寫 CSS（排好版、定義狀態 class 與變數）
3. 最後加 JS（事件委派、單一真實資料源 state、render 函式）

流程：事件 → 改 state → render() → 更新 UI/ARIA

2. 檔案結構 & 命名規範

project
  ├─ index.html
  ├─ styles
  │   └─ main.css
  └─ js
      └─ app.js

命名原則：
HTML：用語意化標籤（header/main/section/article/button），提供 aria-* 與 role
CSS：BEM 或簡潔功能化 class（如 .card, .card__title, .is-fav），建立 CSS 變數
JS：不要用 class 名稱當查找鉤子，改用 data-* 屬性（如 data-action="toggle-fav"、data-id="p01"）

3. 思考順序（邏輯地圖）

🔹 Step 1：HTML – 建立最小骨架

<div class="card">
  <h2>標題</h2>
  <p>內容文字</p>
  <button>點我</button>
</div>

🔹 Step 2：CSS – 美化與布局

「怎麼排」與「怎麼看」

.card {
  width: 300px;
  padding: 20px;
  border-radius: 12px;
  background-color: white;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

🔹 Step 3：JS – 增加互動

最後加上「動態行為」

document.querySelector("button")
  .addEventListener("click", () => {
    alert("你點到按鈕了！");
  });

4. 從 0 到網站上線的步驟

可以按照上面的邏輯思路一一嘗試

1. 需求拆解

就是先搞懂 要做什麼

例子：我要做一個「旅遊卡片網站」
拆成小問題：

• 頁面要有哪些區塊？（header、卡片區、footer）
• 使用者可以幹嘛？（點收藏、切換主題、搜尋）
• 有沒有需要存資料？（localStorage 存收藏紀錄）

邏輯重點：先想「功能清單」，不要急著寫程式

2. 畫 Wireframe（線框圖）

❖ 用紙、白板或線上工具，把畫面當方塊畫出來 ❖
例子：

[LOGO]     [Menu]
----------------------
[搜尋框]
[卡片] [卡片] [卡片]
----------------------
[Footer]

邏輯重點：這一步不是設計，而是「把腦袋裡的畫面變成地圖」。

3. HTML（結構）

把剛剛的框框翻譯成 HTML 標籤

<header>
  <h1>旅遊網站</h1>
  <nav>...</nav>
</header>

<main>
  <input type="search" placeholder="搜尋景點">
  <section class="card-list">...</section>
</main>

<footer>© 2025 旅遊網站</footer>

邏輯重點：HTML 是「骨架」，只管結構和語意，不碰樣式!!!

4. CSS（外觀）

❖ 先把東西排好，再加顏色裝飾 ❖

.card-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

:root {
  --accent: #f37769;
}

button.is-fav {
  background-color: var(--accent);
}

邏輯重點：

• 先排版再美化 → 不要一開始就玩顏色
• 用變數 → 方便之後改主題
• 狀態 class → .is-active 代表「狀態變了」

5. JS（互動）

讓畫面「動」起來。

// 狀態存資料
let state = {
  favorites: []
};

// 點擊事件
document.addEventListener("click", (e) => {
  if (e.target.matches(".fav-btn")) {
    let id = e.target.dataset.id;
    state.favorites.push(id);
    render();
  }
});

// 重繪畫面
function render() {
  console.log("目前收藏：", state.favorites);
}

邏輯重點：

• 狀態（state）決定畫面 → 不是亂改 HTML，而是改「資料」
• render() 重繪 → 保持乾淨邏輯，不會到處亂動
• 事件委派 → 綁在 document，不用一個按鈕一個監聽

6. 驗收

寫程式時，寫一小段要查看網站是否有如預期排版、功能是否正確，最後完工，再完整確認一次：

• 手機看得到嗎？（RWD）
• 只用鍵盤能操作嗎？（Tab/Enter）
• 顏色對比清楚嗎？（不會看不到文字）

7. 優化

讓網站跑更順：

• 圖片要壓縮，不要放 5MB 的
• 不要每次點擊就 DOM 操作一堆 → 用 class 切換比較快
• 動畫適度，照顧怕暈的人（prefers-reduced-motion）

學習心得

剛開始容易陷入「HTML 要先寫滿？還是 CSS 要先？」的困惑
實際上正確順序是：

• HTML 先打底 → 有骨架才能看效果
• CSS 上去調整 → 美觀與排版
• JS 再賦能 → 加入互動與邏輯

這樣分工，就不會一開始就亂掉◝(　ﾟ∀ ﾟ )◟

👉 最重要的不是記語法，而是 養成從需求出發 → 拆分到三者的思維✧◝(⁰▿⁰)◜✧