If you are relatively new to web development then this list is for you. It is my top 5 most used (probably) apps installed on my work laptop that I use when working on various web development projects. These involve coding IDE's as well as design tools and some security software as well to get you started and more prepared.
VS Code
While I don't use VS Code for my primary coding needs (I use Visual Studio Community), I pretty much use VS Code for everything else. VS Code is free, it's open sourced and it has a growing community of developers that are constantly building new extensions for it making it better by the day.
A few notable features include:
Multi-language support - VS Code offers support for hundreds of programming languages. These include all of the currently popular languages such as JavaScript, PHP, C#, Ruby and Python right out of the box and you can typically include support for any others through the extension marketplace.
Runs everywhere - Quite possibly the most attractive feature of VS Code is that it pretty much runs everywhere. In the past, if you wanted to work with any Visual Studio type product you were essentially limited to the Windows ecosystem. But thanks in part to Microsoft's big push towards open-source and .NET Core, that market has opened up. You can download VS Code for Windows, Mac and Linux currently.
Intellisense - Syntax highlighting and autocomplete are just a few of the features of intellisense. With VS Code you also get smart completions, which means less typing overall as VS Code will determine what to type next based on variable types and function definitions.
For the major languages, this support comes right out of the box. However, you can also download extensions for autocomplete for many other languages as well.
Built-in Git support - VS Code offers built-in Git support, as well as other SCM's. You can push/pull directly from your main interface without having to leave your editor.
Extensions - And the most useful feature, saved for last, is VS Code's growing library of extensions built by developers all around the world. If there is a feature that can make your coding life more efficient its either already in the marketplace, or getting worked on as we speak.
You can download VS Code right over here.
Figma
Before you actually touch a line of code, it's always best to have some idea of what it is you are building. And Figma does just that. Figma is a collaboration-focused design tool that let's you spin up mockups and wireframes incredibly quickly and best of all, the free version offers more than enough tools if you are a solo-developer.
Figma is multi-platform, meaning it runs on a variety of environments. You can begin your design on your desktop and later pick up where you left off right from your browser without losing a feature.
Figma also offers responsive designs right out of the box with its Auto Layout feature. Buttons can resize themselves with their text and lists can update themselves when you move the items around.
The best feature that Figma brings to the table to me is the fact that padding, directions and spacing of elements translate directly to CSS, which means that going from design to product takes no time at all.
Robust design system - If there is a shape, shadow, pattern or rounded corner that you are looking to achieve, it is usually just a few clicks away. You can also group elements together in order to keep all assets on a single project page.
Plugin support - If Figma wasn't feature rich enough, they also offer plugins to further add functionality to your design environment. And if that's still not enough for you, you can also build your own plugins as well.
Collaborate - Figma is really all about teamwork. Once you are done designing you can invite teammates to join your projects and then simply handoff the project to any front-end developer to finish off the work.
Everyhing is on the cloud - And because the year is 2020, all of your designs are pretty much stored on the cloud and can be accessed from any browser anywhere.
Design to code - Quite possibly the most useful feature (at least to me) is Figma's design to code implementation. Once you are done designing your work, you don't have to spend hours converting it over to valid CSS. Figma can render full responsive CSS directly to your front-end person.
While it may sound like I am hyping up Figma way too much, I assure you I do not get paid by them in any way and am genuinely impressed by the software. From a developer perspective, the design and functionality of Figma is impressive.
You can download Figma right over here.
Inkscape
It's hard to find a decent vector graphics editor these days (particularly a free one). Inkscape is the answer. I'll say now, it is not the prettiest tool you will feast your eyes on. But it has pretty much every feature that you will need in order to create SVG's assets.
You can pretty much find every feature that the more expensive software suites provide, as mentioned, at the cost of overall usability.
Inkscape is not the easiest tool to learn and master. But once you end up doing certain tasks a number of times, it really does become second nature.
I also personally use LogosByNick's many tutorials to help me out when working with the many different Inkscape tools. He does an excellent job at breaking everything down and makes solid YouTube videos as well.
You can download Inkscape, for Free, right over here.
Postman
Web developers tend to spend a fair amount of time working with API's and just data in general. Connecting to an endpoint via test code is always an option, but it will eventually get old particularly if you are connecting to many endpoints with varying parameters.
Postman is by far the best API testing application currently on the market as far as I'm concerned. You can download the app directly to your desktop and test your local API requests if needed.
Or you can live test any production API as well, assuming you have the right authentication tokens in place and security headers.
Postman will also store each of your requests for future use.
You can download a copy of Postman right over here.
VPN
As a web developer, odds are you are going to be surfing the web. Alot. You might be looking for a solution to a challenging problem or trying to find "inspiration" from other sites. That's why it's important to have a VPN ready for when you don't feel like having hundreds of trackers on your scent looking to serve you that next ad.
I personally use SurfShark VPN on my desktop and Android phone. And it's mainly because of the speed. I'm not typically the person that needs to watch Netflix from Poland or looking to get lower prices on Amazon if you are in a certain region. Nothing wrong if you are that person though. But I personally just need speed, stability and overall performance and SurfShark does just that.
It's also one of the best bargains that you can find in the VPN space. If you sign up for the 24 month plan, you will end up paying about $2.49 per month, or the price of a single cup of coffee.
Also note, that I am an affiliate of SurfShark but that I also use them daily as well.
You can download SurfShark right over here.