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.

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


Find me around web 🕸:

Top comments (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 • 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 • 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
 
abenerd profile image
Abenet

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

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

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

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

Collapse
 
mjcoder profile image
Mohammad Javed

Thanks for the amazing list. 👍

Collapse
 
soumyadey profile image
Soumya Dey

You are most welcome 🤠

Collapse
 
manishfoodtechs profile image
manish srivastava

Thanks

Collapse
 
soumyadey profile image
Soumya Dey

You are most welcome! 😄

Collapse
 
cirphrank profile image
🎧Cirphrank👣

Thank you for this!

Collapse
 
soumyadey profile image
Soumya Dey

You are most welcome 🤠

Collapse
 
ayyash profile image
Ayyash

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

Some comments may only be visible to logged-in visitors. Sign in to view all comments.