All right. 1
So, first things first. Before we do anything else, 2
we first have to get set up and ready for web development. 3
So I'm gonna walk you through a couple of applications that we'll be using pretty much full time during 4
this course. There are two major tools that we’ll rely on, and that is going to be the Chrome browser and 5
the Atom text editor. 6
And between these two tools we're going to achieve a lot. 7
And later on in the course when we're introducing more advanced concepts such as using the command line 8
or using a database then we'll install other things as we go along. 9
But to get started the most important applications we need to install are just these two. 10
Now you might already have Chrome installed, but if you don't then be sure to check out the Web Development 11
Course Resources List which I’ll link to in this current lesson. And it's really really important that 12
you check over here because every single time I mention a link, or every single time I try to point 13
you towards something, the links will show up over here, and you'll be able to click on it to save you 14
all the trouble of having to type it all out. 15
First things first. 16
If you don't have Chrome installed, then open up this page in your browser and just click on this link 17
to go ahead and download and install Chrome. And that should be pretty simple. And it will guide you through 18
the process. 19
So now that you've downloaded the browser you need, the next step is to install a code editor. 20
And out there there are so many different code editors, for example, Atom, VSCode, Sublime, Brackets ... 21
And if you think about it all that you need to actually write code is just some form of text editor. 22
So you could, if you really wanted to, even use something like Notepad. 23
But the downside of Notepad is that it doesn't have all of the great features that some of these other specialized 24
code editors have. 25
So two of my favorite are Atom and VSCode and I use both of them pretty regularly. 26
Now, in the course videos you'll see me use Atom, but if you have a strong preference towards one of these 27
others or any other code editor that you're already used to that you want to use instead then feel free 28
to do that. But if you have no strong preferences then I recommend we go ahead and install the Atom text 29
editor. 30
And it's completely free to download and install. 31
So if you just head over to atom.io or go through the Web Development Course Resources List, then 32
you should land on this page and it very cleverly figures out what system you have that you're running. 33
So for example at the moment I'm running MacOS and I'm on MacOS 10.9 or later. 34
So all you have to do is just go ahead and click Download, and, once download has completed, then you can 35
simply head over to your Downloads folder and double click to unzip that package. And now you will see 36
Atom show up. 37
The last thing you have to do is just to move this application into your Applications folder. On the Mac 38
it’s just a matter of heading over to your Macintosh harddrive and then your Applications folder, and 39
then dragging in that Atom application that you just downloaded in your Downloads over into here. And 40
then you're all done and you're set up with Atom. 41
Now, if you're a Windows user and you head over to atom.io, you'll see that will automatically detect 42
that you are viewing this on a Windows computer. 43
And then you can just go ahead and again click that big yellow Download button. And you should end up 44
with something that's called something like atomsetup.exe, and you'll be able to see this in your 45
Downloads folder. 46
So now if you just double click on that and it will automatically do everything it needs to install 47
Atom on your system. 48
So once you're done it should open up a new Atom window like so, and you would have successfully installed 49
Atom. And the power of Atom really comes from their packages. 50
So you can see that they have over 8000 packages, which are bunches of code that other programmers have 51
written to make your experience of using Atom better. 52
So you can put in custom things such as display a clock in the Atom status bar, or other things such 53
as having the file icons next to each of your files, or something that's way more practical which is 54
things like atom-beautify which just beautifies and indents your code for you. 55
So these are really really powerful. 56
And we're going to customize it for the course. 57
So, again, if you head back over to the Web Development Course Resources List, you'll see that there is 58
a list of Atom packages that we want you to install. 59
And these are the ones which are recommended and these are the ones which are optional. 60
All you have to do is open up Atom and go to Preferences and then go to Install. 61
And I want you to search for each of these and then just go ahead and install it. 62
So you can simply just copy and paste it into here and you'll see the one that should match up exactly 63
with the name that you see over here. 64
And then just go ahead and click Install. And on Windows it is absolutely exactly the same. 65
And once you have installed all of your packages then you should be able to view them over here. 66
Now if you end up having any issues installing packages in Atom, then I recommend to go back to that 67
Google doc and scroll down to the place where I've got the troubleshooting instructions and follow each 68
of these steps to see if you can try and resolve it. 69
Now if you really can't fix it and your specific version of Windows or Mac or Linux just won't install 70
Atom or won't install the packages then I recommend to go ahead and get VSCode instead. 71
So, head over to the link. So, you'll be able to find a link to VSCode again in the Course Resources 72
List. 73
And once you click on it it will take you to a web site which will automatically look at which system 74
you're running and give you a big Download button. 75
And then from there on it's exactly the same as downloading and installing Atom. 76
Now you can also click on the dropdown list to select the stable version of whichever system you're 77
running. 78
I recommend you don't go for the insiders version because it usually has more bugs. 79
I recommend going for the stable version instead. 80
Now similar to the packages and Atom I've also compiled a list of the equivalent extensions in 81
VSCode that you can install. 82
So head over to the Course Resources List and you'll be have to find this list of VSCode extensions 83
I recommend. 84
But the goal is to have the Chrome browser installed and some form of text editor be it VSCode or 85
Atom installed. 86
Once you've got an editor and the Chrome browser, then you're ready to head over to the next lesson where 87
we're going to get started actually learning how to code and start building our web site. 88
So for all of that and more I'll see you on the next lesson.