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.
A. Image & Video
Unsplash
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.
Pexels
Just like Unsplash, the Pexels website provides free images with high resolution. In addition, Pexels has also provided free videos.
Pixabay
Pixabay is a great free image provider website. the disadvantage is that images + vectors + illustrations + videos are available.
B. Ilustration
unDraw
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
Freepik provides many illustrations in the form of vectors, photos, and more, but not all images are free, some are paid
Storyset
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
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
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.
Wireframe.cc
If you only want to describe the wireframe, the website wireframe.cc is the choice.
MockupPhone
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
Coolors
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
Squoosh
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.
Optimizilla
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
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.
JSFiddle
Just like Codepen, the difference is that JSFiddle is more dominant in Javascript. You can use one of them.
Replit
Replit is a website that already has an IDE in it. As for language support can be seen here.
Pastebin
Just to show program code Web Development Tool, can’t compile.
H. Online Documentation & Cheatsheet
DevDocs
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
Dribbble is a social network to show website designs from the best work, where we can get web design inspiration.
Awwwards
As the name suggests, Awwwards is a website that awards the best website. We can use this to add inspiration in making a website.
SiteInspire
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.
Wappalyzer
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.
WhatFont
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.
ColorZilla
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.
