Hello everybody. So in the last cast we finished off by building out this snack bar here which of course doesn't have any functionality yet because there's nowhere for it to go. Um But today we're going to continue building out the portfolio page and we're gonna get started on this the main body section right here. We might go down and do the skills depending on how fast this part goes but we will see as we go. So I'm gonna go over back to my code here and I'm gonna go ahead and I'm going to create a section mm and I'm going to give this section the I. D. Of maine um and you'll see what we're doing that later. We're going to be doing it so that we can get back and forth in our navigation. Um and then let's take a look let's actually separate these windows here because it gets really annoying one there all in one window. Uh Okay let's do this like we did last time. Perfect. So we're gonna go ahead and we'll do first we'll actually add in the text so we'll create a div inside of here And then we will do A.H. one. Hi hands are not working hard on the crew, we're just gonna say hello and then the next one's going to say I am in the name. So holding onto an H1 again and we're going to say I I cannot portray all turn Then this one's gonna be a little bit smaller here so we'll do an age three and we're going to say what you can actually go ahead and copy this text here and paste that in there. Perfect. And we'll give that a save. Let's go look here. So now all of our stuff is there. We just of course actually need to um it's making you look terrible. So what we're going to do is we're going to start giving it some styling now. So what we're gonna do is we're going to create um some handwritten CSS I'm gonna be roughly following what's called the then method for this for my my naming conventions. I'm not sticking to it entirely. Um there's I'm just doing a rough version of it, just so that our code is nice and clean, it makes more sense. We understand what our classes are doing and they're easy to change without possibly screwing something else up. So to start I'm gonna start with just that main class there and I'm going to set a max width because I don't want it to take up the full width of the page. I would like it to only take up a certain amount. So I'm going to say my max width for now is going to be let's just do 1000 pixels. Doesn't look any different because it's on a big screen, but if I shortened, oh of course it doesn't look any different to me. You didn't assign the class if I can use my brain for a second. So we'll go back over and we will give the yep section uh class. Excuse me, I don't know actually no we're not gonna get a section we're gonna give the dev a class of maine and you can see that it's shorter there and we're going to go back over to our CSS and we're going to create the main heading. So for the main heading, what we what we want is to Yeah um right our wait for our font our font color, the general size and the family. So we'll start with our font family and just like the one above. We are going to use that Roboto and then defaulted to SAn serif if your body is not available we are going to use font weights of 300 let's say park size uh 500 pixels. Yeah, we need to make sure that this has the you're probably all watching me like what are you even doing right now? Mhm Main heading? Main heading heading is selling something wrong. Must have some main heading. Main having my family, Charles and sara on size, color blue. Okay, it is responding why is the font size Not working? 200 pixels Yeah. Uh huh mm I think we need to apply the main heading. You can't have it in the upper div for our font we're going to have to put it in the individual ones here. It's fine because we don't actually want it to apply to the H three anyways. Perfect. But I'm going to go ahead and say that our font size of 200 pixels is probably at the figure that we want. So we'll go back and we'll try 100 again. Uh trying idea. That was a little bit better. Perfect. Okay. Um we are going to also create this bold here, so we're going to do and this was like this is following that typical them convention here. So we're going to add an emphasis. Well, do we need to bold it up a weight? So we're gonna do a font weight of 400 then we're going to do a color of whatever this color is here, which is this one. So we'll go ahead and copy that and we'll do our hash and then we just need to go and what we need to add is here is a span and we'll do a class of if you okay is heading Asus cannot type Perfect. And now that's looking much more close to this there. Um so now we need to do the little paragraph heading under here. So for that one is calling it main heading, we're gonna call this one green pear. Yeah, I mean pere sure you're humane paragraph but be honest, that's just a lot of words. So I'm not going to do that. Um for this, we wanted to be smaller. So for I really don't have the correct font here, we have the other front because we could apply a font to the full thing but it just wasn't responding properly. So I'm just gonna stick doing it this way for now whether it's press convention or not. Yeah, we can clean it up later. Let's just make it work for now. So Roboto And again, we'll do sense sheriff. You want our weight again to be that 300 font size. Oh 36. Well, to beg 32 it's better. Um, our color is black, which is already correct. And our padding for a margin, we need to invent it. So let's use padding and we'll do a padding of right. So 80 pixels. Okay. See how that goes. Perfect. Except we did padding and not padding left. Perfect. That looks pretty close. Right? I'd say so awesome. So now you can see that the things are pretty correct, but it's not exactly sitting in the right spot. We do want it to be lower. So what we're gonna do is we're going to create another class for the entire div and we're going to call it instead of heading, we'll call it main header if you find that a little bit confusing. Feel free to change the name. I always use heading for the actual text and header for the container. I've just kind of standard, we done that throughout my career, but you do whatever works best for you. So we'll do main header, save that. Sure. And then we'll go over to our style and put it above the headache main better. Sure. And for the main header, we're going to want to add padding on the top and the left because this is our standard padding around. But we do want it to be further in than that standard. So let's try here. We'll do a padding. Pops, Try 200 pixels. See how far down that goes. Oh, that's a bit too far. Let's try 150. That's better. Right on 60 you're like that. And then for the left, let's say let's do half of that. So we'll see how that looks petting left, meaty pixels. Perfect. This pattern and this pattern will be the same then, not including the very outside because we did an 80 pixels for this one here as well. So that's looking pretty close to how this is set up there. Um now we need to go ahead and start creating the arrow. Um and the arrow is going to be a little bit more complicated and this is where we're going to have some more issues with our responsiveness because our um we're gonna be using some absolute positioning here. So what we want to do is first of all we want to add an image inside of, not inside of there inside of the section. So we're gonna have an image our source is going to be, we're going to go into our assets folder and then it's going to be let's find out where it is. Air flies. It's the only one that started. So it's easy to tell five. Not that sometimes those things drive me absolutely nuts. R five for adults for our multiple call it green arrow. And then we're going to give it, oops busses because right now if you look, it's this is not how we want this to look. So we're going to give it a position absolute. Just going to shove it on top of it, which is not what we want. But what we do need to do is transform it similar to how we did in here. So if you look at this, we do have a transform property here because we actually did rotate it in our design. So we're going to need to break that into the class. So we're going to give a new class of an arrow and I'm gonna go over to the staying here and I'm not trying to get you going to copy this transform and save that there. Let's give this uh may narrow class and that looks like it's in the same position. So now we need to move over and the color is wrong and we actually, because this is a PNG, we can't adjust the color there, but we can change the opacity, which is how well adjusted there. So, um, I believe we did adjust the opacity In here. Yeah, to 60%. So that makes that easy to know what we're doing. So we will do opacity at 60%. Um Are with is this is a 4 20 by three K. Let's just try 400 by 300 for our sizing. So for our wits Because it's a bit too big. Let's try 300. No always was 400 and height for me ST see mm So that could change it. No it didn't. Well why don't we just inspect it and confirm instead of doing that annoying slight thing back and forth? Yeah so our height is changing it perfect so we will keep that there. Um And now for the position absolute we need to move it into the correct spot. So this is a little bit it'll give you rough things here but this is off because we changed the size so we're just gonna have to fiddle around with it a little bit. I know we did like uh for our main if we look at our CSS here, our main has a 40 padding and this has an 80. So we're already sitting at 1 20 we don't want it to be exactly parallel with this here. Excellent, went backwards. We don't want to care a lot to be over. So we're sending out 1 40 let's try 160 and see how that goes. Maybe was at 1:40 let's try we'll do left 1 60 first of all. Yeah it looks pretty correct. Right above the E. Of the E. I think that's pretty good. And then we, it's sitting pretty accurate to where we would like it. I think it's just a little, That means a little bit higher. Let's try fiddling with the top and see. Might not need to, let's try a 20 pixel for the top there. So that made it go more up. So maybe we just do, I think we just leave it as is there, leave it as is for now and we can always add in a top later if we need to. So we have that sitting there, which looks pretty accurate to that. So now we need to build out this structure over here. So we'll go back into our actual html and we're going to, this is something make a new section because there's an idea of socials, but I don't think we're actually gonna be using the idea for main or socials, but I'm just gonna have a habit of giving an idea to eat to the sections um, just because it's good practice if we want to switch it up later. So inside of this section we are going to create a okay. And that div is going to be the holder for the all the social links. So what we're gonna want to do is we're going to want to use the images and we have an assets and then we have our logos here. So what's the first one? We have instagram. Yeah, So we'll do black instagram and we'll see are all this instagram and you're about to watch it be massive when we go over here because they are big SVG files. So we need to of course set the size. So let's go back over to our CSS file and we're going to make a logo class and for the local class we are going to set it to how big is it? Do I have each of them here, 64 x 64? I think it's gonna be bigger than I want. But let's try it with 60. You can't just type 64 pixels. Okay, 64 pixels right. 64 pixels helps if you actually give it the class where the second I start recording myself, I just absolutely make no sense. I think that looks a little bit big. It does. Let's try. Mour sure. 56 looks a little more accurate. Right? Maybe it's still tiny to think, but I think it looks because this is still small. Yeah, I think that looks good actually. Probably was more accurate. The 64 when I zoom in but I'm thinking I like the look of this a little bit better. So one of the things though is we want these to be links and right now if you click on this obviously it's not a link at all. So we want to go back to our html and we want to actually wrap that image take in an a tag and for now I'm just gonna give it a hash, we'll hook those up later but if we go back over now you can see that this is an actual link which is perfect. Um so we have a total of five of these so I'm going to highlight this, I'm going to hold down option and shift and I'm going to hit down 1234 more times. So we have five of them and I'm going to change all of them here. So what do we have? We have twitter next and we'll change our route to twitter And we have the Dev one next that community, I should have named it the depths a little bit confusing, I should rename the name um and they get up in Lincoln, get hub Lincoln then get help. Yeah and perfect. So We have these two do as you can see this is very nice looking. Oh I need to this. Why is that blue showing up? That's annoying. Okay, we have to fix that anyways so obviously it's not at all. The right position is facing is terrible but they're all there. So now we will. Oh so this issue here is part of because of our absolute positioning so to fix that we're going to want to go to our CSS and to our body here we're going to say overflow X. Hidden if we do over fool why? We'll be able to scroll the page at all. So now um mhm mhm Yeah. What is causing this to be so exceptionally large. That should be working inspect. I'm assuming it's this, I don't know why this is 1800 pixels. Yeah, These are all set. I would love to know why it just decided to randomly give that 1800 pixels. But okay that's fine. We're gonna build the container says anyway so we'll worry about this in a second. That's super weird. Um to be none. Mhm mm I don't know why it's not working. We'll figure it out. I swear it's just like test my patience sometimes. So we're going to now give the um no, let's see. We're gonna give the main, we need a container property here. So we're gonna do a main social container. I'm gonna put it above the logo just so it stays with the main do I mean socials, peter and we're going to assign that to the step here, Sociales Tina. We're going to give that our border on the top which is a stimulant creed felt line. So we're going to give that the border. We're going to do four pixels. We're gonna do it solid and we're going to go over here and take this color again. You see we have it as for here. I usually use for pictures of my standards. So I was just me assuming I used for um perfect. So that is working again. It's obscenely big. but that's okay, we're going to fix that. So right now we have everything on this side but what we want to do is actually shove it to the other side. So we're actually gonna use flex to help us out with that. Um So we're gonna be using some of our built in bootstrap classes here. So I'm gonna say I'm gonna give it deflects, I'm gonna say justified, justify content and which perfect it is doing there. Uh huh. And then I really wish it wasn't so far over. But anyways let's go back over to our CSS we're gonna do that main container there and we will give it a with a set with so that it doesn't do this. Uh Let's try 600 pixels and see if it's too small. Oh yes, definitely too small. Oh okay, so we need to give the section so it's sticking to the side because we need the section to have the justify end as well. So we're gonna go up here, we'll give it a class deflects and we'll do justify and and perfect it'll shove it over there. Mean just Max Let's Let's say 100. Well it's the Treasury thing. No uh try max. It's 100 content. Thank you. Mhm Let's give this this section here. Uh this section mm Let's give it a width of 100, make sure that I am. Oh my gosh, I was doomed in that whole time. Set us up. Okay. I was so confused to why it wasn't working and I was zoomed in sometimes amy Well the nice thing about these live cast as you get to see the very real nous of me getting my brain to work. I was like I changed overflowed ahead and there's no reason this shouldn't be working. Okay so let's get rid of this. Perfect. So now we just need to fix the spacing issues. So we would like a good solid padding at the top there. So we are actually just yes, let's put a padding in the actual social container. Uh we'll do padding. Uh huh three pixels and see how that looks. That's good. But we'd like it to be on the side as well because we wanted to be a little bit over in the slot. Uh We need to move that to the end. Um So what we need to do is we need to we have a 40 pixel margin on the side. So we need to a margin right? And we need to override that with a negative 40 pixels to get back to work. I'm going to move that up above my padding. So it should be straight to the end. Come on. Perfect. But let's actually just change this to the full padding. Um and I would like that to be a 40. So it's even with this perfect. I'm just doing it because it'll be the top and this will be nice and even, but you won't really see these sides, so I'll just do the full padding as opposed to specifying right and top there. And now we just need to add some padding in around the individual ones there and for that I'm just going to use a preset bootstrap padding. Actually, I'm not gonna use margin because it is an image. So I will do a what's going to do it to all of them at once. Cokie over and we'll do AMX two and that space is it out in between which looking pretty similar I'd say. So now we have this here, we will have some issues with responsiveness but um for the most part it's okay, we just obviously Pete oh are now far isn't showing up for that's good to know, we're going to have to work on that later. Um but we're going to have a video dedicated to fixing the responsiveness later. So I'm not gonna worry too much about that now. But yeah, that took longer than I thought because of my um obsessing over the screen size when I was just zoomed in. So in this video here and then we will build up the skills in the next section. Thanks for tuning in