載入中…
載入中…
學習網頁基礎結構與樣式設計，掌握 HTML5 語意標籤、CSS Flexbox 與 Grid 排版，並實作響應式設計。
每章講義 PDF 可免費線上預覽；範例程式碼與打包下載請進入各章節頁。
講義教材整理中，敬請期待。
使用 HTML5 語意標籤建立一個個人介紹頁面，包含 header（姓名 + 職稱）、nav（頁內錨點）、main（自我介紹、技能、作品）、footer（聯絡方式）。
使用 <section> 區分不同內容區塊，<a href="#skills"> 建立頁內錨點導覽。
用 CSS Flexbox 實作：(1) 水平導覽列（左邊 Logo、右邊選項、最右邊按鈕）；(2) 3 欄等寬卡片，卡片高度相同，內容靠上，按鈕靠底部。
導覽列用 space-between + align-items: center，卡片用 flex-direction: column 讓按鈕靠底。
綜合運用 HTML、Flexbox、CSS Grid 與 Media Query，完成一個響應式課程網站首頁：桌機 3 欄卡片、平板 2 欄、手機單欄，導覽列手機版折疊。
用 CSS Grid 搭配 auto-fill 或固定欄數 + Media Query 切換，用 checkbox hack 做折疊選單。