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