2023/5/28 更新
網站技術是一個無底洞，身為設計師，天天接觸的就是前端、後端、網管人員。行動裝置的崛起，改寫了網路生態，衍生出更多尺寸裝置、瀏覽器、框架…等等，享用的資源也是取之不盡、用之不完，因為每天都有大神釋出新的開源碼。
這篇是為了提高工作效率而蒐集，常常要的時候找不到，所以特別製作個懶人包，匯集一下這些法寶。
線上查詢
Boostrap
繁體中文版，由六角學院編譯製作。
W3school
簡體中文版，網路語言手冊。
jQuery
簡體中文版，jQuery 語言手冊。
Emmet
縮寫編譯，還不熟縮寫嗎? 讀熟就能加快打Code速度!
can I use
語法的相容性，擔心在那些 CSS 無法正常在某些瀏覽器顯示，使用前先查詢一下。
Statcounter
瀏覽器那麼多種，誰才是市占率最高的霸主呢? (好想放生某些瀏覽器的相容性啊~)
裝置尺寸大全
桌機、平板、手機，品牌尺寸百百款，響應式設計當道，也被 Google 大神列為必備評比，每天上班的好朋友。
網站歷史頁面
想回顧某個時段，網站未改版前的樣貌嗎? 時光機就在這邊!
Tineye
會幫你列出所有平台的相同圖片，買圖的時候很需要，貨比三家買授權圖，錢花在刀口上吧!
W3C
權威級的網站，檢視你的 code。
PagePoker
清除 Line Cache。
線上製作
tinyjpg
壓圖神器，壓縮後檔案瘦身、品質不變。
ilovePDF
PDF 檔案很肥大嗎? 丟進來瘦身一下。
codepen
大神們匯集平台，所見即所得，開源碼任你拿 !
convertio
轉檔神器，圖像、文檔、電子書、字體、向量、CAD 通通都能轉。
Favicon
利用 Image / Text / Emoji 產出 favicon.ico
QR code
可以產出 PNG /SVG / TIFF / PDF / EPS 格式。
Enjoy CSS
最常用的陰影和漸層 Background，幫你產出 CSS Code。
photopea
線上版 Photoshop，來不及灌軟體嗎? 應急用一下吧。
CSS Grid Generator
網格神器。
Clippy
多邊形遮罩，快速產出 css。
效果套件
normalize.css
清掉預設，切版起手式。
Google fonts
網頁字體必備
非官方下載
網頁字體必備
headhesive.js
滾輪向下時，出現固定頁首，點選選單更方便。
slick
輪播效果，修改簡單的參數，方便好上手。
Swiper
強大的輪播效果。
Swiper 參數
簡體中文版，常用的輪播效果「參數查詢」。
animate.css
進場效果，讓你的網頁增添活潑感。
wow.js
進場效果，讓你的網頁增添活潑感。
css3 animate it
進場效果，讓你的網頁增添活潑感。
magnific popup
燈箱效果，好用上手快。
easyzoom
缺放大鏡功能嗎? 找他就對了!
Rellax
滾動視差。
sticky sidebar
黏性邊攔，黏在哪裡，由你決定。
midnight.js
固定標題，控制插件。
ScrollMagic
創造頁面捲動互動效果。
Hamburgers
手機版按鈕開關樣式。
手機版選單
手機版選單，展開下拉。
ICON
Font awesome
用 font 來控制 icon。
icones
icon 無論 svg 或 code 都幫你準備好。
iconhunt
Notion 和 Figma 都能直接嵌入的 svg。
Material icons
Google 出品品質保證，精美 icon 用 font 控制，不香嘛!?
fontello
只要畫得出來，就能夠做成 Font !
IcoMoon
只要畫得出來，就能夠做成 Font !
留言