So that this extends all the way to the bottom and it actually fixes on the screen so the only thing scrolling is our course library component here.

So this is all going to be done in pure css and to get started let's just go ahead and head over to our application code here and close it all out. I have my note modules open so I'm just going to close this real quick. It's another reason we don't commit node modules because of how long it is.

Let's add in the code here. So in our main.scss let's scroll up to .schedule and let's give this a position of fixed.

.schedule {
    flex-grow: 1;
    background: linear-gradient(118.95deg, #6F48CE 0%, #32CBE8 100%);
    width: 38%
    height: 100vh;
    text-align: center;
    padding: 12rem 6rem;
    position: fixed;
}

The reason we're doing this is so that it doesn't move when we scroll but you notice it screws up her entire component here.

But it's not moving and that's nice. So basically the way we can solve this if you have heard of min width and min height, max height and max width in css then you might already know how to solve this. So we can go under our code in .schedule and let's give this a right: 0;. That should pull it over to the right.

All right so that's the first thing we want to do now on our .library here let's start by giving this a max with a 62 percent putting this up next to our width here.

.library {
    flex-grow: 2;
    width: 62%;
    max-width: 62%;
    height: 100vh;
    padding: 6rem;
    z-index: 1;
}

OK so we have max width of 62%, that should put it right here.

Now you'll notice it's right dead center which we don't want, go ahead and try to solve this. We've messed around with this type of styling many times so I'd recommend pausing the video and trying to figure out how you can get this over here. But if you can't do that just follow along it it's no problem. So what we do is we type in position absolute and that will position our absolutely and then we can just pull it to the left all the way.

.library {
    flex-grow: 2;
    width: 62%;
    max-width: 62%;
    height: 100vh;
    padding: 6rem;
    z-index: 1;
    position: absolute;
    left: 0;
}

And you'll notice it's right back where we had it. So that's exactly what we want.

It is displaying like it was earlier except for now only our course library is scrolling here which is the exact effect that we want. So that's it for that. Now this just kind of think of what we have to do. Let's commit our code quickly, so let's say git status, git add ., git commit -m "fixed schedule position".

Now let's just push that really quick but let's not end the video here. So what we want to do is actually write down a list of things we need to accomplish here to finish off our app before we get into the last component which is the progress tracker here. So we need to add in the styles for this so let's write that down. Let's just write this down at the top of our main.scss in comments let's just say first thing we need to do is add remove styles and the next thing we need to do is and that's going to fix this weird display issue we have here. So you'll see that it's having the arrow go over more and we don't want that.

We need to solve that and then we need to fix the style on this remove button. So let's say remove button style on schedule of course and then let's see what else we've got to add. All right, that's it for that. Now that would finish off our component our app except for the progress tracker. But we want to fix up a lot of these things. A lot of the way things are written we might as well separate these courses into their own component class just to get a little more practice with components.

Let's develop a course dropdown component or let's call it courseOption component. So we'll just call it courseOption and then we need another component which is going to be our schedule component, so our schedule enrolled course component that should be good.

So let's just kind of look at this a little more that's working. Let's check our design here and see what we need to add in. So we have our progress tracker, all right we've got that component remove button style so we have that working. We want to add in the course progress tracker. Oh we need the checkmark here. So if we go to our app here you'll notice we dont have the checkmark here when it's added so that checkmark can show whether or not the course is open. It just needs to be added on here and that we need to add that while it's actually add that in the next guide.

Let's say added course checkmark styles. Okay, and let's just put next to it the component we need to add this in so that it's initially going to be in the courseLibrary.js later it's going to be in this CourseOption component. This is going to be in our courseLibrary.js as well. And this is going to be in our removed button style on schedule courses in our schedule.js, this is going to be in it's own component. So progressTracker.js and this is going to be its own component so courseOption.js and and enrolledCourse.js

Okay, so that should be it, that's all we need to add in. And then it looks like a few things might be off like the font on some of these the distance between these. So we need to take care of that let's just add in one more so let's just say Fix style issues. Well, first let's go ahead and we need to clean up our code quite a bit and throw them in their own files. So let's just make Number Six refactor our code.

Okay, yeah well should do that and in the last video, we will let's see what we can do. We can fix up the remaining styles so fix styles. And then we will finally get around to deploying to Heroku so we can display this on our own website so we can have it hosted and we can move on from there onto the next step.

So that's where we need to be with this app and I'll see you in the next video where we will get started with the check mark styles.