Linda-Ikechukwu / Web-Development-Tools

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

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

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

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

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

2. UnScreen

   Easily remove and edit video backgrounds.

3. Piggment

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

Code Samples

1. DevSamples

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

2. useHooks

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

Colours

1. Happy Hues

   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

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

2. Glassmorphisim

   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

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

2. Font Pairings By People

   Experiment with and select live font combinations for your next project

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

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

Illustrations

1. Illustrations.co

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

2. Big heads

   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

   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

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

2. Image Compressor

   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

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

4. Downloader

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

5. CoverView

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

6. Trace

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

JS Libraries

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

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

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

   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

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

3. Device Shots

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

OpenSource

1. Choose A Licence

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

Prototyping

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

   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

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

2. Blob Maker

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

3. SVG Generator

   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

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