There is no doubt: making good use of online resources and tools can speed up development, improve quality, and make life more Chill 😎~.
This article brings you 10 great free web resources for front-end developers ⭐ 😎 (๑-̀ㅂ-́)و✧
1. Undraw
If you need free SVG illustrations for your website, don’t miss Undraw!
SVG illustration resources are huge, with search function available; and, you can also customize the color scheme of the illustration, simply too NICE ~
A large number of resources, support search 🔍
![post thumb](https://school.codelink.ai/blog/web-development/recommend-10-very-wow-web-resources-to-the-front-end-developers/img/1.webp)
Feel free to change the color scheme 🌈
![post thumb](https://school.codelink.ai/blog/web-development/recommend-10-very-wow-web-resources-to-the-front-end-developers/img/2.webp)
2. Error 404
I don’t know where you would normally go to find 404 page material ~
Now you have one more option: Error 404
![post thumb](https://school.codelink.ai/blog/web-development/recommend-10-very-wow-web-resources-to-the-front-end-developers/img/3.webp)
Cool, cool, cool!
![post thumb](https://school.codelink.ai/blog/web-development/recommend-10-very-wow-web-resources-to-the-front-end-developers/img/4.webp)
3. Squoosh
Compressed images!
Compared to tinypng has better compression effect.
tinypng compression
![post thumb](https://school.codelink.ai/blog/web-development/recommend-10-very-wow-web-resources-to-the-front-end-developers/img/5.webp)
Squoosh compression
![post thumb](https://school.codelink.ai/blog/web-development/recommend-10-very-wow-web-resources-to-the-front-end-developers/img/6.webp)
Compression effect: the former is 80%, the latter is 95%; the final result is also good ~👍
![post thumb](https://school.codelink.ai/blog/web-development/recommend-10-very-wow-web-resources-to-the-front-end-developers/img/7.webp)
Why not try ?
4. DevDocs
DevDocs, as the name suggests, is the technical documentation for web development and is a very good learning manual!
![post thumb](https://school.codelink.ai/blog/web-development/recommend-10-very-wow-web-resources-to-the-front-end-developers/img/8.png)
Other than that, I like the UI! Also supports adding common technical documents, changing the theme, etc. ~
5. iHateRegex
If you hate regular expressions, then do not miss this site (ˉ▽ˉ;)…
![post thumb](https://school.codelink.ai/blog/web-development/recommend-10-very-wow-web-resources-to-the-front-end-developers/img/9.webp)
Not only that, but there are also detailed illustrations! Damn, it’s so well done ╮(╯▽▽)╭
![post thumb](https://school.codelink.ai/blog/web-development/recommend-10-very-wow-web-resources-to-the-front-end-developers/img/10.webp)
6. Carbon
People often ask: “How do I generate such nice code snippets?” and the answer is in Carbon!
You can generate code snippets for various themes and languages and export them as images or copy them to other platforms, it’s really nice to use 👌 👌 👌 comfortable~~
![post thumb](https://school.codelink.ai/blog/web-development/recommend-10-very-wow-web-resources-to-the-front-end-developers/img/11.webp)
7. Dribbble
For web design inspiration, look no further than Dribbble!!!
![post thumb](https://school.codelink.ai/blog/web-development/recommend-10-very-wow-web-resources-to-the-front-end-developers/img/12.webp)
![post thumb](https://school.codelink.ai/blog/web-development/recommend-10-very-wow-web-resources-to-the-front-end-developers/img/13.webp)
When you see other people’s backend designs, you want to go back and rip up your own 🐶
8. Animista
Css animation, copy the code and you can use it! No installation, doesn’t it sound good?
![post thumb](https://school.codelink.ai/blog/web-development/recommend-10-very-wow-web-resources-to-the-front-end-developers/img/14.webp)
9. Shape Divider
You can generate all kinds of dividers and export them in SVG format.
Fancy, I like it (❤ ω ❤)
![post thumb](https://school.codelink.ai/blog/web-development/recommend-10-very-wow-web-resources-to-the-front-end-developers/img/15.webp)
10. Notion
If you need a platform for note-taking, we recommend one option: Notion
Quick Notes, TaskList, Diary, Reading List, all types, everything, recommended~
![post thumb](https://school.codelink.ai/blog/web-development/recommend-10-very-wow-web-resources-to-the-front-end-developers/img/16.webp)