今天的封面是工程師最愛的 github 吉祥物章魚貓，雖然一直不知道為什麼會是這個吉祥物，但我還是畫了一個自己的版本，希望會大家喜歡 (･ω´･ ) 回到今...
今天的封面主角是 HTML5，我看 HTML5 的 LOGO 形象，很像一個盾牌的形狀，中間寫一個數字 5，所以我就把它畫成超人的形象了！ ─=≡Σ((( つ...
今天的封面主角是我們設計師最愛的 Figma (?)，我把他畫成很像膠囊跟糖果的感覺。 剛好今天會介紹網頁中的**「邊框」與「間距」**。其實網頁的樣式邏輯和...
昨天的封面介紹了 Chrome 瀏覽器，今天的主角則是 Firefox 火狐（因為很喜歡狐狸就畫了！毛毛的！）。雖然現在市面上多數的瀏覽器都是以 Chromi...
開始前先題外話一下，因為我在封面畫了超多細節，但其實大多數跟 CSS 內容無關，就是想畫所以就畫了！原本想說要用同一種封面排 30 天，但我發現第 5 天開始...
前幾天介紹了各式各樣的 CSS 選擇器，大家可能會發現當選擇器越寫越多時，常常會越串越長。這時候就可以利用「巢狀（Nesting）」的寫法，讓 CSS 結構更...
專案資訊 專案名稱： EduShield GitHub： https://github.com/oas114/EduShield 目前狀態： 已完成可...
昨天我們學會了如何使用基本與組合選擇器來精準選取 HTML 標籤。但網頁不只是靜態的文字與區塊，使用者還會滑過按鈕、點擊輸入框，甚至我們有時只想裝飾某個段落的...
昨天我們介紹了 HTML 與 CSS 的基本結構與對應關係，今天則要進入核心主題 CSS 的「選擇器（Selector）」。 什麼是選擇器？「選取正確的物件」...
本篇階段：實作挑戰 使用介面：claude.ai（對話產生 HTML，Artifacts 即時預覽） 前情 前三天都在做同一件事：把指令寫好，交給別人...
大家好，我是饅頭，目前是一位網頁設計師，平常的工作除了使用 Figma 來繪製網頁介面外，也需要自己切切版、寫寫 CSS，不過最近幾年都直接用 AI 幫我速速...
WordPress 7.1 版本會變更 HTML 裡的 Table 的結構，其中的 或 元素為了符合語意化作出了部分變動 ▌這原本是為了符合 2026 最...
今天要解的問題 沒有 Tailwind、沒有 UI library，一切要自己寫。如果直接開始寫 .card { border-radius: 14px }、....
技術內容 在資料傳輸前，有些相關的文件及當中的欄位、邏輯Annotation之類的必須要有，才能運作程式因此要先確認這些事情有沒有做 1. 在Servlet文件...
Day 15 學習報告 主題：使用 LocalStorage 儲存圖片資訊 一、學習目標 在這一天，我希望讓相簿的內容能被「永久保存」。以前每次重新整理網頁，所...
Day 14 學習報告 主題：新增幻燈片播放模式（全螢幕播放圖片） 一、學習目標 這一天的目標是讓相簿更具互動性與展示性。我希望使用者能在瀏覽照片時，像看幻燈片...
Day 13 學習報告 主題：排序功能完成 一、學習目標 本日的目標是讓使用者可以更方便地瀏覽相簿內容，因此我加入了「排序功能」。這個功能能讓使用者依照上傳順序...
Day 12 學習報告 主題：搜尋功能 一、學習目標 今天的重點是讓相簿能夠支援「搜尋功能」，讓使用者可以快速找到想要的照片。隨著上傳的圖片越來越多，如果沒有搜...
Day 11 學習報告 主題：相簿分類功能 一、學習目標 今天的主要目標是讓相簿能夠支援「圖片分類」的功能。這樣使用者在上傳照片時，可以選擇不同的分類（例如：旅...
Day 10 學習報告 主題：多圖片上傳與相簿顯示 一、學習目標 今天的主要目的是讓線上相簿具備「圖片刪除功能」。在前幾天的開發中，已完成上傳、預覽與分類等核心...
Day 9 學習報告 主題：圖片重新選擇功能 一、學習目標 今天的目標是讓使用者能夠「重新選擇圖片」──也就是在上傳錯誤或不滿意圖片時，可以再次挑選新檔案覆蓋原...
Day 8 學習報告 主題：多圖片上傳與相簿顯示 一、學習目標 今天的主要目的是讓系統能同時壓縮多張圖片，這樣使用者上傳多張照片時，不僅能節省空間，也能保持載入...
Day 7 學習報告 主題：圖片壓縮功能 一、學習目標 這一天的目標是學習如何使用JavaScript在不失真太多的情況下壓縮圖片大小，以便讓上傳速度更快、相簿...
Day 6 學習報告 主題：圖片資訊顯示（尺寸、大小、檔名） 一、學習目標 這天的任務是讓每張圖片除了顯示檔名與大小之外，也能同時顯示「寬高尺寸」。這能幫助使用...
Day 5 學習報告 主題:圖片上傳與即時顯示 一、學習目標 今天的目的是讓上傳的多張圖片能同時顯示在畫面上，並且每張圖片都有屬於自己的資訊卡。這樣的設計能讓線...
Day 4 學習報告 主題:圖片壓縮與尺寸調整 一、學習目標 今天的任務是讓使用者上傳的圖片自動壓縮成合適大小，以提升載入速度並節省儲存空間。這對線上相簿的效能...
Day 2 成果報告 主題：統一排版與主題色設計 一、學習目標 在第二天的任務中，我的目標是讓整個網頁的排版更有一致性，並透過主題色統一整個視覺感。這有助於提升...
網頁是什麼？ 學網頁設計的時候，常常會聽到三個名字：HTML、CSS、JavaScript。它們是構成網頁的三大元素： HTML 網頁的結構。 CSS 網...
常用的文字標籤 HTML 提供了許多標籤來幫助我們排版：h1 ~ h6：標題（h1 最大，h6 最小）p：段落（paragraph）ul / ol：清單（ul...
Day3成果報告 主題:單張圖片上傳與預覽功能 一、學習目標 本日目標是讓使用者可以上傳一張圖片並即時預覽，體驗基本的圖片顯示功能。這是線上相簿的核心功能之一，...
饅頭
ycy1997alex
Eyk
L
iThome鐵人賽
看影片追技術