ウェブデベロッパー Web Developers のためのリソース1000+選的なもの 2022年9月


引用: https://omatsuri.app/
![Connection_Lost_-_Dark_.png](https://res.cloudinary.com/practicaldev/image/fetch/s--SHh0nM8y--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/viddgll3589b7w6zye67.png)


「ウェブデベロッパーに便利な〇〇！」「フロントエンド開発者が知っておくべきサイト！」という記事たちを内外、見かけるたびにただひたすら溜め込んでできたリスト。前置きは控え、以下。

## 全リスト

### DEV.TO

https://dev.to/codewhiteweb/1000-web-development-resources-24mb

1000+ Web development resources ってなんなんですかね。

- [15+ Awesome Color Resources For Your Next Web Project](https://dev.to/kiranrajvjd/15-awesome-color-resources-for-your-next-web-project-48je)
- [Awesome 40+ SVG Resources For Your Next Web Project](https://dev.to/kiranrajvjd/awesome-35-svg-resources-for-your-next-web-project-5c15)
- [10 Awesome CSS Resources](https://dev.to/kiranrajvjd/10-awesome-css-resources-14mh)
- [Awesome CSS Layout Resources For Beginners](https://dev.to/kiranrajvjd/awesome-css-layout-resources-for-beginners-508a)
- [15+ Awesome CSS Animation Resources](https://dev.to/kiranrajvjd/15-awesome-css-animation-resources-4mhi)
- [24+ Awesome CSS Pattern Background Generators](https://dev.to/kiranrajvjd/the-ultimate-css-background-pattern-resource-20m8)
- [40+ Awesome Illustrations Resources For Your Web Projects](https://dev.to/kiranrajvjd/40-awesome-illustrations-resources-for-your-web-projects-2fea)
- [The Ultimate Web Developer Resources List 🔥Awesome 200+ Resources](https://dev.to/kiranrajvjd/the-ultimate-web-developer-resources-list-200-resources-2gf5)
- [75 Awesome Resources For Web Developers](https://dev.to/kiranrajvjd/75-awesome-web-resources-that-make-web-development-easy-2pff)
- [30+🔥 Awesome CSS Animation Resources](https://dev.to/kiranrajvjd/30-awesome-css-animation-resources-h9c)
- [20 useful free resources for Web Developers](https://dev.to/pascavld/20-useful-free-resources-for-web-developers-2c3n)
- [40+ Useful Resources for Mastering Web](https://dev.to/surajondev/40-useful-resources-for-mastering-web-1i0h)
- [30+ Illustration Resources For Web Developers](https://dev.to/kiranrajvjd/30-illustration-resources-for-web-developers-23hd)
- [100 underline/overlay animations | The ultimate CSS collection](https://dev.to/afif/100-underline-overlay-animation-the-ultimate-css-collection-4p40)
- [I made 100 CSS loaders for your next project](https://dev.to/afif/i-made-100-css-loaders-for-your-next-project-4eje)
- [60+ Awesome UI and UX resources for Developers and Designers 2021 - DEV Community 👩‍💻👨‍💻](https://dev.to/coderwatch/60-awesome-ui-and-ux-resources-for-developers-and-designers-2021-202)
- [25 Beginner JavaScript Project Ideas - DEV Community 👩‍💻👨‍💻](https://dev.to/codefoxx/25-beginner-javascript-project-ideas-3m9h)
- [10 CSS Resources that you should bookmark - DEV Community 👩‍💻👨‍💻](https://dev.to/j471n/10-css-resources-that-you-should-bookmark-46l6)
- [10 Best Productive Tools for Web Developer. - DEV Community 👩‍💻👨‍💻](https://dev.to/muthuannamalai12/10-best-productive-tools-for-web-developer-b0n)
- [10 Resources for Web Developers - DEV Community 👩‍💻👨‍💻](https://dev.to/yigitsr/10-resources-for-web-developers-46g7)
- [Awesome GitHub Repository for Web Developer - Part 1 - DEV Community 👩‍💻👨‍💻](https://dev.to/surajondev/awesome-github-repository-for-web-developer-part-1-3a67)

Downloaded from: https://undraw.co/illustrations
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93824/3d0be7f6-0c8f-853f-4786-a6d8c9966d1a.png)

### hashnode

- [200+ Ultimate Resources for Front-End Development in 2021](https://rahulism.hashnode.dev/200-ultimate-resources-for-front-end-development-in-2021)

Downloaded from: https://unsplash.com/
![eftakher-alam-i1VQZsU86ok-unsplash.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93824/2d5f96c0-a45c-41de-1af1-113323fe3a7e.jpeg)



### GitHub
- [Frontend Development Awesome - Manually curated collection of resources for frontend web developers.](https://github.com/dypsilon/frontend-dev-bookmarks)
- [Design Resources -
A curated list of design resources from design templates, stock photos, icons, colors, and much more](https://github.com/MohamedYoussouf/Design-Resources)
- [Design-resources-for-developers](https://github.com/bradtraversy/design-resources-for-developers)
- [Web Developer Roadmap](https://github.com/kamranahmedse/developer-roadmap)
- Omatsuri https://omatsuri.app/

CSS: https://uigradients.com/#GreenBeach
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93824/1b31c942-8fbf-e111-6656-7e865ba46c22.png)

```css
background: #02AAB0;  /* fallback for old browsers */
background: -webkit-linear-gradient(to top, #00CDAC, #02AAB0);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to top, #00CDAC, #02AAB0); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
```

### Qiita
- [知っていると役に立つ！Web系エンジニア向けサービス 11選](https://qiita.com/takiguchi-yu/items/3a1d4267e9ff31519945)
- [Web制作するならブックマークしておきたいサイト色々](https://qiita.com/sawadays0118/items/e617be2782caeef846c5)
- [【2021 最新版】ノンデザイナーだからこそ知っておきたかった10のイラストサイト](https://qiita.com/bo_zu_/items/88f45b132c8293dcd9b1)
- [非デザイナーエンジニアが一人でWebサービスを作るときに便利なツール32選](https://qiita.com/okappy/items/119e31cae9aa9bd9da6d)
- [【本当は教えたくない…】ノンデザイナーだからこそ知っておきたかった7のサイト](https://qiita.com/bo_zu_/items/0c09f789c5804132f1ad)
- [【個人開発・ポートフォリオに】無料で簡単にいい感じのデザインにできるサービスまとめ](https://qiita.com/aiandrox/items/4196c8f5b564d29fdce7)
- [プレゼンテーションに使う画像の探し方](https://qiita.com/TAKAKING22/items/20c006206d2ce23a5608)
- [Webサイトを作る際に超参考になったデザインのサイトまとめ - Qiita](https://qiita.com/shimajiri/items/55840c37d9a435ddebc5)
 

### その他

- [Webデザイン制作をもっと楽に！便利な最新オンラインツール45個まとめ](https://photoshopvip.net/128528)
- [Webデザインの種明かし、コピペできる最新HTML／CSSスニペット30個まとめ](https://photoshopvip.net/130989)


Downloaded from: https://www.wowpatterns.com/
![hand-drawn-clouds-doodle-art-seamless-vector-pattern.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93824/c41efdd3-6967-8f73-bf1a-e7de60303d26.jpeg)



## まとめると

表題の n の数は700以上に達した。

https://cssgridgarden.com/

だったりがちょっとした時に楽しい。やはり **記事は溜め込むだけでなく手を動かして使え** というのが冒頭のフロントエンド強化月間における教訓だと考える（伏線回収）。

筆者は本業はしがないバックエンド保守担当である。こんなに普段から盛り上がる界隈がいつもすこしだけうらやましいので、懲りずまた見つけたら書き足していこうと思う。各記事執筆各位に改めて尊敬の念を込めて、なにがしか、参考になればさいわいです。