學習目標 了解 Grid 與 Flexbox 的差異與應用場景 學會使用 display: grid 建立二維布局 練習 grid-template-colu...
學習目標 熟悉主軸（main axis）與交叉軸（cross axis）的對齊控制 掌握 justify-content、align-items、align-...
學習目標 理解 Flexbox 的核心概念：主軸（main axis）與交叉軸（cross axis） 熟悉容器屬性：display: flex、flex-d...
學習目標 理解 float 的用途與限制 學會使用 clear 避免元素被浮動影響 練習用浮動製作簡單的圖文排版 知道浮動在現代已漸被 flexbox 取代，...
學習目標 理解 float 的用途與限制 學會使用 clear 避免元素被浮動影響 練習用浮動製作簡單的圖文排版 知道浮動在現代已漸被 flexbox 取代，...
學習目標 熟悉多重背景的設定方式 使用 background-attachment 製作視差滾動效果（parallax） 理解 linear-gradient...
學習目標 認識 border 的基本屬性（寬度、樣式、顏色） 學會設定圓角邊框（border-radius） 掌握 box-shadow 建立立體感效果 嘗試...
學習目標 認識 CSS 顏色的不同表示方式（色名、十六進位、RGB、HSL） 學會調整文字與背景顏色，確保對比度與可讀性 掌握 background-imag...
學習目標 理解 CSS 盒模型（Box Model）的四個層次：content、padding、border、margin 學會設定元素的大小與間距 認識 b...
學習目標 理解 CSS 的三種引入方式：行內樣式、內部樣式、外部樣式 學會使用選擇器鎖定元素 熟悉顏色的表示法（名稱、HEX、RGB、HSL） 認識文字相關屬...
學習目標 學會表格的進階結構 理解 rowspan 與 colspan 的用法 熟悉 <caption>、<thead>、<tb...
學習目標 認識 HTML5 語意化標籤 熟悉 <header>、<nav>、<main>、<article>、...
學習目標 理解 <iframe> 的用途與限制 學會嵌入其他網站內容（如 Google Map、YouTube） 認識 width、height、...
學習目標 學會使用 <img>、<audio>、<video> 理解屬性：controls、autoplay、loop、...
學習目標 熟悉更多表單輸入型態：radio、checkbox、select、file 學會分組：使用 <fieldset> 與 <lege...
學習目標 學會建立基本表單 <form> 熟悉輸入元件 <input>、<textarea>、<button>...
學習目標 熟悉三種清單：有序清單 <ol>、無序清單 <ul>、描述清單 <dl> 能靈活使用 <li> 條...
學習目標 熟悉元素、類別、ID、群組、子元素、後代等選擇器 了解常見偽類（:hover, :focus, :nth-child()）的使用 建立選擇器優先度與...
為什麼學這些？ 建立「頁面骨架」：讓內容有清楚區塊 可近性更友善：螢幕報讀器可直接跳到主要區塊 對 SEO 友善：搜尋引擎能理解頁面結構與主題 後續加 CSS...
為什麼先學清單？ 條列重點（功能、規格、條件） 步驟流程（有順序） 詞彙解釋、FAQ（名詞 → 說明） 導覽列骨架（之後用 CSS 做外觀） 無序清單：&...
學習目標 -正確使用 h1 ~ h6 建立內容層級（每頁僅一個 h1）-用 <p> 表示段落，不用 <br> 堆疊空行-了解 <b...
為什麼從 HTML 開始？ 很多人第一次接觸網頁時，腦中會浮現： 五顏六色的排版 會動的動畫 互動按鈕 但如果直接跳到 CSS 或 JavaScript，會...
joanna2005823
iThome鐵人賽
看影片追技術