Voiceover: Welcome to the next lecture. 2 2
After building the header in the last lecture, 3 3
let's build the features section right now. 4 4
So this is the nice, clean features section 5 5
we'll build based on my sketch. 6 6
Just a nice heading, some text, and then features 7 7
explained in four columns. 8 8
This should not be so hard, right? 9 9
So in this lecture, we'll learn some new things. 10 10
We'll learn how to put content on a website directly 11 11
from CSS with the after pseudo-class. 12 12
We'll use the fluid grid for the first time 13 13
in order to build the four features column. 14 14
And we'll also use beautiful icons in those columns as well. 15 15
So, let's go. 16 16
So this is where we left our project after the last lecture. 17 17
The header is all built, now it's time 18 18
to start adding the first section. 19 19
And in HTML, we actually have an element for that, 20 20
which is called Section. 21 21
In this is just like the header, it's a container 22 22
so that we can tell this is a section. 23 23
So I will call this section Features. 24 24
And now, let's start with the title, and with the paragraph. 25 25
We'll put that in a row. 26 26
So, class, row, because of course, we want this centered. 27 27
And now, let's put a heading here. 28 28
Now each web page should only have one H1 element, 29 29
which means only one main heading. 30 30
We already used that main heading here, 31 31
so for now in each of the sections, we will put an H2 title. 32 32
Let's see what content we have for this section, 33 33
and here it is. 34 34
I will copy all of it, actually, and put it down here 35 35
such as I did the last time. 36 36
Now, I already showed you how to make comments in CSS, 37 37
now I will tell you the same thing for HTML, 38 38
and it's very easy. 39 39
Just like this: you see everything turned grey here? 40 40
Now to close it, it's just like this. 41 41
And now it is a comment, and it will not appear anywhere. 42 42
I can just leave it here until we use all of this text. 43 43
So the title here is this one. 44 44
It is-- where-- right here, okay. 45 45
"Get Food Fast, Not Fast Food." 46 46
Instead of this, I actually want an larger dash 47 47
that's called an M dash, and in HTML, we have a thing 48 48
called HTML special characters, or special entities, 49 49
and to write those we start with an ampersand, 50 50
and in this case, I already know how it's called, 51 51
it's M dash. 52 52
So instead of writing that dash, I write this HTML code. 53 53
And you can find lots of tables on the internet about this, 54 54
and I will also include a link in the course e-book 55 55
where you can find lots of HTML entities. 56 56
Alright, this is for the heading, 57 57
and now let's add the text as well in form of a paragraph. 58 58
And of course we need a class name here, 59 59
and I will call this Long Copy because it's a long paragraph 60 60
with lots of text, and copy stands for copyright, 61 61
which is like the text for websites. 62 62
So in this paragraph, we'll put this text here. 63 63
We'll actually delete all the text we already used. 64 64
So put this text right here. 65 65
As we did with the header, I will start by building the HTML 66 66
and the CSS will be then used to format all of this. 67 67
And now let's start using the grid like a pro. 68 68
And in order to do that, we have to start a new row. 69 69
Just close this, and now inside of this row, 70 70
we make a dif for each column. 71 71
Dif. Class again. 72 72
Now each column needs to call class, and this comes here 73 73
from the grid CSS file, so we don't have to worry about it, 74 74
we just use this call class. 75 75
So each class-- sorry, so each column needs a call class. 76 76
Now we have four columns so each of those four columns 77 77
will have this class, span one of four. 78 78
And again, we can check this here in the grid file 79 79
with a three, and grid of four. 80 80
So each of our four columns will have 81 81
a width of 23.8 percent. 82 82
Alright, back here, so let's put some more text here. 83 83
I think that these things here are like titles 84 84
of each of the features, so let's make 85 85
another heading element with these. 86 86
We already used H1, H2, and now it's time for H3. 87 87
Alright, and now the text below this, 88 88
and again in a paragraph. 89 89
I'm not going to worry about icons for now, 90 90
the icons will also go inside of this column. 91 91
But I will just leave this for the end, 92 92
because we so far have not talked about it. 93 93
So now I will just copy this three times 94 94
and then fill this with our text. 95 95
It's kind of boring, I guess. 96 96
Now you will see that part of your work will always be 97 97
copy and paste, and you will probably get used to it. 98 98
And the last thing right here. 99 99
Okay, that's it with text. 100 100
So we already used all the text from here. 101 101
I will save this, and now let's see 102 102
how it looks like in the browser. 103 103
It's down here, alright, not so cool, right? 104 104
What's missing here? Our icons. 105 105
So let's fix that, and we will use a beautiful 106 106
icon font called ion icons, here it is. 107 107
So ion icons. 108 108
Don't worry, this link is once again in the course e-book. 109 109
And we will start by downloading it to our computer. 110 110
So this takes some time, and here we have it. 111 111
Right inside our folder, and that's extracted. 112 112
And what do we have here? 113 113
We have a bunch of files, 114 114
but we actually only need two things. 115 115
We need these CSS files, and these font files. 116 116
We actually need this, ion icons mini file CSS. 117 117
We will paste this inside our vendors folder, CSS, 118 118
because you already know, it's a file that we got 119 119
from the internet, and then the fonts, 120 120
because it's an icon font. 121 121
This also comes with the icons in form of images, 122 122
but we want the fonts. 123 123
So let's copy this entire folder and there's, 124 124
okay there already was a folder here, 125 125
so I will replace this, and this is our icon font here. 126 126
And now, how do we use this? 127 127
I actually shouldn't have closed that... ion icons. 128 128
Because this is where we will choose our icons. 129 129
Alright, but first, I will show you how we use it. 130 130
So we want them right here, even before the heading. 131 131
So we just write E class and then the name of an icon. 132 132
For instance, imagine that we want this heart 133 133
We just need to copy the name of this class, paste it here, 134 134
and then we'll have a nice little heart. 135 135
Want to see? 136 136
Well of course not, because we didn't include 137 137
the CSS file yet. 138 138
So let's do that, I'll hit command D to duplicate this, 139 139
and alright, here it is, ion icons, CSS, 140 140
but now it will work. 141 141
And here it is, here is our heart. 142 142
It's not where I wanted it, let me go back, of course not. 143 143
I don't want it in this place, I want it here 144 144
right before the H3, so let me paste it here, 145 145
and now I have this icon right here. 146 146
So, but that's not the icon that I want 147 147
for this feature here, so let's choose just another one. 148 148
So "up to 365 days per year," 149 149
well which of these could look good for that? 150 150
These are a lot, really a lot. 151 151
You will need some time to go through all of them. 152 152
And I choose to go with these icons here, 153 153
these are IOS inspired, which you can see from the name, 154 154
and I really like those line icons, 155 155
so I will choose all icons of this class, 156 156
so that we have some consistency here. 157 157
And this looks great for the first feature, I think, 158 158
because it's the infinity symbol, 159 159
and 365 days per year is kind of an infinity. 160 160
So the next one is "ready in 20 minutes." 161 161
And we could use kind of a watch for that. 162 162
Like this one here. 163 163
So, copy it, paste it here, so I class. 164 164
Paste and close it. 165 165
And the next one is "100 % organic," 166 166
so let me see what we have for that. 167 167
First let's check if they're showing up here. 168 168
Okay, they are, cool. 169 169
Now let me choose another one for the 100 % organic, 170 170
I'm going with this little carrot here, 171 171
so let me just write it here, I class, and... 172 172
Last, but not least, we have the "order anything" feature, 173 173
and that could be like a shopping cart, 174 174
let's see if we find one. 175 175
Here we go, copy and paste. 176 176
Alright, so this is our HTML. 177 177
In the next lecture, we will format this 178 178
so that it looks professionally designed, 179 179
so don't wait, come with me to the next lecture.