loading...
Cover image for Some Lesser Known But Awesome Online Tools For Web Development

Some Lesser Known But Awesome Online Tools For Web Development

soumyadey profile image Soumya Dey Updated on ・4 min read

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 Doodles It's a free set of sketchy illustrations by Pablo Stanley.
Humaaans Here you can Mix-&-Match illustrations of people with a design library.
Paaatterns It's a free collection of beautiful patterns for all vector formats.
Open Peeps A great hand-drawn illustration library.
avataaars Mix & Match avatars with a sketch library also created by Pablo Stanley.
DrawKit Hand-drawn vector illustration and icon resources, perfect for your next project.
illlustrations.co Another great Open source illustrations kit.
↥ To Top

Colors

Websites       Description
FlatUIColors 2 Beautiful set of color palettes in various flavours.
SchemeColor A great website to download color schemes.
Gradienta A pure css and jpg gradients.
uiGradients Gorgeous looking gradient generator.
Coolors Create or get inspired by thousands of beautiful color schemes.
↥ To Top

Icons

Websites       Description
Boxicons A simple vector icons set carefully crafted for designers and developers
FeatherIcons Beautiful, customizable open source icons
Simple Icons More than 1400 Free SVG icons for popular brands
Ionicons Premium designed icons for use in web, iOS, Android, and desktop apps.
Svg Porn 1000+ high-quality SVG logos
Browser Logos A repo for high resolution web browser logos
Heroicons Not so large but quality set of filled and outline svg icons
↥ To Top

Product & Image Mockups

Websites       Description
Screely Generate Website Mockups Instantly Without Complicated Software
threed.io Generate 3D Mockups right in your Browser
ShotBot A screenshot builder for android and ios.(currently not accepting new accounts)
SmartMockups Generate stunning product mockups.
↥ To Top

Online Design Tools

Websites       Description
ShapeFactory One stop of design tools including Logos, Pigments, Gradient, Duotone, Illustrations.
AngryTools Another great all rounder design tool.
Smart upscaler Enlarge and enhance images automatically using AI.
neumorphism.io Generate Soft-UI CSS code.
Grid.malven A simple visual cheatsheet for css grid.
TinyPNG Website for smart PNG and JPEG compression.
Remove.bg Remove image background 100% automatically and free.
Online png tools A collection of useful PNG image utilities for working with PNG graphics files.
Bootswatch Collection of free themes for Bootstrap.
GraphicBurger Tasty design resources made with care for each pixel
Blobmaker Quickly create random, unique, and organic-looking SVG shapes.
Personas A playful avatar generator for the modern age.
CodingHeros Jonas'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.
Brumm.af A great online tool for easily creating layered box shadows
↥ To Top

Extensions

Websites       Description
Picture-in-Picture Extension (by Google) Watch video using Picture-in-Picture
Page Ruler Redux A Web Developer\Designer ruler to get perfect pixel dimensions and positioning to measure elements on any web page
WhatFont What 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.
GoFullPage Capture a screenshot of your current page in entirety and reliably without requesting any extra permissions!
↥ To Top

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

Websites       Description
You Don't Know JS A 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 github.

Don't forget to share your favourite tools that helps you in development in the comments.

Posted on by:

soumyadey profile

Soumya Dey

@soumyadey

Full × Stack × Web × Developer || React × Node × Express × MongoDB || Football lover ⚽ Book worm 📖 Obsessed with coffee ☕ & Feluda 🕵️‍♂️

Discussion

pic
Editor guide
 

Have you checked out grayscale.design?

You can generate a color palette using luminance (aka color values). This way you could design in grayscale to nail the contrast and then easily swap in colors of those same values without messing up your contrast ratios.

 
 

I love how organized this is.

 

Thanks a lot ender 😌

 

Thanks for sharing this, some really cool tools there.
Just Few corrections,
in the UI graphics category, column 1, typo: DwarKit -> DrawKit
Under icons : IconBros url doesnt work. 502 Error
Under mockups: You cant use ShotBot unless you have an existing account. You cant create a new account currently.

 

Thanks a lot for the updates. 😊
I have Changed the list accordingly.

Hope you'll like my new post : Understanding JS scope rules

 
 

Thanks for the amazing list. 👍

 

You are most welcome 🤠

 
 

You are most welcome! 😄

 

Quite a diverse list you could share it on github.

 

Nice work. I had not heard of about 90% of those resources … thanks!

 

Thanks a lot...Now you know about these awesome tools...😄

 

Thanks for this awesome list! Would be great if you add Heroicons to the icons section.

 

Thanks for the suggestion.
I have seen the website. Surely gonna add that to the list!

 

I'm the newbie in web developing and I love how Soumya bro gives valuable information in such a thing. Thanks, bro

 

Thanks Afran...😊

 
 

You are most welcome 🤠

 

Fantastic list of resources and beautifully organised 🧹

 

Thanks Charanjit

 

A great list, thanks!
If I might, I'd also add brumm.af/shadows to the list, it's a great tool for creating shadows in pure css.

 

Thanks for the suggestion. Its really good. This is why I love 💛 this community so much.
Added your suggestion to the list.

 

I like the list you compiled here Soumya. It would be interested in what your recommendations are in project planning. I use Trello half the time for example on my personal projects.

 

Actually I have only used Jira untill now and I kind of like it.

 

Wow! An amazing online tools list. This post is very useful for me to know about new extensions and libraries for creating websites.

 

Thanks a lot...☺️