40+ Useful Resources for Mastering Web🎁
Tags: watercooler, webdev, beginners, javascript
Published: 2021-04-12 07:36:58

# Introduction

We have a list of various resources that can help you to solve many problems that you are facing or might face in the future.

We have resources for
- Illustration
- Development
- Design
- CSS
- Productivity

Let's get started without further ado.

# ILLUSTRATION

### [DrawKit](https://www.drawkit.io/)

![DrawKit](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-generic](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!

### [Blush Design](https://blush.design/)

![Blush Design](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uhpfr7xzcgd4kcnpgm0d.png) 

> Easily create and customize stunning illustrations with collections made by artists across the globe. Try it, it’s kind of fun.



### [Smash Illustration](https://usesmash.com/)

![Smash Illustration](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rqk6zlp1c859v5ffh7uu.png)
 
### [unDraw](https://undraw.co/)

![unDraw](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

### [Control.Rocks](https://control.rocks/)

![Control.Rocks](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5j5ch9qugacxe8up2ncs.png)
 

> They have created a big library of illustrations with customizable styles and action types. Use the constructor to create a scene that you are looking for.


### [Error 404 Fun](https://error404.fun/)

![Error 404 Fun](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/piviing92pr61uzafgtw.png)
 

> Make a unique journey through 404 error pages on your website Use these illustrations that describe better than words

### [Open Doodlers](https://www.opendoodles.com/)

![Open Doodlers](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aa40prl0clxt3wuwj156.jpg)
 

> A Free Set of Open-Source Illustrations!



<hr/>

## DEVELOPMENT



### [Carbon](https://carbon.now.sh/)

![Carbon](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.

### [Replit](https://replit.com/)

![Replit](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pc8xkyxgojwilsy4p8bn.PNG)
 
> Replit is a simple yet powerful online IDE, Editor, Compiler, Interpreter, and REPL. Code, compile, run, and host in 50+ programming languages.

### [Squoosh](https://squoosh.app/)

![Squoosh](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://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.

### [Devhints](https://devhints.io/)

![Devhints](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y6voe7qtpi85gtzw95jc.png)
 

> A modest collection of cheatsheets

### [Netlify](https://devhints.io/)

![Netlify](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ozann30glp7lxan8dmjw.png)

> An intuitive Git-based workflow and powerful serverless platform to build, deploy, and collaborate on web apps.


### [i Hate Regex](https://ihateregex.io/)

![i Hate Regex](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8czxcz6mucfbfkbilztr.png)
 

> i Hate Regex is a regex cheat sheet that also explains the commonly used expressions so that you understand them. Stop hating and start learning.

### [DevDocs](https://devdocs.io/)

![DevDocs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/imujglnlentzb0uz8qfc.png)
 
> Fast, offline, and free documentation browser for developers. Search 100+ docs in one web app: HTML, CSS, JavaScript, PHP, Ruby, Python, Go, C, C++, and many more.

<hr/>

# CSS

### [Animista](https://animista.net/)

![Animista](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kpcyqfkxwepgohuiwmf5.jpg)


> Animista is a place where you can play with a collection of ready-to-use CSS animations, tweak them and download only those you will actually use.

### [CSS-Tricks](https://css-tricks.com/)

![CSS-tricks](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1d7df43j1xzh7kumuduz.png)
 

> Daily articles about CSS, HTML, JavaScript, and all things related to web design and development.

### [Pattern.css](https://bansal.io/pattern-css)

![Pattern.css](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://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.

### [98.css](https://jdan.github.io/98.css/)

![98.css](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/81c31kkifax4f2z4bh5e.png)
 

> 98.css is a CSS library for building interfaces that look like Windows 98.

---

# DESIGN

### [Colors.lol](https://colors.lol/)

![Colors.lol](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ewj8u7t4frjtl5f7zaxh.png)

> Overly descriptive color palettes.

### [Colormind](http://colormind.io/)

![Colormind](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.

### [Color Hunt](https://colorhunt.co/)

![color-hunt-palettes-og](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tgvbdinc72ljannkz3so.png)
 

> Color Hunt is a free and open platform for color inspiration with thousands of trendy hand-picked color palettes.

### [FontSpark](https://fontspark.app/)

![FontSpark](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7vkxtnywqd92z2tts4zl.jpg)

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

### [FontSpace](https://www.fontspace.com/)

![FontSpace](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/buh96vvqxcdnf4ojnscc.png)
 

> FontSpace is a designer-centered font website that has quick customizable previews and hassle-free downloads.

### [AppMockUp](https://app-mockup.com/)

![AppMockUp](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dlel3ivsyrffhlkl2puu.png)
 

> AppMockUp Studio is the online design tool trusted by mobile developers to create the most compelling screenshots for the App Store & Play Store. No account required. It is fast & free.

### [Webframe](https://webframe.xyz/)

![webframe-screenshot](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.

### [Blobs](https://blobs.app)

![blobs_app_poster](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/togalc7e9agskpbxbovd.png)
 
> Customizable blobs as SVG and Flutter Widget. Create random or fixed blobs, loop, animate, clip them with ease.

### [Ucraft](https://www.ucraft.com/free-logo-maker)

![maxresdefault (6)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3hhrxthnripnyf2k4hiy.jpg)
 
> Create your logo for a website or brand in just a few clicks. Ucraft's free online logo maker allows you to design eye-catching, professional logos, and use them across various platforms.

### [Design Lint](https://lintyour.design/)

![Design Lint](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xdwgcm7vbnhz2ptfwpch.png)
 
 
> Design Lint is a free and open-source plugin for Figma built to help you find and fix errors in your designs.

# PRODUCTIVITY

### [GetTerms](https://getterms.io/)

![GetTerms](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7wgdir4emceq33fwc8xk.jpg)
 

> GetTerms.io is a free, generic website privacy policy generator, based on typical, reasonable, and fair use of information. Whether you use WordPress, Shopify, or more, we can generate simple terms & conditions and privacy policy documents for your website, ready to adapt to your needs.

### [Google Keep](https://keep.google.com/)

![Google Keep](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vk0nh64p01n3h5h5isc2.jpg)
 

> Google Keep is a note-taking service included as part of the free, web-based Google Docs Editors suite offered by Google.

### [Sejda](https://www.sejda.com/)

![Sejda](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c7a7jy7mm75ly40mnjpa.jpg)

> Sejda helps with your PDF tasks. Quick and simple online service, no installation required! Split, merge, or convert PDF to images, alternate mix, or split scans.

### [Grammarly](https://www.grammarly.com)

![Grammarly](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/npjzvwzgbxijpkbr4ufv.jpg)
 

> Grammarly scans your text for common grammatical mistakes (like misused commas) and complex ones (like misplaced modifiers).

### [Notion](https://www.notion.so/)

![Notion](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mj8kzcpevc9zn4yww2p1.png)

> A new tool that blends your everyday work apps into one. It's the all-in-one workspace for you and your team.

# Last Note 

Thank You for reading the blog post.

### [Toptal gitignore Generator](https://www.toptal.com/developers/gitignore)

![Toptal gitignore](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7k7zmamxniu9rrh2x6dg.png)
 

> Create useful .gitignore files for your project

### [WaveApp](https://www.waveapps.com/)

![WaveApp](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c64mjdt3adoq7ttb0aay.jpg)
 
> Free invoicing & accounting software with credit card processing & payroll services.

### [Clockify](https://clockify.me/)

![Clockify](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n7nxv74ukv7fx3xf6pmo.png)
 
 
> The most popular free time tracker for teams. The time tracking software used by millions. Clockify is a simple time tracker and timesheet app that lets you and your team track work hours across projects. Unlimited users, free forever.

### [Untools](https://untools.co/)

![Untools](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hgpuafqr2ohhefqcyu8q.jpg)
 
 
> Collection of thinking tools and frameworks to help you solve problems, make decisions, and understand systems.