Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/linda-ikechukwu/web-development-tools

An organized list of useful online free web development tools for freelancing, personal projects and maybe more ...
https://github.com/linda-ikechukwu/web-development-tools

developer-tools devtools freetooldev plugins webtools

Last synced: 4 months ago
JSON representation

An organized list of useful online free web development tools for freelancing, personal projects and maybe more ...

Awesome Lists containing this project

README 

          
# Frontend Web Development Tools



 
Find Your Next Life Saver Tool 😁 !!!



 
An organized list of useful and handy online FREE web development tools for freelancing, personal projects and maybe more ...


 

 



## Animations



1. [Animista](https://animista.net/play)



   Animista is a playground of pre-made css animations. Try out animations, copy and paste the code for your own use.



2. [Loading.io](https://loading.io/)



   Loading.io is an all in one animation platform and online editor. Copy and paste code for animated backgrounds, loaders, icons, text and more to use in your project or create    your own.

   



## Backgrounds



1. [Pattern.css](https://bansal.io/pattern-css)



   Pattern Css is a css library for adding beautiful background patterns to your website such as you see on popular websites. 

   

2. [UnScreen](https://www.unscreen.com/)



   Easily remove and edit video backgrounds.

   

3. [Piggment](https://piggment.co/)



   Piggment is an online tool for creating the perfect color gradient.

   

   

## Code Samples



1. [DevSamples](http://www.devsamples.com/)



   Code samples for common frontend problems on HTML, CSS, JavaScript, React, React Native e.t.c

   

2. [useHooks](https://usehooks.com/)



   Easy to understand custom React Hook recipes curated by Gabe Ragland. Find hooks for asynchronous loading and so much more



## Colours



1. [Happy Hues](https://www.happyhues.co/palettes/7)



   Not sure what colors to use in your designs or where to use them? Happy Colors is a color palette inspiration site that acts as a real world example as to how the colors

   could be used in your design projects.

   

   

## CSS Tools



1. [CSS Scan Box Shadow Examples](https://getcssscan.com/css-box-shadow-examples)



   Find box shadow ideas for your next cards. Copy and paste code into your project.

   

2. [Glassmorphisim](https://glassmorphism.com/)



   Glassmorphism is a unified name for the popular Frosted Glass aesthetic that everyone is crazed about. Esaily generate your own glassmorphisim cards.  

   

## Fonts



1. [Google WebFonts Helper](https://google-webfonts-helper.herokuapp.com/fonts)



   Makes downloading fonts to use locally easier. Get eot, ttf, svg, woff and woff2 files + CSS snippets.

   

2. [Font Pairings By People](https://fontpairings.bypeople.com/)



   Experiment with and select live font combinations for your next project

   

3. [Typefaces](https://github.com/KyleAMathews/typefaces)



   Typeface is a library of NPM packages for Open Source typefaces — making it easier to self-host webfonts. simply npm install and use font in your project.

   

   

## Icons



1. [Animated Icons](https://icons8.com/animated-icons)



   A collection of over 150 free animated icons available to use and ddownload as gif, json or adobe effects format.

   

   

## Illustrations



1. [Illustrations.co](https://illlustrations.co/)

   

   Illustrations is a free opensource illustration kit that can be used for awesome landing pages.

   

2. [Big heads](https://bigheads.io/)



   Generate random avatars and characters for your next app idea. Characters can be downloaded as images or svg or as a react component.

   

3. [Free Illustrations](https://freeillustrations.xyz/)



   Huge collection of illustration packs of several categories and file types: AI, png, svg, figma, jpeg, gif, xd, e.t.c

   

   

## Images



1. [Peko-Step.com](https://cdn.peko-step.com/en/)



   Useful for image editing functions such as transparncy, resizing, croping, fliping, filters e.t.c



2. [Image Compressor](https://imagecompressor.com/)



   Useful for bulk compression and optimization of images, up to 20 at a go. Uses a smart combination of the best optimization and lossy    compression algorithms to shrink JPEG    and PNG images to the minimum possible size while keeping the required level of quality.

   

3. [Remove Bg](https://www.remove.bg/)



   Remove Image backgrounds 100% automatically with zero clicks. Its free too



4. [Downloader](https://downloader.la/)



   With downloader, you can download pictures from premium photo sites (e.g GettyImages, Shutterstock, Lovepik, Adobestock) without the water marks for free!!

   

5. [CoverView](https://coverview.now.sh/)



   Super cool tool for creating cover images for your blog posts.

   

6. [Trace](https://www.stickermule.com/trace)



   Instantly remove backgrounds from images, replace image background or turn image into a sticker.



## JS Libraries



1. [fraction.js](https://github.com/ekg/fraction.js/)

   

   Fraction.js is a fraction arithmetic library written in javascript. It provides a simple interface to add, subtract, multiply, and divide fractions.

   

2. [Dexie.js](https://dexie.org/)



   Dexie is a super cool library that makes using Indexeddb easy, fun and hassle free. 

   

3. [LocalForage](https://localforage.github.io/localForage/)



   LocalForage is a js library for seamlessly working with offline storage. It uses a LocalStorage like API to store things in indexedDB/WebSQL/LocalStorage



##  Mock-ups

Free online tools useful for creating product/app image mockups



1. [Mockuper](https://mockuper.net/)



   Useful for designing products mockups easily and quickly. Choose between desktop mockups, phone mockups, tablet, posters or business    cards mockups. Show clients your works in a beautiful and realistic way.

   

2. [Mockup Mark](https://mockupmark.com/)



   Create T-shirt and hoodie mockups with the online apparel mockup generator for e-commerce showcase or other.

   

3. [Device Shots](https://deviceshots.com/)



   Create high resolution device mockups of your website or app in seconds.

   

   

 ## OpenSource



1. [Choose A Licence](https://choosealicense.com/)



   Learn about open source libraries. Get help to choose an open source license for your project based on your needs 



## Prototyping



1. [Whimsical.com](https://whimsical.com)

   

   Whimsical is a free/paid web app that can be used to create wireframes, flowcharts, sticky-notes and mind maps designs quickly and share across teams.

   



## React Libraries



1. [React Hook Forms](https://react-hook-form.com/)



    React Hook Forms is an easy to use library for form validation. It offers Performant, flexible and extensible forms with easy-to-use validation

   

   

## SVGs



1. [Get Waves](https://getwaves.io/)



   Useful for creating wavy svg shapes. Simply adjust settings until desired form is gotten.



2. [Blob Maker](https://www.blobmaker.app/)



   Blobmaker is a free generative design tool, to help you quickly create random, unique, and organic-looking SVG shapes.



3. [SVG Generator](https://smooth.ie/blogs/news/svg-wavey-transitions-between-sections)



   This tool generates wavy html elements for making wavy transitions between sections on your website,Just grab the red markers and create the curve that's right for your website.

   

4. [SVG Repo](https://www.svgrepo.com/)

   

   Explore, search and find the best fitting svg icons or graphics for your next projects. Download free SVG Vectors for commercial use.