Major Tools to Get started with Web Development

We first have to get set up and ready for web development. So I'm gonna walk you through a couple of applications that we'll be using pretty much full-time during your web development journey.

There are two major tools that you’ll rely on, and that is going to be the

Chrome browser
Text editor (from Basic to Advance)

Sublime Text
Brackets
Atom (Recommended)
Visual Studio

And between these two tools, we're going to achieve a lot. And later on in the Blogs when we're introducing more advanced concepts such as using the command line or using a database then we'll install other things as we go along.

But to get started the most important applications we need to install are just these two.

Now you might already have Chrome installed, but if you don't then be sure to download chrome.

First things first. If you don't have Chrome installed, then open up this page in your browser and just click on this link Here. to go ahead and download and install Chrome. And that should be pretty simple. And it will guide you through the process.

So now that you've downloaded the browser you need, the next step is to install a code editor. And out there there are so many different code editors, for example, Atom, VSCode, Sublime, Brackets ... And if you think about it all that you need to actually write code is just some form of text editor. So you could, if you really wanted to, even use something like Notepad. But the downside of Notepad is that it doesn't have all of the great features that some of these other specialized code editors have.

So two of the code editors use in the industry are Atom and VSCode. Now, in the Blogs, you'll see me use Atom, but if you have a strong preference for one of these others or any other code editor that you're already used to that you want to use instead then feel free to do that. But if you have no strong preferences then I recommend we go ahead and install the Atom text editor. And it's completely free to download and install. So if you just head over to atom.io then you should land on this page

and it very cleverly figures out what system you have that you're running.

Window
Linux
Mac Os

Installation for Mac Os

So all you have to do is just go ahead and click Download, and, once the download has completed, then you can simply head over to your Downloads folder and double click to unzip that package. And now you will see Atom show up. The last thing you have to do is just to move this application into your Applications folder. On the Mac, it’s just a matter of heading over to your Macintosh hard drive and then your Applications folder, and then dragging in that Atom application that you just downloaded in your Downloads over into here. And then you're all done and you're set up with Atom.

Installation for Mac Window

Now, if you're a Windows user and you head over to atom.io, you'll see that will automatically detect that you are viewing this on a Windows computer. And then you can just go ahead and again click that big yellow Download button. And you should end up with something that's called something like atomsetup.exe, and you'll be able to see this in your Downloads folder. So now if you just double click on that and it will automatically do everything it needs to install Atom on your system. So once you're done it should open up a new Atom window like so, and you would have successfully installed.

Why Atom?

Atom. And the power of Atom really comes from their packages.

So you can see that they have over 8000 packages, which are bunches of code that other programmers have written to make your experience of using Atom better. So you can put in custom things such as display a clock in the Atom status bar or other things such as having the file icons next to each of your files, or something that's way more practical which is things like atom-beautify which just beautifies and indents your code for you. So these are really really powerful.

And these are the ones which are recommended and these are the ones which are optional.

Packages

All you have to do is open up Atom and go to Preferences and then go to Install. And I want you to search for each of these and then just go ahead and install it. So you can simply just copy and paste it into here and you'll see the one that should match up exactly with the name that you see over here. And then just go ahead and click Install. And on Windows, it is absolutely exactly the same.

Optional Packages

atom-html-preview
Sublime-Style-Column-Selection
linter-eslint

And once you have installed all of your packages then you should be able to view them over here. Now if you end up having any issues installing packages in Atom, then I recommend going back to Google that problem and resolve that through quora or StackOverflow.

VS code Guide:

Now if you really can't fix it and your specific version of Windows or Mac or Linux just won't install Atom or won't install the packages then I recommend going ahead and get VSCode instead. And once you click on it it will take you to a website that will automatically look at which system you're running and give you a big Download button. And then from there on it's exactly the same as downloading and installing Atom.

Now you can also click on the dropdown list to select the stable version of whichever system you're running. I recommend you don't go for the insider version because it usually has more bugs. I recommend going for the stable version instead.

Why VS Code?

Now similar to the packages and Atom I've also compiled a list of the equivalent extensions in VSCode that you can install.

Optional

ritwickdey.LiveServer
erikphansen.vscode-toggle-column-selection
file-icons

The goal is to have the Chrome browser installed and some form of text editor be it VSCode or Atom installed. Once you've got an editor and the Chrome browser, then you're ready to head over to the next Blog where we're going to get started actually learning how to code and start building our website.

So for all of that and more, I'll see you on the next Blog.

Previous Blog

Web Development Basics

Search This Blog

Tools for Web Development