Free Web Development Tool & Resource

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.

Free Web Development Tools & Resources To Help You In Development A Website

 A. Image & Video

  1. 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.
  2. Pexels
    Just like Unsplash, the Pexels website provides free images with high resolution. In addition, Pexels has also provided free videos.
  3. Pixabay
    Pixabay is a great free image provider website. the disadvantage is that images + vectors + illustrations + videos are available.

B. Ilustration

  1. unDraw
    Provides open source illustrations. The advantages can be downloaded as svg or png, also the background color can be changed easily.
  2. Use Mash
    This website also provides illustrations that we can use for free.
  3. Freepik
    Freepik provides many illustrations in the form of vectors, photos, and more, but not all images are free, some are paid
  4. Storyset
    Interestingly, Storyset provides free illustrations that can be customized and animated.

C. Font & Icon

  1. 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.
  2. FlatIcon
    FlatIcon is part of Freepik. They provide many icons that we can download. but there are free and paid.
  3. 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

  1. 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.
  2. Adobe XD
    This is a very popular app for being able to design UI/UX.
  3. Wireframe.cc
    If you only want to describe the wireframe, the website wireframe.cc is the choice.
  4. 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

  1. 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.
  2. Color Hunt
    Similar to Coolors, Color Hunt also provides easy-to-use color schemes and trending colors.
  3. 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

  1. 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.
  2. 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.
  3. 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

  1. 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.
  2. JSFiddle
    Just like Codepen, the difference is that JSFiddle is more dominant in Javascript. You can use one of them.
  3. Replit
    Replit is a website that already has an IDE in it. As for language support can be seen here.
  4. Pastebin
    Just to show program code, can't compile.

H. Online Documentation & Cheatsheet

  1. 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.
  2. Rico's cheatsheet
  3. Can I Use
    Need for the latest technology information, browser support.

I. Web Design Inspiration

  1. Dribbble
    Dribbble is a social network to show website designs from the best work, where we can get web design inspiration.
  2. 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.
  3. SiteInspire
    This is also the same, to get website design inspiration.

J. Chrome Extensions

  1. Web Developer Tools
    Useful to enable/disable or manage javascript, css, forms, cookies, images and others.
  2. Json View
    Useful for viewing json data in a neat and orderly form.
  3. Wappalyzer
    Useful to find out information technology used by a web.
  4. Awesome Screeenshoot & Screen Recorder
    Useful for taking screenshots of a website either (selected or full) and combining them into a single image.
  5. 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.
  6. ColorZilla
    Useful for knowing the color of an object, just hover over the object, then the color code will be known.
Hopefully this article useful for you. Thank you for visiting the Hamnics website.

Next Post Previous Post
No Comment
Add Comment
comment url