鐵人檔案
這是一個從零基礎的30天網頁設計自我挑戰。
從最基本的 HTML 標籤、CSS 樣式，一步步深入到排版技巧、互動效果，甚至是響應式網頁設計。
每天只需投入一點時間，就能解鎖一項新技能，並透過實作累積，最終完成一個屬於自己的作品集網頁。
在昨天的總結中，提到作品展示區。今天專注於這個區塊的細節設計與實現。一個好的作品集，必須能清晰地展示每個作品。 使用 Grid 佈局來實現一個整齊的、響應式的作...
寫出能動的程式碼只是第一步，寫出「好看」且「好懂」的程式碼同樣重要。特別是在團隊合作中，良好的程式碼規範和註解能讓溝通更順暢，維護更輕鬆。 命名規範： 使用...
在開發初期，常常還沒有真實的內容或圖片，這時候 Placeholder (佔位符) 就派上用場。它能讓開發者專注於排版，而不是內容。 假文： Lorem I...
SEO (Search Engine Optimization) 是讓網頁在搜尋引擎上獲得更好排名的技術。SEO 是個大學問，但可以在網頁的 <head&...
一個好的專案結構，能快速找到需要的檔案，也能讓其他人更容易理解專案的內容。 一個常見的網頁專案結構如下： iThome2025/ ├── day25.html...
頁腳（Footer）雖然在最下方，但它扮演著重要的角色，通常包含版權資訊、聯絡方式或社群媒體連結。好的頁腳設計應該簡潔、清晰，並且能與整體網頁風格一致。 在作品...
在第 18 天已經初步學習了 Media Queries，今天將更細緻的優化作品集頁面，確保它在各種尺寸的裝置上都能有良好的使用者體驗。 優化重點： 字體大...
開發者工具（Developer Tools）是網頁開發者最重要的武器之一，它內建在所有主流瀏覽器中，能幫助我們檢查、除錯和優化網頁。 常用的功能： Elem...
作品集已經大功告成，現在是可以完整呈現觀看的網頁。介紹一個簡單免費的網頁託管服務：GitHub Pages。 步驟： 建立 GitHub 帳號： 如果還沒有...
30 天的挑戰終於來到最後一天。這段旅程充滿了學習、探索和實作。從一個空白的 index.html 檔案，到現在一個功能齊全、設計精美的個人作品集，我感到非常驕...
