Hello. So welcome back to the portfolio series that we're building out. We left off last time by just building up this main section here and now we are going to move on to the skills section and probably um some of the work section here. So skills section is quite straightforward. Um We have a similar header to the rest of the spaces here, so we're going to build the first one of those out and then we just have some of our skills listed out there. So let's go ahead and get started. So the first thing, excuse me, uh the first thing that we're gonna need, we're gonna need to create a new section and we're going to give this section and I. D of skills similar to how we did the other one and I'd of socials and um meine and stuff like that. So we're going to do that and then we're going to look at the design here. True. All right, so we're going to create that initial text there that says skills in order to do that. We're going to just do use an each one peg and for now we'll just write skills and if we look over here, perfect. Now we just need to do some styling. So let's go over to are uh style sheet here, um making the logo down at the bottom, I like to keep the additional stuff kind of in a separate section. Um and then we're going to right out our first thing here. So I'm gonna say skills heading similar to how we did the main heading up here, which was different as far as styling of course, but we're gonna keep that the same consistent naming just so that makes sense. Our font family is going to again be family, going to be Roberto and then sent the sheriff Um the wait uh let me see here. I think the wait's 900, pixels. The color is it's here so we'll copy that, paste it on there. Uh besides we're gonna have to play around with. Um but the other important thing is we want it to be cut off the page and we do know that we have that um 40 pixel There's a 40 or 60 40. About 40 pixel um Padding there. So let's do 60 and see what happens. We'll do a padding and then we'll do left and then we're just gonna do negative 60 to override that 40 and then can go off the edge a little bit and then we'll see how that looks. You know, it might help amy if you apply it to the actual thing. Alright, so class your skills heading. Perfect. Um The pattern is not working the same as we want it, but that's also because it's a lot smaller than it should be. So let's go back over here um and let's do well it's because we don't want paddling on margin. That's okay, let's try 200 for font size. Yeah, I realize it's giant, but these are quite big and then we'll see where we're out there. Perfect. So it's hanging up over the edge, I'd say pretty similarly to there, but it's definitely too small. Um so let's try increasing it to 300. Perfect. Except it's not as bold as it should be. Um fault. Weight 900. Uh we didn't have 100 pixels now. That should be. There we go. Perfect. So that's looking like how we wanted there. So now we just need to build out this section here. I've already added these and we discussed changing color on them in a previous video. So we're going to go ahead and start to build up the structure for that. Let's go back over to our index file. And what we're gonna do is we're gonna create a where am I here? Creative. Um And we are going to inside of the dib do a We're going to two separate in ordered lists. We'll do A. U. L. And we're gonna give a class that doesn't exist yet. And we'll call this set of skills skills group. The first one is just like our random skills as opposed to death. So we'll say skills group random. And then we're going to do a second one and we'll do a class uh Skills group. Yeah. Have And we're also going to make sure that there's unified text will do a skills text and a skills text and then inside of these we'll just start off by doing an L. I. And we have six on each. Yeah. So well what are our skills here? We have illustration, Writing social media. Mm It's a creation team management, medication, content creation, you know that Trent location. Hey and then we have another one with and there's six of them and we're gonna duke it. Html business. It's the other way around. That's okay. Easy enough to fix. Um I did it in uh writing and illustration should be reversed actually because it should be in size where it's going down in size order. Um Just have it wrong in this but I'm not gonna bother fixing it. So we are going to do your job script. It probably postgres is a second. Yeah, I think it's just and then rails ruby on rails. Save that and look at what's happening here. All right. So now we have to an ordered lists but we need to make them look not terrible. So first things that we're going to want to do here is we're going to want them to be over here and not on the bottom underneath. So why don't you that we're going to make use of position absolute again. So in order to make position absolutely what we want we need to make sure that we are assigning a relative position to the outer container we wanted to respond to. So we're going to make this a position relative and then we are going to give this outer div here. Yes. Class of position, absolute start work. It did not wipe. Mhm. Mhm. Yeah. Uh huh. Yeah skills having position absolute. Oh we need to define the actual container for where we want everything but it still shouldn't be underneath. It should be on top of this. Little confused why this is happening. Let's see here. This is absolute um Oh okay we need to do a top zero in order to get that to work. That's why we're missing here. Okay so let's go over to Stanley. We're going to give we're going to make a container. So it got skills container let's do top zero. And then we're also going to want to do a right I'm zero. We'll go back over here and we will give this dip here. The skills conflict. Perfect. So now these are over here but you'll notice they're stacked on top of one another. And that's because we need to make sure that this here This one specifically is flex. So let's do it deflects. Always put the positioning or that the display method at the very beginning. Um It's not entirely necessary but I will always do that. Um And then we're going to we need to add the images. So because we're adding the image we were keeping these just to list we would just keep them inside of the U. L. S. Um But I'm actually going to put them inside of ribs. Let's try putting the images inside and see what happens first she says um really hoping for the best to happen here. We're just gonna copy these classes for a second. So we have this and then we're going to have man working just there. Oh he looks so good. We definitely to justice size. Uh we're going to copy this. Let's actually change this to state man working. You get that either. Um And then we'll do that and this one is going to be dev and have and then we'll get rid of fact and then we're gonna keep logo and then we're gonna add skills to our logo isn't gonna exist right now. So let's go over and go down to logo here and do it dot we'll go skills and we need to add in the properties we want for that. So um let's go over here and let's look here. Um Yeah so they're not even so Let's just focus on the height for now. Um let's say the heights too big here. Let's say the height is 50. Mhm. It's still a little bit bigger than I would like. It's safe 40 which is a bit better. Um And our width is looking okay we could have them be more blocked if we wanted them to be. Um But they're not exactly actually like fully centered there. So let's let's just keep this as is um and then we'll just if we think it looks bad later but for now we need to actually get that skills text looking how we want and then override some of those that list property there. So what we're gonna do is we're going to go back over uh we're gonna go back and make sure both of these have a skills text class. They do perfect. And now we're going to mm add in our font family as per always uh Roberto sound sarah We're going to add in our weight which let's check what our weight is. I think it's a 300. It is whoops. Mhm. And then our font size this will be the same as this one. So what did we ended up making the font size for the 30 to keep the font the same size for everything. They're 32. So perfect. So what we would like to do now is we would like to actually fix how the containers are looking here that contain everything in it. So what we'll do is inside of the we named um some other containers for them. What were they? We did a skills grouper and skills group dev So for thought skills group random What we want to do is the random one. We want to align text to the right soldier text align and I think that's what it's yep. And then of course we really want to get rid of those dots. So we're going to use the list style property there with style 7 to 9 and perfect. That one's looking good. So now we need to do the exact same thing but just change the name to Deb for the second for that last big bear and we need to flip this one to text the line at the start. Perfect. So now let's look over at our design here. Um there's a bit more of a gap for the top ones there. So I think what we'll do is please see here. Yeah, I think it's like a little bit more of a gap underneath these guys. Um So let's just do a um B one on both of them. Yeah. Yeah. Yeah, february one. Uh sorry my brain people distracted. Okay. And MB one on, that's true one. Okay, mm it looks a little bit better um and this is a little bit too far over for my liking. Um but I think that's mostly because of the screen size because we do want it to be lined up here. So if we actually sort of make the screen smaller, it wouldn't, I mean we're gonna have to deal with the responsibility to do things climbing over each other and we will deal with that but we're gonna keep this here now. Team management needs to go below content creation because I thought I fixed that, it looks like it's smaller here but it's not perfect. So that is justified correctly there but there's not enough of a space in between that. So what I'm going to do is I'm going to give The class above it. I like to give the margins to the bottom, so we're going to go up to that social class there and we're going to say MB five and now there's a bit more of a gap, so that is our skill section complete. Again, we're going to have to deal with the responsiveness um for things overriding each other right now it's moving and shrinking down, but for the things that we have absolute positioned, they're not going to move and respond with it. So we will deal with some head writing some media queries um in a separate cast. Again, this is not the um preferred way to do something like this. I'm trying to show off that I can well not to you guys, but for, like, in theory, what you want to do is show off that you have the skills to be able to do something like this, even though it's not best practice to necessarily do it this way, I want to show that I can use absolute positioning, right media queries to override it and stuff like that and make it work, even though realistically this is an extremely complicated way to do something that we could do way easier. So in the next section we're going to continue on and we're going to create out the work section which is going to be our most um difficult section to create because it does have all of the, all of these are going to be absolute position. So, um, and we're also going to embed an actual, um, cast in the video as well. So stay tuned for that in the next video.