Voiceover: Welcome to the next lecture.
After building the header in the last lecture,
let's build the features section right now.
So this is the nice, clean features section
we'll build based on my sketch.
Just a nice heading, some text, and then features
explained in four columns.
This should not be so hard, right?
So in this lecture, we'll learn some new things.
We'll learn how to put content on a website directly
from CSS with the after pseudo-class.
We'll use the fluid grid for the first time
in order to build the four features column.
And we'll also use beautiful icons in those columns as well.
So, let's go.
So this is where we left our project after the last lecture.
The header is all built, now it's time
to start adding the first section.
And in HTML, we actually have an element for that,
which is called Section.
In this is just like the header, it's a container
so that we can tell this is a section.
So I will call this section Features.
And now, let's start with the title, and with the paragraph.
We'll put that in a row.
So, class, row, because of course, we want this centered.
And now, let's put a heading here.
Now each web page should only have one H1 element,
which means only one main heading.
We already used that main heading here,
so for now in each of the sections, we will put an H2 title.
Let's see what content we have for this section,
and here it is.
I will copy all of it, actually, and put it down here
such as I did the last time.
Now, I already showed you how to make comments in CSS,
now I will tell you the same thing for HTML,
and it's very easy.
Just like this: you see everything turned grey here?
Now to close it, it's just like this.
And now it is a comment, and it will not appear anywhere.
I can just leave it here until we use all of this text.
So the title here is this one.
It is-- where-- right here, okay.
"Get Food Fast, Not Fast Food."
Instead of this, I actually want an larger dash
that's called an M dash, and in HTML, we have a thing
called HTML special characters, or special entities,
and to write those we start with an ampersand,
and in this case, I already know how it's called,
it's M dash.
So instead of writing that dash, I write this HTML code.
And you can find lots of tables on the internet about this,
and I will also include a link in the course e-book
where you can find lots of HTML entities.
Alright, this is for the heading,
and now let's add the text as well in form of a paragraph.
And of course we need a class name here,
and I will call this Long Copy because it's a long paragraph
with lots of text, and copy stands for copyright,
which is like the text for websites.
So in this paragraph, we'll put this text here.
We'll actually delete all the text we already used.
So put this text right here.
As we did with the header, I will start by building the HTML
and the CSS will be then used to format all of this.
And now let's start using the grid like a pro.
And in order to do that, we have to start a new row.
Just close this, and now inside of this row,
we make a dif for each column.
Dif. Class again.
Now each column needs to call class, and this comes here
from the grid CSS file, so we don't have to worry about it,
we just use this call class.
So each class-- sorry, so each column needs a call class.
Now we have four columns so each of those four columns
will have this class, span one of four.
And again, we can check this here in the grid file
with a three, and grid of four.
So each of our four columns will have
a width of 23.8 percent.
Alright, back here, so let's put some more text here.
I think that these things here are like titles
of each of the features, so let's make
another heading element with these.
We already used H1, H2, and now it's time for H3.
Alright, and now the text below this,
and again in a paragraph.
I'm not going to worry about icons for now,
the icons will also go inside of this column.
But I will just leave this for the end,
because we so far have not talked about it.
So now I will just copy this three times
and then fill this with our text.
It's kind of boring, I guess.
Now you will see that part of your work will always be
copy and paste, and you will probably get used to it.
And the last thing right here.
Okay, that's it with text.
So we already used all the text from here.
I will save this, and now let's see
how it looks like in the browser.
It's down here, alright, not so cool, right?
What's missing here? Our icons.
So let's fix that, and we will use a beautiful
icon font called ion icons, here it is.
So ion icons.
Don't worry, this link is once again in the course e-book.
And we will start by downloading it to our computer.
So this takes some time, and here we have it.
Right inside our folder, and that's extracted.
And what do we have here?
We have a bunch of files,
but we actually only need two things.
We need these CSS files, and these font files.
We actually need this, ion icons mini file CSS.
We will paste this inside our vendors folder, CSS,
because you already know, it's a file that we got
from the internet, and then the fonts,
because it's an icon font.
This also comes with the icons in form of images,
but we want the fonts.
So let's copy this entire folder and there's,
okay there already was a folder here,
so I will replace this, and this is our icon font here.
And now, how do we use this?
I actually shouldn't have closed that... ion icons.
Because this is where we will choose our icons.
Alright, but first, I will show you how we use it.
So we want them right here, even before the heading.
So we just write E class and then the name of an icon.
For instance, imagine that we want this heart
We just need to copy the name of this class, paste it here,
and then we'll have a nice little heart.
Want to see?
Well of course not, because we didn't include
the CSS file yet.
So let's do that, I'll hit command D to duplicate this,
and alright, here it is, ion icons, CSS,
but now it will work.
And here it is, here is our heart.
It's not where I wanted it, let me go back, of course not.
I don't want it in this place, I want it here
right before the H3, so let me paste it here,
and now I have this icon right here.
So, but that's not the icon that I want
for this feature here, so let's choose just another one.
So "up to 365 days per year,"
well which of these could look good for that?
These are a lot, really a lot.
You will need some time to go through all of them.
And I choose to go with these icons here,
these are IOS inspired, which you can see from the name,
and I really like those line icons,
so I will choose all icons of this class,
so that we have some consistency here.
And this looks great for the first feature, I think,
because it's the infinity symbol,
and 365 days per year is kind of an infinity.
So the next one is "ready in 20 minutes."
And we could use kind of a watch for that.
Like this one here.
So, copy it, paste it here, so I class.
Paste and close it.
And the next one is "100 % organic,"
so let me see what we have for that.
First let's check if they're showing up here.
Okay, they are, cool.
Now let me choose another one for the 100 % organic,
I'm going with this little carrot here,
so let me just write it here, I class, and...
Last, but not least, we have the "order anything" feature,
and that could be like a shopping cart,
let's see if we find one.
Here we go, copy and paste.
Alright, so this is our HTML.
In the next lecture, we will format this
so that it looks professionally designed,
so don't wait, come with me to the next lecture.