What Software Do You Need for Web Development?

A craftsman needs their tools; this is no different for web developers. You could use many other tools, and the choices can be overwhelming. In this post, I will help you pick the best tools (at least from my perspective). This has come with trying many of them. You are free to make different choices, but the tools I select today will be the ones I use for the remainder of this series.

What Should You Install First?

The good news is that you already have one of the tools installed on your device. If you're reading this on your laptop or desktop computer, you're using the first tool you'll need. That tool is your browser. I recommend having multiple browsers, but you don't have to have them all.

Why Do I Need Multiple Browsers?

Ok. So you don't need multiple browsers, but it is best practice to test your pages in various browsers. This will help you understand how others may consume your pages. Think of it as one of the ways to "be a responsible web developer."

This is a very prickly topic. Each person you ask will have a different answer. The good news is that no "right" or "wrong" answer exists. My recommendation is to install a:

Chromium-based Browser
Non-chromium-based Browser

Google Chrome has taken over at over 60% of the market share. Naturally, Chrome is a Chromium-based browser. If you'd like to use that for your Chromium-based browser, it's a solid choice. It's perfect for Google users.

Do You Use Microsoft 365?

Using Chrome can be a pain if you (like me) pay for a Microsoft 365 family (or personal) plan. Wouldn't it be nice if there was a Chromium-based browser that was geared towards Microsoft users? You're in luck. Microsoft's Edge browser is here. That will put you with the 5% of users who browse the web with Edge.

Which Non-Chromium Browser Should I Use?

You have a few options. Depending on your operating system, you might already have one installed. If you're using a Mac, Safari is a natural choice. However, I recommend you join the 3% of people who use Firefox. Think of it as "the neutral zone."

One Last Thing On Browsers

Before we leave the browser portion of this post, I want you to start getting comfortable with the browser's "Developer Tools." For Firefox and Chromium-based browsers, right-click anywhere on a webpage and click "inspect." This will launch your browser's developer tools. They each have a unique look and feel, but they're all very similar. You're in for a treat if you've never "inspected" a page. Don't let it overwhelm you. If it's too much, close the tools for now. Before you know it, you'll know what most of this means.

Now that you have your browsers and can access their tools, it's time to get yourself a code editor.

Which Code Editor Should You Use?

Smart, fast, customizable - Visual Studio Code

My recommendation may have changed by the time you're reading this. My recommendation continues to be Visual Studio Code (VS Code). This is a trendy cross-platform text editor and lightweight, integrated development environment. You can find the download for your operating system here. Consider looking for it in your operating system's app store first.

Mozilla's course includes a local web server as software you'll also need. Luckily, VS Code has a robust extension ecosystem that you can use to add superpowers. The first superpower we should install is the Live Server extension.

Don't worry about how to use this extension or VS Code just yet. We will get there. I promise.

Do You Need a Graphics Editor?

You will almost certainly want visual elements on your page. These visual elements are usually images. Having a graphics editor can be very handy. However, we have many browser-based options available to us. Many of them are free as well.

My first recommendation is to sign up for the free level of Figma. Figma will be very helpful when it comes to prototyping your site ideas. It's great for sharing your ideas with friends and, perhaps someday, your clients.

The next recommendation is to use Canva to create your graphics. It's not an image editor in the way that Photoshop is. Photoshop usually scares people away for two reasons. It has a steep learning curve, and it's expensive. I use a Photoshop alternative, and I'm very happy with it.

Do You Need Version Control?

Yes! Yes, you do. There are many reasons for using version control, but the biggest two I can think of are the following:

Give you a coding time machine
Allow you to deploy (publish) your site without an FTP client

You have a few options for version control, but Git is the most common. Git will be the version control system that is covered in this series. Git can be installed in any operating system. Modern Mac computers come with Git pre-installed. If you're using Windows, I highly recommend keeping your OS as "clean" as possible by using Windows Subsystem for Linux (WSL) as your development environment.

I have previously written a post and published a YouTube video on how to set up WSL on Windows. I cover more steps than you'll need to learn the basics. Here are the sections I recommend you look at if you want to follow my WSL recommendation:

Now You Have All The Free Tools You Need

If you've followed along, you have all the tools to get started. And they all come in at the low price of $0. Of course, you can pay for additional features if you need or want them. But you can get started for free. How awesome is that?

Disclaimer: None of the links in this post are affiliate links. However, if there were any, I would tell you. What are affiliate links? They are links to products that provide content creators with a small referral commission at no additional cost.