Free Web Development Tools & Resources To Help You In Development A Website
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.
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.
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 wireframe.cc 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.
G. Online Coding & Snippets
Replit is a website that already has an IDE in it. As for language support can be seen here.
Just to show program code, 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
- 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.