List Of Free Web Development Tool & Resource

Web Development Tools & Resources

Free web development tool & resource – To create a website, we need some tools that can simplify our work process. From various sources, below I have provided in order to help you create a website.

List Of Free Web Development Tool & Resource

A. Image & Video


This website provides images with high resolution. All photos on this website are free, may be used for websites for commercial purposes and do not need permission to be able to use photos from the Unsplash website. However, photos may not be sold directly without modification, read the license.


Just like Unsplash, the Pexels website provides free images with high resolution. In addition, Pexels has also provided free videos.


Pixabay is a great free image provider website. the disadvantage is that images + vectors + illustrations + videos are available.

B. Ilustration


Provides open source illustrations. The advantages can be downloaded as svg or png, also the background color can be changed easily.

Use Mash

This website also provides illustrations that we can use for free.


Freepik provides many illustrations in the form of vectors, photos, and more, but not all images are free, some are paid


Interestingly, Storyset provides free illustrations that can be customized and animated.

C. Font & Icon

Google Font

If you need a font that can be used directly and easily, you can use Google Fonts. In addition, in Google Fonts, icons are also available that can be used for your website.


FlatIcon is part of Freepik. They provide many icons that we can download. but there are free and paid.

Font Awesome

It is one of the most popular icon providers. Previously this fontawesome merged with bootstrap, but now they have separated. We can use Font Awesome for free, but some of them are paid.

D. Design & Mockup


Figma is a website used to create UI/UX. the advantage is that Figma has a web app version, so we can only open figma via a browser.

Adobe XD

This is a very popular app for being able to design UI/UX.

If you only want to describe the wireframe, the website is the choice.


If you want to display in a mobile form, Phone Mockup is the choice. Available in mobile size and supports iPhone, iPad, Android, Tablet, Computer, TV to Wearables.

E. Color Generator / Color Schemes


Coolers is a color generator provider that is very widely used by developers. Besides being able to choose a color code, Coolers also has a Trending color feature.

Color Hunt

Similar to Coolors, Color Hunt also provides easy-to-use color schemes and trending colors.

Adobe Color

It also functions similarly to coolers and color hunts, but the advantage is that it has science-based color groupings such as Analogous, Monochromatic, Triad, Complementary and so on. Apart from that, Adobe Color also features color suggestions based on photos and usability.

F. Image Utilitis


This is a website that can be used to compress and resize images. The advantages are in the process of compressing and exporting in AVIF mode, JPEG Browser, PNG Browser, JPEG XL, MozJPEG, OxiPNG, and Webp.


This is a very simple website in image compression. The only way is to upload the file and specify the value, process it, then download it.

removebg (Remove Image Background)

This is a very useful website if you want the background of a photo to be removed.

Fotor Background Remover

This is a great tool. I have had by uploading a photo and the result is very good. The background in the photo is completely gone.

It is also very easy and fast to use.

If you are interested in using it for a free trial, please go to the official Fotor Background Remover page.

G. Online Coding & Snippets


Codepen is a website that contains popular online code editor and front end developer tools. With this we can do website development with just an application. besides that we can also share project links that we have made to colleagues. Codepen lebih fokus pada HTML dan CSS, meskipun tersedia juga javascript.


Just like Codepen, the difference is that JSFiddle is more dominant in Javascript. You can use one of them.


Replit is a website that already has an IDE in it. As for language support can be seen here.


Just to show program code Web Development Tool, can’t compile.

H. Online Documentation & Cheatsheet


This is a website which has a function to view documentation of a technology, programming language, framework or whatever it is in one website online.

Rico’s cheatsheet

Can I Use

Need for the latest technology information, browser support.

I. Web Design Inspiration


Dribbble is a social network to show website designs from the best work, where we can get web design inspiration.


As the name suggests, Awwwards is a website that awards the best website. We can use this to add inspiration in making a website.


This is also the same, to get website design inspiration.

J. Chrome Extensions

Web Developer Tools

Useful to enable/disable or manage javascript, css, forms, cookies, images and others.

Json View

Useful for viewing json data in a neat and orderly form.


Useful to find out information technology used by a web.

Awesome Screeenshoot & Screen Recorder

Useful for taking screenshots of a website either (selected or full) and combining them into a single image.


It is useful to know the font name of an article, just by hovering the cursor, the font name appears immediately without having to look at the css of the website.


Useful for knowing the color of an object, just hover over the object, then the color code will be known.

Hopefully this Web Development Tool article useful for you.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top