Hey everybody. So today we are going to continue on with the portfolio series in the last one we worked on building out a rough um example template in sigma. But I discussed how I had created this one that you are all welcome to use beforehand. It was just a bit too time consuming to film. Um So today we're actually gonna get started with building out this um design in actual code. So I've started a new project folder here. Um First thing we're gonna do is we're gonna kind of set up the structure of it that we're wanting. So we'll start with our classic index dot html file. We're going to add our afghan Js we'll add our style dot CSS we're also gonna add a folder for assets. Now for our asset, I have already compiled everything that I used here. I think I mentioned this in the previous one but I sourced all of the logos here from U. X. Wing because it's completely free to use commercially without attribution, which is fantastic. Um And I'll just start with the one that I need and then choose from there and download it straight away. Um The arrows I got from picks obey. I just kind of edited them a little bit to make them work for what I wanted. Um But the one thing we still need to do um is you'll notice that these two are black but in our design they are actually this teal color so there is a free editor inside of the UX way. So what we will do is we're gonna go ahead and import these in here and then edit them. So we're gonna open spG, we're going to go to Mhm. Uh huh. We'll start with this one here. Open this, will select it there and want to click on the color and then we're gonna go to our portfolio and select this color here and copy that and then paste that into the hex there and then simple as that, that color has changed and then we'll just say that svg there and then what we'll do is we will already did the other one beforehand. So okay, let me just get rid of this one there. I just want to rename these so we're going to rename this to man working and we'll do the damn symbol. We're gonna go ahead and we're going to drag these into our asset file there and Mhm. We're also going to use going to do everything, we're going to un select these two because we already have some in here and we'll just go ahead and drink those also into our assets file there. Now, all of our pictures are ready to go inside of our assets there and so now we can start building up the actual structure of our application. So we're going to go and we're going to first do some um structure setting up so we can make sure that we are importing both our script and our style sheet into our html file. So I'm going to do the bank tab there just to create are rough um what can I think of the word template um of that html file I'm gonna name in my portfolio just for the heading there and helps if I spell portfolio right then we are going to add in our style sheet. So if you type link, if you have a minute um your bs code, you can just click link dot CSS. It defaults to style, which is why I always name it that, but you can rename it anything there. And then the scripted, we're going to include as the last thing in our body. All right, well, at the very end of the body section of our html, so we're going to do a script source and the source is just gonna be app dot Js there. The other thing that I want to do is I'm going to import bootstrap into this application, we're not going to use it for a lot of the responsiveness because I'm going to be using a lot of kind of absolute positioning in this app based off of the style that I'm doing. Typically bootstrap is fantastic to use for responsiveness but we're going to use the strap for just some smaller components and we're actually gonna do a lot of the styling ourselves. You're welcome to do it. Whatever way obviously works best for you. I'm just going to hand write a little bit more of the CSS um just because I also feel like foreign portfolio, it can show off what you're able to do, even if it is not necessarily best practice in a professional application, if that makes sense. So what we are going to do is we're going to go to Bootstrap and mhm let's get started here and we're just going to use the c the end, so we're gonna start by copying the CSS and we're going to load it above ours so that ours overrides it if we want any of them to be overridden, which I do believe we very likely will. And then we're going to take the one that is bundle. So we just have all of the javascript in one thing here and we're going to put it above the app dot Js import on our body. So to confirm this is working, what we're gonna do now is we're just going to make a simple H one. I'm gonna do a classic Hello world. And I'm also giving the class of primary text which is just a standard bootstrap class there. We will start our live server. Did I spell something wrong? Private mary text, my portfolio, we got our style sheet in there. What if we but Oh mm yes, my misremembering Yeah, yes, it's text. Primary and look at that. Perfect. So that is all hooked up and now we can get started with actually building it out so I'm gonna separate these and just actually reorder our window here because it's easier for me to be able to switch back and forth this way and now we're gonna go ahead and get started. Um We're we can start with building out our not far up here so for the Nav bar we're going to use a lot of the typical bootstrap nav. Um So we're actually going to use the responsive feature of the knob even though we're not gonna be using the responsive feature for a lot of the other parts of bootstrap. So if you're not familiar with it, look at the bootstrap nav um you can see the different kind of examples to work off of here. Um But I've worked with Bootstrap quite a bit so I'm able to just kind of write it as we go. So we're going to use the Nav there and then we're going to give it a class of not far, we're also going to do now far expand large and this is going to help us between going uh this is gonna help the responsiveness, so we're gonna have our full sized knave bar at the large size breakpoint that's built into bootstrap but we're going to have the mobile version at the medium and smaller. Um We can also change it to medium if we don't want it to be to break down into the hamburger menu until a little bit later. Um and then we're going to give it to give it the button for the mobile version. So we're going to give it enough our toddler class. This is again these are all bootstrap classes so if you're not familiar with this definitely um Look at the documentation there. Um It has a data toggle of collapse. We're going to give it a data target which is going to be the I. D. Okay. And we'll call it not far. Mm. Mhm. Yeah we'll just call it that far. Um I'm worried that's gonna conflict even though I don't think it will uh we'll call it nap bar now. Yeah. Um Aria I think that's the standard that go within um this truck as well. Aria controls also going to be from the nap Barnabas. I can't play today. Are you expanded is going to be false and the label will be I'll go Haitian. All right and say that in there and then for the button, what we want is where you want to have the actual icon in here. So we're just gonna do a span and we just give it a class of not far toddler icon which is again built into bootstrap if you want to use your own icon instead. You're highly welcome to do that. Now if we go over and we look at our I went the wrong direction. Oh I think we need more oh we need the actual items. I think it's also too big this way. If we do it smaller we might be able to see the button right now I like to you I don't know how I open twitter, I'm gonna actually reverse these so that I can keep this not as a full window. Okay so for the Nav now we are also going to go ahead and create the actual list of items in the knave bar. So we're going to do and justify the content at the end. It already is a flex based off of how bootstrap hasn't set up there. And these are all booster crosses that I'm currently using right now I'll be doing it a lot for certain things until unless I'm trying to override it with my own CSS for really specific things. So um this is not going to be a lesson on on Bootstrap but um uh one of our our designer Adam has done a fantastic series on starting to use Bootstrap so definitely watch that if you want to get a little bit more familiar with Bootstrap as a whole. Um we're gonna do collapse and knave bar collapse as our next process for the um mobile versions there. And then we need to give this an ID to assign the button too and that I. D. For the data target there is that not far Nav. Now we can start creating our list. So I'm going to do a an ordered list and I'm going to give the honor list a class of bar have and then we're going to do L. I. Which is going to have the class of nav item. Again these are all these drug classes and then it's gonna have that anchor tag with the link the link. Right now I'm just gonna keep completely empty but I'm gonna give it a class of nav. I am not items that's not going to work. Sorry the brain's going all over the place grab link and that I'm going to say what's our first one which is going to be about right now to save time. I am just going to hold down option and shift and head down and I'm gonna make four of those and I'm gonna change those to the other words which is skills work in contact if we save. Why is this not working? Did I miss something that I needed? Yeah. You know what our Hello world still there to this not updating the stock life server and we're gonna reopen with the live server. Excise TML Nor hell a will is still there? Why can't I see anything student out far light. Really That. Oh okay so we have it there. That's super bizarre. I feel like I'm definitely missing something here and yeah let's inspect. It's always the safest way to do it. Our body we got our nav our button which is not showing up padding top. Okay so let's increase our padding. Maybe it's just really weird because these should be showing up. Mhm Let's get rid of the collapse. Sure. Okay. I was our issue. Yeah, but that's what mm. Ah I see the issue. This is what you say now far collapse. Hot nap collapse. Now that's going to work a lot better. All right, we'll work on some of the kinks as we go with everything else but we'll stick with that for now. No. Mhm. Now we have these obviously this is not how we want them to look. So we are going to mhm make a class called nap text and we're going to do that in our styles dot CSS sheet. So to a nav text. Oh I missed an important step and that is importing our fonts because I just was about to try to use my font family and I realized I don't have it. So we do have two fonts that we're gonna want to use. Um and they are roboto and this President microphone but I'll go ahead and add it myself again. So for Roberto we want the thin light. Now we're gonna add all just a regular I don't think we use black for anything but just in case. And then we we're going to go back and we're going to search a permanent marker which is the other thing that we use and this one only has one style. Now we have all of them combined into a single thing. We're gonna switch to the import link here. Um but I'm going to cut out the style text, I'm actually gonna be importing it into my CSS sheet. So I'm going to go back over to my CSS and at the very top there, I'm just going to import all of my farm families up there um for how to use them inside of your sexual CSS file. It does explain that on the google fonts here. So our font family will look like this. So what we'll do is we'll do that there will do a font weight of What's the bold? Bold is 500 I think Another bowl, 700. We're going to 700. Um We'll do a font size. Oh gosh, the one thing I will say about this is if we look at the design, my sizes are really off in this design. Um When you go to actually build it like this Nav looks massive. Um if we build this here, I don't think we ever want to have to have the buttons that big. I didn't design them. Um again, I'm not a designer so I didn't do a fantastic job with that. So we'll probably be changing a lot of font sizes and stuff as we go but a lot of that's gonna be personal preference so feel free to always just adjust that as you want. Anyways I have, this is a 36, looks super big. Um So I'm probably gonna start with something like a 24 and see how that looks and then we don't want it to be that blue color, we want it to be a standard black. So we've done that in our next class, we're going to go and we're going to actually give the knob text class to all of those um a Lynx there so what we can do to make this easy for us is we can just do you can put the cursor where you want it and hit the for all the spaces. I'm gonna hit the arrow so it's not highlighting that link word that space and then do a nav text and safe. Now if we go back over here you can see it's looking a lot more how we want, we're gonna fix that hover later because obviously we don't want the hover to look like that. Um But you can see that the links are all there. They are using that robotics class. You can confirm that by actually just clicking over and you can see this is 24 pixel roboto sans serif and the color just like we want there another thing that we're going to actually put here is we're going to give our body just a standard um padding on it so go ahead and do body. Okay do a padding of 40 pixels and perfect but this has its own padding if we inspect it here. This has its own built in padding that's where's my now. Mhm. Yeah it has its own built in padding for both the actual button and this. So we're going to change that. Um And we're going to use the pre done patting classes for that. So in this one has one here. Um So we're going to change that to that. Why is um your vertical axis? So it will be the top of the bottom X. Will be your horizontal axis which will be left and right. Um And then we're going to take all them off the individual ones as well and just we want to still have the space in between them. So we're just gonna do a P. Y zero there. Another option is to just hold down option and click between them all. So we'll do Py zero and now it's actually sitting a lot better to where we would like that there so you can see that that padding is equal all the way around there. So we have now done that knave bar the structure took a little bit longer than I was expecting. So I think I'm actually just gonna go ahead and stop here for this video and then in the next video we will jump into the actual rest of it