# 前端相關資源

## Web作品
* [版塊設計](https://blockstudio.tw/project/) - 作品很棒
* [Muuuuu](https://muuuuu.org/) - 有分類功能，日系、歐美、清爽
* [iKesai](https://www.ikesai.com/) - 有分類功能，日系萌
* [Media Queries](https://mediaqueri.es/) - 培養RWB感覺

## 技術文章
* [掘金](https://juejin.cn/frontend/%E5%89%8D%E7%AB%AF) - 前端技術文章
* [Let's Write](https://www.letswrite.tw/category/frontend/) - 偶爾看看別人筆記
* [readfog Javascript](https://www.readfog.com/t/js) - 技術文章

## JS學習資源
* (X) [JAVASCRIPT.INFO](https://javascript.info/) - JS國外學習網站
* (X) [freeCodeCamp](https://www.freecodecamp.org/learn/front-end-development-libraries/)
* (X) [W3Schools](https://www.w3schools.com/)

## JS套件
* [Animate.css](https://animate.style/) - 搭配wow.js
* [wow.js](https://wowjs.uk/docs.html) - 搭配Animate.css

## 配色資源
* [NIPPON COLORS](https://nipponcolors.com/) - 找日系配色靈感
* [colors](https://coolors.co/palettes/trending) - 找配色靈感
* [Adobe Color](https://color.adobe.com/zh/create/image) - 上傳影像並抽取顏色
* [HUE/360](http://hue360.herokuapp.com/) - 配色把關
* [palettemaker](https://palettemaker.com/) - 最好用的配色網站

## 免費圖庫
* [pixabay](https://pixabay.com/)
* [pexels](https://www.pexels.com/zh-tw/)
* [unsplash](https://unsplash.com/)

## 圖片相關
* [iloveimg](https://www.iloveimg.com/zh-tw/crop-image) - 免費線上裁剪jpg, png, gif
* [Compressor.io](https://compressor.io/) - 壓縮圖檔大小
* [TinyPNG](https://tinypng.com/) - 壓縮圖檔
* [Adobe Express](https://www.adobe.com/express/feature/image/remove-background) - 去背
* [CSS clip-path](https://codepen.io/stoumann/full/abZxoOM) Editor
* [Boxy SVG](https://boxy-svg.com/app) svg path
* [Fancy Border Radius](https://9elements.github.io/fancy-border-radius/#34.88.34.26--256.384) 自訂橢圓形

## icon資源
* [fontawesome](https://fontawesome.com/search) - 支援svg
* [ICOOON MONO](https://icooon-mono.com/) - 支援svg

###### tags: `frontend` `changecareer` [:arrow_right: Back to Front End Homepage :arrow_left:](/S-c0eqQmS16D8tcTx4ae1g)