loading...
Cover image for 40+ High Quality Free Resources for Web Development

40+ High Quality Free Resources for Web Development

joserfelix profile image Jose Felix Updated on ใƒป11 min read

Resources are extremely important for a programmer since they can greatly improve productivity while coding. I have been collecting many links throughout months and I wish to share some of them with you. Hopefully, they will be as useful to you as they have been to me. Without further ado here some great free and up-to-date resources!

Table of Contents:

Illustrations

Error 404

Error 404 landing page

This source is awesome for finding illustrations you can use for your website's 404 page.

Blush

Blush landing page

Blush allows you to download all their illustrations for free for commercial and personal use. It is amazing since it features many illustration styles that can be composed to create new ones. Also, they have a Figma plugin so you can immediately get working on them inside your designs.

Smash Illustrations

Smash landing page

Smash Illustrations features trendy characters and simple illustrations for free in commercial and personal use. It features more than 250+ object and character, and 20+ unique scenes so you can compose them however you like.

Control

Control landing page

Control features high-quality illustrations in solid and linear style for free. They are free to use in commercial and personal use however they are in .png format. If you need SVGs then you will have to pay $38 which isn't that bad for illustrations of this quality.

DrawKit

Drawkit landing page

DrawKit features 220+ free to use illustrations. They all come in SVG so you can create awesome compositions! Also, they offer animated illustrations using lottie which is huge for cool and sleek website development.

Open Doodles

Open Doodles landing page

If you are a fan of sketchy illustrations then you will love Open Doodles. All illustrations and free to download in SVG or PNG format. Also, they have a composition route and generator so you can get the doodles you need!

Free Illustrations

Free Illustrations landing page

Free Illustrations feature many illustration backgrounds that are perfect for landing page development.

Mixkit

Mixkit landing page

Mixkit is the Unsplash of illustrations, or that is their objective. It features many illustration categories and also stock videos and music, all free of charge.

Delesign

Delesign landing page

Delesign gives you many clean illustrations for free. Their main strong point is their diversity.

Development

Majestic

Majestic landing page

Majestic is a zero-config UI for Jest which makes it easier to see tests log output, instead of using purely the terminal. It can be installed globally or just be opened in any repository using npx majestic

Carbon

Carbon landing page

Carbon is useful if you want to share sleek images of code snippets inside a tweet or blog.

Squoosh

Squoosh landing page

Compress your images will almost unnoticeable quality loss. Also, you can edit image size and how much quality is lost making it a must for optimizing images for your site.

SVGOMG

SVGOMG landing page

SVGOMG delivers a gui for optimizing your SVG files. Extremely important when working with SVGs for your site.

Kite

Kite landing page

Kite is amazing for increasing your code productivity. I believe that in the future AI won't take our jobs but it will be augmented by tools like this. It offers autocompletion in your favorite editors using machine learning trained with 2+ million repositories. It currently works only with Python and Javascript, but shortly, more languages will be available.

DevDocs

DevDocs landing page

DevDocs is a documentation aggregator. It adds multiple libraries and API documentation in a clean and searchable interface. This is massive for general development so I highly recommend it.

DevHints

DevHints landing page

This website featured cheat sheets for many tools such as bash, React, go, sass, and many more.

Wappalyzer

Wappalyzer landing page

Want to know the stack of your favorite website? Say no more, Wappalyzer allows you to know fairly quickly. They also have an extension so you find these on the go.

iHateRegex

iHateRegex landing page

This site is a holy grail for those that don't want to create their own regex or search all through google. Think of it as google for regex.

LottieFiles

Lottie Files landing page

Ever heard of Lottie? I had not until I found this website. Lottie is a library that allows you to parse and run animations exported from Adobe After Effects. These animations are beautiful and LottieFiles houses thousands of these for free. However, take into consideration most of them have a CC-BY 2.0 license.

Shape Divider

Shape Divider landing page

Shape Divider allows you to generate sleek dividers for your website on the fly. It features a cool UI compared to other sites and works very well.

CSS

Animista

Animista landing page

Need some CSS animations inspiration or snippets? Animista got you covered. It features many cool CSS effects that can speed up your development.

Pattern.css

Pattern.css landing page

Love to use patterns in your design? Then you will love this one. It is a CSS library that makes distinct classes available for you to create awesome patterns for your website.

CSSeffectsSnippets

CSSeffectsSnippets landing page

Nifty CSS animations for your website.

98.css

98.css landing page

98.css lets your nostalgic fantasies come true. If you need to build a website or electron app with Windows 98 style then 98.css will greatly help you.

Tailwind

TailwindComponents

TailwindComponents landing page

Tailwind is very popular these days, and sites like this show why. TailwindComponents feature hundreds of community-built components using tailwind.css. Some of these have a very high quality so be sure to check it out!

Tailblocks

Tailblocks landing page

Tailblocks features more high-quality Tailwind components. However, they provide a similar experience to bootstrap so you can create a whole website using these. Absolutely a must to speed development.

Design

colors.lol

Colors.lol landing page

Need palettes that are overly descriptive? Colors.lol is the right place to go to find these. They feature 10+ of these palettes which can make your design more vibrant.

ColorMind

Colormind landing page

Colormind generates color schemes using deep learning. You can lock the colors and get others which complement that one.

Ucraft Logo Maker

Ucraft Logo Maker landing page

This is my go-to whenever I need a quick logo for a side project. They feature thousands of icons that can help you create many logo combinations. For free commercial and personal use, they let you download a PNG version of your logo.

AppMockUp

AppMockUp landing page

AppMockUp lets you generate mock-ups for Android and iPhones without much work. If you are a mobile developer be sure to check this one out.

Webframe

Webframe landing page

Webframe has thousands of design inspiration based on real websites.

FontSpark

FontSpark landing page

FontSpark allows you to discover your next favorite font by generating different ones until you like it.

HackDesign

HackDesign landing page

Have a lot of time and want to learn design? Then HackDesign is for you. This website features many lessons that can teach you what you need for becoming a designer.

Checklist Design

Checklist Design landing page

If you are designing or building a website these checklists can be a life-saver. They guarantee accessibility and great UX for different sections of your site such as forms, typography, buttons, and many more.

Remove BG

Remove BG landing page

The title is pretty self-explanatory. This tool makes it a breeze to delete the background from your images so you can use it in your designs or website.

Unscreen

Unscreen landing page

Just like remove.bg but for gifs and videos.

Productivity

Sejda

Sejda landing page

Sejda is provides an online sleek PDF editor. Awesome for editing your CV!

GetTerms

GetTerms landing page

GetTerms generates a Privacy Policy and Terms of Service tailored for your app. This is awesome for saving time in when building a web product.

Top Hunts Time Machine

Top Hunts Time Machine landing page

This tool allows you to see the most famous products featured in Product Hunt. If you want to find resources be sure to check this out monthly.

Notion

Notion landing page

Notion is so good. So good that it is in fact my daily writing platform. I just love how clean and efficient it is for blogging and note-taking.

Writty

Writty landing page

Need a super lean and sleek editor for writing? Then you will like Writty. It features a super simple editor that saves all you write inside your browser so you don't have to worry about it being exposed to the Internet so easily. Also, it is open-source which is a plus.

Grammarly

Grammarly landing page

This is a must for writing anything on the Internet. I compare this tool to ESLint since it allows you to find errors before you even notice them. Developers can benefit from this whenever we are writing GitHub issue, a Stack Overflow question, ...

OpenSource Builders

OpenSource Builders landing page

OpenSource Builders offers many open-source alternatives to common products such as Facebook, Slack, Shopify, and many more.

Wave

Wave landing page

If you are a freelancer or have your own business, Wave can help with accounting, invoicing, and receipts free on the web.

Clockify

Clockify landing page

A truly free time tracker for individuals and teams. Clockify allows you to log time easily and has many features for you to manage this data.

Untools

Untools landing page

Untools features many thinking patters that can help you during programming.

Conclusion

I hope all of these resources can help you build better websites and apps as they have helped me! If you have another favorite resource, please write them up in the discussion below.

For more up-to-date web development content, follow me on Twitter, and Dev.to! Thanks for reading! ๐Ÿ˜Ž

Posted on by:

joserfelix profile

Jose Felix

@joserfelix

React Developer passionate in building clean user interfaces.

Discussion

markdown guide
 

You deserve a salute๐Ÿ™‚

 

I tried Kite last week and it is really good, unfortunately, it was consuming a lot of RAM (3GiB) on Ununtu

 

Kite should be using a maximum of 900 MB when in use and 200-300 MB when idle. I strongly encourage you to create an issue on their github repository so that they can assist you further on this.

 

Great! Thanks for taking the time to help the Kite community. I see they are actively working on this and will hopefully push a fix by next week. To keep track, look at this issue. Cheers ๐Ÿ˜Ž

 
 
 
 

Thank you so much for collecting and sharing this. These kind of illustrations are what i was looking for. Respect :)

 

Excellent resources! The best list I have seen in a while. ๐Ÿ‘ ๐Ÿ‘

 
 

Tools that will all work from each other!
Thanks.

 
 

Thank you a lot for putting this together ๐Ÿ™๐Ÿ™

 

Thanks!
These are so useful!

 

This is an awesome list! Thanks for putting it together!

 

Thanks for sharing the list of useful web development tools as resources. I love your article. The best part of such articles is, that the writer spends a lot of time searching this stuff, and come up with the get that it has. Here is a website I would like to suggest
url-decode.com/
You must check it out. That website contains the tools related to number utilities, unit converter, developers, string utilities, converter, and IP tools as well under one domain. That will definitely help the users.

 
 
 
 

Awesome piece, Jose. This would be definitely helpful to me.

 
 
 
 
 
 
 
 
 

Great! Thanks for providing us with that list!

 
 
 

Awesome Collection, Thank you very much, great resource, Again Thank you. ๐Ÿ˜