DEV Community

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 Originally published at jfelix.info ใƒป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+ objects and characters, 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 that 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 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 patterns 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! ๐Ÿ˜Ž


Did you know I have a newsletter? ๐Ÿ“ฌ

If you want to get notified when I publish new blog posts and receive awesome weekly resources to stay ahead in web development, head over to https://jfelix.info/newsletter.

Discussion (75)

pic
Editor guide
Collapse
sharadcodes profile image
Sharad Raj (He/Him)

You deserve a salute๐Ÿ™‚

Collapse
hugoliconv profile image
Hugo

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

Collapse
joserfelix profile image
Jose Felix Author

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.

Collapse
hugoliconv profile image
Hugo

I already did it.

Thread Thread
joserfelix profile image
Jose Felix Author

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 ๐Ÿ˜Ž

Collapse
shubhamverma18 profile image
Shubham Verma

You can try TabNine too.

Collapse
natterstefan profile image
Collapse
yunusemreozcan profile image
yunusemreozcan

I want to add a tool so you can analyze all your Front-End errors ;)

Screpy - Website Analyzer

Screpy Website Analysis tool

Collapse
joserfelix profile image
Jose Felix Author

Look cool! Thanks for your recommendation ๐Ÿ™Œ

Collapse
pandaa880 profile image
Prashant Chaudhari

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

Collapse
cookieduster_n profile image
Nebojsa Radakovic

Great post man!

Collapse
julia_moskaliuk profile image
Julia Moskaliuk

It's very important to allocate time right way to achieve all goals. That's why designers should use time management apps. Try tmetric.com/, it is free and easily integrates with many project management and productivity apps like Asana, Evernote, JIRA etc.

Collapse
umarmw profile image
Umar Waliyullah

Great list indeed. thanks :)

Collapse
shriji profile image
Shriji

Awesome!

Collapse
cgmoore16 profile image
Casper

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

Collapse
10ursabanoglu profile image
Onur ลžabanoฤŸlu

Tools that will all work from each other!
Thanks.

Collapse
sirawit profile image
Dragodzs

Thank!

Collapse
gurucharan94 profile image
Gurucharan Subramani

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

Collapse
adrianamota profile image
Adriana Mota

Thanks!
These are so useful!

Collapse
dpaine20 profile image
David Paine20

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.

Collapse
ebraimcarvalho profile image
Ebraim Carvalho

Thanks Bro!!!

Collapse
fedonye profile image
Edozie Onyeanusi

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

Collapse
ebi15 profile image
Ebu

We are a leading Mobile app development company with over 14+ years of experience in developing native & hybrid applications for both startups & enterprises.
Having built more than 200 mobile apps, we understand that user engagement is the determining factor of mobile application success. User engagement is built on simple onboarding, minimalistic design, self guiding workflows, and consistent performance of the application. Our team of business analysts, designers, developers ensure that your application is built for success with the end-user in focus.

Collapse
m121 profile image
Mateo Perez Salazar

Thanks a lot!!

Collapse
ofuochi profile image
Fortune

Wow, just wow!

Collapse
stopdaydreaming profile image
Lisa Copeland • Edited

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

Collapse
jaywhy13 profile image
Jean-Mark Wright

This is an awesome list!!!!!

Collapse
olgagalikua profile image
Olga Galik

OMG, thanks so much for such a great list of resources.
btw, here is the list of tools for remote teams ( uptech.team/blog/coronavirus-remot...)

Collapse
jlaguilargomez profile image
Jose Luis Aguilar

OMG! Thanks for the post, Jose!

Collapse
ebi15 profile image
Ebu

Enterprises always lookout for the latest technology trends to stay ahead of the competition and Mobile app development company is not an exception. Nevertheless, the use of enterprise mobile applications against the download rate is always debated by experts. To provide clarity, in this post, I have provided information about the growth and future of mobile application development despite decline in downloads

Collapse
rattanakchea profile image
Rattanak Chea

There are so many tools I have not heard of. Thanks .

Collapse
samira85344712 profile image
Samira

Pau no cu

Collapse
2019farhad profile image
2019farhad

you Solve Many Problem, Thank you So much Sir

Collapse
arhitextura profile image
arhitextura

For the color section you can go with a better colors inspiration website.
coolors.co
It is free as well

Collapse
norah_mila profile image
Mila Norah

Well done
Keep up the good work

Collapse
shrishb profile image