鐵人檔案
這是一個從零基礎的30天網頁設計自我挑戰。
從最基本的 HTML 標籤、CSS 樣式，一步步深入到排版技巧、互動效果，甚至是響應式網頁設計。
每天只需投入一點時間，就能解鎖一項新技能，並透過實作累積，最終完成一個屬於自己的作品集網頁。
告別傳統的浮動（float）排版，現在主流的 CSS 排版方式是 Flexbox 和 Grid。今天用 Flexbox (Flexible Box Layout...
Flexbox 適合一維的排版（單行或單列），而 Grid (Grid Layout) 則是一個二維的網格系統，它能像操作 Excel 表格一樣，輕鬆的將網頁劃...
今天學習如何使用 CSS Transitions，讓網頁元素在狀態改變時，能有平滑的轉場效果，讓使用者體驗更好。 Transitions 的核心就是讓屬性的變化...
除了轉場還可以讓網頁元素進行「變化」，CSS Transforms 可以對元素進行位移、旋轉、縮放、傾斜等操作。 transform: translate(...
網頁不只是用來看的，使用者也需要與它互動。表單（Form）就是這種互動的核心，它可以讓使用者可以輸入資料、傳送訊息。今天學習如何建立一個簡單的聯絡表單。 表單的...
圖片是網頁內容的重要組成部分，但除了用 <img> 標籤插入圖片，還可以將圖片作為元素的背景。這能實現更豐富的視覺效果。 幾個常用的背景圖屬性：...
隨著手機、平板等各種裝置的普及，網頁不再只在電腦螢幕上顯示。一個好的網頁應該能在所有裝置上都能正常瀏覽，這就是響應式網頁設計（Responsive Web De...
有昨天的 viewport 設定，網頁可以適應裝置寬度。但還需要針對不同的螢幕尺寸，提供不同的樣式。這就是 Media Queries 媒體查詢的用武之地。 M...
網頁不只是靜態的，它也可以是動態的、可互動的。JavaScript 可以讓網頁進行一些簡單的互動。今天學習如何用簡單的 JavaScript，實現一個基本的互動...
已經完成 20 天的挑戰，目前學會了 Flexbox 和 Grid 兩種現代排版方式，為網頁加入了轉場和變形效果，並對響應式設計和 JavaScript 有了初...
