NOTE This file was generated by Descript 1 00:00:00,000 --> 00:00:01,440 Hi guys and welcome back. 2 00:00:01,470 --> 00:00:05,880 In this video, we're going to start transferring our design into HTML. 3 00:00:06,330 --> 00:00:09,570 So we've decided that this is what the microblog is going to look like. 4 00:00:09,570 --> 00:00:11,969 We've taking a look at how that's going to be structured. 5 00:00:12,209 --> 00:00:16,230 So now we can open up a new project using our editor of choice, and 6 00:00:16,230 --> 00:00:17,669 we're going to start writing HTML. 7 00:00:17,730 --> 00:00:18,780 So let's get started. 8 00:00:19,624 --> 00:00:24,994 Here I've opened up Visual Studio Code and I've created a home.html page. 9 00:00:25,057 --> 00:00:28,137 You can also see I've got a .vscode folder that just has some 10 00:00:28,137 --> 00:00:30,987 settings for this workspace, like font sizes and things like that. 11 00:00:31,197 --> 00:00:32,337 So nothing important there. 12 00:00:32,840 --> 00:00:38,470 Just create a home.html file and we're going to get started of writing our HTML. 13 00:00:38,900 --> 00:00:41,910 The first thing we're going to do is to create our boilerplate. 14 00:00:41,930 --> 00:00:45,830 So for that in vscode, just type exclamation mark, and then press tab. 15 00:00:46,040 --> 00:00:47,300 And it's going to write it for you. 16 00:00:47,540 --> 00:00:50,390 You can leave everything as the default and here I'm just 17 00:00:50,390 --> 00:00:51,980 going to write Microblog. 18 00:00:52,390 --> 00:00:55,620 The structure that we've decided contains a header element. 19 00:00:55,860 --> 00:00:57,960 Then we have a main element. 20 00:00:58,440 --> 00:01:00,690 And finally, we have a footer element. 21 00:01:00,900 --> 00:01:03,690 It's a good idea to start just by writing this out. 22 00:01:04,080 --> 00:01:06,750 And then, you know where your stuff is going to go. 23 00:01:07,200 --> 00:01:11,220 In the header, we're going to put all our image and branding and navigation. 24 00:01:11,550 --> 00:01:14,880 In the main, we're going to put our form and our recent posts. 25 00:01:15,150 --> 00:01:18,630 And in the footer, we're going to put some links and page information. 26 00:01:19,152 --> 00:01:23,112 We've decided that in the main element, we're going to have two sections, one 27 00:01:23,112 --> 00:01:25,572 for the form and one for the posts. 28 00:01:25,722 --> 00:01:29,127 So let's create the sections, just like that. 29 00:01:29,157 --> 00:01:30,507 We have our two sections. 30 00:01:30,987 --> 00:01:33,897 If you recall in the previous video, I mentioned that sections usually 31 00:01:33,897 --> 00:01:36,567 have a heading to identify them. 32 00:01:36,807 --> 00:01:39,297 So here we're going to put a heading in each section. 33 00:01:39,297 --> 00:01:42,807 This is not in the design, but we can always make small changes 34 00:01:42,807 --> 00:01:46,167 like this and then go back to the design and make sure that they fit 35 00:01:46,167 --> 00:01:47,934 in the overall look of the page. 36 00:01:47,964 --> 00:01:50,694 So we're going to add new entry in here. 37 00:01:50,964 --> 00:01:53,094 And then in the other section, we're going to also open it 38 00:01:53,094 --> 00:01:55,224 up and create a new H1 there. 39 00:01:55,494 --> 00:01:57,411 That's going to be recent posts. 40 00:01:57,771 --> 00:02:02,331 And finally we can add the actual posts that we would have already written 41 00:02:02,391 --> 00:02:05,762 as users in the recent posts section. 42 00:02:05,912 --> 00:02:10,172 So each post is going to be an article because it is more or less self 43 00:02:10,172 --> 00:02:12,242 contained and it has meaning on its own. 44 00:02:12,242 --> 00:02:16,532 And then inside the article, we're going to have a couple of different parts. 45 00:02:16,821 --> 00:02:21,051 This whole element here, a recent post, is going to be an article. 46 00:02:21,351 --> 00:02:23,451 And you can see that there are two distinct sections. 47 00:02:23,481 --> 00:02:29,211 There is this top section here, which is more or less the header of the article and 48 00:02:29,211 --> 00:02:31,311 then we've got the body of the article. 49 00:02:31,858 --> 00:02:35,284 I'm going to put this bit here, inside a div and then this bit 50 00:02:35,284 --> 00:02:37,294 here is going to be a paragraph. 51 00:02:37,861 --> 00:02:42,261 The title part of the header is going to be an H2 element. 52 00:02:42,691 --> 00:02:46,401 Remember that there's going to be an H1 element in the section so we don't want 53 00:02:46,401 --> 00:02:49,141 to compete with the importance of the H1. 54 00:02:49,494 --> 00:02:53,724 And this gray area here the date is going to be a time element. 55 00:02:53,934 --> 00:02:54,804 So let's get to it. 56 00:02:55,313 --> 00:03:00,253 We're going to have a div that is going to contain the title and the date of posting. 57 00:03:00,403 --> 00:03:03,103 And then we're going to have a paragraph which is going to contain 58 00:03:03,163 --> 00:03:05,483 the text content of the article. 59 00:03:05,523 --> 00:03:08,713 I've pasted them in here just so we can see what that's gonna look like. 60 00:03:08,773 --> 00:03:13,123 And here in the div, I'm going to add the H2 element which is going 61 00:03:13,123 --> 00:03:15,583 to be a bit of a chill day today. 62 00:03:15,683 --> 00:03:17,663 Remember to take your time when you're coding. 63 00:03:17,963 --> 00:03:18,773 There's no rush. 64 00:03:19,553 --> 00:03:24,793 And then here, we're going to have a datetime 24, 10, 2020 or 2019. 65 00:03:24,793 --> 00:03:28,733 Let's say 2019 and it's going to be October 24th. 66 00:03:29,153 --> 00:03:32,443 This could be 2020 now since we are now recording after this date, but 67 00:03:32,473 --> 00:03:34,573 this is how the time element works. 68 00:03:34,573 --> 00:03:36,043 We get the time element. 69 00:03:36,073 --> 00:03:40,853 Inside it, we can put a representation of a date and it has a datetime 70 00:03:40,903 --> 00:03:46,153 attribute that uses this date format to tell a screen reader or any 71 00:03:46,153 --> 00:03:50,233 other piece of software that this is the date that this represents. 72 00:03:50,233 --> 00:03:52,723 So that's 24th of October 2019. 73 00:03:53,274 --> 00:03:55,164 Inside our paragraph we can put anything we want. 74 00:03:55,504 --> 00:03:59,304 Of course, users are going to be writing this in the form at the top of the page. 75 00:03:59,901 --> 00:04:03,561 So for every new post that we create for every new thing that 76 00:04:03,561 --> 00:04:06,771 the user writes in the form, we're going to create a new article. 77 00:04:06,921 --> 00:04:09,771 We're going to keep track of the date and the contents, and we're going 78 00:04:09,771 --> 00:04:13,341 to populate them in a new article that would be underneath this one. 79 00:04:14,013 --> 00:04:16,583 Alright, so this is the complete site structure. 80 00:04:16,613 --> 00:04:18,473 We're obviously missing a few things. 81 00:04:18,623 --> 00:04:22,793 But we have our head that contains the title and some meta information. 82 00:04:23,093 --> 00:04:25,203 We've got our HTML element and our DOCTYPE. 83 00:04:25,493 --> 00:04:28,433 And then in the body, we've got the header, which is empty at the moment. 84 00:04:28,703 --> 00:04:31,553 We've got the main section of content, which is missing the form. 85 00:04:31,913 --> 00:04:34,643 And then we've got the footer that has no content yet. 86 00:04:34,808 --> 00:04:38,318 We have to discuss those things and we're going to do so in the next few videos. 87 00:04:38,838 --> 00:04:40,308 Thank you guys for joining me for this one. 88 00:04:40,338 --> 00:04:41,268 I hope you've enjoyed it. 89 00:04:41,388 --> 00:04:42,738 And I'll see you in the next one.