DEV Community

loading...
Cover image for 40+ Useful Resources for Mastering Web🎁

40+ Useful Resources for Mastering Web🎁

surajondev profile image Suraj Vishwakarma Originally published at surajondev.wordpress.com Updated on ・6 min read

Introduction

We have a list of various resources that can help you to solve many problems that you are facing or might face in the future.

We have resources for

  • Illustration
  • Development
  • Design
  • CSS
  • Productivity

Let's get started without further ado.

ILLUSTRATION

DrawKit

DrawKit

Hand-drawn vector illustration and icon resources, perfect for your next project.

FlatIcon

flaticon-generic

4340500+ Free vector icons in SVG, PSD, PNG, EPS format or as ICON FONT. Thousands of free icons in the largest database of free vector icons!

Blush Design

Blush Design

Easily create and customize stunning illustrations with collections made by artists across the globe. Try it, it’s kind of fun.

Smash Illustration

Smash Illustration

unDraw

unDraw

Open-source illustrations for any idea you can imagine and create. A constantly updated design project with beautiful SVG images that you can use completely free and without attribution.

Awesome illustration constructor with colorful and trendy characters

Control.Rocks

Control.Rocks

They have created a big library of illustrations with customizable styles and action types. Use the constructor to create a scene that you are looking for.

Error 404 Fun

Error 404 Fun

Make a unique journey through 404 error pages on your website Use these illustrations that describe better than words

Open Doodlers

Open Doodlers

A Free Set of Open-Source Illustrations!


DEVELOPMENT

Carbon

Carbon

Create and share beautiful images of your source code.
Start typing or drop a file into the text area to get started.

Replit

Replit

Replit is a simple yet powerful online IDE, Editor, Compiler, Interpreter, and REPL. Code, compile, run, and host in 50+ programming languages.

Squoosh

Squoosh

Compress and compare images with different codecs, right in your browser.

Wappalyzer

Wappalyzer

Programmatic access to technographic data. The Wappalyzer APIs provide instant access to website technology stacks, contact details, and social media profiles.

Kite

Kite

Kite adds AI-powered code completions to your code editor, giving developers superpowers.

Devhints

Devhints

A modest collection of cheatsheets

Netlify

Netlify

An intuitive Git-based workflow and powerful serverless platform to build, deploy, and collaborate on web apps.

i Hate Regex

i Hate Regex

i Hate Regex is a regex cheat sheet that also explains the commonly used expressions so that you understand them. Stop hating and start learning.

DevDocs

DevDocs

Fast, offline, and free documentation browser for developers. Search 100+ docs in one web app: HTML, CSS, JavaScript, PHP, Ruby, Python, Go, C, C++, and many more.


CSS

Animista

Animista

Animista is a place where you can play with a collection of ready-to-use CSS animations, tweak them and download only those you will actually use.

CSS-Tricks

CSS-tricks

Daily articles about CSS, HTML, JavaScript, and all things related to web design and development.

Pattern.css

Pattern.css

CSS only library to fill your empty background with beautiful patterns.

A simple, online CSS generator that creates a basic layout framework.

CSSeffectsSnippets

CSSeffectsSnippets

Click on the animation to copy the CSS effects which include hover, loading, and others.

98.css

98.css

98.css is a CSS library for building interfaces that look like Windows 98.


DESIGN

Colors.lol

Colors.lol

Overly descriptive color palettes.

Colormind

Colormind

Colormind is a color scheme generator that uses deep learning. It can learn color styles from photographs, movies, and popular art.

Color Hunt

color-hunt-palettes-og

Color Hunt is a free and open platform for color inspiration with thousands of trendy hand-picked color palettes.

FontSpark

FontSpark

Helping designers discover the perfect font for their next design project.

FontSpace

FontSpace

FontSpace is a designer-centered font website that has quick customizable previews and hassle-free downloads.

AppMockUp

AppMockUp

AppMockUp Studio is the online design tool trusted by mobile developers to create the most compelling screenshots for the App Store & Play Store. No account required. It is fast & free.

Webframe

webframe-screenshot

A showcase of beautiful and well-designed web app screens for design inspiration. Including screens from behind signup/paywalls.

Blobs

blobs_app_poster

Customizable blobs as SVG and Flutter Widget. Create random or fixed blobs, loop, animate, clip them with ease.

Ucraft

maxresdefault (6)

Create your logo for a website or brand in just a few clicks. Ucraft's free online logo maker allows you to design eye-catching, professional logos, and use them across various platforms.

Design Lint

Design Lint

Design Lint is a free and open-source plugin for Figma built to help you find and fix errors in your designs.

PRODUCTIVITY

GetTerms

GetTerms

GetTerms.io is a free, generic website privacy policy generator, based on typical, reasonable, and fair use of information. Whether you use WordPress, Shopify, or more, we can generate simple terms & conditions and privacy policy documents for your website, ready to adapt to your needs.

Google Keep

Google Keep

Google Keep is a note-taking service included as part of the free, web-based Google Docs Editors suite offered by Google.

Sejda

Sejda

Sejda helps with your PDF tasks. Quick and simple online service, no installation required! Split, merge, or convert PDF to images, alternate mix, or split scans.

Grammarly

Grammarly

Grammarly scans your text for common grammatical mistakes (like misused commas) and complex ones (like misplaced modifiers).

Notion

Notion

A new tool that blends your everyday work apps into one. It's the all-in-one workspace for you and your team.

Last Note

Thank You for reading the blog post.

Toptal gitignore Generator

Toptal gitignore

Create useful .gitignore files for your project

WaveApp

WaveApp

Free invoicing & accounting software with credit card processing & payroll services.

Clockify

Clockify

The most popular free time tracker for teams. The time tracking software used by millions. Clockify is a simple time tracker and timesheet app that lets you and your team track work hours across projects. Unlimited users, free forever.

Untools

Untools

Collection of thinking tools and frameworks to help you solve problems, make decisions, and understand systems.

Discussion (39)

pic
Editor guide
Collapse
code2rithik profile image
Rithik Samanthula

Hey Bro, slight mistake. For the carbon website, you gave the link to drawkit.io. Please change that part

Collapse
markgutenberger profile image
Mark Gutenberger

the link to carbon is carbon.now.sh

Collapse
surajondev profile image
Suraj Vishwakarma Author

Thank you for letting me know.

Now it is replaced with carbon website.

Collapse
ytrkptl profile image
Yatrik Patel

Also, for the animista site, it links to drawkit.io instead.

Thread Thread
surajondev profile image
Suraj Vishwakarma Author

Done and Thank you

Thread Thread
hilleer profile image
Daniel Hillmann

Also, for the Netlify site, it links to devhints.io/ instead.

Thanks for the great list of tool recommendations!

Collapse
lucastrvsn profile image
Lucas Trevisan

Also, Blob is broken

Collapse
whippingdot profile image
Sanjaay R.

Hey thanks for this awesome list of resources. One note - replit's picture is REALLY outdated and so if you want I could take a picture of one of my projects on replit. If not that, then you can create a new repl and take a picture (.env variables now have their own tab, there is a tab for tests, there are threads, there is a button for the command pallette on the home screen, the chat is now moveable and is not stuck as a tab, and more)

Collapse
surajondev profile image
Suraj Vishwakarma Author • Edited

Thank you for letting me know.

I have updated it with the latest picture.

Collapse
whippingdot profile image
Sanjaay R.

Your welcome, also thanks for updating it!

BTW if you use repl talk you would probably know me cause I am pretty popular. If not it is ok.

Collapse
andrewbaisden profile image
Andrew Baisden

Lots of great resources here good post.

Collapse
surajondev profile image
Collapse
damiensavoldelli profile image
damienSavoldelli

Hi,
For .gitgnore , you have a collection of templates in this repo :
github.com/github/gitignore

Collapse
surajondev profile image
Suraj Vishwakarma Author

Sure will check that out

Collapse
arvindpdmn profile image
Arvind Padmanabhan

I don't think many of these will help developers master the web. We can however use these libraries if they quickly solve our problems. That way they're useful resources. Beginners can learn about frontend dev at devopedia.org/site-map/browse-arti...

Collapse
stremovsky profile image
Yuli • Edited

Hi

I can recommend the tool that I am working on.
It is called Privacybunker privacybunker.io/.

Privacybunker is all about GDPR user request automation and the automatic execution of user requests. For example, the product knows to build a user data report for your customer in an automatic manner.

A free plan is available for small shops.

BR. Yuli

Collapse
ryandaghost profile image
Ryan The Ghost

New follow from me sir ! Thanks soo much! :)

Collapse
surajondev profile image
Suraj Vishwakarma Author

Yesss and check other articles too.

Collapse
zippytyro profile image
Shashwat Verma

Dope man, really helpful

Collapse
nielskersic profile image
Niels Kersic

What a great article! I'm used to these kinds of articles listing very common tools like Google Fonts and VS Code, but there were a bunch of interesting ones I had never heard of in here!

Collapse
mlnzyx profile image
R. Maulana Citra

this is awesome, thank you!

Collapse
surajondev profile image
Collapse
gathsarah profile image
Gathsara

Awesome resources, thanks for sharing..!

Collapse
surajondev profile image
Collapse
kalebu profile image
Jordan Kalebu

Awesome resources , thanks for sharing

Collapse
surajondev profile image
Suraj Vishwakarma Author

Thank you, mate.

Collapse
lopesdaniel profile image
Daniel Lopes

Amazing ! Thank you.

Collapse
surajondev profile image
Suraj Vishwakarma Author

Happy to help you

Collapse
emmanuele_d profile image
Emmanuele Durante

I didn't know untools! so cool!

Collapse
surajondev profile image
Collapse
venkateshaj profile image
venkatesh-aj

Hi there, I've created a color palette website called colorsui.com. It's a free color tool.

Collapse
panafsoft profile image
Abdul-Razak

Great resources but please check Blobs and DesignLint, they both are linked to DesignLint.

Collapse
surajondev profile image
Suraj Vishwakarma Author

Thank you and it is fixed now

Collapse
vladimirc profile image
Vladimir C

Check the unDraw link, it opens the Blush Design

Collapse
elhosensalama profile image
elhosen salama

Thanks for sharing this very useful tools :)

Collapse
surajondev profile image
Suraj Vishwakarma Author

Awesome that you liked ⭐

Collapse
tnz5 profile image
TNZ-5

Hey,

Just came across this. Was really worth the read. Props to you man!

Some comments have been hidden by the post's author - find out more