The Best Resources and Tools for Web Developers
Tags: webdev, tutorial, codenewbie
Published: 2022-10-10 18:50:32

In this article, I decided to share some resources for web developers. Resources will help beginners and experienced developers to make their projects better and work easier. If some resources are not mentioned in this article, I would appreciate it if someone shares them in the comments.

### Icons

* [Fontastic](https://fontastic.me)
    
* [Fontello](https://fontello.com)
    
* [Ant design](https://ant.design/components/icon)
    
* [Custicon](https://custicon.com)
    
* [Fontawesome](https://fontawesome.com)
    
* [Icomoon](https://icomoon.io)
    
* [Material-ui](https://mui.com/material-ui/material-icons) (Fonts, styled-components and more)
    
* [Healthicons](https://healthicons.org)
    
* [Weather icons](https://erikflowers.github.io/weather-icons/)
    
* [Symbols.wentin](https://symbols.wentin.net/) (Mostly CSS, HTML code and unicode )
    

### Fonts

* [Google fonts](https://fonts.google.com) (The best)
    
* [Font squirrel](https://www.fontsquirrel.com)
    
* [Fontspace](https://www.fontspace.com)
    
* [Befonts](https://befonts.com)
    

### [SVG Waves](https://svgwave.in)

Create Your own SVG wave and export it as a .svg or .png file.

### Animations

To play around with existing website animation in dev tools in chrome browser:  
key combination: ctrl + p  
Type: "&gt;animation" and hit enter

Now hover elements.


![Animation track](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y7z6o0xeiksbnf0mfycp.png)


Click on classes to see the CSS.  
A full example is available [here](https://youtu.be/ecl-eCbYFPM?t=12).

List of CSS animation generators:

* [Animista](https://animista.net/play/basic)
    
* [Wweb](https://wweb.dev/resources/animated-css-background-generator) (Background only)
    
* [Angrytools animation](https://angrytools.com/css/animation) (Advanced)
    

### [Angry tools gradient](https://angrytools.com/gradient)

Nice and intuitive generator to work with gradients. Also, it has the ability to export not only as CSS. Which is useful if I want to export gradients as canvas or image.

### [Mesh gradient](https://meshgradient.in)

Tool to create mesh gradient.

### [Coolors.co](https://coolors.co)

Sometimes it can be hard to choose the right color palette. Colors.co solves this problem. Choose the right pallet from a random generator, or explore trending.

### HTML, CSS, JS and PHP Code Generator

A generator which may make your work faster. For example, I need to download country flag [images](https://www.html-code-generator.com/image/country-flags). With this generator, this task is way easier, just select all countries, what You need. Only one image format is available, png, keep this in mind.  
Need to make an accordion from scratch? Check out this [link](https://www.html-code-generator.com/jquery/accordion-generator). It is only two examples, I am sure that everyone will find something useful.

### [HTML-CSS-JS](https://html-css-js.com)

Soo many awesome tools on one website, code editor, cheat sheets, tag list and more.

### [Can I Use](https://caniuse.com)

It is important to check if the browser supports new CSS or JS features. "Can I use" shows full information about feature support.


![Can I use](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xfcwtg6g7uzxay8w2zsr.png)



### ChatGPT

Fantastic chatbot for developers. For now, this is a great free assistant for any developer. Unless authors will make it paid in the future. Give a try and ask some questions. For example:

Question:


![Chat gpt input](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/544uzlq3lnmx0yd0upc4.png)


Response:


![Chat gpt response](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n503c3e7sg8eil6cpps8.png)




![Chat gpt second response](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0nssio0wio38frnp8ayl.png)


### [StackOverflow](https://stackoverflow.com)

Run into a problem and do not know how to solve it? In most cases, someone had this problem and solved it by himself or with a help of other developers.  
For example:


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



### Regex

For people who are only learning or struggle with regex:

* [**iHateRegex**](http://ihateregex.io)
    
* [Regex101](https://regex101.com)
    

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

Sometimes the image size is too big. For this reason, the website loads slower, to solve this problem use an image compressor.

### [Seoreviewtools](https://www.seoreviewtools.com)

All You need to solve most of the SEO problems.

### Conclusion

I hope this article was useful. I did my best to make the article informative and helpful by providing links to the most valuable resources and tools. Do not forget to share Your opinion in the comments.

I am available on social media: [Twitter](https://twitter.com/Oscar_Sherelis) [LinkedIn](https://www.linkedin.com/in/oscar-sherelis) [Instagram](https://www.instagram.com/oscar_sherelis)

Support me: https://www.buymeacoffee.com/oscarWeb