1 00:00:02,140 --> 00:00:04,680 How did it go? Were you successful? 2 00:00:04,680 --> 00:00:07,700 Well, let's have a look at my solution now 3 00:00:07,700 --> 00:00:12,290 and let's create the HTML code of this website together. 4 00:00:12,290 --> 00:00:14,930 A short note before we start though, 5 00:00:14,930 --> 00:00:16,530 in this and the next lectures, 6 00:00:16,530 --> 00:00:20,570 we just repeat already learned concepts. 7 00:00:20,570 --> 00:00:21,900 I will, of course explain 8 00:00:21,900 --> 00:00:24,770 what and why we are doing things in a certain way, 9 00:00:24,770 --> 00:00:28,370 but I'll not dive as deep into all these concepts 10 00:00:28,370 --> 00:00:31,190 as we did it in previous modules. 11 00:00:31,190 --> 00:00:33,760 So these are just repetition lectures, 12 00:00:33,760 --> 00:00:36,080 not really deep dive lectures. 13 00:00:36,080 --> 00:00:39,750 In case any fundamental concepts here are totally unclear, 14 00:00:39,750 --> 00:00:42,240 make sure to go back to earlier modules 15 00:00:42,240 --> 00:00:46,003 to dive deeper here and to revise certain concepts. 16 00:00:46,960 --> 00:00:48,220 With this out of the way, 17 00:00:48,220 --> 00:00:50,830 let's get started with the most important file. 18 00:00:50,830 --> 00:00:55,830 And this is our index HTML file, which we'll add right here. 19 00:00:56,010 --> 00:00:58,983 And we'll again, use our convenience feature, 20 00:00:58,983 --> 00:01:01,950 in VS code, by adding the exclamation mark 21 00:01:01,950 --> 00:01:06,063 and pressing the tab key to get the HTML skeleton. 22 00:01:07,090 --> 00:01:11,960 You know the majority of these elements in here, 23 00:01:11,960 --> 00:01:16,960 what we deleted so far in this course was the metadata. 24 00:01:17,060 --> 00:01:19,780 We will keep these now in this module 25 00:01:19,780 --> 00:01:22,650 as these will become important a bit later. 26 00:01:22,650 --> 00:01:25,070 But for the moment, we'll just keep the elements 27 00:01:25,070 --> 00:01:28,130 without diving deeper into these. 28 00:01:28,130 --> 00:01:32,180 Let's also add a title here for our website, 29 00:01:32,180 --> 00:01:36,280 which could be web food right here. 30 00:01:36,280 --> 00:01:39,850 And now let's directly dive into the body. 31 00:01:39,850 --> 00:01:40,890 If you remember back, 32 00:01:40,890 --> 00:01:44,170 the logic we had in the previous lecture, 33 00:01:44,170 --> 00:01:49,100 then you know that we need two main elements on our website. 34 00:01:49,100 --> 00:01:54,060 We need the header section right here and below our header, 35 00:01:54,060 --> 00:01:56,860 we had our main section. 36 00:01:56,860 --> 00:02:01,760 Inside our header we had two separate parts. 37 00:02:01,760 --> 00:02:04,480 One part was the page logo. 38 00:02:04,480 --> 00:02:07,720 And as I said, the logo could again be a link 39 00:02:07,720 --> 00:02:12,540 which redirects us to this landing page if we click onto it. 40 00:02:12,540 --> 00:02:16,300 To create the link we use our anchor tag, 41 00:02:16,300 --> 00:02:18,220 again, with the auto-completion. 42 00:02:18,220 --> 00:02:23,010 And this reference should lead us to the index HTML file 43 00:02:23,010 --> 00:02:24,283 if we click onto it. 44 00:02:25,680 --> 00:02:28,220 The content off the anchor tag itself 45 00:02:28,220 --> 00:02:33,220 should just be the name of our website, which is web food. 46 00:02:33,270 --> 00:02:36,710 And I think we could write it with a capital F here. 47 00:02:36,710 --> 00:02:38,010 I think this looks better. 48 00:02:39,090 --> 00:02:43,560 Besides this, we have our navigation items. 49 00:02:43,560 --> 00:02:47,140 For navigation items we have a dedicated element, 50 00:02:47,140 --> 00:02:49,240 and this is the nav element. 51 00:02:49,240 --> 00:02:54,120 And inside our nav, we have two elements 52 00:02:54,120 --> 00:02:58,620 which could redirect us to different pages of our website. 53 00:02:58,620 --> 00:03:01,900 Typically when creating such a navigation bar, 54 00:03:01,900 --> 00:03:03,850 we use a list therefore. 55 00:03:03,850 --> 00:03:06,880 Because again, we have related content links 56 00:03:06,880 --> 00:03:09,580 redirecting us to different parts of the website. 57 00:03:09,580 --> 00:03:13,700 Therefore, a list is definitely not a wrong choice here. 58 00:03:13,700 --> 00:03:15,620 The order doesn't matter. 59 00:03:15,620 --> 00:03:17,720 Therefore we go for an unordered list 60 00:03:17,720 --> 00:03:21,320 which holds, well, two list items. 61 00:03:21,320 --> 00:03:24,733 First one, and the second one. 62 00:03:26,110 --> 00:03:30,810 Our list items will be links to other pages, as I mentioned. 63 00:03:30,810 --> 00:03:34,350 And for links, we again use the anchor tag. 64 00:03:34,350 --> 00:03:35,833 Therefore we'll add an A. 65 00:03:37,130 --> 00:03:40,560 We'll keep the reference empty here for the moment 66 00:03:40,560 --> 00:03:43,910 as we don't create separate HTML pages here 67 00:03:43,910 --> 00:03:48,160 for this project and simply give it a name, therefore, 68 00:03:48,160 --> 00:03:53,160 which could be browse meals for this first anchor tag. 69 00:03:55,700 --> 00:04:00,700 And we then select it and copy it into the second list item 70 00:04:01,940 --> 00:04:06,940 and rename it to my orders, for example. 71 00:04:07,610 --> 00:04:10,480 As I said, these are just dummy links in the end. 72 00:04:10,480 --> 00:04:13,663 It's more about the responsive design in this module. 73 00:04:14,950 --> 00:04:17,160 The header looks good already. 74 00:04:17,160 --> 00:04:19,740 We could add some attributes still, 75 00:04:19,740 --> 00:04:22,360 as you also learned it throughout this course. 76 00:04:22,360 --> 00:04:25,330 For example, here to our header element 77 00:04:25,330 --> 00:04:30,330 we could add an ID and we could call this main header. 78 00:04:30,470 --> 00:04:33,160 I'm doing this already because later 79 00:04:33,160 --> 00:04:37,340 when we add the mobile design, we might have another header. 80 00:04:37,340 --> 00:04:39,440 So little spoiler here, therefore, 81 00:04:39,440 --> 00:04:43,850 we should be very explicit about this default header we have 82 00:04:43,850 --> 00:04:46,160 when creating it right here. 83 00:04:46,160 --> 00:04:47,810 It's not a must to do it like this, 84 00:04:47,810 --> 00:04:50,230 but it definitely doesn't hurt. 85 00:04:50,230 --> 00:04:54,390 And the same thing is true for our anchor tag right here 86 00:04:54,390 --> 00:04:56,670 with the website logo. 87 00:04:56,670 --> 00:04:58,860 Here, we could also make it clear 88 00:04:58,860 --> 00:05:02,090 by adding an id stating that this is what, 89 00:05:02,090 --> 00:05:04,993 well, our logo like this. 90 00:05:06,630 --> 00:05:08,670 So this is the header. 91 00:05:08,670 --> 00:05:12,203 This means we can now go down to our main element. 92 00:05:13,630 --> 00:05:17,120 And in here, things are quite straightforward. 93 00:05:17,120 --> 00:05:20,920 We'll first add an h1 element with our main header 94 00:05:20,920 --> 00:05:22,420 of this website. 95 00:05:22,420 --> 00:05:24,830 And here we'll just use the text, 96 00:05:24,830 --> 00:05:29,830 browse our delicious meals. 97 00:05:32,590 --> 00:05:36,390 And besides this, we now have to create the logic 98 00:05:36,390 --> 00:05:40,220 for our two cards holding the actual meals. 99 00:05:40,220 --> 00:05:44,040 As I said, these cards now hold the core content 100 00:05:44,040 --> 00:05:48,140 of this website inside our main element. 101 00:05:48,140 --> 00:05:52,230 Therefore, what we could add here is a section element 102 00:05:52,230 --> 00:05:55,340 because in the section we now have this main content, 103 00:05:55,340 --> 00:05:57,623 this core content of this website. 104 00:05:58,470 --> 00:06:01,530 And inside the section, we have these two cards, 105 00:06:01,530 --> 00:06:03,990 which are again related content, 106 00:06:03,990 --> 00:06:07,010 therefore, same logic as the navigation bar. 107 00:06:07,010 --> 00:06:11,650 We use an unordered list, which then holds two list items. 108 00:06:11,650 --> 00:06:16,650 So item one and item two, both will be these separate cards. 109 00:06:18,390 --> 00:06:21,250 Now what does such a card look like? 110 00:06:21,250 --> 00:06:25,830 Well, the card contains an image and the meal description 111 00:06:25,830 --> 00:06:28,370 and this button, we could add it to the cart. 112 00:06:28,370 --> 00:06:30,620 Although the logic for this will not be implemented 113 00:06:30,620 --> 00:06:31,633 in this module. 114 00:06:32,480 --> 00:06:35,680 Now to be even more precise from a structural, 115 00:06:35,680 --> 00:06:37,710 from a semantical perspective, 116 00:06:37,710 --> 00:06:40,830 we could also add another element right here. 117 00:06:40,830 --> 00:06:43,850 This element is the article element 118 00:06:43,850 --> 00:06:46,060 also used throughout this course already. 119 00:06:46,060 --> 00:06:48,740 And the article then, well basically is 120 00:06:48,740 --> 00:06:51,150 the individual content that we have 121 00:06:51,150 --> 00:06:54,090 inside the individual cards. 122 00:06:54,090 --> 00:06:55,660 What is the content? 123 00:06:55,660 --> 00:06:58,070 Well the content first is an image. 124 00:06:58,070 --> 00:07:00,500 And what is missing here is the image of course. 125 00:07:00,500 --> 00:07:03,140 We'll add the images in a few seconds. 126 00:07:03,140 --> 00:07:06,880 And besides this, we have an h2 element 127 00:07:06,880 --> 00:07:08,650 with the description of the meal. 128 00:07:08,650 --> 00:07:13,650 Here we have risotto with tiger prawns. 129 00:07:17,370 --> 00:07:22,370 And in addition to that, we have this button, 130 00:07:22,470 --> 00:07:23,893 the add to cart button, 131 00:07:24,874 --> 00:07:26,710 which will be created with an anchor tag. 132 00:07:26,710 --> 00:07:29,850 You learned more about this in the forms module already. 133 00:07:29,850 --> 00:07:32,830 Therefore, I won't dive too deep in here, 134 00:07:32,830 --> 00:07:36,070 but also leave the reference empty for the moment 135 00:07:36,070 --> 00:07:39,050 and just add the class of button to it. 136 00:07:39,050 --> 00:07:43,890 And of course, add to cart as content. 137 00:07:43,890 --> 00:07:47,230 As we have two different types of content here, 138 00:07:47,230 --> 00:07:50,100 the image and then the description and the button. 139 00:07:50,100 --> 00:07:53,940 It also won't hurt if we use another div here maybe 140 00:07:53,940 --> 00:07:58,640 to wrap the h2 element and the anchor tag into this div, 141 00:07:58,640 --> 00:08:01,900 which will make the styling for us a bit easier. 142 00:08:01,900 --> 00:08:04,610 So let's take these two elements now 143 00:08:04,610 --> 00:08:08,880 and paste these into the div, 144 00:08:08,880 --> 00:08:12,963 and let's maybe format this quickly like this. 145 00:08:14,530 --> 00:08:16,750 And with that, we have the structure 146 00:08:16,750 --> 00:08:19,953 of the first list item completed. 147 00:08:20,850 --> 00:08:24,290 Again, we could add some attributes here 148 00:08:24,290 --> 00:08:27,720 to be really explicit about what the individual section 149 00:08:27,720 --> 00:08:30,620 and the individual list items contain. 150 00:08:30,620 --> 00:08:35,600 So for example, here, for our section, we could use an ID 151 00:08:37,240 --> 00:08:40,929 with the name of maybe latest products. 152 00:08:40,929 --> 00:08:43,990 So let's say we could have more products on our website 153 00:08:43,990 --> 00:08:45,310 and here on the landing page, 154 00:08:45,310 --> 00:08:47,970 we only feature these latest products. 155 00:08:47,970 --> 00:08:52,150 And also for the list items, we could add a class, 156 00:08:52,150 --> 00:08:57,150 maybe of food item, of food item here. 157 00:08:59,710 --> 00:09:01,530 With that, we have a differentiation 158 00:09:01,530 --> 00:09:03,890 three list items up here, up here, 159 00:09:03,890 --> 00:09:06,010 which don't have any attributes here. 160 00:09:06,010 --> 00:09:07,750 We are explicit about that. 161 00:09:07,750 --> 00:09:11,700 We here, we cannot individually style our list items, 162 00:09:11,700 --> 00:09:14,663 which contain the food items here. 163 00:09:15,820 --> 00:09:17,900 To be in line with this logic, 164 00:09:17,900 --> 00:09:21,610 we can also add an attribute, a class attribute 165 00:09:21,610 --> 00:09:24,980 to our div because the div then holds 166 00:09:24,980 --> 00:09:29,980 the actual food item content, for example. 167 00:09:30,520 --> 00:09:33,920 So this brings a lot of structure into our main element. 168 00:09:33,920 --> 00:09:35,880 We have this main element in here, 169 00:09:35,880 --> 00:09:37,740 which holds the h1 element. 170 00:09:37,740 --> 00:09:40,810 Then a section which contains the latest products 171 00:09:40,810 --> 00:09:43,560 on our website with an unordered list. 172 00:09:43,560 --> 00:09:44,920 Which then holds what? 173 00:09:44,920 --> 00:09:46,990 Well, our food items. 174 00:09:46,990 --> 00:09:49,470 So each list item is a food item, 175 00:09:49,470 --> 00:09:53,390 and the food item itself contains an article 176 00:09:53,390 --> 00:09:58,180 which holds the image of the meal and the div 177 00:09:58,180 --> 00:10:00,423 with the actual food item content 178 00:10:00,423 --> 00:10:03,233 with the description of the meal in the end. 179 00:10:05,750 --> 00:10:10,353 This means we now only have to take the article in here, 180 00:10:14,100 --> 00:10:18,260 copy it and add it to the second list item. 181 00:10:18,260 --> 00:10:23,260 And also copy the class up here from the list element 182 00:10:24,000 --> 00:10:25,253 and edit down there. 183 00:10:26,900 --> 00:10:28,990 And now rename, by the way, this is wrong, 184 00:10:28,990 --> 00:10:33,420 it should be risotto, not risto, now it's correct. 185 00:10:33,420 --> 00:10:37,450 And rename our second meal's h2 element 186 00:10:37,450 --> 00:10:41,503 to cheeseburgers here. 187 00:10:42,890 --> 00:10:46,250 And with this, our HTML code looks all right. 188 00:10:46,250 --> 00:10:50,650 Actually, what is missing though, are our images. 189 00:10:50,650 --> 00:10:54,090 You can find the images attached to this lecture. 190 00:10:54,090 --> 00:10:57,793 So as always, download these images and unzip it, 191 00:10:59,200 --> 00:11:01,010 and then you should see this risotto, 192 00:11:01,010 --> 00:11:03,200 then this cheeseburgers image. 193 00:11:03,200 --> 00:11:07,740 And we could now create a new folder named images, 194 00:11:07,740 --> 00:11:12,010 and then we take the first image and drag it into the folder 195 00:11:12,010 --> 00:11:16,200 and do the same thing with the cheeseburgers here. 196 00:11:16,200 --> 00:11:18,363 So we should have these two images now. 197 00:11:19,670 --> 00:11:23,540 With this, we can go back to our HTML code 198 00:11:23,540 --> 00:11:27,780 and now add the link to the risotto, images folder 199 00:11:27,780 --> 00:11:32,780 and here select the risotto JPEG, and also add the alt text, 200 00:11:34,220 --> 00:11:39,220 which could be delicious risotto with tiger prawns. 201 00:11:44,700 --> 00:11:48,710 And then go down to the second list item here 202 00:11:48,710 --> 00:11:53,190 to our image element and refer to images 203 00:11:53,190 --> 00:11:56,003 and here select the cheeseburgers JPEG, 204 00:11:56,880 --> 00:12:01,880 and also add an alt text, classic cheeseburgers with fries. 205 00:12:09,200 --> 00:12:10,033 Okay. 206 00:12:12,390 --> 00:12:14,830 So let's now see what this looks like. 207 00:12:14,830 --> 00:12:18,443 So we'll again, start our live server extension here. 208 00:12:20,530 --> 00:12:24,810 And if we check the page now, yeah, it doesn't look good, 209 00:12:24,810 --> 00:12:28,650 but from a structural perspective, I think it's all right. 210 00:12:28,650 --> 00:12:33,250 We have the logo on style, we have our nav elements, 211 00:12:33,250 --> 00:12:36,963 the h1 element, an image and the content 212 00:12:36,963 --> 00:12:39,360 of this food item, 213 00:12:39,360 --> 00:12:42,253 and the same thing for the second card element. 214 00:12:43,250 --> 00:12:44,360 So this looks nice. 215 00:12:44,360 --> 00:12:47,900 This means the HTML part is finished already. 216 00:12:47,900 --> 00:12:50,320 At least at this stage of the course, 217 00:12:50,320 --> 00:12:52,300 therefore in the next lecture, 218 00:12:52,300 --> 00:12:55,333 we'll now add some styling to this website.