Learn CSS: Layout & Design

從第一個選擇器到響應式佈局、動畫和現代網頁設計，一步一步學習 CSS。輸入一行 CSS 程式碼，即可在手機上即時預覽頁面變更：編輯器會將 HTML 和 CSS 程式碼並排顯示。

本 CSS 教學專為初學者打造，並會伴隨您不斷進步。每個課程都圍繞著一個實際主題展開，每節課都簡短精煉，編輯器觸手可及，讓您隨時隨地實踐所學內容，而不僅僅是紙上談兵。

內容亮點

• 40 門課程和 159 個簡短精煉的課程時，從入門 (A1) 到高級 (C1)

• 具有即時預覽的即時 HTML 和 CSS 編輯器，方便您快速實驗和建立自己的頁面

• 20 個循序漸進的網頁設計項目：工具列、卡片網格、固定頭部、脈衝按鈕等等

• 20 個錯誤排查任務：卡片寬度比列寬 42 像素、手機上無法觸發的媒體查詢、卡在頁面後面的模態框

• 最終考試和結業證書

• 該應用程式支援 22 種語言

從入門到精通的完整學習路徑

• 文法和選擇器、顏色、背景和排版

• 盒子模型、display、定位、單位和值

• 偽類和偽元素

• Flexbox 基礎與進階 Flexbox

• 網格基礎、網格區域和進階網格佈局

• 響應式設計設計、媒體查詢與容器查詢

• 自訂屬性（變數）、函數、優先權、層疊和 @layer

• 轉場、變換、關鍵影格動畫、濾鏡和混合模式

• 深色模式和配色方案、捲動與溢位、裁切路徑和形狀

• 使用 DevTools 進行偵錯、BEM 架構、Sass、PostCSS 和設計標記

• 組件模式、現代佈局模式、效能最佳化與 Houdini

有效練習

• 測驗，檢驗學習成果

• 包含 69 個屬性、選擇器和佈局語法條目的速查表

• 50 題面試問題及清楚答案，幫助您輕鬆應付前端或 Web 開發人員面試

• 可開啟和編輯的簡短範例程式碼庫

• 儲存您自己的程式碼、筆記和喜愛的課程

• 世界程式設計挑戰賽：每天三輪全球挑戰，使用 Python、JavaScript 和其他語言解決

• 連勝、經驗值、排行榜與每日提醒，幫助您持續練習

AI 導師

• 遇到版面或屬性問題？向 AI 導師諮詢概念、錯誤或您自己的代碼

• AI 遊樂場：描述頁面並觀看 HTML 和 CSS 的生成

• 免費用戶每天可獲得一定額度的 AI 使用；專業版讓您享受無限可能

適用人群

• 完全零基礎的網頁開發新手

• 希望自主設計頁面樣式而非只提交模型的網頁設計師

• 希望在網頁設計課程之外進行額外練習的學生

• 了解一些 HTML 和 CSS，並希望最終掌握 Flexbox 和 Grid 佈局的開發者

• 準備從事前端工作的職業轉型者

使用方法

1. 從免費的第一門課程開始：CSS 文法和選擇器

2. 開啟編輯器，變更一個值，並查看預覽效果

3. 逐步學習：盒子模型、Flexbox、Grid、響應式設計與動畫

4. 完成引導式項目，並在任務中修復實際佈局錯誤

5. 通過最終考試，獲得證書

免費版和專業版

免費版包含第一門課程、第一個引導式專案、兩個任務和即時編輯器，以及每日 AI 導師指導額度。專業版解鎖所有課程、所有項目和任務、證書考試和無限 AI 指導，並移除廣告。

今天就開始學習 CSS，按照自己的步調學習，幾分鐘內就能設計出你的第一個頁面。