1 00:00:01,884 --> 00:00:04,671 line:15% Welcome to the next lecture. 2 00:00:04,671 --> 00:00:07,689 line:15% After building the header in the last lecture, 3 00:00:07,689 --> 00:00:11,272 line:15% let's build the features section right now. 4 00:00:12,403 --> 00:00:14,447 So this is the nice, clean features section 5 00:00:14,447 --> 00:00:17,030 we'll build based on my sketch. 6 00:00:17,952 --> 00:00:22,109 Just a nice heading, some text, and then features 7 00:00:22,109 --> 00:00:24,362 explained in four columns. 8 00:00:24,362 --> 00:00:27,195 This should not be so hard, right? 9 00:00:28,703 --> 00:00:32,257 So in this lecture, we'll learn some new things. 10 00:00:32,257 --> 00:00:35,367 We'll learn how to put content on a website directly 11 00:00:35,367 --> 00:00:38,450 from CSS with the after pseudo-class. 12 00:00:40,082 --> 00:00:42,682 We'll use the fluid grid for the first time 13 00:00:42,682 --> 00:00:46,265 in order to build the four features column. 14 00:00:47,140 --> 00:00:51,307 And we'll also use beautiful icons in those columns as well. 15 00:00:52,272 --> 00:00:53,355 So, let's go. 16 00:00:55,477 --> 00:00:59,772 So this is where we left our project after the last lecture. 17 00:00:59,772 --> 00:01:02,419 The header is all built, now it's time 18 00:01:02,419 --> 00:01:05,392 to start adding the first section. 19 00:01:05,392 --> 00:01:09,268 And in HTML, we actually have an element for that, 20 00:01:09,268 --> 00:01:11,268 which is called Section. 21 00:01:12,822 --> 00:01:15,701 In this is just like the header, it's a container 22 00:01:15,701 --> 00:01:18,868 so that we can tell this is a section. 23 00:01:22,993 --> 00:01:26,076 So I will call this section Features. 24 00:01:29,911 --> 00:01:34,078 line:15% And now, let's start with the title, and with the paragraph. 25 00:01:35,530 --> 00:01:37,530 line:15% We'll put that in a row. 26 00:01:39,269 --> 00:01:43,436 line:15% So, class, row, because of course, we want this centered. 27 00:01:46,537 --> 00:01:49,989 line:15% And now, let's put a heading here. 28 00:01:49,989 --> 00:01:54,882 line:15% Now each web page should only have one H1 element, 29 00:01:54,882 --> 00:01:56,808 line:15% which means only one main heading. 30 00:01:56,808 --> 00:01:59,131 line:15% We already used that main heading here, 31 00:01:59,131 --> 00:02:03,298 line:15% so for now in each of the sections, we will put an H2 title. 32 00:02:06,677 --> 00:02:10,677 line:15% Let's see what content we have for this section, 33 00:02:12,389 --> 00:02:13,639 and here it is. 34 00:02:14,571 --> 00:02:18,738 I will copy all of it, actually, and put it down here 35 00:02:22,374 --> 00:02:24,707 line:15% such as I did the last time. 36 00:02:26,229 --> 00:02:30,245 Now, I already showed you how to make comments in CSS, 37 00:02:30,245 --> 00:02:33,543 now I will tell you the same thing for HTML, 38 00:02:33,543 --> 00:02:35,958 and it's very easy. 39 00:02:35,958 --> 00:02:40,125 Just like this: you see everything turned grey here? 40 00:02:41,800 --> 00:02:44,665 Now to close it, it's just like this. 41 00:02:44,665 --> 00:02:48,832 And now it is a comment, and it will not appear anywhere. 42 00:02:50,201 --> 00:02:54,232 I can just leave it here until we use all of this text. 43 00:02:54,232 --> 00:02:56,732 So the title here is this one. 44 00:02:59,503 --> 00:03:02,253 line:15% It is-- where-- right here, okay. 45 00:03:04,356 --> 00:03:06,939 line:15% "Get Food Fast, Not Fast Food." 46 00:03:07,885 --> 00:03:11,802 line:15% Instead of this, I actually want an larger dash 47 00:03:14,201 --> 00:03:19,031 line:15% that's called an M dash, and in HTML, we have a thing 48 00:03:19,031 --> 00:03:23,198 line:15% called HTML special characters, or special entities, 49 00:03:25,114 --> 00:03:28,947 line:15% and to write those we start with an ampersand, 50 00:03:30,873 --> 00:03:34,542 line:15% and in this case, I already know how it's called, 51 00:03:34,542 --> 00:03:35,542 line:15% it's M dash. 52 00:03:39,069 --> 00:03:43,236 line:15% So instead of writing that dash, I write this HTML code. 53 00:03:44,627 --> 00:03:48,794 line:15% And you can find lots of tables on the internet about this, 54 00:03:50,447 --> 00:03:54,650 line:15% and I will also include a link in the course e-book 55 00:03:54,650 --> 00:03:58,319 line:15% where you can find lots of HTML entities. 56 00:03:58,319 --> 00:04:00,432 line:15% Alright, this is for the heading, 57 00:04:00,432 --> 00:04:04,599 line:15% and now let's add the text as well in form of a paragraph. 58 00:04:08,559 --> 00:04:12,158 line:15% And of course we need a class name here, 59 00:04:12,158 --> 00:04:16,325 line:15% and I will call this Long Copy because it's a long paragraph 60 00:04:18,032 --> 00:04:22,770 line:15% with lots of text, and copy stands for copyright, 61 00:04:22,770 --> 00:04:25,770 line:15% which is like the text for websites. 62 00:04:29,921 --> 00:04:34,496 line:15% So in this paragraph, we'll put this text here. 63 00:04:34,496 --> 00:04:38,663 line:15% We'll actually delete all the text we already used. 64 00:04:40,138 --> 00:04:42,471 line:15% So put this text right here. 65 00:04:47,197 --> 00:04:51,364 line:15% As we did with the header, I will start by building the HTML 66 00:04:52,468 --> 00:04:56,635 line:15% and the CSS will be then used to format all of this. 67 00:05:01,523 --> 00:05:05,356 line:15% And now let's start using the grid like a pro. 68 00:05:06,469 --> 00:05:10,636 line:15% And in order to do that, we have to start a new row. 69 00:05:12,368 --> 00:05:16,035 line:15% Just close this, and now inside of this row, 70 00:05:18,091 --> 00:05:20,591 line:15% we make a dif for each column. 71 00:05:21,774 --> 00:05:23,191 line:15% Dif. Class again. 72 00:05:25,932 --> 00:05:30,181 line:15% Now each column needs to call class, and this comes here 73 00:05:30,181 --> 00:05:34,639 line:15% from the grid CSS file, so we don't have to worry about it, 74 00:05:34,639 --> 00:05:36,972 line:15% we just use this call class. 75 00:05:40,514 --> 00:05:44,681 line:15% So each class-- sorry, so each column needs a call class. 76 00:05:46,922 --> 00:05:51,089 Now we have four columns so each of those four columns 77 00:05:53,926 --> 00:05:57,176 will have this class, span one of four. 78 00:06:01,504 --> 00:06:05,336 And again, we can check this here in the grid file 79 00:06:05,336 --> 00:06:08,284 with a three, and grid of four. 80 00:06:08,284 --> 00:06:10,514 So each of our four columns will have 81 00:06:10,514 --> 00:06:12,514 a width of 23.8 percent. 82 00:06:18,014 --> 00:06:22,181 line:15% Alright, back here, so let's put some more text here. 83 00:06:23,303 --> 00:06:27,136 line:15% I think that these things here are like titles 84 00:06:28,532 --> 00:06:32,527 line:15% of each of the features, so let's make 85 00:06:32,527 --> 00:06:35,754 line:15% another heading element with these. 86 00:06:35,754 --> 00:06:39,837 line:15% We already used H1, H2, and now it's time for H3. 87 00:06:43,602 --> 00:06:46,685 line:15% Alright, and now the text below this, 88 00:06:48,734 --> 00:06:50,817 line:15% and again in a paragraph. 89 00:06:52,890 --> 00:06:55,700 line:15% I'm not going to worry about icons for now, 90 00:06:55,700 --> 00:06:59,438 the icons will also go inside of this column. 91 00:06:59,438 --> 00:07:03,223 But I will just leave this for the end, 92 00:07:03,223 --> 00:07:06,806 because we so far have not talked about it. 93 00:07:10,421 --> 00:07:13,754 So now I will just copy this three times 94 00:07:20,568 --> 00:07:23,318 and then fill this with our text. 95 00:07:31,749 --> 00:07:34,166 It's kind of boring, I guess. 96 00:07:41,838 --> 00:07:46,714 line:15% Now you will see that part of your work will always be 97 00:07:46,714 --> 00:07:50,881 line:15% copy and paste, and you will probably get used to it. 98 00:07:55,747 --> 00:07:58,247 line:15% And the last thing right here. 99 00:08:06,568 --> 00:08:08,077 line:15% Okay, that's it with text. 100 00:08:08,077 --> 00:08:11,577 line:15% So we already used all the text from here. 101 00:08:13,928 --> 00:08:16,389 I will save this, and now let's see 102 00:08:16,389 --> 00:08:19,139 how it looks like in the browser. 103 00:08:20,360 --> 00:08:24,027 line:15% It's down here, alright, not so cool, right? 104 00:08:25,097 --> 00:08:28,046 line:15% What's missing here? Our icons. 105 00:08:28,046 --> 00:08:32,550 line:15% So let's fix that, and we will use a beautiful 106 00:08:32,550 --> 00:08:35,800 line:15% icon font called ion icons, here it is. 107 00:08:38,518 --> 00:08:39,888 So ion icons. 108 00:08:39,888 --> 00:08:44,055 Don't worry, this link is once again in the course e-book. 109 00:08:46,529 --> 00:08:50,696 And we will start by downloading it to our computer. 110 00:08:52,310 --> 00:08:56,060 So this takes some time, and here we have it. 111 00:08:57,674 --> 00:09:01,507 Right inside our folder, and that's extracted. 112 00:09:06,429 --> 00:09:07,774 And what do we have here? 113 00:09:07,774 --> 00:09:10,491 We have a bunch of files, 114 00:09:10,491 --> 00:09:13,574 but we actually only need two things. 115 00:09:15,507 --> 00:09:19,340 We need these CSS files, and these font files. 116 00:09:26,467 --> 00:09:30,384 We actually need this, ion icons mini file CSS. 117 00:09:31,621 --> 00:09:35,788 We will paste this inside our vendors folder, CSS, 118 00:09:37,937 --> 00:09:40,329 because you already know, it's a file that we got 119 00:09:40,329 --> 00:09:43,496 from the internet, and then the fonts, 120 00:09:47,945 --> 00:09:49,873 because it's an icon font. 121 00:09:49,873 --> 00:09:53,494 This also comes with the icons in form of images, 122 00:09:53,494 --> 00:09:55,327 but we want the fonts. 123 00:09:57,929 --> 00:10:01,679 So let's copy this entire folder and there's, 124 00:10:03,154 --> 00:10:06,312 okay there already was a folder here, 125 00:10:06,312 --> 00:10:10,479 so I will replace this, and this is our icon font here. 126 00:10:13,068 --> 00:10:15,577 And now, how do we use this? 127 00:10:15,577 --> 00:10:19,744 I actually shouldn't have closed that... ion icons. 128 00:10:23,634 --> 00:10:27,551 Because this is where we will choose our icons. 129 00:10:28,766 --> 00:10:32,933 Alright, but first, I will show you how we use it. 130 00:10:35,128 --> 00:10:39,295 So we want them right here, even before the heading. 131 00:10:44,021 --> 00:10:48,188 So we just write E class and then the name of an icon. 132 00:10:58,975 --> 00:11:02,725 For instance, imagine that we want this heart 133 00:11:04,502 --> 00:11:08,669 We just need to copy the name of this class, paste it here, 134 00:11:11,212 --> 00:11:13,998 and then we'll have a nice little heart. 135 00:11:13,998 --> 00:11:14,998 line:15% Want to see? 136 00:11:18,033 --> 00:11:21,615 line:15% Well of course not, because we didn't include 137 00:11:21,615 --> 00:11:23,032 the CSS file yet. 138 00:11:24,145 --> 00:11:28,312 So let's do that, I'll hit command D to duplicate this, 139 00:11:30,485 --> 00:11:33,818 and alright, here it is, ion icons, CSS, 140 00:11:38,263 --> 00:11:40,013 but now it will work. 141 00:11:42,141 --> 00:11:44,974 line:15% And here it is, here is our heart. 142 00:11:45,879 --> 00:11:50,046 line:15% It's not where I wanted it, let me go back, of course not. 143 00:11:54,378 --> 00:11:57,907 line:15% I don't want it in this place, I want it here 144 00:11:57,907 --> 00:12:01,657 line:15% right before the H3, so let me paste it here, 145 00:12:04,107 --> 00:12:07,107 line:15% and now I have this icon right here. 146 00:12:09,911 --> 00:12:12,304 line:15% So, but that's not the icon that I want 147 00:12:12,304 --> 00:12:16,205 line:15% for this feature here, so let's choose just another one. 148 00:12:16,205 --> 00:12:18,622 line:15% So "up to 365 days per year," 149 00:12:21,318 --> 00:12:25,068 well which of these could look good for that? 150 00:12:28,674 --> 00:12:31,174 These are a lot, really a lot. 151 00:12:35,942 --> 00:12:40,109 You will need some time to go through all of them. 152 00:12:43,069 --> 00:12:46,809 And I choose to go with these icons here, 153 00:12:46,809 --> 00:12:50,976 these are IOS inspired, which you can see from the name, 154 00:12:52,359 --> 00:12:55,276 and I really like those line icons, 155 00:12:57,049 --> 00:13:00,973 so I will choose all icons of this class, 156 00:13:00,973 --> 00:13:03,829 so that we have some consistency here. 157 00:13:03,829 --> 00:13:07,996 And this looks great for the first feature, I think, 158 00:13:10,864 --> 00:13:13,744 line:15% because it's the infinity symbol, 159 00:13:13,744 --> 00:13:17,494 line:15% and 365 days per year is kind of an infinity. 160 00:13:22,056 --> 00:13:25,473 line:15% So the next one is "ready in 20 minutes." 161 00:13:26,654 --> 00:13:30,154 line:15% And we could use kind of a watch for that. 162 00:13:32,297 --> 00:13:33,880 Like this one here. 163 00:13:34,898 --> 00:13:38,148 line:15% So, copy it, paste it here, so I class. 164 00:13:47,018 --> 00:13:48,601 line:15% Paste and close it. 165 00:13:50,083 --> 00:13:53,500 line:15% And the next one is "100 % organic," 166 00:13:54,844 --> 00:13:57,932 line:15% so let me see what we have for that. 167 00:13:57,932 --> 00:14:00,161 line:15% First let's check if they're showing up here. 168 00:14:00,161 --> 00:14:01,911 line:15% Okay, they are, cool. 169 00:14:03,133 --> 00:14:07,300 line:15% Now let me choose another one for the 100 % organic, 170 00:14:08,450 --> 00:14:11,700 line:15% I'm going with this little carrot here, 171 00:14:13,930 --> 00:14:17,680 line:15% so let me just write it here, I class, and... 172 00:14:23,752 --> 00:14:27,919 line:15% Last, but not least, we have the "order anything" feature, 173 00:14:31,275 --> 00:14:34,525 line:15% and that could be like a shopping cart, 174 00:14:35,920 --> 00:14:38,544 let's see if we find one. 175 00:14:38,544 --> 00:14:40,794 Here we go, copy and paste. 176 00:14:48,249 --> 00:14:50,666 line:15% Alright, so this is our HTML. 177 00:14:51,849 --> 00:14:54,983 line:15% In the next lecture, we will format this 178 00:14:54,983 --> 00:14:58,095 line:15% so that it looks professionally designed, 179 00:14:58,095 --> 00:15:02,095 line:15% so don't wait, come with me to the next lecture.