參賽前言

本來預計在我的鐵人賽「Super Easy CSS，極度簡單（2023 去年 / 2024 今年）」的系列文章最後，想要總結一下文章裡面有提到的、我常用的小工具給大家，但是今年鐵人賽多了一個「佛心分享主題 - 我的私藏工具箱」，所以我覺得可以另開一個系列，就是本系列文章啦！

文章目錄

本系列文章分享的小工具，與設計或前端相關，從圖片優化、HTML、CSS 到 SEO 分析等等，能幫助你處理一個網站前端的各種大小事。

支援度

• #01 前端支援度查詢：Can I Use / StatCounter / Can I email...

• #02 查找語法：MDN 與 W3Schools，網頁開發者的必備參考資源

編輯器

• VS Code 快捷鍵

• CodePen/ CodeSandbox/ JSFiddle/ JS BIN

• VS Code snippet 產生器

CSS 練習

• Flex 練習小遊戲：六角學院-Flex Pirate 擊倒海盜/ FLEXBOX FROGGY

• Grid 練習小遊戲：GRID GARDEN

多媒體

• 多種 Icon Font 分享

• 免費 CC0 圖庫

• 縮圖工具 TinyPNG / Vecta

• favicon generator

• QRcode Monkey/ QR.io

• 影片轉為 GIF: adobe/ ezgif

• App Store/ Google Play 下載圖檔

• 假圖 fakeimg

顏色

• 好看的 AI 配色工具

• 顏色：LCH/OKLCH Color Picker & Converter/ Spectrum

• 好看背景產生器

• 漸層背景

特效

• Css Clip-path maker

• 好看的陰影

動畫

• Loading 動畫

• 動畫曲線 cubic-bezier/ Epic Easing

格式調整/轉換

• 表格轉換工具

• HTML CSS JS 格式調整

• 線上 HTML 編碼轉換程式

• 視覺化 json 格式： json crack

• 將程式碼轉為圖片 carbon

API

• 假 API 工具

效能

• 網頁效能/測速工具

SEO

• 社群追蹤與測試: FB/ Twitter Card

• SEO關鍵字：Google Trends/ Free Keyword Generator

• Google 測試結構化資料

• 流量分析：GA (示範帳戶)/ Tag Assistant/ Ahrefs

• 搜尋分析：Google Console/ Bing

• UTM 產生器 Campaign URL Builder

目錄先寫個大概，這些就是平常存在我瀏覽器我的最愛中的各種連結。
這 30 天內將持續更新，謝謝大家！

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

感謝看到最後的你，若你覺得獲益良多，請不要吝嗇給我按個喜歡。❤️

如果你喜歡我的創作，還想看看其他有趣的分享與日常，
可以追蹤我的 IG @im1010ioio，或者是🧋送杯珍奶鼓勵我，謝謝你🥰。