DEV Community

Cover image for 12 Websites That Every Developer Must know ๐Ÿคฉ
Random
Random

Posted on

12 Websites That Every Developer Must know ๐Ÿคฉ

save article

Hello๐Ÿ‘‹ Developers! Welcome to My Another Blog Post.

In this blog post, i want to share some of the essential website or tools that every developers must know.

So let's Start ๐Ÿ‘‡ and don't Forget to "๐Ÿ’–๐Ÿฆ„๐Ÿ”ฅ".


1. omatsuri.app ๐Ÿก

omatsuri

Omatsuri is a japanese website for web developer resources.

"Omatsuri," a Progressive Web Application (PWA) that offers a collection of 12 open-source frontend-focused tools.

These resources are free to use and customize which is very helpful when you are designing a new website or application.


2. htmlrev.com ๐Ÿ“„

htmlrev

HTMLrev is a great website to find HTML templates and design resources.

They have free html templates for websites, landing pages, blogs, portfolios and more.

These templates are ready to use and easy to customize. This is a one-stop place for all your template needs.


3. Unicornicons.com ๐Ÿฆ„

unicorcicons

Unicornicons has beautiful animated icons that you can use in your projects.

They have premium icon packs but also provide many free icons. These icons help to make interfaces more appealing and fun.

You can easily customize the colors as well.


4. UiVerse.io โœจ

uiverse

UiVerse is a community of UI elements created with CSS and Tailwind.

They have more than 3000 elements that are free to use under MIT license.

This is very useful to build UI components and save development time. You can search, filter elements and directly get code to copy.


5. undraw.co ๐Ÿ–Œ

undraw

Undraw is an open source illustration library. They provide beautiful SVG illustrations you can use for free.

These illustrations are modern and can be easily customized. This is very helpful for landing pages, about sections and product marketing.

They keep adding new illustrations as well.


6. patternpad.com ๐ŸŽจ

patternpad

PatternPad allows you to design patterns from endless color and shape variations. You can create unique patterns for branding, presentations, social posts etc very easily here.

Patterns are exported as SVG for flexible use. This is a nice tool to add visual appeal to your designs.


7. shapedivider.app ๐Ÿ—บ

shapedivider

ShapeDivider helps you add curve shapes to headings, paragraphs or between sections very easily. It is frequently used technique in designs.

This website lets you generate the code by selecting type of shape and color. You can directly copy and paste the code. Very useful tool!


8. photopea.com ๐Ÿ“ธ

photopea

Photopea is an online photo editor that supports PSD, XCF, Sketch, XD and CDR formats. You can open, edit and save photos for free without needing to install any software.

It has tools similar to Photoshop but is very beginner friendly. This is great for basic image editing needs of developers.


9. quickref.me ๐Ÿง‘โ€๐Ÿ’ป

quickref

QuickRef is a collection of cheat sheets for various developer tools, frameworks and technologies. They cover everything from programming languages, databases, design tools to terminal commands.

These cheat sheets help you learn faster and are very handy during development as well. Bookmark this!.


10. devdocs.io ๐Ÿ“š

devdocs

DevDocs provides API documentation for many libraries and frameworks. It collects documentation from various sources and presents them in an organized manner.

During development, you often need to refer documentation. This site makes it very easy to find what you need quickly.


11. devhints.io ๐Ÿ“

devhints

Devhints contains concise cheat sheets for various technologies & tools. These are like pocket reference cards for developers. The information is presented clearly without extra details.

They are focused on the most important features. This is great website to lookup quick reminders.


12. Devtools ๐Ÿ› 

Chrome Developer Tools or DevTools is a powerful but sometimes overwhelming set of web developer tools.

The documentation on developer.chrome helps you master these tools. It covers using each panel, keyboard shortcuts, and tips & tricks. No developer should ignore Chrome DevTools documentation.


That's it ๐Ÿ˜

Thank you for reading this blog๐Ÿ™, I hope this gives you some new places to check out!

Leave a comment ๐Ÿ“ฉ if you discover any other helpful websites.

And Don't forget to Drop a "๐Ÿ’–๐Ÿฆ„๐Ÿ”ฅ"

Follow in Githubโœ…

Happy Coding ๐Ÿ‘‹

github

twitter

portfolio

buymeacoffee

Top comments (42)

Collapse
 
devnaqvi profile image
devnaqvi

Thanks for sharing. I would love to add this portfolio-template repo. It's a portfolio template that any one can use for free.

Collapse
 
husseinkizz profile image
Hussein Kizz

Nice one thanks for sharing, all these were really great, but how do I use the other animated icons? the unicorn icons?

Collapse
 
random_ti profile image
Random

Install this npm package -> Click here

Collapse
 
husseinkizz profile image
Hussein Kizz

Hmm good now the json stuff to actually animate the icons, cause I have look am not seeing anywhere they put that?

Collapse
 
sona21 profile image
Sona1

Great list ๐Ÿ‘Œ Thanks for sharing ๐Ÿ˜Š

Collapse
 
random_ti profile image
Random

Glad to hear that you liked it

Collapse
 
csalabs profile image
CSA Labs

Great list of resources for developers โœจ

Visit my website for additional details about the* website designing company* . presently

Collapse
 
devluc profile image
Devluc

Useful resources. Thanks for bringing them to light Taqui. I am grateful that you mentioned my HTMLrev project. It's the best motivation to keep working on it

Collapse
 
random_ti profile image
Random

You're welcome! Your HTMLrev project is solid โ€“ keep up the great work!

Collapse
 
apitoolkit profile image
APItoolkit

This is an awesome list @random_ti . I normally use undraw and I can testify that it is a great website. I think you miss one genius website @random_ti , aoitoolkit.io. The all-in-one developer api tool box. You really need to check apitoolkit out

Collapse
 
random_ti profile image
Random

Thank you so much @apitoolkit ! Your appreciation means a lot to me.

And apitoolkit is a handy website for web developers! Thanks for sharing ๐Ÿ™

Collapse
 
friendz_me_12 profile image
friendz

Great list of resources for developers โœจ

one from my side Flaticon

That's it๐Ÿ™

Collapse
 
random_ti profile image
Random

Thank you too for your feedback

Collapse
 
wesleybertipaglia profile image
Wesley Bertipaglia

Yeah, this is useful, thanks!

Collapse
 
random_ti profile image
Random

Glad to hear you find it useful ๐Ÿ˜Š

Collapse
 
bicool profile image
BEAUJOUR

trรจs bon

Collapse
 
random_ti profile image
Random

๐Ÿ™Œ

Collapse
 
tharakamts profile image
Tharaka Sandaruwan

Great list. Thanks for sharing.

Collapse
 
random_ti profile image
Random

You'r most welcome @tharakamts ๐Ÿ’–

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