1 00:00:02,070 --> 00:00:06,560 So now we created our first website and we now know how to 2 00:00:06,560 --> 00:00:08,600 create HTML pages. 3 00:00:08,600 --> 00:00:11,973 And we wrote our first piece of HTML code, 4 00:00:12,890 --> 00:00:17,123 but the approach we've been using thus far has a flaw whilst 5 00:00:18,060 --> 00:00:23,060 using a text editor like does text edit app on Mac Wes or 6 00:00:23,130 --> 00:00:26,050 notepad on windows works for a, 7 00:00:26,050 --> 00:00:31,050 such a very basic HTML file for such a basic webpage will 8 00:00:32,720 --> 00:00:37,700 definitely face some issues. If we work on bigger projects, 9 00:00:37,700 --> 00:00:42,330 on bigger websites, with more content and with more code, 10 00:00:42,330 --> 00:00:45,350 if we have a look at page like amazon.com, 11 00:00:45,350 --> 00:00:49,820 then we can get some doubts. If this is the best approach. 12 00:00:49,820 --> 00:00:53,550 If you go to amazon.com and you right click in there to view 13 00:00:53,550 --> 00:00:57,100 the page source, right, click here on a non image. 14 00:00:57,100 --> 00:01:01,790 For example, if we click here and view the page source, wow, 15 00:01:01,790 --> 00:01:03,690 that's a lot of source code. 16 00:01:03,690 --> 00:01:07,760 And if you imagine writing code like this and this length 17 00:01:07,760 --> 00:01:11,410 and this complexity in an editor like this, 18 00:01:11,410 --> 00:01:15,760 that doesn't sound like fun. It's easy to mistype to, 19 00:01:15,760 --> 00:01:16,593 for example, 20 00:01:16,593 --> 00:01:20,880 forgets such a slash a forward slash which then renders 21 00:01:20,880 --> 00:01:21,737 this an invalid element 22 00:01:21,737 --> 00:01:25,040 and they offer you don't want to do that. 23 00:01:25,040 --> 00:01:28,270 You don't want to use a text editor like this. 24 00:01:28,270 --> 00:01:29,103 Instead, 25 00:01:29,103 --> 00:01:33,120 you want to use an editor which brings more features, 26 00:01:33,120 --> 00:01:37,620 which was built for development for programming, possibly, 27 00:01:37,620 --> 00:01:41,710 which was built for web development specifically because it 28 00:01:41,710 --> 00:01:46,710 turns out that there exist specific editors for development, 29 00:01:47,830 --> 00:01:51,970 which allow us to edit plain text files, 30 00:01:51,970 --> 00:01:55,250 which are HTML files still is in the end, 31 00:01:55,250 --> 00:01:59,760 but which still give us more support, more convenience. 32 00:01:59,760 --> 00:02:00,710 For example, 33 00:02:00,710 --> 00:02:05,710 by highlighting certain language features by highlighting 34 00:02:05,750 --> 00:02:08,350 these H one tax, for example, 35 00:02:08,350 --> 00:02:12,350 by highlighting potential errors, we might be making. 36 00:02:12,350 --> 00:02:16,980 And by giving us a lot of our assistance and functionality 37 00:02:16,980 --> 00:02:21,320 that simply makes working with code like this easier. 38 00:02:21,320 --> 00:02:25,410 And that makes it easier for us to spot errors and to write 39 00:02:25,410 --> 00:02:30,140 correct code and such editors exist. And best of all, 40 00:02:30,140 --> 00:02:33,952 one of the most popular and best editors out there is 41 00:02:33,952 --> 00:02:36,900 available completely for free. 42 00:02:36,900 --> 00:02:39,300 So it is an extra piece of software, 43 00:02:39,300 --> 00:02:41,840 which we want to install, but it's free. 44 00:02:41,840 --> 00:02:45,260 And it's available for all operating systems. 45 00:02:45,260 --> 00:02:47,180 Now, which editor is this? 46 00:02:47,180 --> 00:02:51,290 It's an editor called visual studio code. 47 00:02:51,290 --> 00:02:52,780 And that's important. 48 00:02:52,780 --> 00:02:57,530 There also is an editor called just visual studio 49 00:02:57,530 --> 00:03:00,340 and both are from Microsoft. 50 00:03:00,340 --> 00:03:04,670 But visual studio is not primarily focused on 51 00:03:04,670 --> 00:03:06,670 Web development. 52 00:03:06,670 --> 00:03:07,503 Instead, 53 00:03:07,503 --> 00:03:10,720 you would typically use it for other programming languages. 54 00:03:10,720 --> 00:03:13,930 So therefore it's not visual studio, which you want to use, 55 00:03:13,930 --> 00:03:15,403 but visuals to do code. 56 00:03:16,250 --> 00:03:18,900 And this is available for free. As I mentioned, 57 00:03:18,900 --> 00:03:22,180 if you visit code.visualstudio.com, 58 00:03:22,180 --> 00:03:25,210 or if you just Google for visual studio code 59 00:03:25,210 --> 00:03:27,200 and you visit the website there, 60 00:03:27,200 --> 00:03:30,760 you can download it for various operating systems. 61 00:03:30,760 --> 00:03:34,890 Your operating system should be preselected here by default, 62 00:03:34,890 --> 00:03:38,050 and you can simply download it and then install it, 63 00:03:38,050 --> 00:03:39,763 on your system. 64 00:03:41,100 --> 00:03:46,100 Now, once this download finished, you can click on it to, 65 00:03:46,510 --> 00:03:49,810 in my case here in macro S unzip, this folder, 66 00:03:49,810 --> 00:03:51,230 which I download 67 00:03:51,230 --> 00:03:54,550 and then drag this visual studio code app file 68 00:03:54,550 --> 00:03:56,593 into the applications folder, 69 00:03:57,490 --> 00:04:00,450 On windows you can download an installer 70 00:04:00,450 --> 00:04:04,653 from code.visualstudio.com. So that's what I'll do here. 71 00:04:06,390 --> 00:04:10,110 So let's wait for this download to finish here, 72 00:04:10,110 --> 00:04:13,030 which can take a couple of seconds or minutes depending on 73 00:04:13,030 --> 00:04:14,483 your internet speed. 74 00:04:15,480 --> 00:04:17,890 Now the download did finish for me here. 75 00:04:17,890 --> 00:04:21,720 So I'll start this installer you're on windows. 76 00:04:21,720 --> 00:04:24,970 And the installation process is really straightforward. 77 00:04:24,970 --> 00:04:29,250 We accept the agreement and then you can basically confirm 78 00:04:29,250 --> 00:04:31,210 all these defaults. Of course, 79 00:04:31,210 --> 00:04:33,600 you can also install it into a number folder though, 80 00:04:33,600 --> 00:04:35,630 if you want to. 81 00:04:35,630 --> 00:04:38,120 So here I switched to a different folder 82 00:04:38,120 --> 00:04:43,120 on a different partition click next and next, 83 00:04:43,520 --> 00:04:45,973 here you can also keep all the defaults, 84 00:04:47,490 --> 00:04:49,510 and then click install. 85 00:04:49,510 --> 00:04:52,450 Now the installation can also take a short while, 86 00:04:52,450 --> 00:04:55,350 and I'll be back once it finished. 87 00:04:55,350 --> 00:04:57,130 And once it did finish, 88 00:04:57,130 --> 00:05:00,360 you can keep this checked and start visuals to do code. 89 00:05:00,360 --> 00:05:04,080 You can, of course also started it on macro S. 90 00:05:04,080 --> 00:05:07,560 Now, once you started, you should see a starting screen, 91 00:05:07,560 --> 00:05:10,740 a welcome screen that looks something like this. 92 00:05:10,740 --> 00:05:13,370 The exact look can differ over time, 93 00:05:13,370 --> 00:05:16,460 but it should look something like this. 94 00:05:16,460 --> 00:05:19,500 Now here, you can learn more about visual studio code 95 00:05:19,500 --> 00:05:21,250 and how you can tweak it, 96 00:05:21,250 --> 00:05:24,340 and definitely feel free to play around with that. 97 00:05:24,340 --> 00:05:27,620 We will also do that later in a couple of minutes. 98 00:05:27,620 --> 00:05:28,453 For the moment, 99 00:05:28,453 --> 00:05:31,680 I just want to open and edit that file that we created 100 00:05:31,680 --> 00:05:35,840 before this we could click open file here or go to file open 101 00:05:35,840 --> 00:05:39,700 file or on macro S just open on Macro S, 102 00:05:39,700 --> 00:05:43,990 this option is just called open instead of open file 103 00:05:43,990 --> 00:05:45,520 Here It is open file though. 104 00:05:45,520 --> 00:05:47,220 So I'll choose this. 105 00:05:47,220 --> 00:05:50,570 And then we can navigate to this folder in which we added 106 00:05:50,570 --> 00:05:55,570 our index HTML file and select that file and open it. 107 00:05:55,740 --> 00:05:58,800 Now, once you were selected this file and clicked open, 108 00:05:58,800 --> 00:06:01,800 you might see a trust warning like this. 109 00:06:01,800 --> 00:06:04,600 This is a feature built into visual studio code, 110 00:06:04,600 --> 00:06:07,910 which tries to warn you that you're not opening an editing 111 00:06:07,910 --> 00:06:11,730 and possibly executing files where you don't understand 112 00:06:11,730 --> 00:06:14,900 the code. Here, Of course it's our own file. 113 00:06:14,900 --> 00:06:18,690 So we do trust it so we can click open here, 114 00:06:18,690 --> 00:06:21,570 and then you should see the code that's stored in this file 115 00:06:21,570 --> 00:06:24,240 here inside of visual studio code. 116 00:06:24,240 --> 00:06:27,610 And you'll see that it already looks a bit different 117 00:06:27,610 --> 00:06:32,070 compared to what we had before in this plain text editor, 118 00:06:32,070 --> 00:06:36,720 the HTML tag, for example, this H one tag here is blue. 119 00:06:36,720 --> 00:06:37,580 In my case, 120 00:06:37,580 --> 00:06:40,490 it has a different colored in the text between the tags 121 00:06:41,380 --> 00:06:43,260 and it's color coding, 122 00:06:43,260 --> 00:06:46,160 syntax highlighting as it's called like this, 123 00:06:46,160 --> 00:06:49,480 that helps with programming. Here, Of course, 124 00:06:49,480 --> 00:06:52,380 we have a simple file with just one line of code, 125 00:06:52,380 --> 00:06:55,640 but if you had bigger files with more code in them, 126 00:06:55,640 --> 00:06:58,090 as we will have them throughout this course, 127 00:06:58,090 --> 00:07:01,970 or if you're working with multiple files tools like visuals 128 00:07:01,970 --> 00:07:05,230 to do code, make working with that much easier, for example, 129 00:07:05,230 --> 00:07:10,230 it will be much easier to see where your HTML tags are. 130 00:07:10,400 --> 00:07:14,260 The blue things here and where to content between the tags 131 00:07:14,260 --> 00:07:16,380 is because they have different colors. 132 00:07:16,380 --> 00:07:18,193 So that's pretty nice to have. 133 00:07:19,540 --> 00:07:22,890 Now you can open an added single files like this, 134 00:07:22,890 --> 00:07:26,390 but it's even better if you opened the entire project folder 135 00:07:26,390 --> 00:07:29,870 instead of a single file with visual studio code. 136 00:07:29,870 --> 00:07:32,580 Because throughout the discourse section, 137 00:07:32,580 --> 00:07:36,090 we're going to add multiple code files to our project. 138 00:07:36,090 --> 00:07:36,923 For example, 139 00:07:36,923 --> 00:07:40,460 we'll have separate files for a CSS code at some point, 140 00:07:40,460 --> 00:07:43,780 and we want to manage them all in the same project and 141 00:07:43,780 --> 00:07:47,280 conveniently manage them with visual studio code, 142 00:07:47,280 --> 00:07:49,133 in the same editor window, 143 00:07:50,020 --> 00:07:52,900 to achieve this, We can again go to file. 144 00:07:52,900 --> 00:07:54,020 And then choose open folder 145 00:07:54,020 --> 00:07:58,060 on macro S this option doesn't exist there, instead, 146 00:07:58,060 --> 00:08:00,337 It's again, the open option on Mac OS. 147 00:08:00,337 --> 00:08:04,140 You'll use open for both files and folders on windows. 148 00:08:04,140 --> 00:08:06,240 You have separate options. 149 00:08:06,240 --> 00:08:09,240 So here I choose open folder on windows, 150 00:08:09,240 --> 00:08:12,030 and now I select the entire folder, 151 00:08:12,030 --> 00:08:15,260 which contains my index HTML file. 152 00:08:15,260 --> 00:08:17,300 Now, when you open that entire folder, 153 00:08:17,300 --> 00:08:20,670 you might again get the trust warning, where you again, 154 00:08:20,670 --> 00:08:23,923 of course can simply confirm it and click open. 155 00:08:24,780 --> 00:08:26,860 And once you've selected that folder, 156 00:08:26,860 --> 00:08:29,730 you will see that the interface changes a bit. 157 00:08:29,730 --> 00:08:31,040 Now you're on the left. 158 00:08:31,040 --> 00:08:33,929 We have a list of all the files in that folder 159 00:08:33,929 --> 00:08:35,900 at the moment that, that's only one file, 160 00:08:35,900 --> 00:08:38,480 but soon we'll have more files in here 161 00:08:38,480 --> 00:08:41,090 and you can click on those files, 162 00:08:41,090 --> 00:08:43,429 to then open and edit them here on the right 163 00:08:44,790 --> 00:08:48,220 That's how you can open a folder with visual studio code. 164 00:08:48,220 --> 00:08:50,460 And that's the mode with which will work for 165 00:08:50,460 --> 00:08:53,833 out this course, of course, both on windows and Mac OS. 166 00:08:55,670 --> 00:08:58,550 Now, before we started working on that code again, 167 00:08:58,550 --> 00:09:01,770 let's talk about the configuration of visuals do you code. 168 00:09:01,770 --> 00:09:04,850 And the look I have here, as you can tell, 169 00:09:04,850 --> 00:09:08,550 I have a dark mode here and you might have that same look 170 00:09:08,550 --> 00:09:10,480 if you don't and you want it, 171 00:09:10,480 --> 00:09:12,520 or if you have it and you don't want it, 172 00:09:12,520 --> 00:09:15,830 you can go to code references. 173 00:09:15,830 --> 00:09:18,420 And then there, to color theme, 174 00:09:18,420 --> 00:09:21,900 and there you can then pick a different color theme. 175 00:09:21,900 --> 00:09:24,480 And if you select them with the arrow keys, 176 00:09:24,480 --> 00:09:26,510 you get a preview instantly. 177 00:09:26,510 --> 00:09:29,530 Now I will switch to the stark plus theme, but you can, 178 00:09:29,530 --> 00:09:31,493 of course use any theme you want. 179 00:09:32,700 --> 00:09:36,600 You can also explore the settings here. 180 00:09:38,210 --> 00:09:41,070 And the shortcuts though, to get started, 181 00:09:41,070 --> 00:09:44,990 there is nothing special that would need to be configured. 182 00:09:44,990 --> 00:09:47,360 I will assume in a bit here though, 183 00:09:47,360 --> 00:09:49,790 to make sure that you can read this code a bit better. 184 00:09:49,790 --> 00:09:53,100 And I will also often disabled this bar on the left, 185 00:09:53,100 --> 00:09:55,350 since it's takes up a lot of space. 186 00:09:55,350 --> 00:09:58,590 And currently we have only one file anyways, 187 00:09:58,590 --> 00:10:00,920 and I'll do that with view. 188 00:10:00,920 --> 00:10:05,920 And then there under appearance, I can disable this sidebar. 189 00:10:06,400 --> 00:10:09,360 And here you can also control whether you have a status bar 190 00:10:09,360 --> 00:10:11,210 at the bottom, for example, 191 00:10:11,210 --> 00:10:15,000 and a couple of other things simply play around with that 192 00:10:15,000 --> 00:10:18,360 and make sure you configure the editors such 193 00:10:18,360 --> 00:10:20,550 that you personally like it. 194 00:10:20,550 --> 00:10:23,580 I will try to go for a minimal approach here, 195 00:10:23,580 --> 00:10:27,710 for the most part to make it easy for you to follow along. 196 00:10:27,710 --> 00:10:29,170 And they are for all, for example, 197 00:10:29,170 --> 00:10:32,440 also disabled breadcrumbs, 198 00:10:32,440 --> 00:10:35,990 which wants this part above their code to really have this 199 00:10:35,990 --> 00:10:38,570 lean setup here. 200 00:10:38,570 --> 00:10:42,670 So now we got this editor is set up and it's this editor, 201 00:10:42,670 --> 00:10:46,080 which we're going to use for the entire course. 202 00:10:46,080 --> 00:10:48,650 You can use other editors as well. 203 00:10:48,650 --> 00:10:53,090 There are alternatives like sublime text or Adam, 204 00:10:53,090 --> 00:10:56,980 but my strong recommendation is using visuals Studio Code. 205 00:10:56,980 --> 00:10:59,860 Unless you have a personal favorite already, 206 00:10:59,860 --> 00:11:03,150 and you know that you prefer some other editor. 207 00:11:03,150 --> 00:11:07,070 We're also going to tweak this editor here from time to time 208 00:11:07,070 --> 00:11:08,120 throughout the course, 209 00:11:08,120 --> 00:11:10,920 we're going to install certain extensions 210 00:11:10,920 --> 00:11:13,010 to help us with certain aspects. 211 00:11:13,010 --> 00:11:15,450 We might dive into the settings, 212 00:11:15,450 --> 00:11:16,800 but to get started, 213 00:11:16,800 --> 00:11:19,260 we now got everything which we need, 214 00:11:19,260 --> 00:11:20,803 and therefore let's move on.