iT邦幫忙

2024 iThome 鐵人賽

DAY 1
0
佛心分享-我的私藏工具箱

SUPER EASY CSS 前端切版百寶箱系列 第 1

#00 文章目錄 / 參賽前言 | Super Easy CSS 前端切版百寶箱

  • 分享至 

  • xImage
  •  

參賽前言

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


文章目錄

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

支援度

編輯器

  • 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,或者是🧋送杯珍奶鼓勵我,謝謝你🥰。

Eva Chen 送杯珍奶鼓勵我


下一篇
#01 前端支援度查詢:Can I Use / StatCounter / Can I email...
系列文
SUPER EASY CSS 前端切版百寶箱3
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言