WEBVTT 1 00:00:01.390 --> 00:00:04.110 Now before we can write any code, 2 00:00:04.110 --> 00:00:08.360 we need to install and configure a code editor. 3 00:00:08.360 --> 00:00:12.275 So a code editor is the main tool for any developer 4 00:00:12.275 --> 00:00:17.275 and we use it as the name says to write our actual code. 5 00:00:18.160 --> 00:00:21.930 And so let's now go download a code editor. 6 00:00:21.930 --> 00:00:25.480 And the one that I advise everyone to use 7 00:00:25.480 --> 00:00:30.150 is Visual Studio Code or VS Code for short. 8 00:00:30.150 --> 00:00:31.890 So this is in my opinion, 9 00:00:31.890 --> 00:00:35.840 the best code editor by far that exists. 10 00:00:35.840 --> 00:00:38.520 And that's not just my own opinion. 11 00:00:38.520 --> 00:00:42.254 So VS Code is right now by far the most popular 12 00:00:42.254 --> 00:00:47.020 and most widely used code editor and that is for a reason. 13 00:00:47.020 --> 00:00:50.990 It simply is the best and easiest to use and of course, 14 00:00:50.990 --> 00:00:52.950 it is completely free. 15 00:00:52.950 --> 00:00:56.760 Now there are alternatives if you don't like VS Code 16 00:00:56.760 --> 00:00:58.152 for some reason. 17 00:00:58.152 --> 00:01:02.660 So you can use Adam or you can use something like Brackets 18 00:01:02.660 --> 00:01:06.080 as well, which is the code editor that I used 19 00:01:06.080 --> 00:01:09.593 to teach a previous version of this course. 20 00:01:09.593 --> 00:01:13.500 But again, I'm going to use VS Code in this course. 21 00:01:13.500 --> 00:01:16.455 And so, I really advise you to follow this course, 22 00:01:16.455 --> 00:01:20.430 using the exact same code editor to make everything easier 23 00:01:20.430 --> 00:01:21.894 for you to follow. 24 00:01:21.894 --> 00:01:25.975 So again, this code editor is completely free 25 00:01:25.975 --> 00:01:29.240 and it works on every platform. 26 00:01:29.240 --> 00:01:32.760 So just download whatever installer that you need 27 00:01:32.760 --> 00:01:36.410 for your own platform, then install of course, 28 00:01:36.410 --> 00:01:38.790 that code editor on your computer. 29 00:01:38.790 --> 00:01:41.960 And once you're done, come back to this video, 30 00:01:41.960 --> 00:01:45.030 so that we can together set it up a little bit, 31 00:01:45.030 --> 00:01:48.463 just so that we can get started in the next section. 32 00:01:49.950 --> 00:01:53.960 Okay, so I hope that you managed to install VS Code 33 00:01:53.960 --> 00:01:56.614 on your system and as you open it up, 34 00:01:56.614 --> 00:01:59.395 it should look something like this. 35 00:01:59.395 --> 00:02:03.230 Now, the colors should probably all be different, 36 00:02:03.230 --> 00:02:05.270 but we will fix that in a second. 37 00:02:05.270 --> 00:02:07.934 And maybe this welcome screen also looks different. 38 00:02:07.934 --> 00:02:09.532 And maybe this icons here 39 00:02:09.532 --> 00:02:13.420 because you might've installed the editor sometime 40 00:02:13.420 --> 00:02:15.254 after I recorded this video. 41 00:02:15.254 --> 00:02:19.433 But anyway, the main things should still work the same. 42 00:02:19.433 --> 00:02:24.433 And so let's actually start by installing a theme. 43 00:02:24.720 --> 00:02:28.090 So a theme is basically all the colors that you see 44 00:02:28.090 --> 00:02:29.260 are on the screen. 45 00:02:29.260 --> 00:02:31.490 And also the color is in the actual code 46 00:02:31.490 --> 00:02:33.730 that you're going to write. 47 00:02:33.730 --> 00:02:37.597 Okay, now you don't need to install a theme. 48 00:02:37.597 --> 00:02:40.420 So you can simply change one of the themes 49 00:02:40.420 --> 00:02:43.913 that is already included in VS Code. 50 00:02:43.913 --> 00:02:47.617 So just click down here on this icon and then color theme. 51 00:02:47.617 --> 00:02:51.395 And then here, you can try one of these out. 52 00:02:51.395 --> 00:02:53.840 And so if you like one of them, 53 00:02:53.840 --> 00:02:55.960 you can simply keep that one. 54 00:02:55.960 --> 00:02:59.555 But as you see, the theme that I have is this monokai pro 55 00:02:59.555 --> 00:03:04.555 and this one was not included by default by VS Code. 56 00:03:05.040 --> 00:03:08.830 And so if you want to install the same theme as I have, 57 00:03:08.830 --> 00:03:11.318 then simply come here to this extensions tab 58 00:03:11.318 --> 00:03:16.203 and then search for monokai pro. 59 00:03:17.240 --> 00:03:20.040 Okay, then it's this first one here. 60 00:03:20.040 --> 00:03:23.540 And then you can simply, probably somewhere here, 61 00:03:23.540 --> 00:03:25.012 click on download. 62 00:03:25.012 --> 00:03:29.975 Now this theme is actually a paid theme that you can buy 63 00:03:29.975 --> 00:03:33.600 for about 10 U.S. dollars or so. 64 00:03:33.600 --> 00:03:36.270 However, you can actually also use the theme 65 00:03:36.270 --> 00:03:38.130 for free forever. 66 00:03:38.130 --> 00:03:40.369 It will then just ask you every couple of days 67 00:03:40.369 --> 00:03:42.460 for you to buy it. 68 00:03:42.460 --> 00:03:46.049 But for me, that has never been a big problem. 69 00:03:46.049 --> 00:03:49.260 Now, I just wanted to quickly mention that I'm not 70 00:03:49.260 --> 00:03:52.400 in any way affiliated with the theme 71 00:03:52.400 --> 00:03:55.410 and that this is not an advertisement. 72 00:03:55.410 --> 00:03:57.391 So this is simply the theme that I love 73 00:03:57.391 --> 00:04:00.000 and that I use every single day. 74 00:04:00.000 --> 00:04:02.940 But of course, you can use a different theme 75 00:04:02.940 --> 00:04:06.050 or a theme that you have already been using yourself. 76 00:04:06.050 --> 00:04:07.560 But if you like to theme, 77 00:04:07.560 --> 00:04:11.120 then you can support the creator or you can use the theme 78 00:04:11.120 --> 00:04:15.860 for free or you can, of course also use another theme. 79 00:04:15.860 --> 00:04:18.991 And one other theme that is very similar 80 00:04:18.991 --> 00:04:23.168 and which actually already comes with VS Code 81 00:04:23.168 --> 00:04:27.093 is monokai classic. 82 00:04:27.990 --> 00:04:29.230 So it's this one. 83 00:04:29.230 --> 00:04:32.100 So the colors here look a little bit different, 84 00:04:32.100 --> 00:04:35.734 but the monokai pro theme that I use is actually based 85 00:04:35.734 --> 00:04:37.230 on this one. 86 00:04:37.230 --> 00:04:40.280 And so therefore, colors are quite similar. 87 00:04:40.280 --> 00:04:43.071 And so therefore, this one is also a good pick 88 00:04:43.071 --> 00:04:46.810 in case you want to use a very similar theme to mine, 89 00:04:46.810 --> 00:04:49.850 but don't want to use monokai pro, 90 00:04:49.850 --> 00:04:53.460 but I'm gonna set it back to monokai pro now. 91 00:04:53.460 --> 00:04:56.280 And so that's it about the theme. 92 00:04:56.280 --> 00:04:58.880 And so, let's not move on and also talk 93 00:04:58.880 --> 00:05:01.229 about VS Code settings. 94 00:05:01.229 --> 00:05:04.410 And so here, I'm going to show you a couple of settings 95 00:05:04.410 --> 00:05:06.053 that I'm using in the course videos 96 00:05:06.053 --> 00:05:08.643 and that you should probably use as well 97 00:05:08.643 --> 00:05:11.809 to make it easier for you to follow the videos 98 00:05:11.809 --> 00:05:15.610 and also to code on your own later on. 99 00:05:15.610 --> 00:05:18.871 So the first setting is this auto save setting 100 00:05:18.871 --> 00:05:22.273 that you should set to on focus change. 101 00:05:22.273 --> 00:05:25.871 Okay and so, what this will do is that whenever 102 00:05:25.871 --> 00:05:30.320 you leave the code editor or you go to some other file, 103 00:05:30.320 --> 00:05:34.050 then it will automatically save that file without you having 104 00:05:34.050 --> 00:05:35.770 to do anything. 105 00:05:35.770 --> 00:05:37.813 And so, that's very helpful. 106 00:05:37.813 --> 00:05:40.565 Now, if this isn't showing up here for you, 107 00:05:40.565 --> 00:05:44.488 up here, you can simply search for everything. 108 00:05:44.488 --> 00:05:48.947 So you can simply search auto save like this. 109 00:05:48.947 --> 00:05:52.550 And then again, change it to unfocused change. 110 00:05:52.550 --> 00:05:55.780 Then you could also change the font size, 111 00:05:55.780 --> 00:05:57.911 but that's not really important for you. 112 00:05:57.911 --> 00:06:01.807 Then another one is this multi cursor modifier. 113 00:06:01.807 --> 00:06:04.074 And this one sounds a bit weird, 114 00:06:04.074 --> 00:06:08.091 but you can simply set it to control command. 115 00:06:08.091 --> 00:06:10.370 Or you can leave it at alt. 116 00:06:10.370 --> 00:06:11.910 So just when you need it, 117 00:06:11.910 --> 00:06:14.714 just know which of the two you selected. 118 00:06:14.714 --> 00:06:18.180 But for now, again, this is not important. 119 00:06:18.180 --> 00:06:20.793 I will only start using it a bit later. 120 00:06:20.793 --> 00:06:24.529 Then I also have the word wrap turned on, 121 00:06:24.529 --> 00:06:27.892 but again, that's not that important. 122 00:06:27.892 --> 00:06:32.892 Okay, so I think those are actually the most important ones. 123 00:06:33.709 --> 00:06:36.890 There's just another one that you need to change. 124 00:06:36.890 --> 00:06:41.890 And that is called format on save. 125 00:06:42.033 --> 00:06:45.731 All right, so just turn this one here on, 126 00:06:45.731 --> 00:06:50.070 which says that a formatter must be available and by now, 127 00:06:50.070 --> 00:06:52.314 it is not, but in one of the next sections, 128 00:06:52.314 --> 00:06:54.955 we will actually install a formatter 129 00:06:54.955 --> 00:06:57.830 to automatically format our code. 130 00:06:57.830 --> 00:07:01.010 And by then, this setting here must be turned on. 131 00:07:01.010 --> 00:07:06.010 Okay and that's actually it for this lecture already. 132 00:07:06.089 --> 00:07:09.510 Now, just notice that I'm working on a Mac here, 133 00:07:09.510 --> 00:07:12.428 but everything will work exactly the same on Windows 134 00:07:12.428 --> 00:07:14.326 and on Linux. 135 00:07:14.326 --> 00:07:18.050 So this VS Code editor as I mentioned earlier, 136 00:07:18.050 --> 00:07:21.014 works just the same on all the platforms. 137 00:07:21.014 --> 00:07:26.014 Now, just one final and small adjustment that we can make, 138 00:07:26.369 --> 00:07:27.889 which I just remembered 139 00:07:27.889 --> 00:07:32.031 is that besides changing the main color theme, 140 00:07:32.031 --> 00:07:35.834 we can also change the theme of the file icons. 141 00:07:35.834 --> 00:07:38.411 And so again, if you want your VS Code 142 00:07:38.411 --> 00:07:40.727 to look exactly the same as mine, 143 00:07:40.727 --> 00:07:45.727 then you can select these Seti icons here. 144 00:07:45.810 --> 00:07:49.230 So by default, I think it should be this minimal, 145 00:07:49.230 --> 00:07:52.070 but I prefer these ones here. 146 00:07:52.070 --> 00:07:54.120 And so, by selecting this one here, 147 00:07:54.120 --> 00:07:55.489 then your code editor 148 00:07:55.489 --> 00:07:59.580 will probably look exactly the same as mine. 149 00:07:59.580 --> 00:08:03.370 All right and with that, we are actually ready to move on. 150 00:08:03.370 --> 00:08:06.490 Just make sure that you also have the latest version 151 00:08:06.490 --> 00:08:08.951 of Google Chrome installed on your computer 152 00:08:08.951 --> 00:08:11.450 because that is going to be the browser 153 00:08:11.450 --> 00:08:14.050 in which we will be testing our code. 154 00:08:14.050 --> 00:08:15.970 All right, but with that, 155 00:08:15.970 --> 00:08:18.420 we are now really done with this video. 156 00:08:18.420 --> 00:08:20.803 And so, I'll see you in the next one.