All right.
Welcome back.
So in this video we're going to build the featured courses section.
So let's go to the ED.
End of section here and return twice.
And so what we're gonna do is we're gonna build another section closer to section and give it an I.D.
of courses closed that section return a couple times and then tab in the line 50.
And I want you to type and center each one our featured courses.
Control us to save.
If you hit the end key on your keyboard it's gonna go right to the end of the tag.
OK.
And then want you to make a div the class of course.
And we're gonna close that div
and what we're gonna do is we're gonna make an image tag.
So I am G S our C and we're gonna do our source is gonna be the image folder with course dash 0 1 that
j peg.
OK.
And then we scroll down here so you can see.
There we go.
We're gonna do center each to each team of five for beginners
and then we're gonna do center H six this course was designed for students starting out in front and
web development one and to learn each team of five to get started.
I we go.
If you hit the end key again that'll take us to the end of the Center tag the closing tag.
Then I want you to do center and then do a button and type and learn more.
Okay.
And then save it.
Right click open the browser and if I scroll down you have our featured courses each team of five for
beginners.
I give it a little blurb in the title right here and then learn more.
So I mean spec this real quick so I can show you what I did in the CSA as I styled the div da course
which is the class of course.
So I'll give it a width of 400 pixels a height of 500 pixels a background of white board of 1 pixel
solid transparent position absolute.
And then I gave it this position right here
and then the image
when I've given anything because there's no idea or anything like that.
Same with these learning we really styled was the dev and the dev is kind of the container.
That's exactly what it is.
It's a place holder for all the content inside.
So this sets the president for how the content is going to be displayed.
So close that.
Now what we're gonna do is we're going to copy the the class the dev class of course.
And I mean have control see you copy that's when I return twice what paces in.
And I want you to change this to course to and this is gonna be course dash 0 2 This is gonna be CSI
3
and I'm going to copy that so I can add it here.
Hey Staton.
OK.
Now when I right click on open the browser you're going to see CSI as three for beginners.
Now you notice that they're not stacked.
And the reason is is because if I go back here I gave it a different class and what I did with that
was I gave it a different property so I moved this div with class of course to I moved it to the right
of this class here so if we copy this and then I paste this then we're going to call this one course
three course dash 0 3 and we're going to do javascript
so that when we copy this or paste it here paste it right there say that right click open in the browser
and I'll show you exactly what I did know.
So when I inspect this you're going to notice that inside the Section I.D. courses we have three devs
and they all have different properties.
So the width is 400 pixels the height is always the same.
It's just the position that's different.
Same here
and same there but the position of 400 850 and thirteen hundred.
That's how they are spaced out like this.
So that's the our featured courses section.
I'll see you in the next video where we're going to build the about section.
I'll see you there.