Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,690 --> 00:00:01,150
All right.
2
00:00:01,170 --> 00:00:03,900
So, first things first. Before we do anything else,
3
00:00:03,930 --> 00:00:07,890
we first have to get set up and ready for web development.
4
00:00:07,890 --> 00:00:14,010
So I'm gonna walk you through a couple of applications that we'll be using pretty much full time during
5
00:00:14,010 --> 00:00:21,300
this course. There are two major tools that we’ll rely on, and that is going to be the Chrome browser and
6
00:00:21,300 --> 00:00:23,190
the Atom text editor.
7
00:00:23,190 --> 00:00:26,140
And between these two tools we're going to achieve a lot.
8
00:00:26,190 --> 00:00:31,890
And later on in the course when we're introducing more advanced concepts such as using the command line
9
00:00:31,890 --> 00:00:36,350
or using a database then we'll install other things as we go along.
10
00:00:36,480 --> 00:00:42,120
But to get started the most important applications we need to install are just these two.
11
00:00:42,120 --> 00:00:48,150
Now you might already have Chrome installed, but if you don't then be sure to check out the Web Development
12
00:00:48,150 --> 00:00:54,930
Course Resources List which I’ll link to in this current lesson. And it's really really important that
13
00:00:54,930 --> 00:00:59,460
you check over here because every single time I mention a link, or every single time I try to point
14
00:00:59,460 --> 00:01:04,740
you towards something, the links will show up over here, and you'll be able to click on it to save you
15
00:01:04,740 --> 00:01:07,940
all the trouble of having to type it all out.
16
00:01:08,010 --> 00:01:08,720
First things first.
17
00:01:08,730 --> 00:01:14,580
If you don't have Chrome installed, then open up this page in your browser and just click on this link
18
00:01:14,640 --> 00:01:21,330
to go ahead and download and install Chrome. And that should be pretty simple. And it will guide you through
19
00:01:21,330 --> 00:01:22,540
the process.
20
00:01:22,560 --> 00:01:28,050
So now that you've downloaded the browser you need, the next step is to install a code editor.
21
00:01:28,200 --> 00:01:36,240
And out there there are so many different code editors, for example, Atom, VSCode, Sublime, Brackets ...
22
00:01:36,240 --> 00:01:42,810
And if you think about it all that you need to actually write code is just some form of text editor.
23
00:01:42,810 --> 00:01:47,510
So you could, if you really wanted to, even use something like Notepad.
24
00:01:47,550 --> 00:01:53,640
But the downside of Notepad is that it doesn't have all of the great features that some of these other specialized
25
00:01:53,700 --> 00:01:55,230
code editors have.
26
00:01:55,230 --> 00:02:00,660
So two of my favorite are Atom and VSCode and I use both of them pretty regularly.
27
00:02:00,720 --> 00:02:06,540
Now, in the course videos you'll see me use Atom, but if you have a strong preference towards one of these
28
00:02:06,600 --> 00:02:12,390
others or any other code editor that you're already used to that you want to use instead then feel free
29
00:02:12,390 --> 00:02:18,390
to do that. But if you have no strong preferences then I recommend we go ahead and install the Atom text
30
00:02:18,390 --> 00:02:19,290
editor.
31
00:02:19,290 --> 00:02:22,580
And it's completely free to download and install.
32
00:02:22,620 --> 00:02:29,160
So if you just head over to atom.io or go through the Web Development Course Resources List, then
33
00:02:29,160 --> 00:02:35,040
you should land on this page and it very cleverly figures out what system you have that you're running.
34
00:02:35,040 --> 00:02:40,410
So for example at the moment I'm running MacOS and I'm on MacOS 10.9 or later.
35
00:02:40,410 --> 00:02:47,370
So all you have to do is just go ahead and click Download, and, once download has completed, then you can
36
00:02:47,370 --> 00:02:55,170
simply head over to your Downloads folder and double click to unzip that package. And now you will see
37
00:02:55,200 --> 00:02:56,390
Atom show up.
38
00:02:56,400 --> 00:03:03,420
The last thing you have to do is just to move this application into your Applications folder. On the Mac
39
00:03:03,420 --> 00:03:08,130
it’s just a matter of heading over to your Macintosh harddrive and then your Applications folder, and
40
00:03:08,130 --> 00:03:16,260
then dragging in that Atom application that you just downloaded in your Downloads over into here. And
41
00:03:16,350 --> 00:03:20,040
then you're all done and you're set up with Atom.
42
00:03:20,040 --> 00:03:25,650
Now, if you're a Windows user and you head over to atom.io, you'll see that will automatically detect
43
00:03:25,860 --> 00:03:28,570
that you are viewing this on a Windows computer.
44
00:03:28,710 --> 00:03:34,380
And then you can just go ahead and again click that big yellow Download button. And you should end up
45
00:03:34,440 --> 00:03:40,620
with something that's called something like atomsetup.exe, and you'll be able to see this in your
46
00:03:40,620 --> 00:03:42,550
Downloads folder.
47
00:03:42,570 --> 00:03:48,120
So now if you just double click on that and it will automatically do everything it needs to install
48
00:03:48,150 --> 00:03:50,310
Atom on your system.
49
00:03:50,370 --> 00:03:56,880
So once you're done it should open up a new Atom window like so, and you would have successfully installed
50
00:03:56,970 --> 00:04:01,900
Atom. And the power of Atom really comes from their packages.
51
00:04:01,900 --> 00:04:08,110
So you can see that they have over 8000 packages, which are bunches of code that other programmers have
52
00:04:08,110 --> 00:04:12,220
written to make your experience of using Atom better.
53
00:04:12,340 --> 00:04:19,930
So you can put in custom things such as display a clock in the Atom status bar, or other things such
54
00:04:19,930 --> 00:04:25,990
as having the file icons next to each of your files, or something that's way more practical which is
55
00:04:25,990 --> 00:04:31,240
things like atom-beautify which just beautifies and indents your code for you.
56
00:04:31,240 --> 00:04:33,220
So these are really really powerful.
57
00:04:33,250 --> 00:04:35,750
And we're going to customize it for the course.
58
00:04:36,010 --> 00:04:41,260
So, again, if you head back over to the Web Development Course Resources List, you'll see that there is
59
00:04:41,290 --> 00:04:45,380
a list of Atom packages that we want you to install.
60
00:04:45,490 --> 00:04:50,980
And these are the ones which are recommended and these are the ones which are optional.
61
00:04:50,980 --> 00:04:56,830
All you have to do is open up Atom and go to Preferences and then go to Install.
62
00:04:56,920 --> 00:05:02,580
And I want you to search for each of these and then just go ahead and install it.
63
00:05:02,710 --> 00:05:08,290
So you can simply just copy and paste it into here and you'll see the one that should match up exactly
64
00:05:08,290 --> 00:05:10,310
with the name that you see over here.
65
00:05:10,330 --> 00:05:17,110
And then just go ahead and click Install. And on Windows it is absolutely exactly the same.
66
00:05:17,110 --> 00:05:22,570
And once you have installed all of your packages then you should be able to view them over here.
67
00:05:22,570 --> 00:05:28,390
Now if you end up having any issues installing packages in Atom, then I recommend to go back to that
68
00:05:28,390 --> 00:05:34,660
Google doc and scroll down to the place where I've got the troubleshooting instructions and follow each
69
00:05:34,660 --> 00:05:37,690
of these steps to see if you can try and resolve it.
70
00:05:37,750 --> 00:05:45,290
Now if you really can't fix it and your specific version of Windows or Mac or Linux just won't install
71
00:05:45,310 --> 00:05:50,710
Atom or won't install the packages then I recommend to go ahead and get VSCode instead.
72
00:05:51,070 --> 00:05:56,590
So, head over to the link. So, you'll be able to find a link to VSCode again in the Course Resources
73
00:05:56,590 --> 00:05:57,150
List.
74
00:05:57,310 --> 00:06:02,230
And once you click on it it will take you to a web site which will automatically look at which system
75
00:06:02,230 --> 00:06:05,050
you're running and give you a big Download button.
76
00:06:05,050 --> 00:06:09,700
And then from there on it's exactly the same as downloading and installing Atom.
77
00:06:09,760 --> 00:06:15,040
Now you can also click on the dropdown list to select the stable version of whichever system you're
78
00:06:15,040 --> 00:06:15,730
running.
79
00:06:15,760 --> 00:06:19,690
I recommend you don't go for the insiders version because it usually has more bugs.
80
00:06:19,690 --> 00:06:22,390
I recommend going for the stable version instead.
81
00:06:22,390 --> 00:06:28,920
Now similar to the packages and Atom I've also compiled a list of the equivalent extensions in
82
00:06:28,930 --> 00:06:30,160
VSCode that you can install.
83
00:06:30,550 --> 00:06:36,440
So head over to the Course Resources List and you'll be have to find this list of VSCode extensions
84
00:06:36,500 --> 00:06:37,270
I recommend.
85
00:06:37,570 --> 00:06:44,230
But the goal is to have the Chrome browser installed and some form of text editor be it VSCode or
86
00:06:44,320 --> 00:06:45,840
Atom installed.
87
00:06:46,000 --> 00:06:51,190
Once you've got an editor and the Chrome browser, then you're ready to head over to the next lesson where
88
00:06:51,190 --> 00:06:56,320
we're going to get started actually learning how to code and start building our web site.
89
00:06:56,350 --> 00:06:59,260
So for all of that and more I'll see you on the next lesson.
9793
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.
Afrikaans
Akan
Albanian
Amharic
Armenian
Azerbaijani
Basque
Belarusian
Bemba
Bengali
Bihari
Bosnian
Breton
Bulgarian
Cambodian
Catalan
Cebuano
Cherokee
Chichewa
Chinese (Simplified)
Chinese (Traditional)
Corsican
Croatian
Czech
Danish
Dutch
English
Esperanto
Estonian
Faroese
Finnish
Galician
Georgian
German
Greek
Guarani
Haitian Creole
Hausa
Hawaiian
Hebrew
Hmong
Hungarian
Icelandic
Indonesian
Irish
Italian
Japanese
Kazakh
Kinyarwanda
Kirundi
Kongo
Korean
Krio (Sierra Leone)
Kurdish
Kyrgyz
Laothian
Latin
Latvian
Lithuanian
Luganda
Luo
Luxembourgish
Macedonian
Malagasy
Malay
Maltese
Maori
Mauritian Creole
Moldavian
Mongolian
Myanmar (Burmese)
Montenegrin
Nepali
Norwegian
Pashto
Persian
Polish
Portuguese (Brazil)
Portuguese (Portugal)
Quechua
Romanian
Romansh
Russian
Samoan
Scots Gaelic
Serbian
Sesotho
Setswana
Seychellois Creole
Shona
Sindhi
Sinhalese
Slovak
Slovenian
Somali
Spanish
Swedish
Tajik
Thai
Tigrinya
Tonga
Turkish
Turkmen
Ukrainian
Uzbek
Vietnamese
Welsh
Wolof