Build and deploy a portfolio website [Full Tutorial Course]

hello my name is Kevin and just in case you don't know me normally you can find me over on my own YouTube channel where I talk mostly about CSS with weekly tips tricks and tutorials I am so extremely excited to be here on free code cams channel to bring you this tutorial where we're gonna be looking at how to build out at this page now this page has a lot of fun things to build out and we're gonna have a lot of fun with it because for me I'm a CSS evangelist I love CSS and one of my big goals with this not only is to build up this cool page with you but I also hoping to not only show you some of the cool things you can do with CSS we're gonna have a cool page we're gonna see some cool CSS stuff but I'm also CSS gets a bad rap and a big goal of mine is to help you see the light a little bit I'm a big fan of it I'm hoping my enthusiasm comes through and wears off on you a little bit and helps you fall in love with the CSS and see that maybe it's not as bad as you might have thought it was if you're one of those you know if you get a little frustrated by it every now and then we're gonna be building this out with just some plain old HTML and CSS and a little bit of JavaScript and near the end it's a really simple build I'm structuring this way it's all gonna be static files but I want to allow you to do what you want with it so if you're so if you're coming from like reactor view and you're looking for a portfolio up you can take everything you're learning in this and apply it to making something like that or maybe you want to just up the game a little bit with a static site generator you want to build this with Jekyll or upgrade it with a lemony or something like that and just make something really cool I want to leave the door open for as many people as possible so whether you're just trying to get something together you're just comfortable with HTML and CSS we'll be good to go but if you do have these you know if you do want to take this and do something bigger with it or bring in the languages that you know you should have no problem at all doing that now one thing that's really important before we get into it though is I am assuming you already know a little bit of HTML and CSS this is not an introduction to HTML and CSS it's for people who've already started using it in your building your portfolio now so hopefully you've done a little bit of stuff along the way to put into that portfolio so we are going to be looking at using flexbox and grid and custom properties and doing lots of fun things and while we're doing it I'm going to do my best to explain why I'm choosing these all chins and how they're working at all of that they're not in-depth tutorials into any of those topics because then this would just drag out forever we do want to keep it as concise as we can I'm not gonna skim through it too much but I'm assuming you already have some knowledge on these topics know if you've never used one of those things like custom properties our grid before don't let that scare you away they're not that scary they're not that complicated and hopefully they are a nice introduction in this project for you to get started with them and you could take what you learn here and start applying it outside of this project as well now if you want to be able to access this project you can use the link that you're seeing right here on the screen right now that link will bring you to an Adobe XD file and I want to show you a few things with that file so let's go and take a look at it right now so when you click that link you're gonna be brought to this page right here where you're gonna see the mobile and desktop options to look at so you can choose the one you want to look at let's go check the mobile one out first now one thing I don't like about this is it brings you to this comet view so if you want to leave me a comment you're more than welcome to but you can see here it's even flashing at us it's telling us that we want to come and look at this specs one here now if I go in the specs you can see I can see the colors that I've used so I get the hex codes of stuff you want you can see the fonts that I've used the font weights that I've used and all of that information and you can come through and look through everything there is in here you can click on things to get information you can copy the text that I've used you can get the text properties the font sizes of individual things everything you need for all of it is here now there's obviously like the top and the left property hopefully you're not going to be using those or even the width and the height and all of that but you can get the individual properties actually we should have been looking up here you can see the font the weight the size all of that stuff and if ever you need to go back you click on portfolio website and then we can go and look over here at the full screen version of it and you can get all the different things that you need to get from that so nice and easy to do and you'll also right now it's not set up you'll also be able to download the assets from all of this as well so if you want the images that I've used yours but ideally you'd be using your own images anyway and not necessarily be since this would be your portfolio site but if you want the sizes or stuff like that the links should unlock all of that for you and you should be able to download the assets if you want them so now we know everything we need to know to get started what are we waiting for it let's go all right so here we are about to start a project I'm so excited because I love starting new projects so what we're going to be doing in this is just setting the very basics of it up and one part of that just really quickly is I have supplied all of the images here in the images folder so those are the ones I will be using if you don't want to be following along within scrim but you want to be doing this on your own and your own code editor or having your own files what you can do it is in your script editor you can click on the little gear icon that you see there when you click on that you'll get some options one of them is to download the zip and when you download that it will give you all of the images along with any code that I have on the screen when you hit that download zip so if you do want to download it later on when I have some work done to compare to what you've done you can also do that if you run into any issues or something like that if you are coding it on your own or if you work completely in the screen but editor and then you want to download all the files at the end you can do that this could be something you're doing with your own images you don't have to be using mine if you know if this is for your portfolio please use your own images and set everything up the way you want to be setting it up and so we do have a few things we're going to have to do to start this up so the basic document structure here we're going to need our doctype HTML and we need an HTML open and HTML closed just like that now if you want you can also come on your HTML and set the language to be English or if you're setting up your site for another language of course you can go ahead and do that to whatever language your website is in it's not a hundred percent essential to do that but it does help things know what a language your website is in of course we're going to need a head so we can do our open and closed head and we're going to need a body and we can close our body like that so for the rest of this video we're going to be working in the head and then in the next one we'll graduate off into the body of our document so if we come and look here the first thing I'm gonna do is a meta tag for the car set utf-8 that's just pretty much standard and there is one more meta tag we're going to need here which is our viewport so a name is equal to viewport and we're going to do some content in here and our content is going to be equal to width equals the vise with comma initial scale is equal to 1.0 this is to make sure that your website actually functions properly on small devices as well as big ones if you do not include this and you open your website on a phone or a tablet or any other mobile device it will be like the desktop site zoomed out on your phone which will just look terrible so this just ensures that everything will work responsibly and everything will be great and here we can do our title I can calling mine dev Jane port folio web site the last couple of things that I'm gonna do here is I'm gonna add a couple of links one of them is going to be to normalize which this is actually already brought in by scrim buffs if you're downloading through that little gear icon that I showed you it will come it generally comes with a normalize in there already because scrim but by default users normalize if you don't know what normalized is it's a CSS file that pretty much helps even out all the differences between the different browsers because there's not huge ones but there are some differences between them still it irons out some bugs tries to make them all behave in the same way it just makes it a little bit easier to have the website looking the same in all of our browsers and the other thing that I'm gonna bring in right now is the link to font awesome so you can actually copy this directly from the scrim editor here but both of these I have got from CDN j-s com so if you want to get other links to things you can always do that now I have linked to the all thing here of font awesome I'm not going to be doing a deep dive into what font awesome is but we are using it for the social icons down at the bottom you only really need to access the brands one but I'm putting the all here just in case on your site you do want to have access to more of them but if you only need the brands you could always change that over either go to font awesome they'll give you a unique link views that's for if you only want the brands or of course from CDN Jas you can also get that brands link we're also going to need to get into the google fonts as well as our own CSS file has added links here as well I'm not going to be doing that I'm gonna wait until we're writing our own CSS before we go ahead and do that so because we will be waiting until then to put both of those in for an we are completely done we're going to be moving into the body setting up the header in the next video I look forward to seeing you there right so here's the entire project that we will be building and just as a reminder you can access everything you need for this by clicking the link that is on the screen right now that will bring you to the Adobe XD sort of link file thing that I have so it gives you access to all the text the colors the font information and font sizes the font families all of that if you want to follow along with how I've set it up but of course you can just follow along with what I'm doing as well but it can also make it so you can see it on your screen while we're coding because that can be convenient if not I have also broken the different sections down into different slides that I'll be referencing back to as I'm coding things up but for this first one where we're doing the header only the header has the logo and the navigation in it which is hidden away right now so I'm not going to be opening this up too often in this video but both of those are there and again if you do need to get that link I'm going to link to it in the description of every video so if ever you didn't click on it or you close the tab you'll easily be able to access it again so let's come in here into my body and the first thing we will do is put in a header and I'll close that header off and inside of my header we're going to have a couple of things I'm going to a div class of logo and close div and inside of there I'm gonna put an image SRC is going to go to my image folder dev Jane dot PNG and I'm gonna put an alt tag on this so it's for my alt text I'm going to leave a blank though and a lot of people think that if you have alt you have to put something on it you need to have the alt there it's important that you have your alternative text but if it's something decorative and a logo it's generally decorative you can have that just as a blank alt like that it is perfectly fine you don't need to put logo because if the person here's logo it doesn't help them if they cannot see it in the first place so we can just leave it like that there is no problem whatsoever and then let's come down to here and I put this in a div because maybe you want to set this up as an SVG or do other things with it so you know we could do a lot of different things and by we're always styling the div that it's inside maybe this is text there's different options that you can do I am trying to make this as template as possible the next thing we need in here is a button I'm gonna give this a class of nav toggle because name sort of speaks for itself that's going to be the toggle button that we can click on to open and close our navigation and I will give it an area label of toggle navigation because there's no label for it there's no text that tells us what this button is being used for so it is important to put an area label on there to help out a little bit for accessibility reasons and inside of that I am going to do a span class of hamburger close span there's nothing actually in there it's a blank it's just gonna be something we're going to style up and make it look like our hamburger because we're gonna animate that and do some fun things with it as well last but not least in our header we're gonna have our nav itself and I give this a class of nav and you might say that's a little redundant and it kind of is but it's the way I like to work so we're going to stick with it if you don't want to have it you don't need it but when I'm writing my CSS for the most part I like to be selecting classes and just single classes I'm gonna make a couple of exceptions in here for say the logo maybe and a few other things yet you're gonna see that I do like putting my classes on everything and I'm gonna be using a system called them as well and so it would be nav double underscore list and I realized that that might drive some people a little bit crazy having the double underscore there the reason I'm doing a double underscore is with the BEM system this is saying that my this list is a Cub component of my navigation here I will also never nav items are not links everything is gonna have a class and it's gonna it just makes it a little bit easier when you're reading the CSS later to know if something belongs as part of something bigger or is it a modification of something you're gonna see we're gonna have a few examples of that throughout this project and it's maybe a little bit longer to do a double underscore we're gonna have times where there's a double - but it is a choice that I'm making very specifically because AI do think them is I'd like them but I also think it's going to make it easy if you want to go into the CSS later to modify it to quickly be able to identify what you want to change and to be able to change it very fast so in here we're going to have our li so li class will be a nav item and then in there we can have our links a href we're gonna set these all up after so I'm just going to leave it as a hashed at the moment and that first one can be our home section and I'm just going to copy this paste paste paste just like that and obviously if you wanted to add or remove sections from this it would be very very easy to do and for our header that is everything that we need so in the next video we will explore the introduction section or that main section that has the picture with the name in it look forward to seeing you there all right so I've decided we're going to be doing the intro section as well as this because both of them are relatively simple so we're going to do both of those in one shot before moving on to the next one looking at here it might look a little bit complicated but you know with the green bar you might be laying how are you gonna do that don't worry about that looking at it we just need to know what are the different pieces of content we have here so let's come here I'm gonna put a comment at the top this is gonna be introduction I'm just to try and make it a little bit easier and it could be a bigger comment if you wanted to and we're gonna do a section on this so section class is equal to intro and I'm also going to give this an ID of home you don't the ID could be different but it's what we're eventually going to set these up and actually we're here so we might as well do it we can set my link of home right away to work on that so it's the only reason I'm putting an ID on it I personally don't use IDs for styling things I only use IDs for anchors like this or sometimes for JavaScript functionality and some other stuff but I use my classes for styling I use IDs for anchoring because that's sort of what they're good for and clothes section in this section we have a couple of things we're gonna have our h1 I will give this a class and remember I told you everything is going to have a class on it so it is gonna have a class of section title because it is a title of my section but I'm also going to be modifying that a little bit so we're also going to call it my section title intro and I realize again that that's a little bit long people might not like writing all of this and them is a choice that I am making but in this case I do think is a worthwhile case because it makes it really obvious what's going on so the double hyphen here is saying that it's a modifier class so it's going to modify this section title to be a little bit different from the default section title because there are some changes that we do need to make to that so in my section title intro we do have a bit of text in here so most of it I'm going to copy and paste but for now I'm just gonna write hi I am because here we do need our strong tag it's a short bit of text Jane Smith and close strong and we can whoops there's my close of my h1 there and then we can come in with a paragraph class is equal to section subtitle and I'm going to do a section subtitle intro because it's going to need some modifications on there and we can say front and Dev closed paragraph and last but not least we do need the picture so we have an image the image is in our image folder and the name of it is dev Jane 0 1 so they have Jane 0 1 dot jpg again you can feel free to replace these with your own pictures at different dimensions on these pictures should work okay but if you do want to use it just download everything you can check the dimensions on the picture itself and you should be good to go and that is it for that section so let's come down and do the next one here which will be my services I like having just a comments at the top of things or sometimes if we have lots of closed divs I might put some comments to say what those are actually closing not that it's hard to navigate but it just gives you a little visual clue when you're scrolling through a whole bunch of stuff where a new section of content is starting so here we can do my section class equals my services could just be services I guess and we'll do that for the ID services we can come back up into my links or my my links here for my navigation and add service is there so this is going to link with the ID down here and we can close that section off and inside that section let's just go quick take a quick look at what we want just we have a title with a little underscore on it so that's going to be another little modifier class because we're just going to do that as a pseudo element on the title and then we need three columns and a button down at the bottom we can have an h2 class is equal to section title and that will be a section title services what I do close h2 and so that's the me the title the we can control the color the underline with the pseudo-element all on there and then we need to have three columns so for the three columns here I'm going to do a div class services so that's going to help us create the three divs are the three columns that we need and inside each one of those I will have a div class called serve this so that's my individual service we can close that div and inside each one of those will have an h3 close h3 and each one will also have a paragraph I'm going to put a comment here close close service because we will have a whole bunch of divs and the indenting on that is a little off so copy paste paste and I'll come through and do the text on that off screen afterward we do I forgot to close my services so we can say that that's my close services and then here I need to have an a href is equal to I don't know what we'll call it yet there'll be my work we can probably just call it work and then the class will be equal to BTN and close a and in there my work so that is the structure that we are going to need for that section when we're off screen I will come through and put all the text in so when you start the next video everything will be exactly the same but the text will be there and we can continue on with the next section we have in the site all of the text is in forgot the closing paragraph so those are also there now and we can move on to the next section of our site so that one will be it's just call it about me and let's go take a look at what we're going to need for this one so just like the title up above it is pretty simple there might be a few things in here you may not be sure about but the overall organization and structure of this one is pretty simple the next one will be two so we're just going to finish off all the HTML in this one because there isn't too much to do and then we can get into the fun part which is our CSS so here we need a new section class will be about me and we can give it the ID just equal to about I am Canadian so boot boot me let's might as well come up right now and a link that about and I think this one will just call it work so we'll put that in right away that's where that we've already had that set up for our link there so that is good closed section and inside this section what do we have we have another title so h2 we're going to see this a lot class is equal to section title and then section title about this one is who I am close h2 we will throw our paragraph on here for a subtitle so class is equal to section subtitle and section subtitle about closed a closed paragraph some people like using headings as subtitles but in general it's kind of frowned upon a heading sort of the next level of content so you have your age to then if you had like a sub section to your h2 and yet of several h3 that would make sense a little bit like here we have our what I do is the section and then we have subsections we have design and development we have e-commerce we have WordPress so by having those different sections in here that's more what a heading is used for it's less a title and then a subtitle so just using a class on a paragraph is generally a little bit of a better way to do it you could also if you wanted to actually put in a new header and closed header for each one of these sections for every single section like that as well so you're saying this is the header for that section I'm not going to bother with that but if you wanted to it's you know it's very valid to work that way as well so in there we have that and then I'm gonna have one more thing I'm never div class equals we'll call it a vote me body so it's like a subsection once again that's why we have the double underscore here we have about me and then this is a subsection to that so or it's a component of my about me so I'm putting a div all right that's why we have the double underscore there and then in that div we're gonna put in the paragraph or we have two paragraphs of text closed paragraph this is important that and you know you could technically get up to five paragraphs in here or have only one paragraph if you wanted to and it wouldn't cause any issues whatsoever but it's important that we group it all together just to be able to handle exactly where it's going to go inside of this section and then after that we have one more thing we're gonna need which is our image I don't know if it's really a bus but we'll stick with that and that's image def Jane dot zero two dot jpg there we go so that is good closed section and as I mentioned we're gonna finish off all of the HTML for this one so this is going to be my work my work this one's gonna be pretty simple so sir section class will equal my work ID we said would be work so in here we'll once again we're going to need our h2 class equals section title I don't know if we're going to need to have a modifier class on that so I'm going to leave it like that right now we might need one to change the color of it because the color of this one is going to be white and that's a little bit different hmm we're gonna see but and actually I'm looking at it now because these have a background on them and this one doesn't we might be coming back in here to make some small changes later on but for now let's leave it like this and also I haven't put any text I'll do that off-screen so you don't have to see me copying and pasting class is equal to section subtitle and the part that's gonna be the most important here is we're gonna put in a div class I'm going to give this a class of portfolio inside the portfolio we're gonna have each one of them is going to be an a we're going to replace the href on this eventually but for now we'll just put a hash tag with a class of portfolio portfolio for folio double underscore item because it's the individual item close a and then inside each one of those links we will have an image SRC I'll put the first one pork vote you can't spell portfolio today port folio 0 1 JPEG alt I'm going to leave blank for now but that could be something you fill in on your own if you want to put a little description of what the project is and the class on each one of these will be portfolio double underscore IMG because it's the portfolio image portfolio portfolio item 0 1 I'm gonna speed this up as I do it because I think a little comment on each one of these will make it easier when you're setting everything up alright so that is done let's hit save because I haven't saved yet and let's see hopefully everything is actually showing up on here so it looks like everything is there we didn't get any errors my images are all loading in so we're off to a good start on all of that I'm going to close that off because we don't really need it right now and last but not least footer awesome we're right at the end the footer is pretty straightforward so we do footer close footer and in here we're gonna have a couple of things we need in href of male 2 I'm gonna hello at Jane dev with it we'll put a comment down here ahead class is also going to be footer link and that can just say hello at Jane dev close a we play replays with your email address right so there you can just make sure that this and this here are your own email address if you are planning on using this for your own a site you well we have a class of social social List clothes ul I'm not doing this as like a footer thing and I'm bill this is my footer link and actually that should be a double underscore on there I'm not doing this because technically it could be something that could be used in other places it doesn't necessarily have to be in the footer so I'm not calling it like footer social list or something like that but it could be if you wanted it to we're gonna have an Li with an A in it close a close L I the list item itself will have a class you guessed it of social so she'll list item to me a lot like our navigation class is equal to social list link this is a place where you could have another class on this also of like unstyled lists that you could use for both of them and just remove you know because both of them there's a lot of similarities between the two lists and then on top of that they'll have some modifications to it so if you wanted to take that approach to it instead of the way I'm doing it here that would be perfectly acceptable and result in a little bit drier code in the long run so I'd be all for that for now let's put some eight reps on these they're just gonna go to the generic site so I'm gonna speed this up well I put them all on alright and there we go and you'll see for now just put an ABC we should have a D on that last one what did I do wrong I put the D in the wrong spot so ABCD as the links because when I put in the font awesome and I bring I'll explain a little bit of how that's working just in case you want to change it out for your own icons so when we do the footer I'll go into more detail on that for now that is everything we will probably be jumping back into the HTML a little bit as we write our CSS just in case there's a thing or two along the way that we need to add but for the most part that is done that is the structure of everything we need so from there we can go ahead and start styling this up the fun parts are starting in the next video actually styling things up which is always the most fun if you want to get the different font information the weights the colors the sizes all of that and the colors in general that I used in this you can click here once again to get to that Adobe XD link now do you get started on this in this video we're just gonna be setting up some of the general things I'm gonna be doing a lot of CSS custom properties in here if you're not super familiar with them they're going to make sense pretty quickly so we're gonna be starting with that we're going to be setting up our basic fonts and getting all of that set up in this one so the first thing we need to do is actually create a CSS file so if you're in your own code editor you can do that how you're used to doing if you're following along here in scrim ba' you can right click in scrim be' where it says files and you can make a new file there and actually before I do that I'm gonna make a new folder called CSS and then inside my new CSS folder I'm gonna make a new file called style dot CSS and we can get started in here but before I write anything nothing will show up because we're not linked so I'm gonna come down here and link to my own CSS file CSS and just so we can make sure that it's all working why don't we come into there and say body background is red and see if that worked so I'll save that file I'll save the changes I made there and now we can see that my body is definitely coming in as red so that is fantastic there really quickly before we move on you might have noticed there was a white background on that if you did download these images and you want to follow along with exactly these ones you might have to download again just there was a weird white box on that that had a bit of a extra spacing on it because of the shadow that I put on I have removed it it is updated I'm really sorry about that but you can grab the new images now if you are following along but again I'm assuming that you're doing this using your own images to replace these ones but that has been fixed so if you want to download the images again you can do that so rate once again and we can now get rid of our body background read on that hit save and we can see that that his disappears now before we actually start writing any CSS I I'm going to do one more thing where I'm going to come in here and put a link to the google fonts that I used in my document or in my design so update these with your own fonts if you you now if you like the fonts I've used these are the ones I'm gonna be using the first one is the source saws the code version which is the mono spaced font that was here I only use the regular but I want to make it really easy for you to update so if you did want to switch this out for like for 300 or the 500 or whatever it is you can just update the numbers here or add new numbers to it and the same thing I'm using the light and the black but if ever you need it more you could just change those numbers or you can go over to google fonts to switch this out completely with the ones you want to be using we're also using a whole bunch of custom properties so it's gonna make it really easy for you to update this all the fonts throughout the whole site but you might have to just switch out that link right there with the fonts you want to be using to do it um so coming into here the very first thing I am gonna do is a star comma star before comma star after um to set up my box sizing border box because I do that on every single project it just makes our life so much easier if you're not too sure about box-sizing border box it's just changing how padding is calculated to make it within a width instead of adding on to the total width of something it just makes our lives so much easier when we're setting things up the other thing I'm do is come on here on my route to set up some custom properties so the first thing I'm do is have a font family of if this was my own project I probably call it font family size and then font family code or font family mono or something like that because I do want this to be something that could be used for other purposes I am going to call this font family primary and a font family secondary just in case you end up using different fonts from what I'm using in here I do think that makes the most sense to do so my primary one is my source sauce pro so we can bring that in right there and my code is that one right there I'm just copying and pasting these directly from google fonts the next thing I'm going to do is setup my font weight so I'm gonna have a font weight of regular which is gonna be my 308 font oops that should have a double - and here font weight of bold which will be my 900 now if you're not used to custom properties you haven't used them this is not like them where I'm doing this out of you know just for fun this is how custom properties do you have to work with the double - on here we're gonna have a color of a background which is just going to be my FFF will have a color text which is my 30 30 30 actually a lot of time I do that but I'm gonna call this color light color dark because again we might want to be doing this you might want to change these colors around for your own design and a color accent which is my 16 e 0 B D which is the main greenish color that I use throughout this whole site I'm going to set up some font sizes I'm going to say a font size of h1 a3 R M I always set my font sizes in REMS font size h2 2.25 REM font size H 3 will be 1 point 1 sorry 1 of 2 5 REM these are all things I calculated already based on my mock-up and just playing around a little bit with it will stick with one REM on my body and the nice thing with font sizes are the nice thing with um if you've ever used something like SAS where you've set up using variables variables are awesome they're amazing but these CSS native ones are great because you can actually change them within a media query which was not something you could do inside of SAS or less or any of those other ones you might have been using I'm gonna be setting up a pretty generic media query here of 800 pixels but I do think it works well for this design but it could be something that you could look at changing in your own if you find that it's not working but I think it's gonna work well for what we're doing here and what I'm going to do is redefine my font sizes here to make them bigger at larger screen sizes so wherever font size h2 3.75 REM font size H 3 will be 1.5 m and my font size body will be 1.125 REM and that way at once we hit this we don't have to redefine it within our actual CSS these are being redefined here so everything should just magically change for us as long as it's been properly setup using those so that we can come all the way to here and I can just put custom properties update these for your design and whoops that's I'm so used to we need comments that look like this there we go custom properties there we go and then we can do general styles so in my general styles what are we going to do let's just make some room here and then come back up so the first thing we're gonna select our body and notice that the background down here of var color like so let's hit save and the nice thing with this with the custom property is now if you decide to change the color of it so you can see right now we have the white background on there but if I change this to let's say accent it's going to change the background color to everything to accent like that where the accent color is coming in or if we change it to dark we can quickly change the color scheme of our whole site so let's bring that back up to light for now and then so we have light on there our color will be our VAR color dark so if you needed to change anything you can just invert that no less and you'd have a dark color scheme which we're going to sort of be using when we get down to that at least to change the font colors or when we get to my work area we can easily set that dark background on it just like that other things on here we're going to want to set we do have a margin of zero we'll put our font family on here we're gonna put our VAR font family primary on there we're going to have our font size of our font size body and now you can sort of see where that FS rfw and all of that that I used along the way why I did it I'm gonna line height I use a one point six as sort of a default line height that I like to use on everything so hit save and we come back we should see a lot of those things coming in the fonts are working and a few other things we're getting there we are almost done with the general setup another general thing that I like to do is just setting my images to have a display a block which gets rid of some issues that sometimes come up with images and also setting a max width of 100% on them just so they don't grow bigger and overflow at the side of their parents next up we're going to come and just set up our basic type typography just a word I have way too much trouble pronouncing sometimes we're not prancing but spelling for something I write a lot so we're never h1 h2 and h3 are all gonna have a line height a line height of we're going to try 1.1 and adjust from there but because they're gonna be a bigger font sizes in general if they break on two lines they definitely need the smaller line height on them and I'm gonna put a margin of 0 for now that might have to get revisited but in general the headings you want to get rid of the margins and maybe keep a bit of a margin top maybe a small margin bottom but we're just gonna do a bit of a reset on there and then I'm h1 I'm gonna set a font size a var and we're gonna do our font size h1 and you can probably guess what we're gonna do for the other ones I'm just going to copy this actually and we can set that up with an h2 and that is an h3 and over here we can have our age - and my h3 so if we save that we come take a look we should have some nice big font sizes everywhere except hmm that's really small let's just go take a look I forgot to put Ram here 4.5 nothing will not work so we'll have a nice big font size at large screen sizes but when we get to the smaller ones you can see it's automatically adjusting when I change my screen size and if we come lower down on the site again we should see those titles get bigger and smaller automatically with our media queries so that is really really cool one of the things I love about custom properties they do take a little bit more time to actually set up but then once you're using things and creating things man he just go so so much faster so I think we're gonna end this one here we're gonna skip over the header and the navigation for now we're going to come back to that in a little bit because for now I just want to start doing the general typography but for our section titles and subtitles and then we'll sort of go through the site a little bit from there all right so as I mentioned we're gonna do a little bit more typography here in EV our section title we'll give this a little bit of styling which at the moment I'm not sure if we need to do much on it and we're gonna have our section subtitle I'm gonna start with the subtitle because there's a bit more of an I'm gonna play with that first and then go back into the other one to modify it a little bit so our subtitle here is gonna have a margin of 0 just because I think it makes our life a lot easier because remember we didn't do it as an h3 this is actually a paragraph and because it's a paragraph the font size on it we do have to modify so the font size will be my bar font size h3 and you can again start seeing where these variables can be handy you don't have to remember the pixel value you don't have to worry about the media queries or anything like that it just is going to work and then we had our section subtitle intro we also add the section subtitle about that had similar styling on them or they both had a background color on them of the VAR color accent and the font family for both of those will be my VAR font family secondary they'll probably going to need a little bit of padding on them but we'll come back to the padding in a little bit umm we're gonna have to play and modify a lot on these as time goes just to get them to line up properly in the spaces let's just go take a look and see I think that's working out pretty nicely actually with how it is right now I'm actually really happy with it I'm just gonna play with the spacing on it a little little bit just to see because I think it's a little bit tight compared to what the original design was but it's not too bad you can see here the comma is actually touching that so I think what we'll do is on my section title we'll give it a little bit of a margin bottom of like 0.25 M that'll probably be enough to push it off especially if it's a large font size I always do margins and padding on my text using M s I think it's the best thing it's relative to the font size that way and you can sort of work with it so I think that's really really cool and handy here since we're dealing with our section titles everything on my I like to keep all my typography together which is why I'm working this way I'm gonna say a font the font family should be my font not my font family sorry my font weight on this one should be the regular which is awesome except this obviously shouldn't because that should have a strong on it let me just double check did I put that I do have that on there so let's go and fix that since this should be saying strong dude your drew typography I'm gonna do it up here I know it's sort of a typography but strong it's a bit of a generic thing font weight is var font-weight:bold there we go so we have that working now the question is I'm gonna cheat a little bit this isn't something I normally do or very often do but I'm going to actually take my this and say that the strong tag that's nested in there is display:block just so the jane smith always ends up on its own line instead of sometimes being on a different line like that so i'm not a big fan of using compound selectors but every now and then once you know the rules you're allowed to break them sometimes so this is one of those times where i think it is perfectly fine to go in there and break it the font size on this does look a little bit smaller than what the original design called for so i might play with that but we'll play around with the overall look and if we still find that it's too small maybe we could even change both of them to be the h2 size instead anyway we'll see we'll come back to that once the design is starting to come together a little bit but looking at the small screen size is honestly we're getting close already to what we need there's not a ton of work that needs to be done at the small screens to get everything here to work obviously these need some fixing up and overall there is some work to be done but we are getting close so what we're gonna do is we're gonna end this video here and then in the next video we are going to go in and set up the grid for this and make this work Epple small and large screens now I know you might be wondering why we're not doing the navigation first but I'm gonna come back to the navigation at the end and set that whole thing up because we're gonna be getting into a little bit of JavaScript and stuff to get that working so I'd rather just stick to CSS for now finish everything else come back style that and then add the JavaScript right at the very end so here what we can do is let's set up a bit of a comment so we'll say intro section and we can start styling it up so the first thing to do is I'm going to give it a position of relative I'm not sure but I think we're gonna have some absolute positioning coming onto here so I'm doing that is a bit of a precursor for that lets you know we have I'm actually gonna say we're gonna turn this off but let's just say for now I'm going to say an Ave has a display of none just so it doesn't really get in the way too much we'll keep our logo at the top even though that does have to be smaller but at least it'll give us a bit of a better idea of how everything is going to be looking once everything comes together at these smaller screen sizes and I think actually I'm gonna come up before we do anything else typography I'm gonna come here to like my general stylings and I'm actually going to give my sections a generic padding so padding will be let's start with say 5m top and bottom 2m left and right the tool might be a little bit big at small screen sizes but we're gonna start with that and see what it does the main idea here is it's just going to keep things from touching the side of the screen when we don't want them to so I'm actually not minding that except the line height here I'm actually gonna shrink that down to one because I find the spacing on the lines was way too much I think that is looking not bad but obviously we need to add a little bit of spacing on the bottom of that because it is stuck on to there so that is my section title my subtitle they're both going to need the spacing so I think we can add our margin bottom here of 1m just to give us that nice little space and it's small screen sizes I don't mind that too much this does need a box shadow we're gonna come and do that afterward though and more we do need this to change is once we get into our media queries here and when we start changing this for the larger screen sizes I know I set the fonts to change at 800 I'm gonna set this to change its 600 though my stance on when media queries should come in 600 as again this is a bit of a generic thing your text might change your images might change you're going to play around with it a little bit so I'm doing 600 is a bit of a generic one I like designing from you know 300 and up 600 and up and 900 and up tend to be some nice generic ones instead of focusing on specific devices but your mileage may vary with all of that so the first thing I do is actually now we're going to define a display of grid on here and we're gonna set up a grid I do like using let's say grid template areas I do like I love my grid template areas so in my grid template areas here I'm gonna go on another line just because I find it makes it a little bit easier and we're gonna say title and then on the next one we're gonna do an image and subtitle like that and then we can say my grid template columns will be men do a min content so it's going to try and shrink that down as small as it can we're gonna set our image up so hopefully that doesn't actually disappear because that is for my image and then my text will be set to max content to try and make that as big as possible now obviously we need to get things actually lining up where we want them to be because that's gonna cause a little bit of an issue so let's start off with my intro image which I didn't actually put a clasp on so here we can do clasp is equal to intro image that will help sorry about that so our intro image will be our grid area of IMG um and as I was a little worried about that means my image is actually going to disappear so let's fix that um we're gonna actually say this has a min width of 250 pixels just so it never disappears and that's much better but now my text is stuck to the side there which is no good so here we can do a column gap of 1m just to create that spacing that we want and the subtitle we might not actually be able to use but we're gonna leave it there anyway so that is nice the only problem is we don't want to be stuck there we want it to stick in the middle so I am also going to do a width of min content which should shrink it down and then give it a margin of zero Auto and so it should match the width of the whole div well or the section will match the content that's inside of it and the zero auto will keep it nice and centered when we're at these bigger screen sizes so we can see that it is working nicely but the front end Dev we have a bit of a problem where it is stretching there so that was my section subtitle intro now this is where things get a little dicey because should this be here or should it be up in the typography section I'm gonna argue that it should be here because we're pertaining to layout right now or not pertaining to the type if you think it makes more sense to leave it all in one spot together I completely agree with you and you can go ahead and do that but because we're only worrying about layout right now I'm keeping this part of this stuff down here where the rest of my intro layout content is so for this I'm gonna start by doing in a line self as start which will stop it from stretching down and it sort of fits in to that area a little bit nicer and I'm also now going to say that my grid column is negative 1 over 1 which will have it stretch the whole length and going all the way across which is great except now it's going underneath this because by default they don't want to overlap so to get around that overlapping issue we can are not the lack of wanting to overlap I should say we can do a grid row of two because we have our grid row of 1 our grid Row 1 line and then our two so it's in there now our text is there we want it on this side so we can also do a simple text align to the right I notice that we're pertaining to layout more but at least there we go it is starting to work and starting to come together now my original plan to get this to go underneath like that was actually to use absolute positioning it's absolute positioning the grid work fantastically together but I think we can actually pull this off with relative positioning and of having to avoid absolute positioning sometimes is a good idea so what I'm thinking is on here we can do a position of relative but my left is gonna be negative 2m and if we go take a look see that's pulled this over so that's giving us that space here maybe that's a little bit too much so maybe we can do like a negative 1.5 and I think that'd be probably a little bit closer perfect the only problem now is the width won't match and this is where if you did use absolute positioning and say left is negative 1.5 and you could say right and zero and it's gonna line up perfectly we can't actually do that when we're using relative positioning but we can do a little cheat and I love doing things let's not cheat it's what these types of things were made for so my width is gonna be a calc of 100% plus 1.5 m and that should make the width be 100% plus 1.5 m and then it lights everything up nice and perfectly so I think that's really cool and fun I love doing stuff like that um so that's working I think it's pretty straightforward too by having these together and usually I've wit near the top but I do think it means like keeping these together means them makes them work better and I'm gonna increase the padding a little bit but I think we're gonna want to do this on both of them so let's just come all the way up here we set a background on that so I think I'm gonna set my padding here padding of say 0.25 M when I am let's just see what that ends up looking like yeah perfect so I like that now it's not lining up like my design where I matched that but obviously if the title changed I did front-end dev but say you wanted a different title I could actually break it a little bit where it's actually gonna go underneath the image I'm a tad so I think instead of changing that if you wanted to play with the font size you could very easily play with it but I'm gonna keep it as this smaller font size because it's going to give people more room if they had a longer title without breaking it I think that where the media queries here are would prevent someone unless he had a really long title from this becoming an issue so the last thing for now is we're gonna stick it underneath and add that box shadow onto there so let's go and take a look at how we can do that putting it underneath is going to be easy enough I'm actually just gonna come on the image and give this a position of relative and that should be enough but we can also just to be safe give it as that index of two just so we know that it's coming up on top and now for the Box shadow I like doing complicated box shadows because they can be a little bit nicer looking so what I'm actually going to do because we do want to use it in more than one place I'm going to come up to my custom properties here and create a box shadow here so I'm just going to call it BS which could be a number of things but it will be box shadow and we're gonna do one it's give me a small offset so 0.25 M 0.25 M so that's to the right end down just a little bit the blur will be a 0.75 M and we'll give it in our GB a of zero zero 0.25 except that should be our GB and that should be good so now we can come down and put it on our image but we don't want to put it on this one we want to put it on our image at all sizes so I'm gonna do my intro image out here and give it a box shadow of var vs and that should start by giving us a nice subtle shadow it I think just like that it looks good but I like always coming in and adding a little bit to my shadows so I'm gonna do a comma and then I'm gonna break this onto a second line but if you don't want to you don't have to it can continue right after the shadow is layer on it so if you're doing more than one shadow you can always start with the bigger one first and then like smaller ones after because it's coming sort of closer to us if that makes sense the blur will be smaller as well and rgba 0 0 0.15 and don't forget your M here so the difference between the two of them will be very subtle but it just gives you a bit of a darker shadow that's a little bit closer it's layering things and then the next one's a little bit lighter so it can be a little bit more realistic if you look at things like material design they often have two three shadows deep just to help increase the realism of their shadows so there we go I think that's looking really really cool it never gets too big too wide but that's alright and then you know as we go so it's a nice little focus point it shrinks down and then it shrinks once again and this bar going all the way across like that to me works well at the small screen sizes but if that's bugging you and you really don't want it to do that we could come in at our small screen sizes if this was just a display:inline-block because then what that's going to do is it's going to set the width to be the size of itself so then here we can see it's fitting exactly itself and then at the big screen sizes it will jump back to what we had so you know what I think for the small screen size is I'm gonna leave it like that but if you'd rather adjust that to something a little bit different by all means you know if you rather that bigger bar that matches the image size that is perfectly fine too that is if for this one in the next video we will jump down into this next what I do section and style that went up it should not be too much work and then we can keep on going we'll style our button at the same time since we haven't done that yet alright here we go with the services or what I do section which isn't too complicated to do if we go and look at it right now and it's not gonna be all in place yet but we can see that our text is sort of coming there and we get to the bigger screen sizes we just need to break across on all three so let's start by setting the colors up first so my services I'm going to give this a background color of we'll do our VAR color dark and a color of our color light to start things off I know we have a background image on this as well I always set a background color and then a background image afterward because if the background image ever fails first one reason or another it's always good to be able to get them so we want to go back a step go to our images and then it was called services eg JPEG and we can see there we go it is coming in with that going to do a background size of cover to make sure that it never repeats itself and I think that should be pretty good actually we can see that it is coming in nicely just like that it is a little bit bright and so if you ever you know you want to we could always do a background Len mode on here too of a multiply just to help darken the whole thing up we're sort of losing the image maybe more than we want so we could play with the background color or the image I'm actually going to leave it like this because to me it's more important that the text is super readable even if it means the background is a bit darker than what you intended it to be whereas here you can see it was like in that example that I had so it's up to you whether you want this multiply on or off you know you can play with the color this is where you could say instead of color dark we do color accent and then you'd actually get like that green color that's coming through so it really depends on the layout that you're doing it could be a fun a fun thing to play around with but I'm gonna I think leave it like this for now and again the reason we put both the color and the image is just in case the image doesn't load for some reason at least people will still be able to read the text I also always do my background color and image and size if I need it as longhand instead of the shorthand property because the background shorthand drives me crazy I like short hands that save me time and I can put them in any order and the background one I tend to find breaks things more than anything else I'm also going to throw a text-align:center on this whole thing because everything on this on small and large screens is centered so that is great the section title services was a little bit unique um so I'm gonna stay here for now section title serve this is because the color of it is my VAR color accent we're going to need a bit more by a margin on it I think but before we do the margin I'm just gonna give it a position of relative because I have the pseudo element that I want to put on it so it's my let's just copy this because it's a little bit faster and my after so that's I'm going to use my suit element just to create this light line that's coming in right there so it's nice and easy to do we just have to do a Content so if you don't know too much about custom about custom properties I was going to say about pseudo elements is you need to give them a content or they will not appear and either display block or position I'm gonna say display block this time width of about 25 percent a height of 1 pixel margin of 0.5 M so it's gonna give us some space on the top auto left and right and 1 M on the bottom and this is why I didn't put any margins on my title itself because I think most of the spacing that I need I can have my pseudo element creating for me and of course we need a background on here we could do two different things we'll do in my var color light though the other option you could have if you always want it to match the title of the services is we could put that to current color so if it's current color it's going to match this color that we have on the text there I don't know if I like that 25% we might set a set width on that instead of like 3 M just to have a nice little set width so now it's green and green I prefer that actually if it's white so I'm going to switch that back but if you do current color whatever color you decide to put for this this will automatically match no matter what bar color like I think is going to look a little bit nicer we're going to lower the opacity on it to opacity of 0.5 just so it doesn't stand out as much it should be a little design element maybe even 0.25 will be enough it should be more of a design element than something that's really in our face that we can really see so there we go I think that is good maybe it could be a little smaller but I think it looks nice how it is I'm gonna leave it just like that let's move it to two as I said that now into the smaller screens it was a little bit too big so there we go so at the small screens it is done we still have to style our button but the layout for this part is completely done and if we go up to the bigger screens well that's where we need it to break into multiple columns so what I'm going to do is we're going to start with a media query we might have to come back up min-width I'm gonna do my 800 pixels again and let's do my services gets a display oops this play flex on it so that should make three columns right away mostly neva de max with max width of say a thousand pixels and a margin of 0 auto these thousand pixel max width that I'm putting on that is a bit of a guess at this stage but I think it's going to work nicely where I can't reven get to their brace on my screen size right now but it's just going to stop things from oh it is we're getting there right around there which is pretty much perfect the only thing is we do need a little bit of space between our serve individual services so this is where we could say that if I have a service plus a service we can have a margin left I'm trying to think service plus the service margin yet left was right of say to em I'm also going to I'm wondering if they should have a width on them or not let's just set that like that and let's just go take a look there we go we have a bit of space between them now they're no longer touching if you don't know about this the plus Combinator that I did it's saying it the sibling so it's going to look at this one and it's gonna look at this one so it's ignoring this but it goes the sibling so it was their sibling yes it's adding emergent on the left and then this one is the sibling so it's adding the margin to the left of that and then there's no more so it's not adding it to any other ones and this one is not getting a margin left so it doesn't create this giant space on the left side of that that we don't want to have so that is perfection and then it sort of like adding a gap and when I do you know with the grid we have gap flexbox gap is coming it's in Firefox but it's not any other ones yet so we're sort of stuck doing it like that so that's working well I think on small screens this is working but then we get to these bigger screens like here the length of the text is a little bit too long so what I am going to do is here before we get to our media query I'm gonna say the individual service also as a max width of we'll try 500 and with that we'll need a margin of zero Auto to keep it centered as well and if we go take a look now I think that's a little bit better it's just stopping it from getting too big and it shouldn't affect it at this size because they're never actually getting bigger than 500 pixels so there we go I think that's working nicely and then click it's working nicely there so I'm just gonna worry about my button now and this is you do have the choice a little bit here I'm not I'm gonna leave this here because again it's mostly dealing with layout but I guess this one you could argue should be up with my typography I'm a little weird how I guess I work in that I'm wondering if I should group it all together but I am going to go all the way up to here for my dot BTN so usually for my buttons I usually have designs that have more than one button so I'm sorry buttons but in this case I only had the one button to style up so all my Styles are going on here inline-block padding can be 0.5 m 1.5 m it just sort of gives it its size the background will be my VAR color accent the color itself so the text color can be colored a dark text decoration since it can be set on a link will be none I'm also going to do curse or point this is in case you ever do put it on a button instead of putting it on a link that's important to have fun sighs I'm gonna shrink it down a little bit because I think it was a bit too big I don't have a custom property for that we're just gonna shrink it here you into a text transform uppercase so it's always capitalized and if you ever do all cap text it can help letter spacing to do letter spacing on something to help spread them out a little bit we're speaking of typography font weight I think I use my bar font-weight:bold on this and then we can also look at my transition I'm gonna do a transition on my transforms 200 milliseconds ease in out and the reason whoops in these in doubt the reason that I'm putting that on there is because on my etn hover I want to put a transform of scale 1.1 so when we do hover on my button it will get bigger and smaller the only thing is my transition transform not transfrom and there we go now there we go now we can have a nice little transition when we hover on top of it ha but there is another thing I want to do and I'm actually gonna do this on all my links and on everything really so drew drew drew where should we put it we'll do it right here before my buttons I'm gonna say everything when it has a focus state is going to get an outline on it outline will become let's say 3 pixels solid bar color accent so this is going to apply to my button but it's also going to apply to other things now the only problem with it is it doesn't really jump out at you and you tab on to that right so you can see if I'm here in a tab it gets a little bit bigger so to really make sure people can notice it I'm also going to do an outline offset of say 3 pixels so if I'm here in a tab it highlights that I am tabbed on it so it's not a hover State it's really just for my focus State which is a little bit different grabs the attention a little bit more than my hover might do so that is what I'm gonna do for all my focus this will be on my links it'll be on other things we're gonna leave it just like that because I'll talk more about it once we start getting to our links and a few other things I'm gonna come down one last detail though what I don't like now is how close everything is like how close my button is to everything else there I could add a margin top to my button but I do want to think that maybe this would be something that would be working in like the real world or on other things and actually here I think I wrote see my work we're gonna change my button a little bit I did 1.5 let's make this like 2.5 because my button was quite a bit wider so I think that'll work better for my padding and I'm gonna come to my section how's it looking at the small screens probably the same problem it's a little bit where it's a little bit it's way too tight so on my dot services plural margin bottom of 2m actually I'm gonna bring that up it like 4m because I had quite a bit of space it balances out between this space in this space I think that looks a lot better and so it's looking a lot better the only problem is my margins disappearing here because over here I did a margin:0 auto so I'm gonna have to change that to be a margin left of auto and a margin-right:auto just so it doesn't overwrite that margin bottom along the way and so it's always sitting at that same spacing SuperDuper that section is all done I'm super happy with it and so now we can move on to this next section okay so we're gonna be doing the who I am or the ability section in this video and we're going to be using grid once again for it a little bit like we did up above its me a super similar grid but we're flipping it around a little bit because if you remember when we did that the image is on the left side and then smaller and then this area will be quite a bit wider than the other one and obviously the image is on the other side but that doesn't change things up too much um so let's start off just with me about me I think what we're going to do for now is just give it a max width of a thousand pixels like we did on this section above will give it a margin of zero Auto to keep it that centered and let's go take a look to see if that's had any impact on things so the small screen sizes we should be okay and then when we get to the larger one at one point it does max out on the size so the line length is quite long now but since we're gonna be making that into two columns I think it will look perfection and so let's take a look it's right around here now it depends on the size of the image we use obviously on how that's going to work out but we want to build it our media query I think will do the same that we did previously so add media or I just realized I did am 800 pixels for the services I'm gonna go with a 600 again for here so 600 pixels I'd said in the another video that I usually do like a 6 9 in this case the 800 just seemed to work better as a break point for when this would switchover than 900 if you prefer things all switching at similar levels you could definitely bring that up to a 9 I just find it we're sort of wasting screen space you know we can go to 3 columns around the 800 pixel point some people like having really set media queries I don't use a lot of media queries I sort of do one per section maybe two per section so you can also deal with really big screens sometimes you need to make some changes but I like having media queries that deal with my layout more than I have media queries that just fill in with the set sizes I think it makes a lot more sense and I think this one's you know once we get to about the 600 pixels we can break that off into the two columns and it will work really really well alright so in this media query I'm going to set my about me and we're going to set up a display grid on here and my grid template columns and my grid template columns are in d1 fr4 the main area and then for my image itself I think for the moment they're going to lock it in at like 200 pixels maybe we'll play around with that number a little bit but 200 I think will match pretty well with the design that we have it's going to let the image be bigger than that at different screen sizes it could be a number that you change for your own layout depending on the image that you want to use and I am using pixels here and I am actually using pixels in my media queries as well as you might have noticed you might be wondering about that some people try to avoid pixels I do avoid them in my font sizes as you've seen I use my REMS I use REMS for font sizes because it is if a user has set a custom font size for their browser because they want things to be bigger it does allow that to work things you may denote nicely but there's nothing wrong with using say a pixel value on a max width it's not going to cause any issues we're gonna need a gap on that but let's set things up a little bit now in the last one I did use my grid template areas but let's go just take a look quickly here and how we set it up so we have about me I didn't once again I didn't give my image at class which was what I was thinking I'm gonna do it about me image because we do want to start by placing that one where we want about me image and that one I'm going to give a grid row last time I did it with grid template areas this time I'm going to say I'm gonna say 1 over negative 1 which means it's starting at the top and ending at the last row automatically and my grid column will start at grid at column line 2 so that should fix that up we also want my we want the section title about is going to be a grid column of 1 and actually we can do that for my that was my subtitle we're gonna do the same thing for our section title so we have both of those looks at save I just have a little typo down here let's change that to be a semicolon and going get out title is okay see this is where great area sometimes make things easier and why I like to use them in general once again even though we're not going to be able to use a grid area for this one since its overlapping it could overall be a little bit easier than using line numbers um it also makes it easier as a template for people to change things around so why don't we set that up with some grid Tim grid template areas so we can have our title and the image next to it and I like putting these all in the next line in indenting it just because it makes it easier to overlap each one the next would be my subtitle and my image and the last one would be my text and my image I'm gonna go back on this actually and we can say that this is my grid area title the image will be grid area image and it really does make it a lot easier to manipulate this if you wanted to change your grid just by changing how the grid template areas are set up I'm gonna already see that it's much following pretty much in line with what we want it to be doing which is awesome and at the small screen sizes it's working out nicely and only we get to the larger screen it breaks into the two columns a little bit more work to be done still on this but I'm gonna also add in here a grid yap a grade column gap i don't want to create any gaps on my rows so my grid column gap will go with like a 2m maybe this time the 1m could work nicely but i like keeping a bit of space on there so that looks good on my image i'm also gonna add we can come actually up to here about me image you know at our box shadow box shadow bar this is where it becomes nice the first time you set up a custom property it can seem like a waste of time but as soon as you reuse it it is super handy so there we go my section subtitle about we're going to want to give that a grid a column of 1 over negative 1 so it goes from one side all the way over to the other side and grid row of two to keep it in the right place so there we go now it is going underneath my image right there so this one's going to take a little bit more playing around with and how we're gonna set it up to make sure that text doesn't go underneath the image like it is doing now it's not terribly complicated and if you do have an issue up top with how that's working you could always use the same method up there to fix it so what we're going to do first let's give it a position of relative and we can do this very similar to what we did last time I'm gonna give it a left of negative to em and I'm gonna give it a width of calc 100% in this case I'm actually into a plus for em and that's the reason I'm doing it like this is because I do want it to stick out both sides a little bit maybe that's gonna be a bit too much it works here but it's going to cause some issues there but we do want it to stay out both sides so by doing it this way it's going to stick out both sides which is cool but we will have to build in the padding to fix that so padding can be I'm just trying to think to em for both sides so padding left of to em but then the padding right actually padding left will be to em the padding right I'm gonna do calc of 200 pixels plus 2m and what that's going to do is make it so my text we have oh this is all padding on this side now so the text will never touch the image you can see it's getting really close but it's not clicking now we have the 2m there I'm actually going to boost this up to 4m and what that's doing so now when we look at it and what it's doing is its setting it up so the text can never go into the image so on this side we have our 2m then we have the 200 pixels and then I had a grid gap of 2 m so I'm pretty much in the 4 is the conclusion of both of those so the text will never once we set it up will never go underneath that image so that can come in handy if you go to a smaller screen size and we get this where it's breaking over onto lines or if you have a long title you had a short title it's not going to change anything in the long run my only issue is that this isn't really working right now with how we've set things up so what I'm actually going to do for now is my padding-left now my left will be negative one this is going to be plus two and this is going to go back down to one I think we can leave that one if we really wanted to we could change that number to a three but I think I'll leave it as a fork because I don't think it's gonna get in the way and that's just going to make sure it is sticking out but the reason I put the padding on that side is so all the text is actually lining up if you don't like that and you don't like the fact that it's sticking off obviously you can play around with that number a little bit but at least now it's working better at the other sizes with the 1m instead of the 2m because we have 2m of padding it gives it room that it can still live inside without causing any overflow and then obviously at the small screens we don't have anything to worry about so that is looking pretty good but what I want to do is one last thing we do want to reposition it on top of my image I'm just gonna come here onto my image and give this a position:relative which should fix the issue but once again I'll give it as that index of two just to make sure that it's always on top and there we go so it should be working out great um the thing that's nice about this is because of the way the image is going to be calculated like if we had longer text here it's just gonna keep flowing down it's not gonna actually break anything it's not gonna cause any issues but if you had really short text it's also gonna work and shouldn't have any issues and that's one of the reasons why I included this inside one div if you remember when we set it up we did that as an about me body and it's important that it's in this body because it's only gonna create one row where so if any additional content needs to go inside this body if you include extra paragraphs through outside of that it's gonna keep creating new rows in the grid and it could actually impact the way that the image is working I don't know if it would actually break anything but pretty much all the content itself will have to go inside of that body area just to ensure that it's one row so nothing breaks along the way and that is that area all wrapped up so in the next video we will move on to the next one so we're going to be doing the portfolio section we're gonna be using grid for this one as well and one nice thing with it is in this example image I only have six pieces in the code I have I have ten and it's one that should be flexible and be able to grow or shrink depending on the screen size and we shouldn't need any media queries for this one this is one of my favorite functions of grid so if we just look really fast our markup before we start doing anything and we look at how we did this I have the we have the basic my work area and then we have the portfolio itself and in each portfolio we have a portfolio item and a portfolio image so if I come back to here and let's create a new section so that was my work we do want to give this the background color of bar color dark I will just say color is bar color light even though the title will have to change colors I did forget to put this so a selection of my range of work sorry about that so there we go it is there we can also just throw it to make our life as easy as possible we can throw a text-align:center on here as well because that's the only text that we will have now obviously the colors aren't quite matching and this one should be bold on the bottom so I think what I didn't do was give these their own classes and just by doing that I can say that my I don't really need the the first one but my section subtitle work color can be my VAR color accent and my font weight can be var font-weight:bold now these are really just typography there's nothing but layout really on these I will add a margin bottom to it margin bottom of 1m just to help with the spacing a little bit maybe we can bring that up to two actually this one if you wanted to argue because it's all typography and it has nothing to do with layout purposes it could come up and live with all of this stuff here and so just like I did with these ones I think I'll leave that one right there for my portfolio no portfolio we're going to do a display of grid on here we're going to do a grid template columns and this is where the fun starts on my grid template columns what we're going to do is a repeat so if you don't know repeats say we do 3 comma 1 fr it's automatically gonna make three columns so if we go and look we have three columns there and it's working out really nicely and if I bring that up to a four it's automatically gonna make four columns and right away that makes for something that's really easily interchangeable which is really really cool but what's even better here is auto fit in a case like this but the thing with Auto fit is you can't just use something like one fr you have to use a min/max which sets a minimum and maximum value the minimum is really up to you I'm gonna say it's about 300 pixels and a maximum of one fr so it'll grow to the size that it needs to so it means each grid has a minimum size of 300 pixels but if we if it has room to get bigger it will so let's go take a look and see what this does so it means at larger screens it works but when we get to smaller sizes oh it's automatically gone down to two and then at even smaller sizes it will automatically drop down to one and if you had very big screen sizes it would just keep growing and growing and growing so there is a chance you might also want to set a max width on this but it really depends on you I'm going to leave this off but if you wanted to have a maximum width just to prevent it from being this one long string that goes all the way across it is a choice if you set um X width also just keep it a margin of zero Auto to keep it centered on the screen but I think it's going to work perfectly like this it does mean because I have ten items that the one downside is sometimes you will end up with like one item that's left over at the end whereas you know now it's working really well with nine items but if I made it nine and then it goes down to the two column layout well then you're you know you'd have one empty one here so it really depends on the setup and how you want to do all of that but overall very simple nice and easy to do and it's very very flexible depending you know you could have a hundred pieces in there you could have five pieces in there always going to work so that should work out nicely alright so now what we want to do is add a little bit of a hover effect so the first thing I'm actually gonna do is take my portfolio item and I'm a portfolio item we're gonna give it a background of our accent you might be going what's the point of that we're not going to see it you're right you will not see them my portfolio items obviously have an image on top so we will not see that color but we're gonna play around with that a little bit now so what we're gonna say is that my portfolio image we're gonna set a transition on this so transition we're gonna transition to things a transform we're gonna do this one kind of slowly so we'll do 750 milliseconds which is pretty slow for me and we'll do a cubic Bezier because we're gonna be fancy here and a really nice one to start with is 0.5 but not 0.5 0.5 comma 0 comma point 5 comma 1 it's a really nice curve very similar to an ease in out but a little bit more subtle so that will be for my transforms and then I'm going to do a actually we can put each one of these on the line is we're gonna have two different ones so after this one we're going to put a comma and we're also going to transform the opacity of it this one will be a little bit faster so the opacity will transform over 250 milliseconds and this one will just be a linear transition and so with that done I'm just going to copy my portfolio image and we can come down into here and my portfolio image however we want to give this a transform on the scale I will go up to like at 1.2 we're gonna come back and forth a little bit once you set this up we'll change the opacity to like a point 75 and I'm also and so let's go and take a look at what that's going to do so now we can see that when I hover on top the green color is going to show through and it's gonna grow and shrink but obviously that looks kind of weird right that it's expanding like that we don't really want it to do that because that looks super awkward so on my portfolio item I'm also going to do an overflow of hidden so now if we go take a look when it grows it's just growing within that box and it won't overflow out so I think that makes a lot more sense and works much much better and we get that little color coming through on each one you could play with the opacity a little bit if you wanted it to more of the green to come through we could definitely have more of the green comes through and because these are links we will be able to tab onto them but you can see it is doing that outline that I wanted it to have so if we want the tabbing to have a similar type of effect we can't actually focus on the image itself we can only focus on the link and then have the image inside of it and be modified so what we can do is we can keep the same effect on here but for this one it's going to be for my portfolio item so if my portfolio item comes into focus we want the embedded or the embedded the child the portfolio portfolio image so the child there to change so now if we come and take a look when I tab on you can see that the tab is also affecting it now the problem is where the outline is does look kind of awkward now if we want to fix that issue with the focus we will actually have to change one other thing here and that would be my portfolio item focus just on the when that focuses the position will become relative and the Zed index for that will become a two we can't do that on the image itself because it's the image is inside of the portfolio item so by doing this it should there we go pops out in front and the focus the like green bar if you don't want the green bar you could obviously turn it off as well but I'm going to be keeping that it's gonna be a very consistent through my whole site in having that so I don't mind that it's there but if you don't really like it for this one because it's obviously jumping so much when we hover on top I think it would be okay to get rid of it but for all the other ones I would keep some sort of focus State so that's it for the portfolio area here we will design a page for our portfolio items as well but we're not there yet let's finish this page off first part of the site we're going to be doing the footer which is really straightforward but we're going to be using font awesome for it if you've used font awesome before you can skip this video in the next one we're going to be really setting it up and styling things but if you've never used font awesome before it's really easy to use you can go to their website which is font awesome com there's a link to it in the description of this scrim but as well and what you want to do is you want to click on the icons this is because I've already set it up to be using their icons if you're using it on your own site and you haven't got that link yet you can click on the start for free instead give them your email address they're gonna send you the link to be using but then in this case we're just gonna be clicking on icons and it's gonna bring in to their list of icons now for font awesome there is a free set of icons available and a paid set the free ones are still thousands to choose from but if you are willing to pay for more you get access to up to 7,000 of them which is a lot of icons that you can use in this case we're only gonna be using the brands icons so there you can see on the left side you can sort by the different styles of them and the solid are the only ones that are available for free in general but if you do want to get the brands you'll click on that it's only gonna bring up the brands or offered what's actually easier to do is just a search for the brand you want so if you wanted Twitter or github or whatever else dribble Facebook anything you want just run a search for it and you should be able to find it once you found the icon you want you can click on it so you're just literally click on the icon it will bring you to a page that looks like this and all you need to do is click on that where it shows you how you're gonna grab it and the cool thing with that is it should automatically copy it from your you know copy it from there and then you can paste it too directly into your site so I'm gonna do that really fast just to show you how it works and now obviously you can't see me over on their site but what I'm gonna do is will come down all the way to the footer here I have my list items let's clean this up a little bit to make it a little bit easier to read there we go so that's a little bit easier to read we can get rid of our a or B or C and our D and here inside my link so I'm in between the opening and closing a I'm going to paste this in and just to make it easier to read we'll put that on its own line as well just like that so there we have my fab so its font awesome brand fa b and then font awesome and it's the code pen so if we go and take a look all the way down at the bottom it has changed it over to the code pen icon so I'm quickly going to bring in the other ones and now you can see that they are all there and that they're all working so that is really cool it's a really nice easy way to bring social icons into your site if ever you need them and you're gonna see in the next video when we style this up it works just like a font so all we need to do is set a font size a font family all of that stuff and our icons should be coming in nope and everything will be looking really really awesome so we'll see in that video where we style this up thing up our foot or now so let's create a little comment to say we're in our footer one thing I'm going to do right away is actually come and give this a class I know you might say it's redundant of footer just like I did on my nav so just because I generally like styling everything as much as possible with a class on it so I'll put a background on this now I'm gonna do a 1:1 one here I'm not going to use a custom variable it's just almost black and not pure black but almost black so the footer will always be dark if you want to change it obviously we can change that individually but for the color here I will use my accent color for the text my text aligned will be centered and we'll put a little bit of padding on this not as big as on our other sections but something like that should work out nicely the other thing I want to do on my footer is I obviously want the color of my links to come through so I could choose my footer link and my social list links individually this is one of those times where I might just do something like this and say the color is inherit for everything any link that might end up in my footer so I don't have to worry about it at all if we go take a look we can see now that everything is styled up it has the colors we want on it the layout obviously needs some fixing up but we're getting there just realised image in dev that's okay so footer a that is good the next thing to do is say my footer link link and hover and my social social I'm gonna give them both an opacity of like 0.7 so if we go and take a look at it now we can see that when we're hovering on top it just gives us a nice little subtle hover hover effect and the reason we want to do that if we tab on it you can see it's actually really highlighting it and you might be saying well that doesn't look as nice alright I want to keep that nice little subtle effect for tab navigation the reason I like having a focus state that's different and this is something more recently changed but it's when we tab through we can see that it is working it's really highlighting but we don't you know it we don't know where it's gonna bring us next and if it's a really subtle effect where it's just this that's happening you might not even realize when the page jumped down to select something when we tab onto it we don't always realize what's being selected if it's a little subtle effect like an opacity change whereas if there's a big box that's surrounding something I do think it makes it a little bit more obvious what's happening so that's one of the reasons I'm going to keep that focus state just like that I think we're actually going to do two different things here on my footer links we're gonna do our color of inherit we're also going to say a text-decoration:none just to turn them off as a default but then what we can also have is on my footer link hover not list footer link pepper if we want to we can do a text Declaration of underline just to bring it back on so when we're off here we don't see it but you know it's a double little whammy just to make it a little bit more obvious that it is something that we are interacting with it I'm gonna come up to here just because I like keeping my hover States sort of separate or underneath so my footer link we're also gonna want to change the font size on this one so the font size of this can become my variable font size h3 so it'll be big but not too big and we font-weight will also become my variable font-weight:bold so now we can see that it is I think looking a little bit better we can see that it's nice bold it's a little bit bigger so that is looking awesome let's come on to my social list now and for this one we want a list style of none because we don't want the bullets we want a display of flex which is gonna put them next to each other and age defy content of center to put them right in the middle and I'm also going to add a margin on this just to space it out a little bit and padding of zero because the default padding when we get off center so let's go take a look and there we go it is looking out right but obviously they're all jammed in and a little bit too close to one another so we can come up and say that my social list items I'm gonna give them a bit of margin margin of zero top and bottom but we can add like a point 5m left and right and on my social list link's I'm also going to give them a bit of padding of say 0.5 M just so it makes it easier to press on them if you're using your finger or something like that there is a bit of space around them that we can click on so that makes that a little bit easier and I think we can probably make them a little bit bigger as well they're kind of tiny right now so you know what maybe we could do is actually move this we can move that all the way up here just to my footer itself and say everything inside the footer should have that bigger font size on it so there we go it will boost the the font size of those icons with it and one of the nice things with font awesome and I think that is looking at really really good and dandy I'm super happy with that except I just realized one thing I have a margin top and bottom coming on those which means it's sort of setting things off so my social List margin top zero zero we want a margin bottom of zero on the social list just so it doesn't add empty space underneath for nothing so now it should look a little bit more balanced overall and there we have it so we've got all the way to the bottom the site now in the next video we're gonna come all the way back up to the top where we're going to be doing our navigation and getting Bette to work and getting at this page all wrapped up we will be breaking the navigation over a couple of videos because we will have to do a little bit of JavaScript for that as well so if you remember way back when I turned nav display:none on just to get it out of our way and obviously we don't want that so I'm gonna delete that so we can actually get started on this navigation and getting it working now one of the reasons I left the navigation to the end is the navigation is a simple enough element is offi is often one of the ones that actually takes the most styling to set up and can sometimes be a little bit long to do really um so the very first thing I'm going to do is just say my logo has a max width I'm gonna say 150 pixels but obviously you can modify that to your own I might even say 100 pixels and you can modify that to control the size of your logo also it doesn't have to be a PNG you can bring in an SVG and that should work fantastically as well and might even be a little bit better so that is setting in that up nicely so on my header itself we're going to set this up as a display of Flex because we want that to be on the left and we want my button to shoot shoot on over to the right so on that display flex we're also going to do a justified content space between which we'll spread them out properly and we're going to do a bit of padding on this of say 1m on all the sides just so nothing is touching now that does mean a big screen sizes the logo will be stuck to the left and eventually our hamburger a little button this guy here is going to go over to there now for the navigation itself we're going to be jumping around a little bit on this one just you know so my nav I'm gonna give this a position of fixed which is going to pull it out of the flow and is going to make things a little bit better but now you can see the button that we're going to be using has jumped to where we want that button to be and this is sort of in a fixed spot so now as I scroll it's coming with us it's not going to stay like that it's not going to be a fixed navigation in that sense but you're gonna see shortly how this is actually going to work so the buttons in the right place we're gonna devote an own video to the button itself and because we want to get a hamburger in there we're gonna have a little animation on it I just want to get the navigation itself set up so on my nav the position fixed is good but we're also going to give this a background of our color dark and the color itself will give it a var of color light which won't do much yet but we're gonna we're going to fix that because right now everything is a link in there I'm going to say the top of zero bottom of zero left of zero and a right of zero so that means it's going to fill up the entire screen and we're gonna give it a Zed index of 100 to pull it in front of everything else so this is when the navigation is open it's gonna cover our whole screen even if you scroll or do anything you're always going to see your navigation and then when we close it it will disappear I'm gonna be doing we're gonna have two different states so what I'm gonna do is it transform of translate X we're just gonna move it off to the left and my translate X is gonna be a hundred percent so if that's on you can see that whoa it's gone where'd it go um so actually it for now let's just put that 250 just not 550 so you can see what that's doing is it's moving it over 50% of its self so it's always based on its own width but its width is a hundred percent so it's a hundred percent of the viewport so if I do a hundred percent it moves the entire thing off of the screen so I'm doing a hundred percent to move it off completely now for now I'm gonna leave that at zero but eventually just we can actually style it up and we can see what we're doing but eventually that will be changed and we're gonna add a transition on here of the transform 250 fifty milliseconds and to be consistent we'll use our cubic Bezier and on this once again we'll do 8 point 5 comma 0 comma 0.5 comma 1 because again it's a nice it's very similar to easing out if you'd rather use the easing out you definitely could we have our nav list so then I have list we're gonna want this to have a let me think a display of flex and not 4 or actually before we do that let's say list style is none I'm gonna do a display of flex but it's gonna they're still going to stay on top of each other it's just because we have a few extra things we can add to this so we'll give it a height of a hundred percent so it actually has the height that we want it to and this is where right now because of the display flex they're going next to each other we can't really see them very well so it's just really fast and just we can see what's going on nav link so we can see our items are going next to each other because it's display flex but now what I'm going to do is my Flex Direction will become column which sort of puts it back to how it was you might be going what's the point of that but the nice cool thing with this is then we can use our justify content space evenly and it's gonna space them evenly in that vertical space like that and then all we need to do is set in a line items center go to spell it right and then everything ends up bang in the middle just like that now there is some extra spacing on that so I'm also going to say that margin of 0 padding:0 which should fix any weird issues with the alignment that we were just having on the nav links since we're here we're gonna give them the font weight of our font-weight:bold we'll also give them the font size let's make them bigger var font size h2 if you had a whole bunch of links on here you may not you may whoops I had a double var on there sorry about that and you might want to avoid the h2 it is quite big maybe it is too big actually but I think it works it's very in-your-face though but if you want to step that down to an h3 and you could do that or if you wanted to set your custom size on it as well we could do that but I'm gonna leave it with that big bold in-your-face style of the h2 and you can decide if you'd rather something else and we're also gonna say the text decoration is going to be set to none for those ones we can add in our nav link hover for the hover I think all will do is color of our color accent and just leave it like that so if we hover on top we can see it's working or if we tab through you can see that that outline is coming through on the focus state that we set for everything so fantastic I think that's looking really nice and good for that but this is the stage where I am going to do all I'm gonna do for now actually is come back set this back to 100% to hide it away so it's hidden off the screen and in the next video what we'll do is we'll style up our button and then we'll actually get our button working so when we click it the menu will slide in and out right so for the hamburger I'm gonna bring all of that down right after the nav right here and we can start working on the hamburger itself now there are other ways of doing a hamburger I'm gonna do it the more complicated way the only reason I'm doing this is because it opens up some extra possibilities in terms of what we can do with it to add little animations and have fun with it because all the different pieces will be animatable and individual instead of it just being a single icon but it's up to you if you'd rather just bring in a single icon put it there and leave it like that that's completely fine but you know I think this would be a lot more fun so if remember we had a class of hamburger so what I'm going to start with is doing our background I'm gonna give it the background of our color dark again if maybe you change your color scheme and you want it to go along with your color scheme it will be useful I'm gonna give it a width of 2 m and I may have a height of just 3 pixels will give it a border radius to border-radius I'll do 1 M which is just like a massive number but because it's going to work and I'm gonna give it a display of bul Ock not black block because by default it was a span which is in line and I just want to make sure that we don't run into any issues with it and I'm gonna give it a position of relative because we're gonna be using pseudo elements with absolute positioning and this will make our life much easier so if we come and take a look we can see inside my button now I have that black line that is showing up so that is part one of our hamburger for the next two parts we will be using pseudo elements so hamburger before and dot hamburger after and just like this pseudo element that we used last time the first thing we want to do is give it some content for the content will be blank again pseudo elements will not work unless you do give them some content the position in this case will be absolute so I don't have to declare a position a display a block like I did last time because I have position absolute it's either giving it a position or giving it a display property is required we're going to say a left of zero and a right of zero and that's going to mean it matches the width of our other one again that's because I have positioned relative here if not it would have been relative to the whole screen and we'd have a huge bar going all across the background we do need to set so far color dark we have a lot of similarities actually here so I'm gonna break some of this off we're going to refactor on-the-fly here let's copy all this and paste it right there and what I'm going to actually do is add dot hamburger here because they're all gonna have this this this and this and even the display:block so we can we don't need to display block on the other ones so I'm gonna grab all of that and put it here so we don't have to repeat ourselves twice they're always gonna have the same color same width same height that is and the same border radius so that means I don't need my background color here and there we go so that is perfect and we will eventually be giving these all a transition as well because we need things to be moving around a little bit so I'm actually gonna put that here as well transition transform we'll start with 250 and just an ease in out they're gonna be pretty simple animations so I don't know if we need that fancy cubic Bezier or not oh I forgot my comma right here so that's gonna break everything there we go so it looks the same as it did before and the reason is these are pretty much just gonna be hiding it underneath what we already have so what I'm gonna do is say my hamburger before is going to have a top of 6 pixels and my hamburger after is going to have a bottom of 6 pixels and the reason I'm doing 6 is because we have a height of 3 so it's another height of 3 and empty space of 3 and then we'll have the rest of the hamburger and just like that you can see we're starting to get a little hamburger icon thing coming in there isn't that cool so it does take a little bit of setup to do it but again I do personally think that it is worth doing the next thing I'm going to do in here is let's get come all the way up to here my hamburger so I my nav toggle as well which is the button itself this I'm going to add a little bit of padding to it 0.25 M and I'm gonna give it a background of transparent to make it disappear and I'm going to give it a border of zero so my border is turned off and there we go we're left with our little hamburger icon right there one thing is it does not have a hover state on it I know you can't see the little hand icons yourselves when I do this but when you're testing it you should be able to so on the nav toggle I'm also gonna add a cursor of pointer or else there is no little hand icon for the people when they hover on top of it which can be a little bit strange and I did point to five em we can probably do 0.5 M on that padding and not have it affect anything on terms of its positioning just to give us a bit more room that we can actually click on in that overall area so I think we'll do that for my nav toggle now another thing I'm going to do for my nav toggle is I'm gonna give it a position:absolute which is going to sort of ruin things but then I'm going to say that the right is zero and it should pull it back to exactly where it was almost it's not including the padding on there actually so we can say the right so I'll do a 1 M on there which is the same as the padding that I put so to keep the distance where we want it to be and if you want to be really safe you could also say a top of one M the reason I'm doing this is because I'm also gonna give it as that index that's really really big so you might remember we had our navigation coming in front of everything so when I do that when I had my nav open remember this is going down to a zero I want to make sure that my button actually stays in front of that you know it's hard to see now you can't see it that it's there but I cuz the color is the same as my background color but I promise you it is and that's really important so that's the reason I'm doing that is because we want to always have that button available to us so let's bring that back up to or even you know while we're here just to prove it to you let's change this to color accent just for a second and then we can bring that back up to zero so you can see that that is there so by being position:absolute and having a hires that index we know that it's coming all the way in front now there's this problem that we're going to come around and fix soon but for now all of this is starting to come together but let's bring this back up to 100% pretty much we need to add in the functionality with the JavaScript now to actually get that to open and close so we're going to go ahead and do that in the next video all right so whatever added in index.js file already here in a JavaScript folder so what we're going to need to do is come into our document and add a script SRC j/s slash index dot if you have a script close script and now we can actually start doing something with it so if we come into here now we do need to do a few things in here so the first thing I'm do is create a constant nav toggle which is going to look for my document query selector and we called it nav talked our goal and I also want to get let's just leave it like that for now I'm going to say our nav toggle add event listener click when we click we want to do a function so I'm gonna use an arrow function here and we want the document body class list toggle and we're in a toggle a class that we haven't created yet called nav open by doing that it's going to mean every time we click on the our button it should add that class and to test to see if this is actually working or not what we're going to do is we're gonna come over to my CSS file here and let's create nav I'm gonna come all the way after all this nav stuff yeah I'm gonna come all the way after all my navigation stuff here but we're gonna stick right here MSA nav open background is red so again this is on the navigation this is adding this class to the body itself so if we come and take a look and if I click on that the body itself is getting a red background on it and if I click again it should toggle that off and all of that disappears so it is turning on and off just like that so that is awesome and fantastic that it is working so I know my JavaScript is working so I don't so instead of changing the background to red though we have some other things that we want to do so my nav open itself we're not going to be doing anything with what we're gonna be doing a lot of things that are inside of here so the first one that we're going to do is my nav itself so if the nav is opened the nav itself is going to get the transform translate X of 0 so what that means is when we click that it slides out when I click again it slides back in so we've added that functionality in and we can see it's working out fantastically it's going in and out and then I can click on my links so that's really cool now there is one problem if I click on a link it's actually going to bring me to that part of the page because you can see it's scrolled down if I go to my work it's scrolling down further but I can't close it because the my icon has disappeared and ideally when we click on it it would just disappear anyway it would close itself when we click on that but we're going to add that functionality in a second for now though what I'm gonna do is with my nav open my nav toggle is going to switch from a position absolute to a position of fixed and the reason I'm having it switch is because I don't want it to always be position fixed because I don't want it to scroll with the sight so now if I click that if I scroll we still keep this in view but then if we go back to here it Scrolls out of view with the rest of my header so that is perfect and that means if I click on about me and then I close it you can see it actually brought me to the right point in my site which is cool so we're off to a good start now where the really fun things also can come in is we can do our nav open dot hamburger and I'm gonna do a transform on this of rotate and we're gonna rotate it point 6 to 5 turns so turn like that you can also do with this in degrees but I learned about the turn unit and I like showing people that it exists so this is in a Sun one so I can turn it so now what's gonna happen when let's scroll back up when I click you can see it's rotating around now that might seem really really strange why would I be doing that well what I also want to do is my nav open dot hamburger will do my hamburger after we'll just get a opacity of 0 so it's just going to disappear but more importantly will be my nav open hamburger before because what we're going to do with this is we're actually going to rotate it rotate oops not rotate transform rotate 90 degrees now we do have to do a second transform on this but you're going to see that what that's doing is it's pretty much turning it into an X so you can see when it click and so that's kind of fun right but the X isn't really working right now because of the way it's positioned so here I'm just gonna put a space and do a translate X and the amount is the I'm going to do negative six pixels because we're you know we were offset by six so moving it back by six pixels and it gives us a nice X so now when we do that way it looks like that and then when I click it's gonna fly around and making these X like that you know what originally I had this as black but I think I'm actually going to keep it with this color so it's always going to be working like that so there we go my hamburger is working everything is good the only problem with it is now if I click on my work it doesn't actually do what we wanted to it brings us there but we want this to also close so we're in the right place right away so to do that we're going to come back to our JavaScript so to do that we are going to need to get each individual link up here so we're gonna create that this will be a map we'll call it a nav links and it will be our document dot query selector so this creates a node list create create selector all where it's going to find all the nav nav link so it should find all of them so if we go and take a look now or now what we can do is we can say are and have links dot for each so for all of them we have for each link inside of there we are going to do a function so just like before we're going to need to create a event listener so on each link we're gonna add an event listener for a click and if somebody clicks once again we will do a function we'll use an arrow function again and so here we can say that our document.body dot class list but at this time it's if toggling it we're just going to remove our tab open from the class list and the reason I want to simply remove it instead of doing anything else with it is because I think it's really important just in case we somehow get it clicked or activated when it's off screen we don't want it to somehow open I don't think that's really a possibility but why take the chance here we're just always removing the class of nav open instead of toggling it because the only way we should be able to click it is if it's already open in the first place yes so let's hit save on that and we should be able to see if we come up we can open it if I click out here nothing's happening but if I click on my services it brings us to my services and it's closed so again we can bring up go to my work and we're in the my work section already and it's closing just like that so it's added a little bit of functionality that we can do when we want to move around in there so just like that that is all done you know I think it's looking pretty good now there's one last thing I want to do while we're here when we go to the different sections or let's say I come and I click on this button it's just jumping to that section which isn't the best user experience so I'm gonna come over to my stylesheet here I'm gonna go all the way up to the top we can do that right here under my general styles on my HTML element I'm gonna add in scroll behavior smooth and it's a nice easy way without JavaScript to add smooth scrolling to a site so let's come back up and now that I'm here if I click on my work it Scrolls down there automatically so that's really really cool and if I come up and I go under one of these links and I knew about me you can see it's scrolling down as that closes so if you had other links somewhere else it would automatically just add some smooth scrolling just with native CSS which is really really awesome now I did have some trouble with this in my own in here with the scrim editor when I'm recording it doesn't seem to be an issue and I'm not recording and I've never seen an issue with this outside of the scrim redditor so for now or in future videos you may see that it's commented out just make sure you comment it back on in case you run in if you want to have that enabled on your own site if you download from the final version of this in it just in case you're worrying about browser support a we're already using grid and custom properties but if ever you run into a browser that doesn't support it for some reason it's just going to jump down and have the same behavior that it did before so it's not gonna cause any issues whatsoever and yeah I think everything is coming together this page is all wrapped up now everything is working fantastically so all we have left to do is create the other page so in the next video we're going to look at doing that it's not going to be anything that is too complicated and then we're gonna be able to wrap this up move on over to digital ocean and get this baby online okay so for this page what I've already done is I've copied my index type HTML and made a new file here portfolio item ml and I've deleted everything in there this would act as the template file that you could use to build out all your different portfolio items to put a bit of information on them I've deleted everything the only thing I've kept is my header and my footer but what we're actually going to do is come back into here and copy this intro section as well and we're going to leave the intro section here but I wanted to copy and paste it just to take a look at how I'm gonna do this so the here I'd put the title I'm going to keep this strong thing going of my project and then this could just be and the image here I'm going to change to the image that we were originally using so we'll just do port folio 0 1 JPEG it's gonna work out perfectly there obviously the alt is going to be a little bit different so we'll get rid of that so if we come and take a look at what that looks like we can see it right here it's just putting the picture instead of the picture of yourself that you might have had and everything else should be working fine we've already done all the CSS for that so it should be working no matter what screen size or anything like that we're on now where things are a little bit different is we do need a new section over here I'm actually going to take this idea of home off we are gonna have to update these links as well in a second over here what we're gonna do is we're going to add a couple of things so I'm going to add a div class of we'll call it portfolio item individual it's a long name but I want it to be super clear what is being used for it's not gonna have too much styling on it in here we're gonna have a couple of things so we're just gonna have let's put in a paragraph we're gonna put in an image and I've brought in a new image to use for this one so if we come in look in our images folder you will find a portfolio details JPEG that I brought in just for this page so that is our image folder and then portfolio details J jpg I'll put a blank alt because I don't know what the pictures you will be using are and we don't need a class on that I don't think we need to put one we can always add one on and I'm gonna put a couple more paragraph down here below it and I'm just gonna copy some filler text to use yeah so if I hit save on that and we come take a look you can see it is coming together we have a nice big image going a long way across which i think is looking cool now we're gonna modify this a little bit because the text obviously isn't gonna work if it's like that and we're getting but you know overall I think it is actually working out pretty well so we're gonna do a couple of interesting things here on this portfolio item individual so let's go into my CSS and I'm gonna include this all the way down at the bottom I can come and put a new comment portfolio item individual and we can style that up a little bit so what I'm going to do is like on the other ones we'll give it a bit of padding so we can do a padding of we'll leave the top and the bottom with I'm gonna leave the top with nothing so we're going to do a zero for the top with a 2m for the left and right and maybe we'll do a 2m also on the bottom just to give it a bit of space away from the footer and what I'm also gonna do I'm gonna give this a max width of a thousand pixels because it is a standard that we've used in a couple of other places in the site and with a max width there we also want to do a margin of zero Auto and just like that we've sort of finished what we need to do here I don't want to do anything too fancy we can keep the nice title area and then here we fall into these nice big images with some description of what your project actually is you get throw as many images in there as you want and if you do find the text is getting too long you could change the max width on that or we could come in and say the same class but our paragraphs inside of there and give them a max width of like 800 pixels maybe and you can play with that number what it's going to do is just give you something like this where the images will be wider in general I like doing things like that because it makes it a little bit easier to read text when it's not too long and I might even shrink that down to like 600 and if we do that we can also give this a margin in left of auto and a margin right of auto I'm not doing a margin:0 auto or something like that because I want to keep the top and bottom margins the default margins that were already on my paragraphs because it means we're getting the spacing where it would take those off so it's sort of folk our text we can have bigger images that break out of that a little bit and then we still have our regular paragraphs that describe the project a little bit the more text you have the more you can describe a project don't just talk about what you know what the project was but talk about what you did on the project and why that was a good thing the more details you can put and the more information you can give on the insights of your project instead of on the actual project itself the better that could be but this will set the template for you to have a nice simple page that you can use for your portfolio items the one thing we do want to make sure is if we click here we can actually go back to pages that we want to go back onto so what I'm going to do is the home I'm just gonna set to be index.html and I'm gonna copy this and paste it there but leaving the hash tag at the end and the reason I'm doing that is because now we're on my individual project if I click here and I go to home it'll bring me back to here but what I've done is I've put the links to all of these just to go to that page if I click here and I go to about me it's going to bring me to the about part of that page so it's always going to go back to the right place if somebody looks at portfolio item and then they decide they want to go look at something else they can get to that section really really easily without any fuss so right now as I mentioned I've put the links to all of them going to this one template page but that would be up to you now to populate as many portfolio pages as you need and to set all of that up for your different portfolio items and that is it we are done with this template everything is good and dandy and working fantastically and that is it for now that the website is all put together it's ready to go so in the next video we're going to be talking about the next steps and how you can start getting this online all right so way to look at how we can customize the fonts the colors and different things with this site so we'll start off with the fonts then we move into the colors it's all super easy to customize so let's say you found some new fonts on google fonts so that's what I have done and I have a new link I'm going to update this link with my new one just remember you have to do it on all your pages don't just do it on the one so I update that link there and then I'm gonna go over to my CSS and over here in my CSS I can update my font families so I'm gonna put Roboto as my secondary here and then I have Laura that I'm gonna bring in as my primary so if I just do that my font weights are gonna switch over to 400 and 700 because those are the weights that I brought in and just like that we can see that it is updated the fonts throughout the whole site super and nice and easily really quickly everything will be updated because they were all set up to be using those font families and using those custom properties and just like that we can also update our colors super super easily so let's say you don't like that green that's not your brand color I can come on to my color accent and update that one to a red color and just like that anywhere that was using it in the site has now switched on over to use that red color and of course if you wanted to switch the entire theme I did use a light and a dark but technically you could come in here and do something like this and it would invert your color scheme throughout the whole site so now it has become a dark site I can't see my logo anymore but everything else should be working there'd be a few little updates that we'd have to make in a couple places for the dark theme to work or this not really even a dark theme it's an inverted theme from what I had but overall you can see that it's really really quick and easy to make these changes to the site and everything will be running super well and super easily so if ever you want to customize stuff play with the box shadows play with the font sizing all of it all you have to do is play with these custom properties and that you are good to go your design is your own design after that so have some fun with it make it your own and then we're gonna be looking at how we can get this up on digital ocean in this video we're going to be exploring digital ocean droplets we're gonna be seeing what a droplet actually is and how you can get one up and running so what is a droplet this is directly from their website they say that digital ocean droplets are Linux based virtual machines that run on top of virtualized Hardware each droplet you create is a new server you can use either standalone or as part of a larger cloud-based infrastructure now that might sound a little bit confusing but really they're pretty simple and how they work they're essentially virtual servers that can host your website when web apps they're extremely easy to use they're fast and easy to set up and destroy which means that if you set one up you just want to test something out you do a little bit of work on it and you want to get rid of it right away after you can do it right away it would take seconds to destroy one if you don't want to have it anymore they come with an automatic firewall security is really easy with digital ocean and they do really emphasize a lot when it comes to making sure that things are as safe as possible either both extremely customizable and super flexible so when you're setting it up you can really customize all the different settings you need for it but they're flexible in the sense that you can make changes to it once it's set up you don't have to destroy it and create a new one just because you need to make a few changes to what you already had you can just modify your existing one and one of the best things about them is you only pay for exactly what you're using so it can you know if you use if you spin one up you only run it for like 15 minutes you're not paying a monthly fee like you might with another web hosting company where you just locked yourself in to a year when you you're only paying for your droplets that you're currently using if you're not running any droplets you're not paying you fire one up you get rid of it you only paid for that three seconds it was up there that's all you're actually paying for now how do we set up a droplet it is relatively easy to do what you don't want to do is create your account first and it used the link that is in the description to get your free $50 credit so you can use that towards testing everything out before you start jumping in now when you first create your account it's also going to ask you to make your first project once you've made your first project you can just click here on droplets if you're not sure about setting up your project don't worry about it too much it's gonna ask you some really basic questions and you'll be all set up and ready to go and you can always create new projects as many as you need to inside a digital ocean so once you're logged in you're ready to go you can click on droplets on the side here and there's a nice big button that should say create droplet because you won't have any droplets yet when you get there you're gonna run into this and this can seem a little bit intimidating if you've never had to look at this before because they are running on Linux so you have to choose your distribution of Linux that you want and choose your plan and your pricing and all of that and you might be looking at this point I don't know what distribution of Linux that I want because I've never really had to worry about that before that's completely fine they do make our life a little bit easier what I'm going to suggest you do is instead of worrying about the distributions right now is click on where it says marketplace the marketplace is a whole bunch of setups that are sort of pre created everything is lined up it has all the different things you're going to need so you can choose from here you'll see here are the recommended for you they do have a wordpress one there so if you want to spin up a word price a wordpress really fast and quickly you just click on that and there'll be a few more steps at this stage of the what I'm going to do is suggest that we go and click on where it says see all marketplace apps that's going to show us all the available ones if you scroll down you can see there's a hundred and ten results there's a whole bunch of stuff in there so if you know exactly what you want you might find something that is perfect for your needs maybe you just want a nodejs server because for this case we're gonna go with a lamp stack so limp and you might have heard of lamp which is Linux Apache MySQL and PHP now we're gonna go with limp so instead of Apache it's running nginx because I'm doing it with static files it is gonna run a little bit faster so we're really not sure which one to pick we can go with a follow along with this one for now but if you have a certain build that you want go and look through their marketplace they might have something exactly that's gonna meet your needs once you do that it's gonna bring you to this page where it's just gonna give you more information on what this marketplace LEM stack is so it's showing you all the different software that it's going to be installing we're not even worried that it's bringing us you know we don't even really need the MySQL or PHP right now but we're coming with everything it's pre setup it's ready to go right out of the box so now we can just click on create Olymp droplet and when we click that it's going to bring us back to this screen where a used to have the Linux distributions along the top but now it's brought us back it's replaced that with saying that we're using our LEM stack here and then it's gonna ask us to choose a plan now if you're doing something that's a really big site or you need something really cific you might want to go into one of these performance plans and if you're not sure which one you want you can go with help me choose for now we're gonna go with the starter standard one here this is perfect for something like ours which is a static site right now or even things like blogs and web apps all of that this is a great place to start if ever you need to make a change as I said it is very flexible once you've chosen the starter planner that's already going to be selected by default we want to go into the pricing and by default the pricing is set to the $40.00 a month early on I would suggest scroll all the way over and go with the $5 per month one it's probably all you're gonna need at the beginning unless you know you're going with something that where you're gonna need a little bit more than that so you can see it's giving us one CPU it's giving us an SSD with 25 gigabytes of space and it's giving us a thousand gigabytes of transfer I think starting off that is perfectly fine you get what you pay for so if you need something more powerful or more space you can always work your way up now if all you need is more SSD space but you don't need more transfer or a more powerful CPU you can go to add block storage and add volume so you can just add SSD space so you can just add a hard drive space that way it's where you're adding on to there but you're not getting anything else so it can balance out the pricing a little bit if that's the only extra thing that you need and once you've added your block storage if you need it we won't in this case you can then choose a data center region I went with Toronto because I'm in Montreal so it's close to me you can just choose any of the ones around the world that they have just choose something close to you and you're good to go and then it's gonna also ask you to select additional options if you want private networking ipv6 user data and monitoring it's up to you if you want any of them for now we're gonna skip those and we're going to come down to the authentification now here the default is one-time password we're gonna leave it on one-time password and SSH key is a lot more secure so if it's something that's going to be a client site or even your personal site in the long run it could be worth setting up but for the time being we're gonna go with a one-time password because it's faster and simpler to set up and you can always switch to an SSH key later on it's you're not stuck with this you're not stuck with your one-time password if you do want to change to the SSH key later and the last thing after that we're getting right near the end we need to choose how many droplets we want so by default it's one we're good with one and we want to choose a hostname so it's a random string of characters change it to what you want it to be and it's just so you can remember them by your droplet name can only contain so you just want to make it something you can remember it by so just give it a name that makes sense to you and if you want to add any tags you can you're gonna select the project you only have one project so just attach it to that project and you can add backups if you want backups or system level backups taken once a week and each one is retained for four weeks and they always cost twenty percent of the droplet price so because ours is five dollars a month it would cost us an extra $1 per month now if you're gonna be working on git and say you're on github or something like that and every time you push to your master it's automatically building out your site that's really awesome that's cool and that's sort of keeping track of everything anyway but backups are always a good thing to have especially if it's something like a client site or your own personal site if it's your client site or your portfolio site and you want to make sure that nothing ever goes wrong I strongly encourage you to have a backup because in this day and age and at that price I think it is quite affordable next I'm going to do is click on create droplet and that's gonna bring us to this screen where you're gonna see the little progress bar going along it generally takes under a minute to create your droplet so that blue progress bar will slowly make its way across and then you'll get this where it disappears and you're gonna get your IP address this is where your site is your site is at that address as soon as you see this you could technically go and visit it there's not much to see there right now so instead of going to visit it what I'd encourage you to do is click on where it says my portfolio when we click on my portfolio it's going to bring us into this screen and what we're gonna want to do is click where it says console because one thing we have to do before we can do anything else is we need to reset our password when we signed up for a one-time password it's going to email us that password that the password has to be reset the first time you put it in so when we click on the console here it's actually going to open a console in the browser in a new window you could be doing this if you're on Mac through terminal or if you're on PC through PowerShell or Commander or something like that but you know we have this built in it's the nice simple terminal that's just it's directly connected to your droplet so it's gonna ask you for your login and it will ask you for your password you should have received an email that's going to have both of those things so you'll see your IP address your username and your password I don't mind showing you my password because as I said it has to be reset as soon as you put it in the user name will always be route so you can put in route where your login name goes and then it's gonna ask for your password I would come buddy here I would copy it so command select it command or control C and then you come over to here and you paste it in with if you're on a PC control V or if you're on a Mac command a V and that's gonna paste it in now when you paste it in it's not gonna look like anything happened because it stays blank that's fine just hit Enter or return and it's gonna go to the next step it's a password they're trying to make it stay confidential so they don't show it on the screen when you're entering your passwords in a terminal once you put the password in it's gonna say you're required to change your password immediately so right away it's gonna ask for your current password so just command V again and paste it in there and then it's gonna ask for your new passwords you type in a new password once again as you're typing it it's gonna look it's just gonna be blank it's gonna look like there's nothing there that's completely fine just keep on going it's gonna ask you to retype it again just to make sure you spelled everything right and as soon as you've done that it's gonna give you a little message saying that everything is pretty much good to go and you can close this window down once you've done that if you visit your IP address after that you're going to see something that looks like this so it's not very exciting it's saying please login your droplet to configure the Lemp installation and now we want to get our site up on here instead of seeing a screen like this so we're going to look at how we can do that in the next video all right so let's see how we can put our files onto our droplet we're gonna be doing it with an FTP client so some FTP software that you might want to use there's FileZilla cyberduck or fetch you can click on any of these here it's gonna bring you right to their website fetch is probably the easiest one to use but it is Mac only the interface is the cleanest and simplest one so if you're on Mac maybe you'd want to go with fetch for this though I am gonna be using FileZilla I am on PC I want to do something that both PC and Mac users could follow along with so I am using FileZilla but it's always the same thing and there's other FTP clients out there as well it's not just these three use whichever one you want the interface might be a little bit different but the information is the same no matter which one you are using so here I have FileZilla opened and what I'm gonna want to do is click on this weird little icon that's in the left here and what that's going to do is it's going to open my site manager inside my site manager I clicked on new site just to create a site I called it a deal for digitalocean portfolio and then I came over to my protocol and I changed it to SFTP which is the SSH File Transfer Protocol and then here I need to put in my host and my port number the host is just going to be your IP address and the port we're gonna use is 22 which is for the SFTP if you wanted to go into a regular FTP you could use port 80 it's gonna ask for your on my login type I'm saying ask for password that was where was I'm gonna leave it like that in my user I'm gonna put in root right there once I put in my user name there I can just click on connect all the way down here and it's gonna pop up with something that looks like this it's saying unknown host key the server's host key is unknowing you have you have no guarantee that the server is the computer you think it is and it's showing the fingerprint for there and this is just saying are you sure you're connecting to the right place we can't be a hundred percent sure because the key is an unknown key this is because we haven't set it up with SSH we can for now just click on always trust this host because we know so we're adding that to our cache click that and click OK then it's going to ask you for your password so you put in your password that you just created in the terminal in the last video and it's gonna log you into your droplet now the way FileZilla works is everything on the left here is my computer and everything on the right here is my droplet this is all the different things that are in my droplet a lot of this got created because I went with the LEM stacks who had created a whole bunch of stuff that's already in here now by then when you start with you might be inside your root folder so you might have to take a step back and then once you've taken that step back you're gonna want to find the VAR folder so it's var var folder once you're inside the var folder you're going to want to look for a WW folder and then once you find the WWWF it should only be one thing in there which is the HTML folder click on that HTML folder and you should see that there's an index file in there and that is it and what we want to do is we want to replace that index dot HTML file with our own files so I've downloaded mine from scrim but if you want to follow along with exactly that at the moment and download from scrim by itself I'm gonna do that at the very end of this video we'll look at how we can do that so what I did is I downloaded everything from scrim but I opened up the folder I unzipped it and then I grabbed all the files I needed it was everything except for the normalize and the readme if you put those up there it's not gonna cause any problem but we don't need those files we might so there's no reason to put them online so I grabbed those I literally just dragged over to here you can see that it's there I let go and it's gonna tell me that there's already index.html do I want to replace it yes I do and with in probably under a second everything was uploaded once it was all uploaded I went back to here I hit refresh so this is just on the IP address I was on I hit refresh and bang just like that my site is up here it's live and it is available for anybody to see it's as easy as that to get a site up on a digitalocean droplet now if you do want to download from scrim but you just go to the very last video but just make sure you scroll all the way to the end because wherever you are in the video it's gonna download that state so make sure you're at the end of the last video where we're creating the website and if you go to the little gear icon you can scroll you can go down to where it says download zip click on that and it's gonna download all the files for you so if you want to test it out and put everything else and put it all up there or then make maybe make your own changes to it and then put it up there you can go ahead and do that

Channel: freeCodeCamp.org

Views: 504,426

Keywords: portfolio website, html, css, javascript, web development

Id: _xkSvufmjEs

Length: 143min 15sec (8595 seconds)

Published: Tue Feb 18 2020