Some Lesser Known But Awesome Online Tools For Web Development

Some Lesser Known But Awesome Online Tools For Web Development

These are some not so popular sites or apps or extensions I found very useful, either because they make my life easier or because they push me to write more accessible code.

The list is divided into these parts :


UI Graphics

Websites      Description
Open DoodlesIt's a free set of sketchy illustrations by Pablo Stanley.
HumaaansHere you can Mix-&-Match illustrations of people with a design library.
PaaatternsIt's a free collection of beautiful patterns for all vector formats.
Open PeepsA great hand-drawn illustration library.
avataaarsMix & Match avatars with a sketch library also created by Pablo Stanley.
DwarKitHand-drawn vector illustration and icon resources, perfect for your next project.
illlustrations.coAnother great Open source illustrations kit.

Colors

Websites      Description
FlatUIColors 2Beautiful set of color palettes in various flavours.
SchemeColorA great website to download color schemes.
GradientaA pure css and jpg gradients.
uiGradientsGorgeous looking gradient generator.
CoolorsCreate or get inspired by thousands of beautiful color schemes.

Icons

Websites      Description
BoxiconsA simple vector icons set carefully crafted for designers and developers
FeatherIconsBeautiful, customizable open source icons
Simple IconsMore than 1400 Free SVG icons for popular brands
IoniconsPremium designed icons for use in web, iOS, Android, and desktop apps.
Svg Porn1000+ high-quality SVG logos
Browser LogosA repo for high resolution web browser logos
IconBrosOver 9000 free icons

Product & Image Mockups

Websites      Description
ScreelyGenerate Website Mockups Instantly Without Complicated Software
threed.ioGenerate 3D Mockups right in your Browser
ShotBotA screenshot builder for android and ios.
SmartMockupsGenerate stunning product mockups.

Online Design Tools

Websites      Description
ShapeFactoryOne stop of design tools including Logos, Pigments, Gradient, Duotone, Illustrations.
AngryToolsAnother great all rounder design tool.
Smart upscalerEnlarge and enhance images automatically using AI.
neumorphism.ioGenerate Soft-UI CSS code.
Grid.malvenA simple visual cheatsheet for css grid.
TinyPNGWebsite for smart PNG and JPEG compression.
Remove.bgRemove image background 100% automatically and free.
Online png toolsA collection of useful PNG image utilities for working with PNG graphics files.
BootswatchCollection of free themes for Bootstrap.
GraphicBurgerTasty design resources made with care for each pixel
BlobmakerQuickly create random, unique, and organic-looking SVG shapes.
PersonasA playful avatar generator for the modern age.
CodingHerosJonas's resources for building great websites with html, css, javascript.
You Don't Need jQuery!A great blog post stating why you don't need jquery.

Extensions

Websites      Description
Picture-in-Picture Extension (by Google)Watch video using Picture-in-Picture
Page Ruler ReduxA Web Developer\Designer ruler to get perfect pixel dimensions and positioning to measure elements on any web page
WhatFontWhat Font allows you to know the font name, its family, color, style, size, position.
Just Color PickerСolor picker for web designers and digital artists, created by a designer and digital artist.
GoFullPageCapture a screenshot of your current page in entirety and reliably without requesting any extra permissions!

BONUS : You made it to the bottom of the list. So here's a bonus for you.

Websites      Description
You Don't Know JSA great book series on JavaScript. And if you go the 1st-ed branch, the titles are all free for you to learn!

Thanks for reading. Show some love if you like the post.

Follow me on Dev.to

Follow me on github