前端免費資源整理
練習切版或做作品集時，最常卡住的往往不是程式碼，而是「沒有圖、沒有文案、沒有資料」。這頁整理了前端開發常用的免費資源，包含假圖、假文、可直接串接的測試 API，以及圖示、字型與配色工具。
使用前請先確認授權
免費不等於可商用。放進正式專案前，請確認該服務的授權條款（多數假圖／假資料服務僅供開發測試使用）。
假圖服務
需要固定尺寸的示意圖時，直接把網址填進 <img src> 即可，不必自己準備圖檔。
Lorem Picsum
Lorem Picsum 以網址參數指定尺寸，例如：https://picsum.photos/600/400，直接貼進 <img src> 就會回傳一張隨機照片。加上 ?random=1 可避免多張圖被快取成同一張，改用 /id/237/600/400 則能固定取得同一張圖，適合需要畫面穩定的示範。也支援灰階與模糊等效果參數。
LoremFlickr
LoremFlickr 取用 Flickr 上的相片，並可依關鍵字取圖，例如：https://loremflickr.com/600/400/cat。當版面需要「看起來合理」的主題照片，例如：餐點、旅遊、人物時，比純隨機的假圖更貼近真實情境。多個關鍵字以逗號分隔，也能鎖定同一張圖重複使用。
Unsplash
Unsplash 是最知名的高品質免費圖庫，攝影作品風格統一、解析度高，很適合作品集或正式網站使用。授權相當寬鬆，多數情況可免費商用且不需標註來源，但仍建議逐張確認頁面上的授權說明。網站也提供 API，可在專案中直接搜尋取圖。
Pexels
Pexels 同樣提供免費相片，並額外收錄大量免費影片素材，介面有完整的繁體中文版。可依顏色、方向與尺寸篩選，找特定色調的主視覺時很方便。與 Unsplash 交叉搜尋，通常就能湊齊一整套風格一致的素材。
假文服務
亂數假文
亂數假文 是繁體中文的假文產生器，可指定段落數與每段字數。中文字沒有空格、字寬也與英文不同，用英文假文測出來的行高與斷行往往和上線後差很多，因此中文網站的排版務必用中文假文驗證。它也提供標題、清單等不同結構的假內容。
Lorem Ipsum
Lorem Ipsum 是印刷業沿用數百年的經典假文，可依段落、字數、句數或位元組產生。因為內容不具語意，讀者的注意力會留在版面本身而非文字，很適合在提案階段展示設計。多數編輯器與設計軟體的假文功能也都以它為基礎。
編輯器也能產生假文
VS Code 內建 Emmet，在 HTML 檔輸入 lorem 或 lorem30 再按 Tab，就能直接產生英文假文，不必開網頁。詳見 VS Code 入門教學。
免費 API
串接 API 的練習不必等後端，以下服務都能直接發出請求。
JSONPlaceholder
JSONPlaceholder 是最常被使用的假資料 API，提供貼文、留言、相簿、待辦與使用者等資源，資料結構單純好懂。除了 GET，也接受 POST、PUT 與 DELETE 並回傳合理的結果（但不會真的寫入資料庫），很適合完整練習一輪 CRUD 流程。免安裝、免金鑰，開啟網址即可使用。
ReqRes
ReqRes 以 RESTful 風格設計，支援分頁參數、延遲回應與註冊登入等情境，還能刻意觸發錯誤回應。想練習載入中的骨架畫面、逾時處理或表單驗證失敗的提示，用它比自己 mock 更貼近真實。回傳格式固定，很容易對照文件理解。
RandomUser
RandomUser 會隨機產生使用者資料，包含姓名、頭像、Email、地址與國籍，並可用參數指定筆數、性別與國家。做會員列表、留言區或個人資料卡等版面時，一次就能取得整批風格一致的假資料。首頁上有一系列可直接操作的參數說明，邊改邊看結果。
Cataas
Cataas（Cat as a Service）會隨機回傳貓咪圖片，回應的是圖片而非 JSON，因此可直接當成 <img src> 使用。網址上能疊加尺寸、濾鏡與文字參數，臨時需要一張帶說明文字的示意圖時特別快。標籤參數也能指定貓咪的姿勢或情境。
文化資料開放服務網
文化資料開放服務網 是文化部的開放資料平台，提供展演活動、場館與文化資產等真實資料。真實資料的欄位往往不完整、格式也不一致，正好用來練習空值處理、日期格式轉換與資料清洗，比乾淨的假資料更接近實務。多數資料集同時提供 JSON 與 CSV 格式。
注意 CORS 與流量限制
免費 API 多半有速率限制，部分服務也不允許從瀏覽器直接跨域呼叫。若遇到 CORS 錯誤，改用開發伺服器的 Proxy 設定（如 Vite 的 server.proxy）通常就能解決。
圖示與字型
Google Fonts
Google Fonts 收錄大量開源字型，含思源黑體（Noto Sans TC）等繁體中文字型，複製一段 <link> 就能套用。中文字型檔案龐大，建議只載入實際會用到的字重，並搭配 display=swap 避免文字在字型載入前呈現空白。網站上可先預覽自訂文字的實際效果。
Font Awesome
Font Awesome 是最普及的圖示庫，免費版的圖示量已足夠一般網站使用，寫法只要在標籤加上對應的 class。因為以字型或 SVG 形式提供，能直接用 color 與 font-size 控制外觀，不必另外準備圖檔。社群資源多，遇到問題也最容易找到解法。
Iconify
Iconify 集合了上百套開源圖示，可一次搜尋所有圖示集並直接複製 SVG 原始碼，不必為了一顆圖示引入整套字型檔。它也提供框架用的元件與 UnoCSS／Tailwind 的整合方案，可依實際使用到的圖示按需載入，對效能相當友善。
Simple Icons
Simple Icons 收錄超過三千個品牌的單色標誌 SVG，並附上各品牌的官方代表色。做技術文件、履歷或作品集時，用它列出技術棧最省事。使用品牌標誌時請留意各公司的商標使用規範，避免暗示未經授權的合作關係。
配色與設計
Coolors
Coolors 按下空白鍵就會產生一組新配色，看到喜歡的顏色可以先鎖定，再重新產生其餘色票。配色結果能匯出成 CSS 變數或圖片，直接貼進專案使用。網站上也有大量現成的熱門配色可以瀏覽套用。
Adobe Color
Adobe Color 以色輪為基礎，能依互補、三分、單色等色彩理論規則自動推導配色，也可從上傳的圖片萃取色票。內建的無障礙工具會檢查配色是否對色盲使用者友善，在設計初期就能避開難以辨識的組合。
Contrast Checker
Contrast Checker 由無障礙領域權威 WebAIM 提供，輸入前景與背景色即可算出對比度，並標示是否通過 WCAG AA／AAA 標準。淺灰色文字配白底這類常見的設計，往往就是在這一關被擋下來，建議在切版完成前先跑一次。
常見問題
免費的假圖與假文可以用在正式網站嗎？
假圖與假文服務多半僅供開發測試使用，不建議留在正式上線的網站。正式專案請改用授權明確的免費圖庫（如 Unsplash、Pexels），並逐張確認授權條款。
有哪些不用申請金鑰就能直接用的免費 API？
JSONPlaceholder、ReqRes、RandomUser 與 Cataas 都不需要申請金鑰，直接發出請求即可取得資料，適合練習串接與錯誤處理。
呼叫免費 API 出現 CORS 錯誤怎麼辦？
部分服務不允許瀏覽器直接跨域呼叫。可改用開發伺服器的 Proxy 設定（如 Vite 的 server.proxy），把請求轉由開發伺服器代發，即可避開瀏覽器的跨域限制。
測試中文網頁排版為什麼不能用 Lorem Ipsum？
中文字沒有空格、字寬也與英文不同，用英文假文測出的行高與斷行結果，往往和實際上線的中文內容差距很大。測試中文版面請改用繁體中文的假文產生器。
