DEV Community

Cover image for Some Lesser Known But Awesome Online Tools For Web Development
Soumya Dey
Soumya Dey

Posted on • Updated on

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

Discussion (29)

Collapse
kevnk profile image
Kevin Kirchner

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.

Collapse
ziizium profile image
Habdul Hazeez

Today I Learned.

Collapse
theme_selection profile image
themeselection

Great List👍We have also prepared a list on Opensource web development tools and a series on Awesome Design Resources for every developers.

Collapse
ender_minyard profile image
ender minyard

I love how organized this is.

Collapse
soumyadey profile image
Soumya Dey Author • Edited

Thanks a lot ender 😌

Collapse
ashygoyal profile image
Ashish Goyal

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.

Collapse
soumyadey profile image
Soumya Dey Author • Edited

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

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

Collapse
abenettt profile image
Abenet (they / them)

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.

Collapse
soumyadey profile image
Soumya Dey Author

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

Collapse
mjcoder profile image
Mohammad Javed

Thanks for the amazing list. 👍

Collapse
soumyadey profile image
Soumya Dey Author

You are most welcome 🤠

Collapse
manishfoodtechs profile image
manish srivastava

Thanks

Collapse
soumyadey profile image
Soumya Dey Author

You are most welcome! 😄

Collapse
ayyash profile image
Ayyash

okay this post goes right in my bookmark toolbar, great work

Collapse
andrewbaisden profile image
Andrew Baisden

Quite a diverse list you could share it on github.

Collapse
rowemore profile image
Rowe Morehouse

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

Collapse
soumyadey profile image
Soumya Dey Author

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

Collapse
wayphorier profile image
wayphorier • Edited

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

Collapse
soumyadey profile image
Soumya Dey Author

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

Collapse
afnan432 profile image
afnan432 • Edited

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

Collapse
soumyadey profile image
Soumya Dey Author

Thanks Afran...😊

Collapse
cirphrank profile image
🎧Cirphrank👣

Thank you for this!

Collapse
soumyadey profile image
Soumya Dey Author

You are most welcome 🤠

Collapse
cchana profile image
Charanjit Chana

Fantastic list of resources and beautifully organised 🧹

Collapse
soumyadey profile image
Soumya Dey Author

Thanks Charanjit

Collapse
jimcmorrison profile image
JimCMorrison

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.

Collapse
soumyadey profile image
Soumya Dey Author

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

Collapse
oliverttwist profile image
Olivert-twist

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

Collapse
soumyadey profile image
Soumya Dey Author

Thanks a lot...☺️