Introduction
We are back with a mega list of 50+ tools for web development to get benefits from. Some of these can be useful for all developers in general. These tools will definitely help you increase your knowledge, inspiration, and productivity.
We have divided the mega list of tools into categories. Here are those categories:
- Learning🧑💻
- Code Editor✍️
- UI Desing⚡
- UI Component🚀
- Animation🏃♂️
- Framework🏢
- Hosting☁️
- Google Chrome Extension🔗
- Coding Practice🧭
- Productivity⌛
- Miscellaneous Tool🔎
We will discuss tools and resources for other techs such as React, Frontend, Backend, and others in the future.
So, let's get started to explore these tools.
Free GumRoad eBook
The below-listed tools are just 10 of the other 50+ tools in random order. The complete list of tools is well categorized and written in a pdf/notion template format. You can get the pdf from GumRoad at zero price.
Get the ebook through this link: surajondev.gumroad.com/l/50-tools-web-devel...
This is my first GumRoad product, so let me know about your feedback through ratings on GumRoad, below the comment box, or DM me on Twitter.
Here are some of the tools that are mentioned in the ebook.
Devhints
A ridiculous collection of web development cheatsheets.
A wide variety of cheatsheets to explore. They are well organized into a component style to understand better. They have cheatsheets for HTML, CSS, JavaScript, React, Vue, ExpressJS, and many more. It has cheatsheets for more than 25 topics, which are further divided into sub-topics.
Brackets
Brackets - A modern, open-source code editor that understands web design.
A minimalist code editor especially made for web developers. It has features such as a live server pre-installed to provide you automatic refresh for your web page as you edit. You can use the code editor for the minimalistic and live server features.
UI Design Daily
Free, Open-source UI design resources are updated daily.
I have used the UI design daily to get inspiration and find UI design for React components. It has many mockups for components such as Card, Buttons, Forms, log-in, and others.
Error 404
It’s a fun web page to explore for 404-page errors. It has a lot of free illustrations related to a 404(Not found) error page. You can download and use it in your designs and web pages. There are also examples, you look into for inspiration.
Hover.css
Hover.css - A collection of CSS3-powered hover effects
An awesome collection of CSS3-powered hover animation/transition for links and buttons. There are different categories for animation such as 2D Transitions, Icons, Curls, and others. In total, there are 7 categories. Integrate the library in your application with NPM, CDN script, or downloaded CSS file.
Tailwind CSS
Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.
It’s a utility-first CSS framework. With Tailwind CSS, you can directly add CSS to your HTML/JSX components. Many developers have been using this framework for building their sites as it requires less time to write CSS code.
Railway
Railway is an infrastructure platform where you can provision infrastructure, develop with that infrastructure locally, and then deploy it to the cloud.
As of November 2022, Heroku is ending its free tier and Railway is one of the best alternatives for Heroku to deploy your backend. It supports Node Js, Django, Laravel, Kotlin spring, ruby, and others. It also has pre-defined templates that you can use while deploying the backend.
JSONVue
Validate and view JSON documents
It’s one of the most recommended extensions for the prettier versions of JSON data. Whenever I am dealing with public APIs for getting data such as weather. The API data is in form of JSON. By default, our web page displays all the data in inline format. This extension converts the data into a prettier format to understand the structure of JSON easily.
Flexbox Defence
Your job is to stop the incoming enemies from getting past your defenses. Unlike other tower defense games, you must position your towers using CSS!
It’s an online game to play while learning CSS flexbox. It is simple, as you write code, your defense will be placed on the map. Your defense should be in the path of the enemy to defend you. For positioning your defense, you are going to use CSS flex and its properties. It’s fun and you can learn CSS flexbox’s properties.
Habitica
Habitica is a free habit and productivity app that treats your real life like a game. Habitica can help you achieve your goals to become healthy and happy.
Habits are one of the building blocks for achieving bigger goals. I have been using Habiticas for managing my to-do list along with building habits. It’s a gamified version of a to-do list with a variety of stuff to do. I like how Habitica manages recurring tasks and habits.
Conclusion
I hope, these tools will help you. Thanks for reading the blog post.