網路資源
UI Colors Generate：快速產生完整 Tailwind 調色盤的免費工具
每次手動調色都超耗時？UI Colors Generate 是專為前端與設計師打造的 Tailwind CSS 調色盤生成神器！輸入單一主色，一秒自動產出完整色階與即時 UI 預覽。完美相容開發環境，無縫複製到設定檔。告別憑感覺配色的痛點，立即體驗最高效的設計系統建置工具！
網路資源
教學與資訊
網頁開發三巨頭：HTML、CSS、JavaScript 的角色分工與協作
認識 HTML、CSS、JavaScript 差異與合作方式，搞懂網頁三巨頭如何打造結構、美化外觀、實現互動，是學習前端的最佳起點！
教學與資訊
網頁開發工程師介紹：前端、後端與全端工程師的差別是什麼？
前端、後端與全端工程師有何不同？本篇解析三種職位的工作內容、技能需求與適合特質，幫助你選擇最合適的網頁開發路徑。
網路資源
Anime.js：輕量快速的 JavaScript 動畫引擎
Anime.js 是輕量且強大的 JavaScript 動畫函式庫，支援 CSS、SVG、DOM 動畫與交錯控制，適合打造高效互動的前端動態效果。
教學與資訊
【教學】CSS text-autospace：中英文內容混排更方便的解決方案
了解 CSS text-autospace 屬性如何改善中英文、數字與標點混排的間距，讓排版更專業自然。本文包含語法解說、實用範例、與 IE 舊版差異及瀏覽器支援狀況。
網路資源
Codepip：用遊戲學習 HTML/CSS/JS/SQL，程式入門更有趣！
Codepip：線上遊戲化學程式平台，由 Flexbox Froggy 創辦人打造，集合多款互動遊戲學習 CSS、Grid、JavaScript、SQL 等語法。支援免費會員進度保存，Pro 版解鎖進階內容，廣受教育機構採用。
網路資源
Animatopy CSS 動畫片段生成器：簡單複製就可將動畫效果套用在網站上
Animatopy 是簡潔實用的 CSS 動畫 snippet 工具，免載入整套 Animate.css，就可快速預覽並複製單一動畫效果。
網路資源
Flexbox-Labs：互動式 CSS Flexbox 工具，讓學習或使用 Flex 排版更加輕鬆
Flexbox‑Labs 是互動式 CSS Flexbox 練習平台，支援即時預覽、範本載入與程式碼匯出，適合前端開發者與設計師學習與快速構思佈局。
網路資源
CSS Shape：CSS 圖形收錄寶庫，從三角形到蝙蝠俠一行搞定
CSS Shape 彙整超過 100 種 CSS-only 圖形，僅用單一 HTML 元素與現代 CSS 變數即可產生各式幾何圖案與裝飾，支援漸層、自訂參數，簡潔可維護，適合快速開發與樣式設計。
網路資源
21st.dev：專為 AI Coding 打造的 React UI 元件平台，讓前端開發更快完成
21st.dev 是專為 AI Coding 打造的 React UI 元件平台，提供豐富元件、動畫與 Landing Page 範本，支援 MCP Server 與 Claude Code、Cursor 等 AI 工具，加速前端開發與介面設計流程。
網路資源
CopyWeb：AI 驅動的網站複製與設計轉程式碼工具
CopyWeb 是 AI 驅動的網頁複製工具，可將網站設計即時轉換為乾淨的 React、Vue 或 HTML/CSS 程式碼。支援截圖轉代碼、URL 複製、Figma 匯入與智慧元件識別，並內建響應式設計，讓開發者快速構建高品質前端介面。
網路資源
Best of JS：即時追蹤 JavaScript 最熱門的開源專案的資訊平台
Best of JS 是專為開發者設計的線上平台，幫助使用者發現與追蹤 JavaScript、生態系開源專案。提供熱門排行、新增專案、分類標籤與每月排名，讓開發者輕鬆掌握最新技術趨勢。
網路資源
Dev Tool Finder：快速篩選、搜尋、推薦開發者必備工具的實用平台
Dev Tool Finder 是一個專為開發者打造的線上平台，精選各類開發工具，並提供即時搜尋、分類篩選與社群驗證，幫助開發者快速發現、探索並分享優質工具，提升開發效率與工作流程。
網路資源
htmx：方便的 JavaScript 函式庫，讓 HTML 用更簡單的方式直接處理 AJAX 與 WebSockets
htmx 是一款輕量級的開源前端函式庫，允許開發者透過 HTML 屬性實現 AJAX、CSS 過渡、WebSockets 及伺服器推送事件（SSE），無需撰寫複雜的 JavaScript。其直觀的語法大幅簡化了前端開發，使 Web 應用具備現代化互動體驗，同時保持 HTML 驅動的開發模式。
教學與資訊
Google 整理的 2024 年新的 CSS 語法 Part 2
探索全新 CSS 功能：簡化背景繼承、神奇的 light-dark() 函式、@property 可自定義變數、頂層管理優化、改進注音對齊、文字描邊與填充分層設定，以及更靈活的巢狀語法，讓開發更自由！
教學與資訊
Google 整理的 2024 年新的 CSS 語法 Part 1
Google 整理了他們在 Chrome 2024 年值得提出來的修改與增加的 CSS 的語法，共分為 5 個 Component，4 個 Interaction 以及 8 個 DX Feature，以下就來看看各別的介紹。
教學與資訊
CSS Utility-First Fundamentals 的基礎概念介紹
Utility-First CSS 是一種專注於使用簡單且功能單一的工具類別來設計 CSS 的方式，如 Tailwind CSS。此方法減少自定義樣式，提高開發效率與一致性。
網路資源
Webstudio：整合 Headless CMS，靈活高效的視覺化網站設計平台
Webstudio 是一款開源視覺開發平台，支援完整 CSS 控制、Headless CMS 整合與自我託管，助力設計師和開發者輕鬆創建專業響應式網站。