More than 40 high-quality free resources for web development

Resources are extremely important to programmers because they can greatly increase productivity while coding. In the past few months, I have been collecting many links and hope to share some of them with you. Hope they are as useful to you as I am. Without further ado, here are some great free and up-to-date resources!

contents:

Illustration
Development Tools
CSS
Tailwind
design
Improve efficiency tool

illustration

Error 404

This resource is great for finding illustrations that can be used on a website's 404 page.

Blush

Blush allows you to download all illustrations for free for commercial and personal use. Surprisingly, it has many illustration styles that can be synthesized to create new illustrations. In addition, they have a Figma plug-in, so you can immediately manipulate it in the design.

Smash Illustrations

Smash Illustrations has stylish characters and simple illustrations, free for commercial and personal use. It has more than 250 objects and characters, and more than 20 unique scenes, so you can synthesize them as you like.

Control

Control provides high-quality illustrations in solid and linear styles for free. They can be used freely for commercial and personal purposes, but the .png format is diverse. If you need SVG, you have to pay $38, which is not bad for illustrations of this quality.

DrawKit

DrawKit has more than 220 free-to-use illustrations. They are all provided in SVG format, so you can create great compositions! In addition, they also provide lottery , which is very useful for cool and stylish website development .

Open Doodles

If you like rough illustrations, then you will like Open Doodles. All illustrations can be downloaded as SVG or PNG format for free. In addition, they have synthesis routes and generators, so you can get the doodles you need!

free illustrations

The free illustrations have many illustration backgrounds, which are very suitable for landing page development

Mixkit

Mixkit is Unsplash , or their target. It has many illustration categories, and it also provides stock video and music for free.

Delesign

Delesign provides many clean illustrations for free. Their main advantage is their diversity.

development tools

Majestic

Majestic is Jest's zero-configuration UI, which makes it easier to view the test log output instead of purely using the terminal. It can be installed globally, or it can be opened in any repository using the following method npx majestic

Carbon

Good-looking code segment graphics generation tool.

Squoosh

Compressed images hardly cause significant quality loss. In addition, you can edit the image size and how much quality is lost, which is a necessary condition for optimizing site images.

SVGOMG

SVGOMG provides a GUI for optimizing SVG files. It is extremely important when using SVG for your site.

Kite

Kite is great for improving your code productivity. I believe that artificial intelligence will not take over our work in the future, but it will be enhanced through tools such as these. It uses machine learning trained on 2 million repositories and provides auto-completion in your favorite editor. It currently only works with Python and Javascript, but more languages will be available soon.

DevDocs

DevDocs is a document aggregator. It adds multiple libraries and API documentation in a clean and searchable interface. This is of great significance for general development, so I strongly recommend you to do this.

Devhints

The website has cheat sheets for bash, React, go, sass and many other tools.

Wappalyzer

Want to know what technology is used to develop your favorite website? Needless to say, Wappalyzer can make you understand quickly. They also have Google extensions, so you can find them anytime, anywhere.

iHateRegex

For those who do not want to create their own regular expressions or do not want to search through Google, this website is a good choice.

LottieFiles

heard of 1614a95f14453b lottie ? I didn't know until I found the website. Lottie is a library that can be used to parse and run animations exported from Adobe After Effects. These animations are very beautiful, LottieFiles provides thousands of these animations for free. However, considering that most of them have a CC-BY 2.0 license.

Shape Divider

Shape Divider allows you to dynamically generate smooth dividers for your website. Compared with other websites, it has a cool UI and works very well.

CSS

Animista

Need some CSS animation inspiration or snippets? Animista casts a shadow on you. It has many cool CSS effects that can speed up your development.

Pattern.css

Do you like using patterns in your design? Then you will fall in love with this. It is a CSS library that allows you to use different classes to create great patterns for your website.

CSSeffectsSnippets

Provides beautiful CSS animations.

98.css

98.css makes your nostalgic fantasy a reality. If you need to build a website or electronic application with the style of Windows 98, 98.css will provide you with great help.

Tailwind

TailwindComponents

Nowadays, Tailwind is very popular, and websites like this explain why. TailwindComponents has hundreds of communities using built-in components tailwind.css . Some of them are of high quality, so be sure to check it out!

Tailblocks

Tailblocks has more high-quality Tailwind components. However, they provide an experience similar to bootstrapping, so you can use them to create an entire website. It is absolutely necessary to accelerate development.

design

Colors.lol

Colors.lol can be used to describe color palettes. They have more than 10 such color palettes, which can make your design more vibrant.

Colormind

Colormind uses deep learning to generate color schemes. You can lock the color and get other colors to complement it.

free-logo-maker

Free logo maker tools, they have thousands of icons, can help you create many logo combinations. Provides free commercial and personal use, you can download the PNG version of log.

AppMockUp

AppMockUp allows you to generate models for Android and iPhone without much work.

webframe

Webframe has thousands of design inspirations based on real websites.

FontSpark

FontSpark allows you to discover the next font you like by generating different fonts until you like it.

Checklist Design

If you are designing or building a website, these checklists can save lives. They guarantee accessibility and excellent UX for different parts of the website (such as forms, typography, buttons, etc.).