Hey, there! 👋
Let me introduce you to this community-driven list of awesome tools for developers. It is a open-source project, built by the community. So, feel free to contribute to this list. You can find the contribution guidelines at the end of this post.
Alright, let's get started! 🚀
Table of Contents
- Platforms 🌐
- Guidelines 🧭
- Documentation 📚
- Code Editors and IDEs 💻
- Images 🖼
- Colors 🎨
- Typography 📝
- Design 🎨
- Tools 🛠
- Contributing 🤝
- Conclusion 🎉
Platforms 🌐
Learn to code — for free. Build projects. Earn certifications.
Learn to Code with Interactive Tutorials. Edit the code while watching the video tutorial. Cool, right?
Improve your front-end skills by building real projects. Solve real-world HTML, CSS and JavaScript challenges whilst working to professional designs.
Guidelines 🧭
High-level advice and guidelines for writing sane, manageable, scalable CSS
An opinionated styleguide for writing sane, maintainable and scalable Sass.
Documentation 📚
The World Wide Web Consortium (W3C) is an international community where Member organizations, a full-time staff, and the public work together to develop Web standards.
One of the best platforms to learn web development. Whenever you have a question about HTML, CSS, JavaScript, or any other web technology, always check MDN first.
A reference for pretty much any programming language you could imagine.
One of the greatest platforms for tips, tricks and techniques on using CSS (Cascading Style Sheets).
Code Editors and IDEs 💻
Being a free and open-source code editor, Visual Studio Code is a great tool for developers. It comes with a lot of features and extensions that make it a great choice for developers.
Simply put, CodeSandbox is an online version of Visual Studio Code.
The github.dev web-based editor is a lightweight editing experience that runs entirely in your browser.
There are 2 ways to open a web-based editor
- Press the
.key on any repository or pull request - Swap .com with .dev in the URL. E.g.
https://github.dev/username/repo
CodePen is a playground for the front end side of the web. It's a place to experiment, test and show off your front end work. Also, you can find many inspirations from other developers.
Replit is a simple, powerful, and collaborative online IDE. It's a great place to code, collaborate, and host your projects.
A web IDE for Front-end and Full Stack developers.
Wanna play around with TypeScript? TypeScript Playground is a right place for you.
Images 🖼
Easily find beautiful, high-quality photos for your next project. All photos are free to use for commercial and personal use.
Pexels is a great source of free stock photos. All photos are free to use for commercial and personal use.
Carbon is a great platform to create and share beautiful images of your code, allowing you to customize the image with syntax highlighting, themes, fonts, and more.
Free Photo editor, animation and design.
Colors 🎨
Never waste Hours on finding the perfect Color Palette again! Just Enter a Color! And Generate nice Color Palettes
Create the perfect palette or get inspired by thousands of beautiful color schemes.
Want to know what colors look good together? Canva's Color Wheel makes color combinations easy.
Typography 📝
Google Fonts is a library of free licensed font families. Simply choose the fonts you want, either download them to your computer or use the provided CSS or HTML links to embed them in your web pages.
If you don't want to grab fonts from CDN, then use self-host Open Source fonts in neatly bundled NPM packages.
Nerd Fonts patches developer targeted fonts with a high number of glyphs (icons).
Design 🎨
A free, online and collaborative interface design tool and prototyping tool.
Pinterest is a visual discovery tool that you can use to find ideas for all your projects and interests.
Tools 🛠
Wait a second! Tools within tools? Yes, you heard it right. Here are some tools that will help you to find more tools. 😃
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's a great place to ask questions and get answers.
A collection of useful tools for developers.
A collection of useful tools for developers.
Can I Use provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.
Have you ever struggled to create a favicon for your website? Different sizes, different formats, different platforms.
Quickly generate your favicon from text, image, or choose from hundreds of emojis.
Both free and premium icon library.
Find a massive collection of cheat sheets for different technologies in an organized format.
A polyglot web converter. Easily convert HTML to Pug, TypeScript to JavaScript, Markdown to HTML and much more...
A website where you can find all the tools with better user experience.
Always stay up-to-date with the latest developer news, tools, and events.
DevOps backup & Disaster Recovery software for all GitHub, GitLab, Bitbucket and Jira data.
A great tool for organizing your issues and pull requests in a team.
No Code Tools For Non Programmers. It has a collection of tools you might need to transform data or generate data for tests, but also to convert ascii to hex as an example.
Contributing 🤝
Want to contribute? Here's how:
- Find an awesome tool that is not on this list and you think it should be 🤔
- Provide the title, description, and link of the tool to give a brief idea about it 📝
- Add "💎" (diamond) at the end of your comment. Why? Because you deserve it 😃! Also, it's easier for me to find your comment as well 🙂
- Bookmark the post, and you can always view the latest tools as we update 📑
Conclusion 🎉
I hope you found this list useful. And, it's not over yet! We'll keep expanding and updating this list with more tools.
If you have any questions, feel free to ask in the comments. Thanks for reading! 🙂
Top comments (28)
In the VS Code category, I want to add the in-browser VS Code is remarkably powerful. To see what I mean, visit one of your repos in the browser, and press the
.key - the IDE will load in-browser, with full functionality.Absolute time-saver, when folks ask me to look at a problem in their code - I can simply load the IDE right there, and view their repository in the browser in a familiar interface!
Added it to the list 📁. That's definitely the easiest and fastest way to open up an editor and start coding. Thanks for the contribution 😃
Thank you for the list. I love it.
I find this page a few days ago and it's being very useful to me.
OverAPI.com: It contains a great amount of different technologies documentation. Very good organized and with helpful cheat sheets.💎
Added it to the list ✅📁. That's exactly what I was looking for. Thanks for the contribution 🙂
Hey there! Nice list you've got here 👍
StackBlitz: a web IDE for frontend and full stack devs.
W3Schools: a reference for pretty much any programming language you could imagine.
Thanks for the contribution. 👍 Added them to the list 📁
Update: ✨
Thanks for checking out this article. Always feel free to contribute to this list 🙂
I have also been using this tool if you want to add it on your list, I am using queries a lot: transform.tools/
Added it to the list ✅📁 Thanks for the contribution 🙂
I find FontSource (fontsource.org) super useful when we don't want to grab fonts from cdn 🙂💎
Added it to the list 📁✅. Thanks for the contribution and following the guidelines 😃
Canva Color Wheel
.
.
Helped me a lot..
Added it to the list 📁. Really cool color combination tool 🎨. Thanks for the contribution 😃
really useful thank you <3
Thanks for the nice list
Linear is one of the greatest tools for organizing your issues and pull requests in a team.
Added it to the list ✅📁 Thanks for the contribution 🙂