HTML 與 CSS

學習路徑

1. 01
   網頁怎麼來的

   瀏覽器、HTML、CSS、JavaScript 各做什麼，用開發者工具看一個網頁

   Interaction 30 minute(s)
2. 02
   HTML 文件的結構

   doctype、head、body、meta、元素、屬性與巢狀

   Interaction 25 minute(s)
3. 03
   文字：標題、段落與清單

   標題層級、段落、清單、引用、程式碼與 HTML 實體

   Interaction 25 minute(s)
4. 04
   連結與路徑

   相對路徑與絕對路徑、錨點、在新分頁開啟的安全寫法

   Interaction 25 minute(s)
5. 05
   圖片與多媒體

   替代文字、響應式圖片、figure、影音與嵌入

   Interaction 25 minute(s)
6. 06
   表格

   表格的結構、合併儲存格、標題，以及什麼時候不該用表格

   Interaction 25 minute(s)
7. 07
   表單

   input 的種類、label、name 與 value、驗證屬性、GET 與 POST

   Interaction 25 minute(s)
8. 08
   語意化 HTML

   header、nav、main、article、section：讓機器也讀得懂頁面

   Interaction 25 minute(s)
9. 09
   CSS 入門：規則、顏色與單位

   三種寫法、規則語法、hex／rgb／hsl、px、em、rem、%、vw

   Interaction 25 minute(s)
10. 10
    選擇器

    class、id、屬性、組合、虛擬類別與虛擬元素

    Interaction 25 minute(s)
11. 11
    層疊、權重與繼承

    兩條規則打架時誰贏：來源、權重、順序與繼承

    Interaction 25 minute(s)
12. 12
    文字與字型

    字型堆疊、自託管字型、行高、對齊與中文排版

    Interaction 25 minute(s)
13. 13
    盒模型

    content、padding、border、margin、box-sizing 與外距合併

    Interaction 25 minute(s)
14. 14
    背景、邊框與陰影

    背景圖與漸層、圓角、陰影、透明度

    Interaction 25 minute(s)
15. 15
    定位

    relative、absolute、fixed、sticky 與 z-index

    Interaction 25 minute(s)
16. 16
    溢位、顯示與浮動

    overflow、各種隱藏方式、object-fit，以及舊的浮動排版

    Interaction 25 minute(s)
17. 17
    Flexbox（一）：主軸與對齊

    主軸與交叉軸、justify-content、align-items、換行與 gap

    Interaction 25 minute(s)
18. 18
    Flexbox（二）：伸縮與常見版型

    flex-grow、flex-shrink、flex-basis，導覽列、卡片列與置中

    Interaction 25 minute(s)
19. 19
    Grid（一）：欄、列與格線

    grid-template-columns、fr、repeat、格線編號與放置

    Interaction 25 minute(s)
20. 20
    Grid（二）：區域與整頁版型

    grid-template-areas、auto-fit 與 minmax，Flexbox 和 Grid 怎麼選

    Interaction 25 minute(s)
21. 21
    響應式設計

    viewport、媒體查詢、行動優先、相對單位與 clamp()

    Interaction 25 minute(s)
22. 22
    轉場、動畫與 CSS 變數

    transition、transform、@keyframes、CSS 變數與深色模式

    Interaction 25 minute(s)
23. 23
    Bootstrap

    格線系統、元件、工具類別，以及什麼時候用框架

    Interaction 25 minute(s)
24. 24
    無障礙與綜合專題

    對比、替代文字、鍵盤操作與焦點，做一頁個人作品集

    Interaction 30 minute(s)