DEV Community

Cover image for 40+ Useful Resources for Mastering Web🎁
Suraj Vishwakarma
Suraj Vishwakarma

Posted on • Edited on • Originally published at surajondev.wordpress.com

40+ Useful Resources for Mastering Web🎁

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.

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.

Top comments (46)

Collapse
 
girordo profile image
Tarcísio Giroldo

Cool and useful repositories and tools!

Collapse
 
mytechtots profile image
mytechtots

Hello Suraj,
You might want to update the list to mention that the productivity tool 'Kite' has sunset: kite.com/blog/product/kite-is-sayi...
Thanks for the list,
N

Collapse
 
surajondev profile image
Suraj Vishwakarma

Thanks. I have updated the article.

Collapse
 
amissah17 profile image
Frank Otabil Amissah

you did a great job here, Ahmed.

Collapse
 
aradwan20 profile image
Ahmed Radwan

Nicely put together, well done!

Collapse
 
surajondev profile image
Suraj Vishwakarma

Thanks, Ahmed ⚡

Collapse
 
mahmoudessam profile image
Mahmoud EL-kariouny

Thanks a lot for sharing 😊 🙏

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 • 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
 
therickedge profile image
Rithik Samanthula

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

Collapse
 
surajondev profile image
Suraj Vishwakarma

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

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
 
andrewbaisden profile image
Andrew Baisden

Lots of great resources here good post.

Collapse
 
surajondev profile image
Suraj Vishwakarma

Thank you mate

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

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