Day 29：部署到 GitHub Pages，讓網站上線 流程 前端打包：npm run build（Vite/React 請設定 base） 推上 Git...
目標：做出首頁 Hero、導覽列、作品卡片、頁尾；串接留言 API（或先以假資料渲染）。 前端要點（任一技術棧皆可） RWD：Container 寬度、Gri...
目標：完成互動式個人網站資訊架構(IA)、導覽設計、版型草圖、資料模型；規劃留言板 / 註冊登入 Demo 的後端 API。 成品清單 網站資訊架構(頁面/區...
正確載入 Google Fonts（效能友善） HTML <head> 建議寫法 <!-- 提前連線，減少 DNS/SSL 延遲 --&g...
待辦清單專案 (新增 / 刪除 / 儲存待辦) HTML 結構 <h1>待辦清單</h1> <input type="...
LocalStorage 入門（儲存與讀取） 為什麼需要儲存資料？ 在前端網頁開發裡，通常使用者輸入的資料在「重新整理網頁」後就會消失。例如： 你在輸入框打...
實作 API 範例：顯示即時天氣資料 選擇天氣 API這裡用 OpenWeatherMap API（免費，常用練習 API）：註冊後可以拿到一個 API Ke...
API 是什麼？用 Fetch 抓公開 APIAPI 就像是一個「餐廳服務生」：你（前端） → 下訂單（發出請求 Request）。廚房（後端） → 做菜（處理...
7) 鍵盤與可近用性（A11y） 元素不只要能 click，也要能用鍵盤操作（Enter / Space）。 使用 role="button"...
1) 事件監聽到底是什麼？ 瀏覽器在使用者操作或生命週期發生時，會產生 Event 物件（如 MouseEvent、KeyboardEvent、InputEve...
表單驗證小專案 — Email 檢查功能需求 使用者輸入 Email 按下送出 → 檢查格式是否正確 如果錯誤 → 顯示紅色錯誤訊息 如果正確 → 顯示綠色成...
操作屬性 (Attributes) HTML 標籤上會有屬性，例如： <img id="photo" src="a.jpg&...
為什麼要動態建立元素？ HTML 預設是靜態的，寫死在檔案裡。但如果我們要： 新增留言 加入待辦清單項目 API 抓回來的資料顯示在網頁上就需要 JavaScr...
DOM 是什麼？ DOM（Document Object Model）是一種把 HTML 文件轉換成「樹狀結構」的模型。簡單來說，瀏覽器會把你的網頁轉成一顆「樹...
1) 事件是什麼？ 事件 (Event) 是「發生了某件事」的通知，例如：使用者點擊、輸入文字、捲動頁面、表單送出、圖片載入完成…JS 透過監聽器 (Event...
物件 Object 與 key-value物件就是一組「鍵 (key)」與「值 (value)」的集合。你可以把它想像成「字典」或「小資料庫」。 建立物件nam...
陣列 Array 與常見方法 陣列用 [] 建立，元素之間用，分隔。 陣列可以存 任何型態。 陣列是「有順序的集合」，每個值都有一個「索引 (inde...
函式 function 與箭頭函式函式的角色就像「一個小工廠」，輸入東西，經過加工，輸出結果。 傳統函式宣告 function greet(name) {...
JavaScript 語法入門：變數、資料型態JavaScript 是讓網頁能夠互動的程式語言。第一步就是 變數（variable）與 資料型態。 變數宣告方式...
Flexbox 與 Grid 網頁排版最常用的是 Flexbox 和 Grid。 Flexbox 的特點： 適合「一條線」的排列（橫排或直排）。 對齊與間距設...
盒模型 (Box Model)在網頁設計裡，每個元素都是一個「盒子」，包含： content：內容 padding：內距 border：邊框 margin：外距...
CSS 入門：選擇器、顏色、字型 CSS (Cascading Style Sheets) 負責「外觀」。 CSS 引入方式 行內樣式 <p style=...
表格與表單基礎HTML 語意化與結構 HTML 除了基本的 <div>，還有「語意化標籤 (semantic tags)」，可以讓網頁結構更清晰，也...
常見標籤：文字、圖片、連結、清單表格 (Table) HTML 的 <table> 用來顯示表格資料。 <tr>：表格的列 (row)...
HTML 基本結構：doctype、head、bodyHTML 是一種「標記語言」，它透過「標籤 (tag)」來告訴瀏覽器這段文字的角色。 常見標籤 <h...
今天我們要來編輯地址和聯絡我們的分頁 1.先到address.html的檔案裡開始編輯地址分頁的內容這裡我們要放商店的地址和google地圖，首先加入程式<...
前端學習地圖與工具介紹（VS Code、瀏覽器 DevTools）👉 延伸補充：Node.js 與 Express 簡介前端 (Frontend) 是使用者在網...
練習架網頁的老婆問到：「老公老公~這兩個網頁檔明明都放在同個地方，你說#檔名 index.html 的網頁檔 → 網址是 https://example.de...
先下載visual studio打開之後建檔接著寫第一頁進入頁面 home是指我們的主頁面 下面的進入按鈕可跳轉至第一個頁面，也就是choose頁面 choo...
【[網頁製作證書] 】Certificate in Website Development全面學習網頁及網店製作技術 – 招生中本課程已加入持續進修基金可獲發還...
Bruce
i12h
iThome鐵人賽
看影片追技術