1 00:00:02,580 --> 00:00:05,160 So were you successful? 2 00:00:05,160 --> 00:00:07,850 Let's now rebuild this together. 3 00:00:07,850 --> 00:00:11,680 For this, I have a brand new empty folder, 4 00:00:11,680 --> 00:00:14,440 which I opened with visual studio code, 5 00:00:14,440 --> 00:00:16,470 the ID we're using, 6 00:00:16,470 --> 00:00:18,370 and I only have this get ignore file, 7 00:00:18,370 --> 00:00:20,905 which you can ignore, which is just required 8 00:00:20,905 --> 00:00:23,330 for me to have code snapshots, 9 00:00:23,330 --> 00:00:24,985 which you get as part of the course, 10 00:00:24,985 --> 00:00:27,530 but you should have an empty folder. 11 00:00:27,530 --> 00:00:29,570 And in that empty folder, 12 00:00:29,570 --> 00:00:32,470 I will start by dragging in those files, 13 00:00:32,470 --> 00:00:35,170 which you found attached to the last lecture. 14 00:00:35,170 --> 00:00:38,910 That image and that PDF document. 15 00:00:38,910 --> 00:00:43,110 Now with those files added, I then want to 16 00:00:43,110 --> 00:00:46,641 add a new HTML file since we need one 17 00:00:46,641 --> 00:00:49,750 HTML file, at least, for our website. 18 00:00:49,750 --> 00:00:53,070 And I will create a new file there for, 19 00:00:53,070 --> 00:00:55,370 also with this new file button here, 20 00:00:55,370 --> 00:00:59,270 or the shortcut, and I'll name it index HTML. 21 00:00:59,270 --> 00:01:01,890 Now the file name is up to you. 22 00:01:01,890 --> 00:01:03,580 The extension is important. 23 00:01:03,580 --> 00:01:07,240 It should be dot HTML, but the file name 24 00:01:07,240 --> 00:01:11,260 is totally up to you, though index is a 25 00:01:11,260 --> 00:01:14,760 common file name and therefore it's the default 26 00:01:14,760 --> 00:01:18,810 HTML file name with which I always get started. 27 00:01:18,810 --> 00:01:21,370 So I got this index HTML file 28 00:01:21,370 --> 00:01:24,930 and in this index HTML file I now want to 29 00:01:24,930 --> 00:01:28,700 get started with my HTML code. 30 00:01:28,700 --> 00:01:32,534 And here, you'll learn that every HTML document 31 00:01:32,534 --> 00:01:36,120 should have this base skeleton 32 00:01:36,120 --> 00:01:40,571 with a hat and a body section with that annotation 33 00:01:40,571 --> 00:01:43,160 about which version you're using, 34 00:01:43,160 --> 00:01:48,160 and with that wrapping HTML element around head and body. 35 00:01:48,180 --> 00:01:52,450 That's what you learned and saw over the last sections. 36 00:01:52,450 --> 00:01:54,200 And hence, we can create this here. 37 00:01:54,200 --> 00:01:58,530 And we can use a shortcut here in visual studio code. 38 00:01:58,530 --> 00:02:00,630 If I type an exclamation mark, 39 00:02:00,630 --> 00:02:03,310 then I get this auto-completion, 40 00:02:03,310 --> 00:02:05,710 this suggestion window pop-up. 41 00:02:05,710 --> 00:02:08,419 And if I now hit tab or enter, 42 00:02:08,419 --> 00:02:10,430 this gets auto-completed, 43 00:02:10,430 --> 00:02:13,800 and I get this base skeleton. 44 00:02:13,800 --> 00:02:16,500 Now in there, we've got a couple of HTML elements 45 00:02:16,500 --> 00:02:18,920 which we don't understand and need yet. 46 00:02:18,920 --> 00:02:22,580 And hence, I will remove these two lines here 47 00:02:23,560 --> 00:02:27,200 so that I'm only left with this base skeleton. 48 00:02:27,200 --> 00:02:30,190 And with that, we got this core skeleton, 49 00:02:30,190 --> 00:02:32,833 which every HTML document should have. 50 00:02:33,750 --> 00:02:37,330 We're specifying that we use the English language 51 00:02:37,330 --> 00:02:39,880 for our text content here, with this 52 00:02:39,880 --> 00:02:43,300 Lang attribute on the HTML element. 53 00:02:43,300 --> 00:02:45,840 And you did learn about attributes. 54 00:02:45,840 --> 00:02:49,269 It's one of the key HTML features besides 55 00:02:49,269 --> 00:02:52,670 the elements themselves you need to know about. 56 00:02:52,670 --> 00:02:57,670 You can add extra configuration to some HTML elements. 57 00:02:57,770 --> 00:03:00,500 And HTML attributes allow you to 58 00:03:00,500 --> 00:03:03,300 add such extra configuration. 59 00:03:03,300 --> 00:03:06,120 That can be something like the Lang attribute, 60 00:03:06,120 --> 00:03:09,210 which you set here so that the browser understands 61 00:03:09,210 --> 00:03:12,711 which human language you're using for your content. 62 00:03:12,711 --> 00:03:15,570 That can be the destination of a link on an 63 00:03:15,570 --> 00:03:17,980 anchor tag. Something we'll see later 64 00:03:17,980 --> 00:03:20,090 in this course module. 65 00:03:20,090 --> 00:03:23,210 HTML attributes can be used to 66 00:03:23,210 --> 00:03:26,030 change the behavior or make the 67 00:03:26,030 --> 00:03:28,730 annotation more specific. 68 00:03:28,730 --> 00:03:32,313 And we'll see plenty of examples for HTML attributes 69 00:03:32,313 --> 00:03:34,612 throughout this course and throughout 70 00:03:34,612 --> 00:03:37,970 this course section here already. 71 00:03:37,970 --> 00:03:40,110 You always add them on the opening tag 72 00:03:40,110 --> 00:03:43,120 of your HTML elements. 73 00:03:43,120 --> 00:03:46,550 This is not a must have, but it's useful to have. 74 00:03:46,550 --> 00:03:50,440 We're specifying that we're using Unicode characters, 75 00:03:50,440 --> 00:03:52,759 which basically is the default set of characters 76 00:03:52,759 --> 00:03:56,050 we want to support in our page, 77 00:03:56,050 --> 00:03:59,490 so that all the default characters we have on our keyboard, 78 00:03:59,490 --> 00:04:02,905 and also a lot of special characters, including emojis, 79 00:04:02,905 --> 00:04:06,990 for example, can be displayed without issues. 80 00:04:06,990 --> 00:04:11,280 And then we can set a title for this HTML page. 81 00:04:11,280 --> 00:04:14,010 This title is up to you, but I will name this 82 00:04:14,010 --> 00:04:19,010 HTML and CSS Basics Summary here. 83 00:04:19,390 --> 00:04:21,079 That's the title I will choose. 84 00:04:21,079 --> 00:04:24,000 And that's the title which would then show up on 85 00:04:24,000 --> 00:04:29,000 search engines or which shows up in the tabs of our browser. 86 00:04:30,160 --> 00:04:34,760 And with that, we got this base skeleton in place. 87 00:04:34,760 --> 00:04:37,890 Now we can add metadata, like links to 88 00:04:37,890 --> 00:04:42,000 external CSS files here in the head section. 89 00:04:42,000 --> 00:04:45,480 And we can add our core body content, 90 00:04:45,480 --> 00:04:49,763 the visual content, here in the well, body section. 91 00:04:50,770 --> 00:04:54,570 And that's now the last thing I want to do in this lecture. 92 00:04:54,570 --> 00:04:58,590 I want to set my basic content structure 93 00:04:58,590 --> 00:05:02,628 in this body element, and I want to create an 94 00:05:02,628 --> 00:05:06,050 external CSS file already, which will then 95 00:05:06,050 --> 00:05:10,200 later hold all the CSS stylings and that file 96 00:05:10,200 --> 00:05:13,660 should be imported here in the head section. 97 00:05:13,660 --> 00:05:16,680 I also want to import some Google fonts, 98 00:05:16,680 --> 00:05:18,573 though, that is optional. 99 00:05:19,530 --> 00:05:23,370 Now therefore, I'll start with the external CSS file. 100 00:05:23,370 --> 00:05:26,710 And for that I'll create a new file here 101 00:05:26,710 --> 00:05:30,030 in this project folder and I'll name that file 102 00:05:30,030 --> 00:05:35,030 styles dot CSS, though that file name is up to you. 103 00:05:35,040 --> 00:05:40,040 It should end with dot CSS since it will hold CSS code, 104 00:05:40,280 --> 00:05:45,260 but you can name it styles dot CSS, main dot CSS, 105 00:05:45,260 --> 00:05:48,860 whatever dot CSS, that's really up to you. 106 00:05:48,860 --> 00:05:52,310 For the moment, I will not add any styles in here. 107 00:05:52,310 --> 00:05:55,440 That's something we'll come back to in a couple of minutes, 108 00:05:55,440 --> 00:05:59,880 but we can already link this styles file 109 00:05:59,880 --> 00:06:04,090 to our HTML file so that this HTML file 110 00:06:04,090 --> 00:06:06,560 and therefore the browser in the end is 111 00:06:06,560 --> 00:06:09,343 aware of that styles, CSS file. 112 00:06:10,370 --> 00:06:14,810 And for this, we can add this link element here, 113 00:06:14,810 --> 00:06:16,650 which is a wide element, 114 00:06:16,650 --> 00:06:20,410 a self-closing element as it's also called, 115 00:06:20,410 --> 00:06:22,980 which basically means that it has no content, 116 00:06:22,980 --> 00:06:25,543 that it's only configured with attributes. 117 00:06:26,410 --> 00:06:30,480 And here we then can set the REL attribute 118 00:06:30,480 --> 00:06:33,040 to style sheet to tell the browser that 119 00:06:33,040 --> 00:06:35,910 we're linking to a style sheet and then 120 00:06:35,910 --> 00:06:40,226 set the ref attribute to styles dot CSS pointing 121 00:06:40,226 --> 00:06:45,023 at that CSS file we want to connect to this HTML file. 122 00:06:46,140 --> 00:06:47,130 Now, as I mentioned, 123 00:06:47,130 --> 00:06:50,300 I also want to use some Google fonts 124 00:06:50,300 --> 00:06:53,680 and you might not have done this in your solution, 125 00:06:53,680 --> 00:06:55,470 and that's totally fine, 126 00:06:55,470 --> 00:06:58,070 but I want to bring some custom fonts 127 00:06:58,070 --> 00:06:59,950 or some extra fonts. 128 00:06:59,950 --> 00:07:02,500 And hence here on fonts.google.com, 129 00:07:02,500 --> 00:07:05,520 we can choose a font that looks good. 130 00:07:05,520 --> 00:07:08,100 And I liked this Roboto font here, 131 00:07:08,100 --> 00:07:09,820 so I'll select this font. 132 00:07:09,820 --> 00:07:14,820 And there I want to use the regular version here 133 00:07:15,030 --> 00:07:19,320 with a weight of 400, so I'll add this. 134 00:07:19,320 --> 00:07:22,760 And then I also want to use the 900 version, 135 00:07:22,760 --> 00:07:26,013 the black version and select this as well. 136 00:07:27,320 --> 00:07:32,320 And with that, I will now copy that code here, 137 00:07:32,600 --> 00:07:35,650 go back to my HTML document 138 00:07:35,650 --> 00:07:39,550 and then above my style sheet, so that in the 139 00:07:39,550 --> 00:07:41,570 style sheet we have it available, 140 00:07:41,570 --> 00:07:45,263 I'll import that custom font or this extra font 141 00:07:45,263 --> 00:07:49,090 from Google fonts, so I'll paste in that code. 142 00:07:49,090 --> 00:07:51,730 And now I'll use that auto format shortcut 143 00:07:51,730 --> 00:07:54,820 to automatically format and restructure this code 144 00:07:54,820 --> 00:07:56,793 to make it a bit more readable. 145 00:07:57,770 --> 00:08:00,920 Now here, you also see that they offered this 146 00:08:00,920 --> 00:08:04,470 auto format shortcut, added some line breaks here. 147 00:08:04,470 --> 00:08:07,780 It splits this content across multiple lines. 148 00:08:07,780 --> 00:08:11,290 It splits those attributes across multiple lines, 149 00:08:11,290 --> 00:08:14,920 but those line breaks don't hurt HTML. 150 00:08:14,920 --> 00:08:17,460 It works with that as you also see 151 00:08:17,460 --> 00:08:19,220 earlier in the course already. 152 00:08:19,220 --> 00:08:22,890 So having line breaks like this for readability, 153 00:08:22,890 --> 00:08:26,615 just as having indentation for readability, 154 00:08:26,615 --> 00:08:31,170 where we don't write everything directly on the left edge, 155 00:08:31,170 --> 00:08:32,551 but instead we indent, 156 00:08:32,551 --> 00:08:36,049 all of that can be done to make it easier 157 00:08:36,049 --> 00:08:39,970 for us as a developer to improve the code readability 158 00:08:39,970 --> 00:08:42,659 and the browser will simply ignore that. 159 00:08:42,659 --> 00:08:44,500 It will ignore that indentation. 160 00:08:44,500 --> 00:08:46,074 It will ignore those extra line breaks 161 00:08:46,074 --> 00:08:49,790 and therefore, we won't see that on the page, 162 00:08:49,790 --> 00:08:52,690 but it helps us as a developer. 163 00:08:52,690 --> 00:08:55,160 And therefore, we now got those fonts added. 164 00:08:55,160 --> 00:08:57,900 We got the third-party style sheet imported. 165 00:08:57,900 --> 00:09:02,900 Now let's work on the main body structure for our content. 166 00:09:03,490 --> 00:09:07,640 And here you learn that there are various semantic elements 167 00:09:07,640 --> 00:09:12,450 which add extra meaning to the different sections, 168 00:09:12,450 --> 00:09:15,990 the different kinds of content you could have on your page. 169 00:09:15,990 --> 00:09:19,100 Extra meaning that can help the browser present 170 00:09:19,100 --> 00:09:22,850 your content correctly to assistive technologies, 171 00:09:22,850 --> 00:09:24,900 but also to search engines. 172 00:09:24,900 --> 00:09:28,730 And last, but not least, also to you as a developer. 173 00:09:28,730 --> 00:09:32,730 If you structure your content correctly in your HTML files, 174 00:09:32,730 --> 00:09:36,674 it's easier to work on your HTML files and to 175 00:09:36,674 --> 00:09:39,750 maintain them, because it's easier for you to 176 00:09:39,750 --> 00:09:43,640 find that specific content you want to continue working on 177 00:09:43,640 --> 00:09:46,373 if everything is structured correctly. 178 00:09:47,580 --> 00:09:51,190 And therefore here in this body section I, in the end, 179 00:09:51,190 --> 00:09:55,320 want to create three sub-sections, you could say. 180 00:09:55,320 --> 00:09:59,160 Because on the finished page which I want to build, 181 00:09:59,160 --> 00:10:03,810 we will have a header with a title and an image. 182 00:10:03,810 --> 00:10:08,220 We will have a footer at the bottom with a download link 183 00:10:08,220 --> 00:10:11,700 and with that copyright annotation. 184 00:10:11,700 --> 00:10:16,220 And we'll have that main content of our page. 185 00:10:16,220 --> 00:10:18,770 And therefore, here in the body section, 186 00:10:18,770 --> 00:10:23,600 I will add a header element, which will later wrap 187 00:10:23,600 --> 00:10:26,000 this header content. 188 00:10:26,000 --> 00:10:28,090 I will add a footer element, 189 00:10:28,090 --> 00:10:31,140 which will wrap the footer content. 190 00:10:31,140 --> 00:10:34,860 And I also want to mark up my main page content, 191 00:10:34,860 --> 00:10:37,144 which is the most important part of this page, 192 00:10:37,144 --> 00:10:39,310 the heart of this page. 193 00:10:39,310 --> 00:10:43,840 And we can do this with the main HTML element. 194 00:10:43,840 --> 00:10:47,180 Now we'll add the concrete content for those different 195 00:10:47,180 --> 00:10:49,170 sections in the next lectures, 196 00:10:49,170 --> 00:10:53,640 but that is the main structure I want to have in my body. 197 00:10:53,640 --> 00:10:57,740 It's not a structure you need to have on every page. 198 00:10:57,740 --> 00:10:59,920 Some pages don't have a footer, 199 00:10:59,920 --> 00:11:01,960 other pages don't have a header, 200 00:11:01,960 --> 00:11:04,950 yet other pages might have a site bar, 201 00:11:04,950 --> 00:11:08,550 but it is a very common structure, of course. 202 00:11:08,550 --> 00:11:12,170 And therefore let's now populate this structure 203 00:11:12,170 --> 00:11:15,130 with some life, with some content. 204 00:11:15,130 --> 00:11:17,040 And then of course, let's make sure that 205 00:11:17,040 --> 00:11:19,273 we also style that content.