All right welcome back.
So in this video we're gonna go over how to style the featured courses section of the project here.
So we're going to be working in this section right here.
So let's go to Maine not see ISIS and what we're gonna do is we're going to copy this right here.
I'm going to copy that and let's return a couple times piece that and we're going to do featured courses
section.
I'm going to copy this return twice piece that in return a couple more times tab in from line 56 and
we'll start right there.
So what we're gonna do here is we're going to call on the class of course.
So we have this div right here.
And so we want to basically style this so that it looks like the final product.
So what we're gonna do is let's go here and I'm going to do div Darkhorse
with is gonna be 400 pixels height is gonna be five hundred pixels background there's gonna be white
border there's going to be one pixel solid and we're gonna be transparent.
OK then we'll do position absolute and we can do top twelve forty four pixels and left is gonna be 400
pixels OK somewhere right click open in the browser and the index on each nail file and you'll be able
to see.
OK so the first one we did here it showing up correctly.
Now we have one more thing to do we need to style the each sex.
So I'm going to do that right here so we're gonna do H sex.
Let's do Font Size 1.
OK then we'll go back to index out each time element right click open in the browser and you can see
now that this is the size that we want it to be.
OK.
And so we have the image here and then all this.
Now let's fix these other two and then we can really see what we did.
All right.
So let's go back here and now what we're going to do is call on the class of course to.
OK.
So essentially we're going to do is just copy this someone and copy their return and then instead of
div cause you're going to do course to and instead of top of 12 44 we'll keep that.
But the left is going to change to eight hundred and fifty pixels.
OK so let's take a look at that.
Go to the browser go to the index on e-mail right click open in the browser and you can see here and
now we have two of the three where they need to be.
So let's go back to me and CSX we're going to copy the div course or the div dot class of course to
paste that below we're going to do course three and instead of left being 850 it's going to be 13 hundred
pixels.
OK I'm going to save that.
Right click open the browser from index that HD Himmel and now you can see we have all of the styling
the way that we want it for our featured courses.
So we have H2 team for beginners Yes that's for beginners javascript for beginners.
And then the font size that we want for the H six and then the button here and then it's it's an invisible
transparent box here that we're working inside of to kind of manage this and lay it out the way that
it is there.
OK.
So oh and then let's add end featured courses action here.
So now we've completed the featured courses section.
It was really just doing a div with a class of course.
Course to and then course three and there's one more thing I want to show you while we're here.
Essentially what we could do since we're using the same exact properties for all three is you could
do this.
You could do div DAC course and actually let's do it up here so we can do div dot course comma div Darkhorse
two comma the dark course
course three and then we could do this.
We can grab the with the height the background the border the position of the top and you can do this.
Pasted in there.
And then let's see if that converts it should.
Yep converts right there so hold on a second.
Let's go back here and then all we're gonna do is leave the Left property to each one individually.
That way what it's going to do is it's going to overwrite this because we don't have it written here
so it'll overwrite it every time.
So let's take a look at that and just see the whole idea of that is do not repeat yourself so there's
no reason to write this all these properties three times.
You should just write it once and then add left 400 pixels left 850 left 13 hundred.
It basically optimizes your CSX to make it easier to read and to understand what you were doing when
you built us.
So when right click and open in the browser here real quick scroll down and there you go.
So when I inspect this you're going to see that when I go to
courses
and I go to this one right here divide our course is highlighted and so is this one.
When I go to course to discourse 2 and then course 2 is right there and then course 3 it's highlighted
here.
And then also highlighted here.
So it's saying look show me all these properties for a div Darkhorse 3 or class 3 class course that
course 3.
And then also add left 13 hundred pixels.
So it just cleans it up a little bit and makes it easier to read and use.
So that just something I wanted to show you because it's kind of a fun thing to do with scissors.
So thanks for watching.
I'll see you in the next video.