10+ Useful Resources for Mastering Web
Tags: beginners, webdev, javascript, watercooler
Published: 2021-04-15 07:27:04

###Introduction
I have a list of various resources that can help you solve many problems that you face or may face in the future.

I have the resources to

1. Illustration
2. Development
3. Design

Let's start without further ado.

##**ILLUSTRATION**
[###**Drawit**](https://www.drawkit.io/)
![Drawit](https://res.cloudinary.com/practicaldev/image/fetch/s--BMNJ-K21--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dsftv9zy5tfo1r1epr8x.png)

Hand-drawn vector illustration and icon resources, perfect for your next project.

[###**FlatIcon**](https://www.flaticon.com/)
![FlatIcon](https://res.cloudinary.com/practicaldev/image/fetch/s--h-0vHQeX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t7u6kpnrq851g3bln036.jpg)

4340500+ Free vector icons in SVG, PSD, PNG, EPS format or as ICON FONT. Thousands of free icons in the largest database of free vector icons!

[###**Smash Illustration**](https://usesmash.com/)
![Smash Illustration](https://res.cloudinary.com/practicaldev/image/fetch/s--t0odzE4g--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rqk6zlp1c859v5ffh7uu.png)

[###**unDraw**](https://blush.design/)
![unDraw](https://res.cloudinary.com/practicaldev/image/fetch/s--ghj0XILl--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9dxgj5o0auvj2d6hv92n.png)

Open-source illustrations for any idea you can imagine and create. A constantly updated design project with beautiful SVG images that you can use completely free and without attribution.

Awesome illustration constructor with colorful and trendy characters

##**DEVELOPMENT**
[###**Carbon**](https://carbon.now.sh/)
![Carbon](https://res.cloudinary.com/practicaldev/image/fetch/s--L6fcsgFK--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9rz37chaowg05qwdelkd.png)

Create and share beautiful images of your source code.
Start typing or drop a file into the text area to get started.

[###**Squoosh**](https://squoosh.app/)
![Squoosh](https://res.cloudinary.com/practicaldev/image/fetch/s--err3en_m--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qouudxuus666f5g17c77.png)

Compress and compare images with different codecs, right in your browser.

[###**Wappalyzer**](https://www.wappalyzer.com/)
![Wappalyzer](https://res.cloudinary.com/practicaldev/image/fetch/s--cmoWbqka--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3h8sb59jd6ayizgy0tdx.png)

Programmatic access to technographic data. The Wappalyzer APIs provide instant access to website technology stacks, contact details, and social media profiles.

##**CSS**

[###**Pattern.css**](https://bansal.io/pattern-css)
![Pattern.css](https://res.cloudinary.com/practicaldev/image/fetch/s--jmMHiWzH--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yhhpplp0jug1xu3hk5nb.jpg)

CSS only library to fill your empty background with beautiful patterns.

A simple, online CSS generator that creates a basic layout framework.

[###**CSSeffectsSnippets**](https://emilkowalski.github.io/css-effects-snippets/)
![CSSeffectsSnippets](https://res.cloudinary.com/practicaldev/image/fetch/s--p3aatNpk--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j5wb23w3xir64md9pekt.png)

Click on the animation to copy the CSS effects which include hover, loading, and others.

##**DESIGN**

[###**Colormind**](http://colormind.io/)
![Colormind](https://res.cloudinary.com/practicaldev/image/fetch/s--CDdssgnn--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/luni2w2dc1znvkxqln0m.jpeg)

Colormind is a color scheme generator that uses deep learning. It can learn color styles from photographs, movies, and popular art.

[###**FontSpace**](https://www.fontspace.com/)
![FontSpace](https://res.cloudinary.com/practicaldev/image/fetch/s--1Iq2h0j1--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7vkxtnywqd92z2tts4zl.jpg)

Helping designers discover the perfect font for their next design project.

[###**Webframe**](https://webframe.xyz/)
![Webframe](https://res.cloudinary.com/practicaldev/image/fetch/s--wTCIK-5r--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/666j0jksxorp3v4dorza.png)

A showcase of beautiful and well-designed web app screens for design inspiration. Including screens from behind signup/paywalls.