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
Hand-drawn vector illustration and icon resources, perfect for your next project.
FlatIcon
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
Easily create and customize stunning illustrations with collections made by artists across the globe. Try it, it’s kind of fun.
Smash Illustration
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
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
Make a unique journey through 404 error pages on your website Use these illustrations that describe better than words
Open Doodlers
A Free Set of Open-Source Illustrations!
DEVELOPMENT
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 is a simple yet powerful online IDE, Editor, Compiler, Interpreter, and REPL. Code, compile, run, and host in 50+ programming languages.
Squoosh
Compress and compare images with different codecs, right in your browser.
Wappalyzer
Programmatic access to technographic data. The Wappalyzer APIs provide instant access to website technology stacks, contact details, and social media profiles.
Devhints
A modest collection of cheatsheets
Netlify
An intuitive Git-based workflow and powerful serverless platform to build, deploy, and collaborate on web apps.
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
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 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
Daily articles about CSS, HTML, JavaScript, and all things related to web design and development.
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
Click on the animation to copy the CSS effects which include hover, loading, and others.
98.css
98.css is a CSS library for building interfaces that look like Windows 98.
DESIGN
Colors.lol
Overly descriptive color palettes.
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 is a free and open platform for color inspiration with thousands of trendy hand-picked color palettes.
FontSpark
Helping designers discover the perfect font for their next design project.
FontSpace
FontSpace is a designer-centered font website that has quick customizable previews and hassle-free downloads.
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
A showcase of beautiful and well-designed web app screens for design inspiration. Including screens from behind signup/paywalls.
Blobs
Customizable blobs as SVG and Flutter Widget. Create random or fixed blobs, loop, animate, clip them with ease.
Ucraft
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 is a free and open-source plugin for Figma built to help you find and fix errors in your designs.
PRODUCTIVITY
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 is a note-taking service included as part of the free, web-based Google Docs Editors suite offered by Google.
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 scans your text for common grammatical mistakes (like misused commas) and complex ones (like misplaced modifiers).
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
Create useful .gitignore files for your project
WaveApp
Free invoicing & accounting software with credit card processing & payroll services.
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
Collection of thinking tools and frameworks to help you solve problems, make decisions, and understand systems.
Top comments (46)
Cool and useful repositories and tools!
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
Thanks. I have updated the article.
you did a great job here, Ahmed.
Nicely put together, well done!
Thanks, Ahmed ⚡
Thanks a lot for sharing 😊 🙏
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)
Thank you for letting me know.
I have updated it with the latest picture.
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.
Hey Bro, slight mistake. For the carbon website, you gave the link to drawkit.io. Please change that part
Thank you for letting me know.
Now it is replaced with carbon website.
Also, for the animista site, it links to drawkit.io instead.
Done and Thank you
Also, for the Netlify site, it links to devhints.io/ instead.
Thanks for the great list of tool recommendations!
Also, Blob is broken
Lots of great resources here good post.
Thank you mate
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
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