1 00:00:00,240 --> 00:00:04,050 Now once you're ready, go ahead and open up the Atom editor. Now, 2 00:00:04,110 --> 00:00:06,180 if you haven't yet installed Atom, 3 00:00:06,480 --> 00:00:10,380 this is a good point to go back and have a look at those videos on how to 4 00:00:10,380 --> 00:00:14,730 install Atom for Mac or for Windows because from here on out, 5 00:00:14,940 --> 00:00:19,080 we're going to be working with the Atom editor to create every single one of our 6 00:00:19,080 --> 00:00:20,670 websites. So it's really, 7 00:00:20,670 --> 00:00:24,090 really important that you have it set up with all the packages that we've 8 00:00:24,090 --> 00:00:26,760 specified in those installation videos. 9 00:00:27,120 --> 00:00:29,190 But once you've got it installed an open, 10 00:00:29,220 --> 00:00:32,460 you should be looking at a screen like this. Now, 11 00:00:32,460 --> 00:00:35,370 the first thing we're going to do is we're going to go to file and we're going 12 00:00:35,370 --> 00:00:38,760 to open a new project folder to work out of. 13 00:00:38,970 --> 00:00:43,890 So I want you to create a new folder either in your desktop or somewhere else 14 00:00:43,890 --> 00:00:46,790 that you prefer and it's going to be called Web Development. 15 00:00:48,950 --> 00:00:52,820 Go ahead and hit create, and then select that web development folder 16 00:00:52,910 --> 00:00:54,380 and go ahead and click open. 17 00:00:54,800 --> 00:00:59,300 And now you'll see your project folder show up in the sidebar over here 18 00:00:59,600 --> 00:01:03,260 and you can toggle it closed by clicking on that arrow button over there. 19 00:01:03,830 --> 00:01:06,140 So now that we've got our web development folder, 20 00:01:06,350 --> 00:01:08,840 this is where we're going to store all of our projects. 21 00:01:09,230 --> 00:01:12,890 The first project that we're gonna be creating is our personal website. 22 00:01:13,160 --> 00:01:17,090 So go ahead and right-click on the web development folder 23 00:01:17,390 --> 00:01:21,680 and we're going to create a new folder inside the web development folder, 24 00:01:22,070 --> 00:01:26,990 and we're going to call our project HTML - Personal Site. 25 00:01:27,710 --> 00:01:32,030 And now we're ready to create our very first HTML file inside this folder. 26 00:01:32,300 --> 00:01:37,280 So again, right-click on this tab and we're going to create a new file. 27 00:01:37,550 --> 00:01:39,020 Now, as you get used to Atom, 28 00:01:39,080 --> 00:01:42,830 you are going to start to want to use some of their shortcuts. So for example, 29 00:01:42,830 --> 00:01:45,230 instead of right-clicking and select a new file, 30 00:01:45,440 --> 00:01:50,440 you can also just simply select the HTML personal site and hit A in order to do 31 00:01:51,260 --> 00:01:54,800 the same thing. But in the beginning, as you're getting used to Atom, 32 00:01:55,040 --> 00:01:58,460 I'm going to be using a lot of the mouse controls so that you can see what's 33 00:01:58,460 --> 00:01:59,570 happening on the screen. 34 00:01:59,720 --> 00:02:03,530 But feel free to start incorporating the shortcuts into your workflow 35 00:02:03,770 --> 00:02:05,120 and as time goes on, 36 00:02:05,150 --> 00:02:08,300 you'll find that they make life so much quicker and so much easier. 37 00:02:08,870 --> 00:02:13,520 So now we're going to create our very first file and you can see the way that 38 00:02:13,520 --> 00:02:18,260 the files are structured is that we're creating it inside this folder called 39 00:02:18,260 --> 00:02:21,350 HTML - Personal Site and inside that folder, 40 00:02:21,380 --> 00:02:24,890 is where our web page is going to be located. 41 00:02:25,160 --> 00:02:28,250 Let's go ahead and create this homepage. And by convention, 42 00:02:28,280 --> 00:02:31,250 we're going to name it, index.html 43 00:02:31,610 --> 00:02:35,540 and that is usually the name that developers will give their homepage. 44 00:02:35,870 --> 00:02:39,260 So go ahead and hit enter in order to create that file. 45 00:02:39,470 --> 00:02:41,510 And if you open up this folder, 46 00:02:41,540 --> 00:02:45,860 you can see that's exactly where it's located and it should open up on the right 47 00:02:45,860 --> 00:02:50,600 hand or the main pane over here as well. Now in order to create any HTML website, 48 00:02:50,630 --> 00:02:55,010 there's a little bit of boilerplate code that's associated. Now, 49 00:02:55,010 --> 00:02:56,600 you're going to either write it all out, 50 00:02:57,050 --> 00:02:59,740 or because we installed the Emmet plugin, 51 00:02:59,890 --> 00:03:03,670 we can simply write HTML and then hit enter, 52 00:03:04,210 --> 00:03:08,740 and it will insert all of that boilerplate code for us. Now, 53 00:03:08,770 --> 00:03:09,970 if that didn't work for you, 54 00:03:09,970 --> 00:03:14,970 you could also hit the tab key after writing HTML or typing an exclamation Mark 55 00:03:16,000 --> 00:03:18,160 and then hitting the tab or the enter key. 56 00:03:18,490 --> 00:03:20,980 Try some of these combinations that you see on screen 57 00:03:21,010 --> 00:03:22,240 if it's not working for you. 58 00:03:22,870 --> 00:03:26,890 And you're going to come to see and appreciate all of the powers of the Atom 59 00:03:26,890 --> 00:03:29,020 plugins and how helpful they can be. 60 00:03:29,440 --> 00:03:34,440 So now we mentioned that this is a standard HTML boilerplate code. 61 00:03:34,960 --> 00:03:38,020 Now in Programming, we talk about boilerplates quite frequently, 62 00:03:38,140 --> 00:03:40,480 and it's similar to having a code template, 63 00:03:40,750 --> 00:03:43,390 something that you'll reuse for different projects. 64 00:03:43,540 --> 00:03:47,530 And it comes from the days when the printing press would make these heavy iron 65 00:03:47,530 --> 00:03:50,710 plates that would function as their printing template. 66 00:03:51,130 --> 00:03:54,610 And because they looked very similar to the small metal plate that identified 67 00:03:54,610 --> 00:03:58,090 the builder of a steam boiler they called it the boilerplate. 68 00:03:58,510 --> 00:04:00,310 That's just where this word comes from. 69 00:04:00,610 --> 00:04:02,470 But when we're talking about it in Programming, 70 00:04:02,650 --> 00:04:06,040 we usually mean a co-template that you can reuse. Now, 71 00:04:06,070 --> 00:04:09,790 even though we didn't have to do very much work in order to get all of this into 72 00:04:09,790 --> 00:04:13,930 our file, it would still be a shame to lose it, right? So in Atom, 73 00:04:14,290 --> 00:04:18,250 whenever you see a blue dot on the tab bar of your file, 74 00:04:18,550 --> 00:04:21,370 that means that there's unsaved progress. 75 00:04:21,400 --> 00:04:24,670 And in order to make it disappear and to keep your progress, 76 00:04:25,000 --> 00:04:30,000 you can simply go to file and then click on save or use whatever shortcut that 77 00:04:30,430 --> 00:04:33,910 shows up for you over here. It should be command + s on Mac, 78 00:04:34,150 --> 00:04:37,990 and it should be control + on Windows. For those of you who are interested, 79 00:04:38,050 --> 00:04:42,010 I've included a link to some of the most commonly used the Atom keyboard 80 00:04:42,010 --> 00:04:45,940 shortcuts and includes the commands for both Mac, Windows and Linux, 81 00:04:45,970 --> 00:04:47,740 for users on all three platforms. 82 00:04:47,950 --> 00:04:51,340 So go and have a look over there and start learning and using some of these 83 00:04:51,340 --> 00:04:54,340 shortcuts. And once you've saved your file on Atom 84 00:04:54,400 --> 00:04:56,290 you'll see that little blue dot disappear, 85 00:04:56,590 --> 00:04:59,920 and now you can be rest assured that all your progress has now been safely 86 00:04:59,920 --> 00:05:03,040 saved. Now there's quite a lot of stuff on the screen. 87 00:05:03,310 --> 00:05:08,310 So let's talk about this boilerplate line by line to understand what it all 88 00:05:08,920 --> 00:05:09,753 does. 89 00:05:09,820 --> 00:05:14,590 So the first line here is where we declare the document type. 90 00:05:14,920 --> 00:05:18,580 And this tells the browser when it opens up this file, 91 00:05:18,910 --> 00:05:23,290 what is the version of HTML that we're using. Now in this course, 92 00:05:23,350 --> 00:05:28,060 we're working with the latest version of HTML, which is HTML 5. 93 00:05:28,480 --> 00:05:30,790 Now in previous versions of HTML, 94 00:05:31,150 --> 00:05:35,980 this doc type was incredibly convoluted. And in fact, 95 00:05:36,010 --> 00:05:38,680 it can show you what some of them look like. So we can write 96 00:05:38,710 --> 00:05:42,520 html:4t for example, 97 00:05:42,610 --> 00:05:46,570 and then because we've installed emmet, if I hit tab, you can see 98 00:05:46,690 --> 00:05:51,370 this is what the boilerplate code for a particular HTML 4 version would look 99 00:05:51,370 --> 00:05:55,330 like. And you can see that doc type is a lot longer 100 00:05:55,540 --> 00:05:58,760 and very often programmers won't be able to remember that 101 00:05:58,970 --> 00:06:03,260 so they actually have to look it up somewhere. But since HTML 5, 102 00:06:03,530 --> 00:06:06,530 the doctype declaration became a lot simpler 103 00:06:06,620 --> 00:06:10,190 and now it's just exclamation !DOCTYPE html 104 00:06:10,340 --> 00:06:15,340 and this tells the browser to render this file as an HTML 5 document. 105 00:06:16,100 --> 00:06:20,480 And there's a few differences between how things will appear or how things will 106 00:06:20,480 --> 00:06:22,790 be structured depending on whether 107 00:06:22,790 --> 00:06:26,300 if the doctype was HTML5 or a previous version. 108 00:06:26,690 --> 00:06:28,760 So that's the doc type. 109 00:06:29,300 --> 00:06:33,590 Now we inserted all of this code using auto-complete from Emmet. 110 00:06:33,890 --> 00:06:37,520 And if you want to look at all the other things that you can do with Emmet, 111 00:06:37,790 --> 00:06:42,680 then you can go ahead and have a look at docs.emmet.io/cheat-sheet. 112 00:06:43,040 --> 00:06:46,460 And here you can see what all of those abbreviations look like 113 00:06:46,580 --> 00:06:48,140 and what is the result of it. 114 00:06:48,390 --> 00:06:51,170 As you're developing into a professional web developer, 115 00:06:51,440 --> 00:06:55,640 it's a great resource to have in order to save yourself a lot of time 116 00:06:55,790 --> 00:06:58,220 when you get used to using these common shortcuts. 117 00:06:58,850 --> 00:07:02,240 Now the next line in our code, it's an HTML tag. 118 00:07:02,630 --> 00:07:06,650 And this tells the browser that everything in between the opening and closing 119 00:07:06,650 --> 00:07:11,540 tags is going to be HTML code. And what does that code consist of? 120 00:07:11,570 --> 00:07:15,230 Well, it consists of a head and a body. 121 00:07:15,740 --> 00:07:20,740 Now the head is the part of the HTML file that holds information about the 122 00:07:20,990 --> 00:07:25,460 webpage and it tells the browser how it should handle the page. 123 00:07:25,820 --> 00:07:27,050 So for example, 124 00:07:27,380 --> 00:07:31,010 we might have a title tag in here that tells the browser 125 00:07:31,250 --> 00:07:35,270 what is the title of this particular document or this particular page. 126 00:07:35,600 --> 00:07:38,780 So let's go ahead and give our website a title. 127 00:07:39,200 --> 00:07:41,420 Let's call it whatever your name is. 128 00:07:41,420 --> 00:07:45,470 So mine is Angela. Angela's personal site. 129 00:07:47,390 --> 00:07:50,780 And now if we go ahead and hit save, 130 00:07:50,810 --> 00:07:53,390 we can have a look at it inside our browser. 131 00:07:53,720 --> 00:07:57,320 Now there's a couple of ways how you can open up the website that you are coding 132 00:07:57,320 --> 00:07:59,090 up inside your browser. Now, 133 00:07:59,090 --> 00:08:04,090 one of these ways is simply going into your Finder or your Explorer and finding 134 00:08:04,250 --> 00:08:06,290 that index.html file, 135 00:08:06,380 --> 00:08:11,330 and then double clicking on it and it should bring it up inside Chrome. Now, 136 00:08:11,330 --> 00:08:15,830 the other way of opening up your website is if you right- 137 00:08:15,830 --> 00:08:18,770 click on your file inside Atom 138 00:08:19,310 --> 00:08:22,130 and you go to copy full path, 139 00:08:22,550 --> 00:08:27,550 then it copies the entire directory path to the location of your website. 140 00:08:27,920 --> 00:08:32,360 So if you just go ahead and paste it into the bar here and here with this file 141 00:08:32,360 --> 00:08:32,720 path, 142 00:08:32,720 --> 00:08:37,720 we're telling the browser how to find this file index.html on our computer. 143 00:08:38,630 --> 00:08:42,680 So first we're telling it to go into a folder called users, 144 00:08:43,070 --> 00:08:47,510 then we're telling it to go into a folder called angelayu. Then we're saying 145 00:08:47,510 --> 00:08:52,400 go to desktop. And then inside desktop, we're going to web development. 146 00:08:52,730 --> 00:08:55,770 And finally, we're going to HTML - Personal Site 147 00:08:56,070 --> 00:08:59,580 and that is where we're going to find that index.html site. 148 00:09:00,030 --> 00:09:05,030 Let's go ahead and hit enter on that file path in order to do exactly the same 149 00:09:05,430 --> 00:09:07,560 as double clicking on this file, 150 00:09:07,800 --> 00:09:12,090 which is opening up our website inside Chrome. Now, 151 00:09:12,090 --> 00:09:16,830 if Chrome is not your default browser, then when you see the icon 152 00:09:16,830 --> 00:09:18,960 it's not going to have the Chrome symbol here. 153 00:09:19,410 --> 00:09:22,500 So you can change that by going into your settings, 154 00:09:23,940 --> 00:09:28,140 then scrolling down to default browser in order to change it. 155 00:09:28,440 --> 00:09:30,360 Now at the moment, 156 00:09:30,540 --> 00:09:34,080 our website doesn't contain any content yet, 157 00:09:34,440 --> 00:09:38,100 but it does have a title, which you can see here 158 00:09:38,280 --> 00:09:42,900 and it says Angela's personal site, which is what we created over here. 159 00:09:43,440 --> 00:09:45,690 Now inside the head section, 160 00:09:45,870 --> 00:09:48,780 there's also this meta element. 161 00:09:49,200 --> 00:09:51,690 Now there's quite a few different meta elements, 162 00:09:52,020 --> 00:09:55,740 but this particular one is called character set. 163 00:09:55,950 --> 00:10:00,660 And the one that we're setting it to is UTF-8. Now, 164 00:10:00,660 --> 00:10:02,190 what does this line do? 165 00:10:02,520 --> 00:10:07,520 The meta elements give extra metadata or associated data to your HTML document. 166 00:10:10,320 --> 00:10:13,950 And in this case, we're telling the browser when it opens up this file 167 00:10:14,160 --> 00:10:16,290 that all the text inside 168 00:10:16,380 --> 00:10:21,300 our webpage is encoded using the UTF-8 encoding system. 169 00:10:21,570 --> 00:10:26,010 So this is basically a list of all the available characters that we can use 170 00:10:26,070 --> 00:10:29,850 inside our website for it to be rendered correctly. Now, 171 00:10:29,850 --> 00:10:33,780 sometimes when you open up a webpage, especially in an outdated browser 172 00:10:33,810 --> 00:10:35,280 like internet Explorer, 173 00:10:35,640 --> 00:10:39,330 or an email that you got from a Bulgarian friend, 174 00:10:39,690 --> 00:10:43,590 you might see some of the characters being jumbled up like this, 175 00:10:43,650 --> 00:10:45,780 and this is called Mojibake. 176 00:10:46,350 --> 00:10:51,350 And it's a Japanese word that stands for characters that are transformed. 177 00:10:52,440 --> 00:10:57,440 And it occurs because your browser is trying to render the characters using the 178 00:10:58,200 --> 00:11:00,900 wrong character set. So for example, 179 00:11:00,900 --> 00:11:05,190 if we have a look at this Wikipedia page for Mojibake in Japanese, 180 00:11:05,550 --> 00:11:10,550 you can see that currently my browser is set to render all the webpages as 181 00:11:10,920 --> 00:11:14,550 Unicode, which is very similar to UTF-8. 182 00:11:14,880 --> 00:11:16,920 And you can see that everything looks pretty legit. 183 00:11:16,980 --> 00:11:18,960 It all looks more or less like Japanese. 184 00:11:19,410 --> 00:11:24,410 But if I decide to change the encoding of my browser and for it to interpret all 185 00:11:25,320 --> 00:11:28,350 of the websites as something else say Arabic, 186 00:11:28,650 --> 00:11:32,070 then you can see that all of this webpage is now messed up. 187 00:11:32,370 --> 00:11:34,290 This is not a valid word 188 00:11:34,560 --> 00:11:39,560 and none of this has any meaning because it's encoded the website incorrectly. 189 00:11:40,110 --> 00:11:43,560 So there's quite a few different types of encoding 190 00:11:43,890 --> 00:11:48,030 and they are specialized for different languages because different languages 191 00:11:48,030 --> 00:11:50,310 use different symbols. For example, 192 00:11:50,310 --> 00:11:54,100 if you have a look at the Windows Greek symbol chart, 193 00:11:54,630 --> 00:11:58,560 you can see that the symbol at position 224, 194 00:11:58,620 --> 00:12:02,640 it looks like this, but if you have a look at the chart for Windows Arabic, 195 00:12:02,730 --> 00:12:07,110 then 224 actually encodes a completely different character. 196 00:12:07,620 --> 00:12:12,620 And that's why we get these messed up websites or strange looking emails when 197 00:12:12,810 --> 00:12:15,630 it's interpreted using the wrong encoding. 198 00:12:15,840 --> 00:12:20,840 Now UTF08 is the standard encoding that you should be using when working with 199 00:12:21,120 --> 00:12:22,260 HTML 5. 200 00:12:22,380 --> 00:12:26,130 And the reason for that is because it includes all of those 201 00:12:26,130 --> 00:12:28,860 international symbols. And in fact, 202 00:12:29,010 --> 00:12:33,720 every single symbol that is included in the Unicode character set. 203 00:12:34,050 --> 00:12:36,930 So if you go to unicode-table.com, 204 00:12:37,200 --> 00:12:41,580 then you can see a table of all of the Unicode characters. 205 00:12:42,060 --> 00:12:43,110 And if you scroll down, 206 00:12:43,110 --> 00:12:47,340 it's got this nice little animation that shows you as we change locations going 207 00:12:47,340 --> 00:12:48,173 from Latin, 208 00:12:48,360 --> 00:12:53,360 so most of the English speaking countries, to Greek and Coptic, 209 00:12:53,910 --> 00:12:58,290 and then going to Armenian, Hebrew, Arabic, and all of the different languages. 210 00:12:58,860 --> 00:13:03,270 The other thing about Unicode is that it also includes emojis. 211 00:13:03,630 --> 00:13:06,780 For example, if you have a look at the emoji chart, 212 00:13:06,990 --> 00:13:09,900 let's look for heart symbols for example, 213 00:13:10,500 --> 00:13:15,450 then we've got all of these different emoji characters that we can also use on 214 00:13:15,450 --> 00:13:17,700 our website that's encoded with UTF-8. 215 00:13:17,970 --> 00:13:19,500 So let's go ahead and give that a try. 216 00:13:19,500 --> 00:13:24,500 Let's find a nice looking heart smbol. We can right-click to copy it or hit 217 00:13:25,200 --> 00:13:26,790 command C or control C, 218 00:13:27,390 --> 00:13:32,220 and we can paste it to the front of our website title using control + V or command + V. 219 00:13:32,550 --> 00:13:37,550 And now if I hit save and go back to my website and hit command or control + r to 220 00:13:40,200 --> 00:13:43,140 refresh or click this refresh button here, 221 00:13:43,530 --> 00:13:46,920 then you can see our title is updated with that emoji. 222 00:13:47,070 --> 00:13:51,390 So everything that is Unicode can be encoded correctly using UTF-8 223 00:13:51,630 --> 00:13:55,800 and it's something that you should just have as your boilerplate code for any 224 00:13:55,800 --> 00:13:58,530 new website you create. This gives your website 225 00:13:58,530 --> 00:14:03,270 the maximum chance of being rendered correctly on browsers that are from 226 00:14:03,270 --> 00:14:05,370 international visitors. Now, 227 00:14:05,400 --> 00:14:09,240 if you're interested in doing a bit of background reading and learning more 228 00:14:09,240 --> 00:14:11,100 about Unicode and character sets, 229 00:14:11,400 --> 00:14:15,480 then this is a really good piece that I highly recommend by Joel Spolsky. 230 00:14:15,600 --> 00:14:17,160 It's a roughly 10 minute read, 231 00:14:17,580 --> 00:14:22,440 and it talks a lot about these character sets and how they encode different 232 00:14:22,440 --> 00:14:26,910 symbols and why you should be using something like Unicode or UTF-8 in your 233 00:14:26,910 --> 00:14:30,870 websites in order to ensure maximum compatibility. And so it's a good read, 234 00:14:31,140 --> 00:14:35,460 and I'll include a link to it in the resources for this lesson. Now, 235 00:14:35,460 --> 00:14:39,210 aside from the character set attribute for the meta element, 236 00:14:39,270 --> 00:14:44,010 there's also other attributes that you might see on different websites. 237 00:14:44,040 --> 00:14:48,390 So some of the common ones include the description or things like keywords 238 00:14:48,660 --> 00:14:52,280 about your website, who the author is as well as viewport. 239 00:14:52,760 --> 00:14:57,760 And these meta-tags tell the browser how it should render or display the 240 00:14:58,610 --> 00:14:59,420 webpage. 241 00:14:59,420 --> 00:15:04,420 And also they give information to search engines about the content of the 242 00:15:04,790 --> 00:15:06,800 website. So for example, 243 00:15:06,800 --> 00:15:10,580 if we go to the Mozilla MDN web docs website, 244 00:15:10,610 --> 00:15:13,550 the main page, developer.mozilla.org, 245 00:15:14,000 --> 00:15:18,260 and we right click and we view page source, 246 00:15:18,590 --> 00:15:23,590 then we get to see the entire HTML file that's used to render this particular 247 00:15:24,380 --> 00:15:24,980 page. 248 00:15:24,980 --> 00:15:29,450 So this is what our browser see's and does all the hard work of making it look 249 00:15:29,450 --> 00:15:32,510 nice and pretty like this for us. So here, 250 00:15:32,540 --> 00:15:35,600 if you go ahead and hit command + F or control + F on Windows, 251 00:15:35,840 --> 00:15:39,320 you can search for the description attribute. 252 00:15:40,520 --> 00:15:44,780 Now it's not this first one, but it is this third one 253 00:15:45,020 --> 00:15:46,790 and it's this exact thing. 254 00:15:47,060 --> 00:15:51,440 And the description says the Mozilla developer network MDN provides information 255 00:15:51,440 --> 00:15:55,790 about open web technologies including HTML, CSS and APIs. Now, 256 00:15:55,820 --> 00:15:59,450 if we go into Google and we searched for MDN, 257 00:16:00,110 --> 00:16:05,110 you can see that the snippet of text that it shows about the main MDN website is 258 00:16:08,120 --> 00:16:10,910 exactly the same as what we saw 259 00:16:10,940 --> 00:16:15,940 just here in the description meta-tags and this is what search engines do. 260 00:16:17,720 --> 00:16:20,150 They crawl the HTML of your website 261 00:16:20,540 --> 00:16:25,540 and look for certain meta-tags in order to know what your website is about, 262 00:16:26,630 --> 00:16:30,230 and also how to display it in their search index. 263 00:16:30,410 --> 00:16:33,770 And there's a whole bunch of different attributes for the meta element 264 00:16:34,040 --> 00:16:38,960 and you can have a read about it either on w3schools or what I recommend 265 00:16:38,960 --> 00:16:43,760 usually is the MDN web docs. So if you have a look at meta over here, 266 00:16:44,060 --> 00:16:46,760 then you can learn all about the different attributes, 267 00:16:46,790 --> 00:16:50,420 how to use them and what they're good for. In the next lesson, 268 00:16:50,450 --> 00:16:53,210 we're going to be tapping into our body section 269 00:16:53,300 --> 00:16:57,200 and we're going to be creating the content for this personal site of ours. 270 00:16:57,470 --> 00:17:00,350 So for all of that and more, I'll see you on the next lesson.