# Introduction

Every software developer needs tools to make their work easier.

Today, I'm going to list five essential tools and technologies for every solo web developer. These tools are must-haves before starting to develop any type of application. 

If you have these tools in your arsenal, rest assured that your development process will be smooth as butter. 

Let's directly dive into it.

## 1. Visual Studio Code  
The top of our list is a code editor, *Visual Studio Code*, or VS Code. It's used for building and debugging web applications. 

> It has rich features that include support for debugging, syntax highlighting, intelligent code completion, snippets, code refactoring, and embedded Git.

The thing about VS Code is that it's so easy to use and very fast. It's absolutely free and runs on any platform, like Windows, Mac, and Linux.

Another reason I prefer VS Code is that it's super lightweight. According to their hardware requirements:

> Visual Studio Code is a small download (< 200 MB) and has a disk footprint of < 500 MB. VS Code is lightweight and should easily run on today's hardware. 
>    We recommend:
> - 1.6 GHz or faster processor
> - 1 GB of RAM

Even your potato laptop can run this code editor.

What's more, if you're not content with the built-in features inside VS Code, you can install plugins or extensions to enhance your development experience.

These are some extensions that I usually use: 
*(see image below)*  
![vs code extensions](https://image.solodevhub.com/solodevhub/vscode_extensions.PNG)  
I use `Live Server` to launch a local development server on my computer. Sometimes, I use `MobileView` so I can check how my website looks on mobile devices. Also, I use `Simple React Snippets` to help me code ReactJS faster. Finally, a `vscode-styled-components` to highlight the syntax of styled-components in ReactJS for easy code visualization. 

These extensions may seem unfamiliar to you at first, but don't worry; you'll get used to them after you use VS Code to build your applications.

You can download VS Code directly from this link: 
 [https://code.visualstudio.com/download](https://code.visualstudio.com/download).

## 2. Git
You must not develop any application without using this tool. Git is a version control system that lets you save any changes you make to your code. 

Git is your savior when you lose your code or program in an unexpected circumstance. It will save you a lot of headaches.

> All software development companies consider using Git to be an essential skill for modern web developers. 

**How to learn Git?**
1. Read Chapter 1.1 through 1.4 in [this book about version control](https://git-scm.com/book/en/v2/Getting-Started-About-Version-Control) to familiarize yourself with Git.
2. Watch [this video](https://www.youtube.com/watch?v=2ReR1YJrNOM) to help you visualize the importance of Git.
2. If you haven't installed Git, check out [Chapter 1.5 Getting Started - Installing Git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git)
3. Lastly, you need to configure Git to work properly on your computer and also so that you can link a local Git user (you) to Github. Follow this tutorial on [setting up Git](https://www.theodinproject.com/lessons/foundations-setting-up-git) from `The Odin Project` course to setup Git in your system.


## 3. Github
Github is a website where you can host Git.

Note that it's not the same as Git. When I was just a beginner, I was confused between these two, so I will save you a lot of pondering by telling you this now.

Github allows you to store and share your code with other software developers around the world.

I remember one time when my laptop broke, and the game I was developing at the time was only saved on that laptop.

If I were using Github at that time, I may have saved that game in an online repository and not worried about the broken laptop. It stinks, but that game will never be saved anymore. So don't commit the same mistake I did before and start using Github.

Github and Git are like the perfect duo. When used properly, they offer tremendous advantages in code management and collaboration among software developers.

If you still don't have an account, go to [github.com](https://github.com/) and create one now. Trust me, you will need it more than you can imagine.

My github profile is available at [https://github.com/naknamu](https://github.com/naknamu). In that account, you can view every open source project I've worked on in recent years.

### 4. Chrome Dev Tools

Chrome Dev Tools allows you to view and edit the written HTML, CSS, and JS code in a webpage in real time.

Note that you must use the Google Chrome browser to use this feature. To open the Chrome developer tool, just press `F12` on your keyboard. Alternatively, you can right-click your mouse and then choose `Inspect` to open it.

*It would look something like this: (see image below)*  
![Chrome DevTools](https://image.solodevhub.com/solodevhub/chrome_devtools.PNG)

Don't get intimidated by what you see from the inspector. It seems hard at first, but as you deal with it frequently, you will soon become familiar with the tools available there.

This tool will help you save a lot of time debugging your website. Especially if you have begun to deploy your website in the browser.

To get an overview, you can read the [official Chrome DevTools documentation](https://developer.chrome.com/docs/devtools/overview/).

## 5. NPM
Last but not least is [Node Package Manager, or NPM](https://www.npmjs.com/) This tool may seem unfamiliar to you at first, especially for beginner web developers. But trust me, this tool will help you a lot in your development journey.

**What is NPM?**  
[NPM](https://www.npmjs.com/) is the world's largest software registry. It's a standard package manager for JavaScript projects. Currently, it contains more than 2 million packages. 

**Why do I need NPM?**  
There's a saying, `Don't reinvent the wheel`. Whatever you plan to develop, someone may have already done it before. 

This is not meant to demoralize you. I just want to inform you so you can use libraries available in the NPM registry to make your apps better.

You can import different libraries from NPM and use them in your application to make your development faster. Try to browse NPM today, and you might be surprised that there is a library or package available to suit your needs as a developer.

For example, if I search for React packages, you can see a lot of libraries available that will help me develop in React. *(see image below)*

![npm sample search](https://image.solodevhub.com/solodevhub/npm_sample_search.png)

# Conclusion
To summarize, you can't build anything without using a code editor. So start by learning VS Code. After that, learn how to use Git so you can track and save whatever changes you make to your code.

Then, with Github, you can save your project in an online repository and not worry about losing your files even if your computer breaks. Then, when you deploy it to the browser, you can use Chrome DevTools to debug your code and inspect your written HTML and CSS.

Finally, you can add different libraries available in Node Package Manager (NPM) to further enhance the features of your application.

The tools listed above will help you a lot in your coding journey. Learn them one at a time. There is no need to rush. You will eventually get used to these tools as you go along your journey. *Good luck, and happy coding!*