HTML5 & CSS Development: Learn How to Build a Professional Website | Udemy, Jordan Hudgens

hi my name is Jordan Hudgens and I'm gonna walk through how you can build out a fully professional website using HTML CSS in JavaScript in just one hour in addition to the video I'm also gonna give you access to the source code that I'm gonna be using so that you can use it on your own projects together we'll be building this portfolio website some of the skills that you're going to learn are going to be html5 css3 javascript flexbox CSS grid animations navigation fonts and how to use images many of the HTML tutorials I've seen focus on teaching the fundamentals first and those are important but I've discovered that many students actually learn better by taking a project-based approach so what we're going to be doing is building out a professional HTML website and you're going to learn the fundamentals while you're building the project I'll be following along in the comments section so if you have any questions or any recommendations or anything like that please feel free to post those in the comments and I'll get back to you whenever I can and lastly if you enjoyed the video and you feel like it helped you on your coding journey please like the video subscribe and we'll be adding more to this channel so with all that being said let's dive into the code so let's go ahead and get started writing code now right here I have the finished version of the website that we're going to be building out and in order to do this we have just a couple prerequisites so I'm gonna come down to some the text editor and I created a prerequisites file it's pretty basic because HTML CSS and JavaScript can all be compiled and can all run inside of the browser then it doesn't matter what operating system that you're on I'm on a Windows machine but for my day-to-day devel meant I'm usually on a Mac or running Linux Oh in for what we're building out you can use any operating system the only things that you're going to need are a code text editor and then a web browser so as long as you have these two and the fact you're watching this right now in YouTube tells me you already have a web browser so for the text editor if you do not have one then I wrote down a list of potential options my personal favorite is vs code and if you want access to that you can just go to google and type vs code download and it's completely free and it's available in all operating system so you can just download it here so I recommend right now if you do not have a text editor to pause the video come back after you have downloaded that and installed it on your system so now with all of this in place let's take a look because a lot of people can teach you the fundamentals they can give you step-by-step tutorials what I want to do though is describe exactly what my workflow is because anyone can learn syntax you could go read a book on HTML and CSS and learn this syntax what I actually want to show you is my own strategy when I'm building the website so if someone came to me and gave me any kind of website I would go through this exact process I'm going to show you here and so hopefully that will help you because my guess is as much as you will probably build out some portfolio application in some form or another the reason why you're going through this is so that you could build out any kind of website and you could implement any design and so my goal for this video is to show you that process and then along the way teach you HTML CSS and all of those kinds of cool tools so right here and looking at the finished product I know I'm gonna have to do a few things so let me start writing this out in list format so I'm I know I'm gonna have to and I'll say these are my dues first I'm going to have to build the project so that is going to entail things such as you're creating the folder structure adding files connecting files doing things like that so that's gonna be step one then from there if we take a look back here at the website if you look at some of the components of this website you can see at the very top we have a nav bar right here so that's probably gonna be one of the first things I build out so I'm gonna say we want to build the nav bar and as you saw it has two links and a name so that is what we're gonna do on the nav bar then from there the majority of our time is going to be spent on this grid so you can see we have 12 grid items here so it's a four by three grid over three by four depending on how you read it so we're going to next build out the portfolio item grid and that's going to use images titles and descriptions and as you may have noticed it also is going to implement animations and so the way we're going to accomplish that is by using JavaScript so this is where we're gonna implement JavaScript now we also as you can see have another page so this is our about page here so we're going to also build out the about page and that is just going to have a image it's going to have a split column layout and then from there it just has some content okay so as you can see right here these are four steps to building the website and if you were coming to me as a client and asking me to build this site the very first thing that I would do when I was handed is a design or I knew what I needed to go build is exactly what I just walked through I would walk through the basic steps here because as you may have noticed this gives me a little bit of a to-do list so it's not incredibly detailed you couldn't just go take this and start building it but it gives me a structure because I've discovered that if I am just handed a project and I try to go build it then I'm going to procrastinate on it and I'm not going to be very efficient but if I have a clearly defined structure for what I need to do then it makes it so I can break that task into a bunch of smaller tasks and then I can go and build the system so this is what we are going to do so let's start off with the very first one which is to build the project and the way we can do that is I'm just gonna open up the Windows Explorer here and I'm gonna put this in the desktop so here I'm gonna go and say new folder and you can call this application whatever you want I'm just gonna call it portfolio HTML site and that's it now what we can do in sublime are in vs code in sublime text and some of those others it's going to be similar you go up to file and then go to open folder and then from there you can see on the desktop I just click on this folder and what that's going to do is it's going to open it up as a project so this is going to have everything that we need and so here I'm going to give our very first step so here I'm going to add the index dot HTML file now if you're in one of the other code editors and you can usually just right click where you want to place that and then you want to call this index.html and now with this file open what you can do is start actually typing HTML code in here now I have a little user snippet and what a users snippet is is if you've never used it before is it gives you the ability to store snippets of code so blocks of code and then you can call them whenever you want so you don't always have to type it in manually and so I have created this little HTML one and so if I click that then it gives me this entire little set of code items now not all of this is necessary for what we need so I'm going to get rid of the ones that aren't needed and then you are going to be able to if you do not have any user snippets on your system then you can just pause the video right now and type this out this is a basic HTML skeleton so this has the doctype and if you ever see code that looks like this where it says doctype HTML that tells you that this is a html5 website then you have head tags which we'll talk about a little bit later and then body now this body this is where we are going to place the majority of our code for the home page so let's just this out just to make sure that it's all working so I'm going to use what's called a heading tag so I'm gonna type in h1 and then inside of this tag I'm just gonna say hi there now I'm gonna hit save and assuming everything works and what I can do is just come here and then click ctrl o or if you're on Mac command o and then go and find wherever you save that file so here it's the portfolio directory and index and if I open it up you can see it says hi there so everything there is working properly so I'm going to and also you can see this gives you the path to the file right up here I'm going to copy this and then go back here you don't need to do that part but I want to have the finished version and what we're working on open at the same time so that that way we can continually go back and check to make sure that everything that we're doing is lining up with the final version so that is the first part of it now that is only going to get us so far though obviously I'm gonna get rid of that heading tag and now let's go up and if you remember some other points that were needed were that we need to have the ability to have other files so this is going to be index but we also want to have that about page if you remember that so I'm going to say new file about HTML and so now inside of here I'm gonna do the same thing I'm going to add that HTML snippet here and I will get rid of the ones that aren't needed and then inside of here I'll just say about me and then let's add a heading here and now let's do a h2 which means it's gonna be very similar to the first heading we saw it's just gonna be a little bit smaller and it'll just say about me coming soon eventually we'll add more to this and now if you switch over to the browser hit open again now you can see we have this other file if I open it up says about me coming soon but it's a little bit smaller so that's kind of what a heading tag represents so this no longer has anything because we got rid of that h1 so that is the majority of our structure now the next thing that we need to do is we need to add some styles so as you may have noticed we have a lot of styles going on here we have all kinds of things that help with alignment with colors with sizing images that's all done by CSS so what we're going to do is we're going to create a CSS file that our entire application is going to be able to use so let's go back to our home page and I'm also going to close out of the about because we're not gonna use that one for a while and now in the body I am going to just have another placeholder here this time I'm gonna say dot and then from there let's just say placeholder because it doesn't really matter we'll get rid of this in a second and say I'm in a div now a what a div does is it gives you the ability to place components on the page so even if you're in BS code and you hover over it even gives you a little summary of what it div is what it is is it's an HTML element that allows you to properly manage all of the elements on the page so if you want to put some content or an image or anything like that in a specific spot on your site then placing it in a div gives you the ability to not only organize the code but also to select it you're gonna be seeing a lot of what I call and what is called selecting as we go through this course so right here I say I'm in a div and I said this has a class of placeholder when we say we have a class this means that this gives us the ability to now select this placeholder so in other words it gives us kind of like a benchmark or a target on the page that we can go and we can say okay I want to go and I want to grab this value so and I gave you the cool little shortcut where you could say placeholder like that but in case you're not using a text editor that allows for that you can just type all that out manually so you can say div class equals and then we'll say another class here and here I'll say I'm in another class so now let's hit save and I'm going to refresh this you can see where it says I'm in a div and now it says I'm in another class so both of those are there but if you right click and click on inspect what you'll see now is you actually see the code and this is the browser developer tool so chrome has this Firefox has it pretty much all of them have it I personally prefer what chrome offers but this gives you the ability to take a look at the code and as you're gonna see it also gives you the ability to test out styles which is very helpful there are many times when I'm building out websites that all spend quite a bit of time just adding styles and working on and working through the developer tools here before I go back and actually apply the changes now if you do make any of those changes here just know these are not permanent whatsoever so for example if you went to google.com here you can right click on this button so that little Google search button right here and you see where it has a bunch of height items where it says ok height is 36 pixels well you can say well what it look like if that wasn't the case or what would it look like if this that was actually 236 pixels now you may write here if you've never done any kind of web development or whatever you may think that I just changed Google's code that is not accurate whatsoever this is only the code that was sent to the browser so whenever we went to Google Google com that server sent us the HTML CSS and JavaScript code when it's here in the browser we can do anything we want with it but that doesn't change it for anybody else so this is simply the browser developer tools allowing you to make changes and so that's something that as you start building out website you'll discover is quite handy so what I want to do the whole reason when adding these little placeholder items here is I want to add some CSS styles and I want to make sure they're working so let's now switch back to the code and I'm going to come to index and I'm gonna type out link and then you also can obviously type this out manually I'm simply doing this to save time and so from here I'm gonna say Styles dot CSS get save and so now what we have to do is create this file here so I'm gonna come here and create a new file make sure that this is typed exactly the same way so if you say style and styles and it's not going to know where to find it so I'm gonna say styles and so this is gonna give me a new file here and now what I can do is I can use CSS to select elements on the page and then make changes to those styles so let's test this out the way that you can select an item if it is a class so right here you can see that we have two classes where it's a class with placeholder a class of another class the way you select it is with a period and then the name so I'm gonna say dot placeholder and now what I can do is let's just test it out by saying background color is red and then now let's come here and let's pick out our another class and this is case-sensitive so if I did something like another class this would not work and so now what I can do is let's add something else so this is going to be light C green as the background color so now if I come back here and hit refresh you can see that that has applied the styles so what has gone on right here and you can see it's placed inside of the developer tools as well so what's going on is the CSS file was added and you can click on head here and you can see that now we have this styles.css file inside of that file we have a couple selectors one found that there is a class named placeholder and then it said for that placeholder element on the page I want you to apply a background color of red then it found a style rule that said if you find a class it's called another class then I want you to make the background color on that light see green and that's exactly what it did so we now know because of that we now know that that is working and our architecture is all set up now just in case you're curious on what would happen if you say you had the wrong file name so I just changed that to style now hit refresh and those styles are gone now in the head it still has this call but now it's pointing to a file that doesn't exist so that was a whole reason why I added those placeholder items here even though we're not going to use them is because without them then we wouldn't be able to be a hundred percent certain that the styles were getting applied properly and now the final item that we need to have all of our architecture done is to add the images you may have noticed if you go and look at the final version here you may have noticed that we have these twelve images well those don't come out of thin air so I'm going to add those directly into our project so let me open up the Explorer here and inside of the project directory I'm going to just copy over from over here I'm just gonna copy an image directory now in the show notes I'm gonna give you access to the images so you can just come and download those yourself so that you'll be able to follow along or you can use your own images and just in case if you're curious on how I all of these these are all free to use and if you go to unsplash.com this is a great resource for being able to search for any kind of images and they're all free to use so you can type in coding and there are all kinds of cool coding pictures that you can use for your own project so that's definitely a good resource if you're building out websites for others so let's come back here and now we have everything working now you can see we have the images directory this is going to have all of those portfolio images and then it's also going to have all of the logos now obviously if you're building this out for your own portfolio then you're most likely going to want to have your own images and your own logos these are just projects I personally have worked on so I'm including these for myself and eventually I think I will probably take portions of this portfolio and add it to my own application my own personal portfolio so I can use that so those are all the files that we are going to need so we have our first item on our checklist completely crossed off we have our files and our architecture all set up so now with all of that in place let's move on to the next one which is the navbar so I'm gonna get rid of everything here and I'm gonna start building out that navbar and before I do anything when I'm building out these kinds of front ends I first just like to have the content there because once I have the content then I can rearrange it I can see what I actually want to use and then I can also see how all of the code needs to be arranged so I know that I have the two links if you remember we have the two links and we can go and verify that here so we have these two links and then we have this little just kind of a name this could be a logo or anything but for right now I'm just going to have it be text so I'm just going to add first those things so I'm going to create it's a link in the way you can do that is by giving a href and inside of an a tag now if that sounds like a foreign language do not worry and a tag is how you define a hyperlink in HTML and href is where the link points to so right now it's gonna be index.html and I'm just gonna say home now let's copy that and let's point to our about file and then here we can just say about and that's all we need to do now let's switch back and let's test this out just to make sure it's working so there you go you can see we have home and about now if I click on about you can see it takes us to the about page so in the very beginning intro I told you we're going to talk about routing that is as easy as routing gets in HTML you really just have to point to the file that you want to reference and then it'll automatically go there so if I click home then it takes me right back to where we were it takes me to that index page now if you wanted to point to an outside website so say you wanted to say I want you to go to google and you could just create a link and instead of just passing the file name you would pass the full reference so this is called the absolute path so you'd pass that and so now if you click on Google now it'll actually take you there so that's how you can work with links and also how you can implement routing in HTML so we have our home and our about and then we just want to have a name here so I'm going to put this inside of a div and there I'm just gonna give my name I'll do it in all caps because that's what the designer said to go with hit save and if I come back here you can see it has my name so yeah this doesn't look anywhere near as good as this one but that's where the CSS comes in and so if you've never worked with HTML and CSS just know that HTML by itself is going to look exactly like this there's really no style to pure HTML that's what you need CSS for so we're believe it or not with just the code that we have right here we're going to be able to create this navbar but it's gonna take a little bit of work so let's get started on that because I told you we're gonna be able to get this website done in an hour so we're gonna have to get rocking and rolling here okay very first thing whenever I'm building out a site that I'm adding some structure to is I create a container class so this gives me the ability to manage the entire set of elements on the page so I'm gonna create a container class here and then I'm going to close off this div at the very end so if you had not noticed yet the every div needs to have a closing div so right here you can see that this is the start of the div but anything that has a start needs ever finish just like we have that's why I added this div here at the bottom if you forget to add a closing div somewhere in the code you are going to have some very weird styles so that's why even though we have a lot of code to add above this where all of our portfolio items and everything are gonna go you still want to make sure you always are adding your closing divs or else you're gonna run into some just some very hard to debug kind of issues so we have this container class and that's where our entire application is going to go now the nav though needs to have its own div so here I'm going to create a nother class here and I'm gonna call this nav dash wrapper now you can call these anything you want these are just the type of names I personally use when I'm building out applications so I'm going to once again I want to put all of those nav items there so we need to make sure that we are adding the closing div in the right spot and then I also am going to I always indent this and that is the best practice so don't have you know all of your code lined up without any indentation if you have elements that are nested inside a parent div like we have right here then you want to make sure that those are indented so one thing you may notice if you go back and you look at the page right now nothing's changed and the reason for that is divs by themselves don't really do much the only thing that they do is they will give a line break which is a reason why this name here is on a line below but adding these wrapper divs didn't do anything the only thing that's going to add some different style there is when we go and we go into our CSS file so that is going to be our nav wrapper and then inside of here whenever you're looking at a page and you're looking at a design you need to build right here you can see that we have our links on the left hand side but then on the right hand side we have the logo or the site name that kind of thing whenever I see something like this my first thought is okay how am I going to arrange this in code and usually the most logical approach is to create divs that these groupings belong into so in other words I'm going to create a left column div and then I'm going to create a right column div so let's wrap our home and about inside of those so here I'm going to say left and I'll just say left side and then right here I'll close that div off and then indent it and then I'm gonna just copy this and on this one it's gonna be right side and then indent that once again this won't have any changes on the site but what we're doing here is we are wrapping the code up in a way where it's gonna make it much more straightforward to select these elements on the page and then add our own custom styles to them so we are almost there except I just have a couple more classes that we want to add so these links aren't be all by themselves either these links also need to be in their own wrapper class so here I'm gonna create a class called nav - link wrapper notice this is a different than nav wrapper this is a nav link wrapper so it's specific to that and then I'm just going to close that div off and put that inside of it and I'm gonna use the exact same div here or this I should say the same class here and then down below this one's gonna be a little bit different now I'm going to create a different class name because if you notice we have different styles here these links have a different look and feel slightly than this brand so these styles are gonna be related to links these styles are going to be related to text so I'm just going to call this brand close that off indent it and that is the full structure that we're going to use for our navbar in HTML so now that we have that I think that our page is definitely at the spot where it needs some Styles because this is starting to look pretty ugly so now let's make some magic happen with the Styles so I'm gonna come here and let's get rid of all of that code and now I'm going to start with the nav wrapper I'm going to start pretty much top to bottom so you can see here we have the wrapper up at the top and then from there we move down to left side nav link wrapper right side and brand so we're gonna add styles to each of those and that's going to give us a perfect opportunity to learn about flexbox flexbox is a tool inside of CSS that allows us to align our elements on the page in a much more straightforward manner than it used to be possible so let's start off by getting that nav wrapper so I'm going to say nav - wrapper and then inside of here I'm going to say display colon and then flex so what that is going to do is let's go really quick to here and see exactly what we have going on so now you can see something kind of interesting you notice how by just adding that one style rule it moved the name that brand class to the right hand side so the way that flexbox works is it takes your wrapper divs and so if you come here so you can see with nav wrapper notice here how inside of it even though you see a lot of code here technically there are only two dibs we only have our left side and our right side now inside of left side we have multiple dibs but the way flexbox looks at things it completely ignores everything inside of the child elements so what we can do is we can say I want you to apply flex styles to nav wrapper which means that just by default it is no longer going to have the element stacking on top of each other instead they're gonna be on next to each other like left side and right side exactly like how we have right here so now that we have that in place we can start to add some other styles so here I'm going to say justify content and then space between now this is going to do some being pretty cool it's actually going to do pretty much exactly what it says it is going to justify the content and the way it's good justify it is by spacing it out using all of the open space in between so now if you come in hit refresh you can see that it took all the open space and it's now using that for justifying that div so that is pretty cool now let's come and let's also add some padding and so for this padding I'm going to go a thirty eight pixels I'll hit save and what that's going to do what padding does and you can see in our little box right here you can see the diagram for how padding works it has margin in the far end of the box then it has whatever your border is then it has padding and everything inside of that is your actual content so when I said I want you to take what is right here and I want you to add 38 pixels to it right now as zero pixels so right this is going to increase this by quite a bit and if I hit refresh you can see that now we have space where we didn't before so that is the full set of styles for the nav wrapper now let's go and add styles to that left side class and here we're gonna say display flex because as you may have noticed right here these two items are sitting on top of each other but in the final version we want to have them right next to each other so display flex allows us to do that so if you now hit refresh you can see they are right next to each other so we've seen how we can select single items but now let's see how we can actually traverse down a tree so I'm going to just copy this and I'm gonna start with our nav wrapper and then I'm going to use the greater than sign so I'm gonna say I want you to start with the nav wrapper class I want you to select that but I want you to apply these styles to it next I want you to go down to the left side and then I want you to grab the divs inside of there so how that's gonna work in the HTML is it's gonna look at the nav wrapper then it's gonna go down to the left side then it's going to grab any divs inside of there and whatever styles I'm about to give are going to be placed on those divs so that is the way you can traverse a tree and CSS a you grab each one of those objects and tell it exactly which one you want to work with so here I'm gonna add some margin right so I'm gonna say 20 pixels because you saw how they were right next to each other and then I'm gonna do a font size of 0.9 m this is so what the way M works is it's a percent of what it normally would be so by default the font size is 1m so I'm gonna say 0.9 which means about 90% so now if we come back hit refresh you can see that now we have this nice spacing and the font size is there now you may have noticed that right here with the brand that I have it in all caps and here we have all caps for home about and the brand well I did that on purpose I wanted to show you that you don't have to actually type the code out in the HTML in all caps you can use CSS to do that as well so if you want you could put in what's called a text transform and then say uppercase now you have some other options too you can see when I did that yet a few other ones I think down case was one and there are a few other options but upper case is what we want here now if I hit refresh you can see that that automatically converted these so that they were in their uppercase state and we use CSS to do it HTML itself was not change this still says home about and it's in its normal case so that is that it's our left side now inside of the left side we have that little nav link wrapper so let's add some styles there so I'm going to say dot nav link wrapper I'm gonna add a height so this is gonna be a height of 20 two pixels then I'm going to do something that may look a little weird but I'm gonna explain it here in a second I'm gonna add a border bottom here that is of one pixel solid but then it's transparent so in other words you're not actually going to see it and the reason for that is going to be made apparent here in a minute and then we're going to also see how animations work in CSS so I'm going to add a transition and this transition is going to call whatever part we want to add the animation to so I want to animate the border so I'm gonna say transition border bottom and then here I'll say for this one 0.5 s which means half a second now nothing's gonna happen here yet so if I hit refresh all that's really gonna change are the style elements what we're doing is we're setting up the styles so that they can have this kind of behavior they can have that cool little fade in the colors can change there's no jumping anything like that so this is what we're looking for instead of what we have there right now so now that we have our nav link wrapper let's come down and let's start adding some more class styles so now I'm going to say nav and let me just copy this so nav link wrapper but now at the end I'm gonna say a space and then an A so what we're doing here is we're saying inside of the nav link wrapper I just want you to grab the a link now we didn't have to go through all of this kind of sin tax just mainly because we're just using a single selector we're just saying I want the nav link wrapper with the a link and so now inside of here I want to add a little bit different color so here the color I'm going to add is start with a hash and then say 8a 8a just like that and so that's giving us kind of a light gray and then also if you may have noticed right here this underlying looks kind of ugly this is the basic HTML underlined and you may have noticed here we have this cool little underline that is spaced out the way that you can accomplish this is actually by telling HTML to not have an underline at all and then we're going to use the bottom border attribute in order to manage that style so what I want to do here is I want to say text-decoration:none and then here I'm gonna say transition color and then I'm gonna say same thing point 5 seconds so half a second here so what we're doing is we're setting it up so that we can have two animations because we want to animate the color we also want to animate that border bottom so now if we hit refresh the only difference is the underline is gone and then we also have changed the color so we know everything is working but we still have to implement the rest of those styles okay and switching back believe it or not we only actually have two more style definitions to add in order to finish the navbar so I'm going to say here we want to now have our hover States so as you may have noticed that if you look at the final version this set of styles changes based on the hover action so in CSS you have the ability to tell the browser when the hover state occurs I want you to change the styles so I'm going to say now link wrapper and then add a colon and hover that's a way that you tell CSS that you want to use one of these they're called pseudo States so we want to check for when hover occurs and when that happens this is where we're gonna change that border bottom so now I'm going to say border bottom one pixel solid and then we can just say black saved and now let's just come here and do the same thing except it's not going to be the border bottom it's actually going to be the color so here I'm and it's not going to be on the wrapper itself and I'm gonna explain why in a second so I'm gonna say NAB link wrapper a and then inside of it color and then black so this may look a little bit tricky because technically you may notice we have two different hover States one for the link one for the div itself but I'm going to show you why that is here so if I hit refresh now you can see that's working perfectly you notice that we have the cool little animation and we also have it fading in and out as opposed to you know what we had before where is just that ugly text decoration so this is matching up perfectly now if you notice also these fonts are different the reason for that is because we haven't imported the font we're gonna go with at the end so right now this is just the ugly basic HTML font eventually we're gonna add in our own custom one but that is working perfectly so great job if you've gotten to this point you now know how to build out a full navbar using flexbox so now that that is crossed off the list let's move down and start building out the portfolio item so this is going to be what takes up the majority of the screen real estate so this is going to obviously be important part of it so we'll come back here and I'm gonna switch back and I'm actually going to come to the very hop far the reason why I didn't do this in the beginning is because it really wasn't the right time for it but at the very top I'm gonna put might kind of master styles here so I'm gonna select the entire body what this is gonna do is it's going to grab the body of the HTML document and I want to add a margin of 0 pixels so what that's gonna do is by default the body has a margin of I believe it's 8 pixels and so in order to get rid of that we have to override that so now if you come back hit refresh you don't see a huge difference because the background is white but this did remove that margin you could kind of see those move back a little bit so that's why we're we're removing it because if you notice we want these images here the portfolio item images butting up against the side of the page so we need that now we also are now going to be introduced to CSS grid so CSS grid has a lot of similarities to flexbox it is a tool built in directly into CSS and it gives you the ability to align items you know there are a number of differences between the two I definitely definitely don't have time to go into all the differences hopefully as you see as I'm building this out some of those differences will be made apparent my kind of rule of thumb is I like to have my layouts in grid and I like to build out my small elements like my nav bars using flexbox that's my personal preference every one is a little bit different but we are going to layout our entire application using grid and so that is where we're gonna grab that container class that we created and now I'm gonna say display grid and I'm gonna say grid template columns 1fr now that may look weird if you've never seen that before what we're doing is we're saying I want the container to use grid then I want you to create these template columns using 1f R which stands for fractional unit so what that means is that our entire layout now is going to have is gonna be considered as having columns even though you can't really see them if I come here one of the nice things about Google Chrome and Firefox if you hover over do you see those little dotted lines there that's telling us that that is one of the columns so just like how flexbox was able to take those div elements and separate them out grid does the same thing and when you say 1fr that means a hundred percent it means I want you to take up one fractional unit which means this column of the nav bar should go from n to n just like our portfolio items should go from n to n so that's how that works so now everything that we add below here is gonna be considered in that next row down below it so that's that's all the styles that we actually need to add to our container class and so now let's move all the way down and so now what we're gonna do is be able to start building out all of the portfolio styles so I'm going to just kind of give us and this is just kind of a best practice here I'm gonna add some comments so I'm gonna say master styles and then here I'll say these are our nav styles and then if you come all the way down to the bottom these are gonna be our portfolio styles hit save and now what we can do is actually jump back into the index now that we know where those styles are gonna go and now we can go write notice where nav wrapper notice where it has its closing tag now what we can do is come in so doing we can do the exact same thing we did with our HTML on the top nav bar now we can do that for the portfolios so I'm gonna create a wrapper here so I'm gonna say content wrapper and then inside of here I'm going to create another rapper called portfolio items wrapper now one thing to keep in mind it's very important you keep your naming consistent so here all of the portfolio items are going to go inside of it I'm also going to have this in its a singular form so here I'm going to create let me give us a little more room so we can see it and close this div off so I'm indent it and here notice the difference we have our content wrapper which is just everything on the page so everything below the navbar is going to be in that content wrapper then the portfolio items wrapper this is going to give us the ability to have one spot we can go to where we know this is what stores the collection of portfolio items then down below that we're gonna have the portfolio item wrapper just like this so we're having our kind of our master one here's our master wrapper then we have the collection wrapper and then here we have the single one so if it helps you to visualize how it works if you look at the finished version the entire page everything below the NAB is inside a content wrapper inside of that is the items wrapper that has all of them and then each one of these so like this quip one this dev camp one those are each their own singular wrapper now let me give us more space so we don't go too far off the screen and so now inside of here what I want to do is actually build out what one of these is gonna look like so I'm going to just say div I'm gonna write this one all out and I'll show you why here in a second so I'm gonna say div class portfolio - IMG - background now obviously you can call these whatever you want but I like my names to be very readable and this tells me that a this div is going to have a portfolio image background now I'm going to add a inline style so this inline style is going to be a little snippet of CSS so this is going to have a little bit of CSS code so I'm gonna say background - image : URL and then inside of here I'm going to pass in parenthesis and the parenthesis is going to be a path to the image I want to grab so here I'm gonna say images slash portfolio 1 dot jpg and that's it and then from there I have to close that off and then it automatically closed the div for me so let's hit save here and let's just make sure that this is making it on to the page and we don't have any URL issues so if I hit refresh here it's not going to show up because we haven't given it a height yet but let's make sure it's in the HTML so I'm gonna click on content wrapper items wrapper item and then you can see we have this background image right here and it is pointing to the portfolio JPEG it appears everything there is working so if you're curious on why that didn't show up it's because we're going to do a little trick if you notice what we have here where we have this code that is layered on top of the image and we have this cool little animation and this fading that is something that HTML and CSS route of the box really does not do so we need to have a way of implementing that kind of style so the way I did it was creating a div and it's only job is to have a image and to have that image that as its background now we're gonna have the text in a completely separate div and so let's add that part now so I'm gonna come here and make sure you're out of that portfolio item rapper I'm sorry the the portfolio image background and now let's create another div here and this one let me just gotta say image - text rapper and here I'm gonna have one div that is gonna manage to the logo so I'll just call that logo rapper and then inside of here I'm gonna have the image now I'm gonna you're gonna see two ways of working with images with HTML and CSS the first is when you want a background image then you use straight CSS code just like we have right here with a call to the URL of wherever it's at now if you're using images inside of your HTML then you want to use what is called the IMG tag and then you pass in SRC which is short for source and then you pass in the path so for my first one it was images slash logos slash quit dot PNG and make sure you don't have any spelling mistakes or anything like that or else it will not find that and so that is gonna be the logo wrapper and then below that is going to be the subtitle so here I mean it's gonna call it subtitle and you can add whatever you want in there now I personally because this is my these are all my own actual portfolio projects I'm just gonna go off screen really quick and let me copy that so I'll hit save and now we should actually have that so switch over here hit refresh and now you can see that that's working now the image itself is white so you can't see it on this white background but now you can see that it's at least there now what I'm gonna do is I'm actually going to copy I'm gonna pause the video right now and I'm going to copy and paste all of these and don't think that there it doesn't really serve you any purpose to to watch me do that so what I'm gonna do just so you know so you can follow along is I'm gonna take the singular portfolio item wrapper I'm just going to go and I'm just gonna copy until the its closing div tag so I'm just gonna do this 12 times and then I'm gonna go and I'm gonna call the appropriate logos now for you it doesn't matter whatsoever which one you use and I'm also gonna increment this value so I'm gonna do portfolio 1 2 3 etc and update the subtitle so I'm gonna pause the video do that so that we have all 12 of them on the page when I come back and we're back so all I did like ice mentioned was I just added the I just duplicated each one of those portfolio item wrapper classes and everything inside of them and then I just updated the logo name and the subtitle but none of this mattresses this is specific to my personal portfolio yours is going to be different so you can really have just copied the identical one 12 times so now that we have that and you can just go verify here that that's working so you can see that has each one of the items there now now we can start adding the styles so at the very bottom here on portfolio Styles I'm going to take the portfolio items wrapper now make sure that you spell it correctly it's portfolio items plural wrapper and then inside of here we're going to use CSS grid once again so I'm going to say display grid and then from here this is going to be a little different we don't want each one of them to take up from the full left side to the right side so I'm gonna say grid template columns which is what we use before but now I'm gonna say 1fr one of our 1fr so what this means is it's going to give each one of the columns and it's gonna have three of them so we're gonna have three columns here and it's gonna give each one of them their own little full-sized column so now let's hit refresh and now you can see that it's moved them so they are all in their own columns obviously still a lot of work to do but notice how easy that was within two lines of code we were able to create an entire grid layout I can tell you someone who's been doing this for a very long time that it used to be much more challenging than that so that is something that I really enjoy using now is tools like CSS grid and flexbox so now with that in place let's go and let's grab the portfolio item wrapper and here we're just going to add a position to it so I'm gonna say position relative and what that is gonna do is it's going to allow us to have some more flexibility with how we position each one of the items inside of it so I already mentioned how behavior like this where you have text and images sitting on top of other images by default HTML and CSS don't really allow for that kind of thing so we're gonna have to kind of force that to happen and so the first step in that is by adding a position relative and then what we're going to do is we're going to start styling that image background so now I'll say portfolio - I am G - background and this is going to style the cover and just some of those image related items so we first want to have a height and a width so the height is going to be 300 pixels and the width is just going to be a hundred percent so that means that each one of those is going to be 350 pixels tall and the width is going to adjust automatically then I want to have a background size of cover so what that's going to do is imagine a scenario where you don't have images that are the same size which is actually the scenario we're in each one of those is sized differently we want to make sure that we are cropping the images so that they will all sit nicely next to each other and so that's what background size cover does then I want to do background - position and then I'll say Center and then lastly background repeat' and we want to do no-repeat so this is the reason why I set a background image on each one of those elements and why used inline style so instead of us putting the images here I did it right here and so now all of our styles are going to apply to that background so now if I come back hit refresh you can see we are starting to get somewhere so you can see that now we have our background image and we're starting to actually have something that looks a little bit closer to what we have here so we are on our way now we still have some work to do we now need to work with that text so notice how that text was just sitting down below it and that is the default behavior remember whenever you have HTML and you have two divs sitting next to each other or below each other in the code the HTML is just gonna say okay inside that div you just slide on right underneath and then it's gonna continue on we want to say nope I want to position the HTML right on top of this other diff and so the way we can do that is first by selecting it so I'm gonna say image text wrapper and inside of it you know say position absolute then and also one key thing to note here because this can be a little tricky if you've never done it before position relative is required for if you want to have any position:absolute elements nested inside of it so that's why we had at that position relative here because if we're going to use position absolute which is us saying we are forcing this element to be someplace where usually it would not go in order to do that it has to be in a parent element that has a relative position so I'm gonna say top zero which means I want this to be positioned at the very top and then I also now want to use flexbox so yes a display flex and now I'm gonna say Flex direction we'll use column justify content we're not going to use space between like we did before now we're gonna say Center then inside of there you'll say align items Center we'll give it a height of a hundred percent we'll say text align is going to be centered and then we'll add some padding so I'll say padding left is going to be a hundred pixels and then padding right is going to also be a hundred pixels wow that was a lot of stuff so let's actually take a look at this and then definitely feel free to review each one of these items essentially what we're doing is we're saying that this image text wrapper is going to be positioned at the very top wherever we want then inside of it all the elements are going to use flexbox so we're going to Center these items we're gonna use flex or gonna Center them from left to right and top to bottom that's what align items does and so justify content is going to do left to right aligned items is top to bottom we want it to take up the full parent height so that whole hundred percent and then we want every all the text inside of it to be centered so now if we hit refresh oh yes this is starting to look better so now notice that this is starting to finally actually look a little bit more like this so we have our images and now because we've used absolute styles and positioning now we have those images and texts sitting on top of that background image okay we are getting much closer to being done so now let's come back to the code and let's style those images so now I'm going to grab the end when I say style the image I mean the logo image that's sitting on top of it so I'm gonna say logo wrapper I believe that's what we called it and here I'll give it a width of 50% and then a margin bottom of not the Lockean just margin bottom of 20 pixels it's save and if we come back and hit refresh it looks like I forgot to actually select the image logo wrapper image like that and now if I come back there we go so notice how much better it looks when they're a little bit more shrunken down like that no they're also now all unified so now they have the same exact size so this is starting to get really close now you may notice that we're about to get into the part where we're adding that dark fade animation and the subtitle doesn't actually start off so we need to make the subtitle be invisible in the beginning and then animate it change its color and then have it appear later on so let's see where we're at right now right now it's black and so what we're gonna want to do is let's go first and let's first make sure we have these colors and the style right for the subtitle and then we'll talk about how we can use JavaScript to animate that so let's go come here and the style let me really quick come back to the index to see what we called that so that is yeah that is just called subtitle so here I'm gonna say subtitle and then inside of the subtitle we're gonna want the font weight so this is how we can make things bold I'm gonna say font weight is 600 and then the color let's go with that light see green refresh and that's looking a lot better now it's not matching perfectly because we haven't added the custom font yet but that is what we're wanting from a style perspective and then we're also going to have to darken these as well so let's see what else we need to do and one other thing one little change I'm gonna make so technically this works but we are going to have to add a little temporary note here so I'm gonna say it needs to be more specific with selector because remember this is gonna change based on if someone's hovering over it or not so I just want to make a little note there just so I don't forget when I come back to it so now let's talk about how we can have those images get darkened so I'm gonna create a class here called IMG darken and we know it what we want to animate it so I'll say transition and we'll just say one second and then I'm also going to use what is called a filter so I'm gonna say filter and then we'll go with brightness and brightness is at let's go 10% okay this is not going to do anything yet because we have not applied this we haven't called it in any of the index.html file but what this will do or how we're gonna use it is we're going to kind of use this as our own special function so we're going to have our JavaScript dynamically add and remove this class when someone is hovering over that so that's going to be pretty cool that's gonna allow us to have a lot of flexibility with how we can do it because if you tried to do this without JavaScript then it's gonna be a very tricky kind of feature to implement on the CSS side it is possible but it's not the way I would suggest so I will always go with just a little sprinkling of JavaScript if you want to implement a feature like this so now let's come up here and let's add that specificity so here we know this is the ending version so what I'm gonna do is I'm gonna say dot IMG txt wrapper and then we're gonna add it so we're gonna say only for that hover state then this is what we want to occur so I'm gonna hit save there and now if I hit refresh then this only turns green and changes when I am hovering over it so that's working pretty well now let's come up and let's add the start state for it so technically that should only happen when someone is hovering so now let's remove this hover value and let's add the transition so add transition one second I want it to be nice and slow and then I want the starting color to be transparent so hit save here and now if you hit refresh you can see that it's not there but when you hover over you can see that that's when it appears so let's see and it's I'm seeing I'll let you see that little jump so I'm thinking that what in order to fix that I think what I need to do is to have the font weight also there as well so if I save that and hit refresh there we go you see how much smoother that is and the reason for that is because the font weight was starting here and it was starting at its normal value so we were catching and we were able to see that little transition from normal all the way to the font weight of 600 so that was the fix there and now technically that is all of the styles that we need so we still have some for the about page just a few but those are all the styles so now let's hop over and let's add the JavaScript code now javascript code typically where you're gonna see it is at the very very bottom of the page and the reason for that is because javascript works with selectors very similar to the way that CSS does but you would not want your JavaScript code to run before all the entire page is loaded so we're going to actually go under the body tag here and that's where we're gonna add our JavaScript code and the way that you can tell HTML that you want to run JavaScript is by creating a script tag just like this make sure you have a closing and opening one and then just like that and now we're going to select the portfolio item so we're gonna grab all of the portfolio items on the page now if you've never done this before don't worry it is not like magic whatsoever we can just come here and if you come into the console you're gonna be able to see how we can do that so I'm going to just build out a little selector here so I'm gonna say dollar dot and then inside of a make sure you use an apostrophe and then say dot portfolio item wrapper and then you can see that it pulls in that portfolio item wrapper it pulls in the very first one that it finds so that means that that is working properly you can do a selector now this is the syntax right here is actually what the browser's allow you to do in order to work with JavaScript code now javascript has a little bit different syntax but I wanted to do that first one just so you could see what you can do inside of the browser now what we want to do is to store it in a variable so the way you can do that and if you are not familiar with JavaScript you've never touched it before do not worry you can just simply follow along and see the process so I'm going to say Const portfolio items what this means is I'm creating a variable called portfolio items and now we can say document dot query selector all so I'm saying that I want you to find all of the elements on the page that have that selector so we can even come here and just copy this because this is we already know this works so paste that in here and now if I run that nothing gets returned but if I click on portfolio items we have this really nice little node list and you see how it says twelve that means that it selected all twelve of these blocks here so that means it's working and if you want to click and expand it you can see it grabbed each one of those portfolio item wrappers and we have access to everything including a very important element which is to add an event listener so the same way that we listen to the hover state in CSS we can do that in JavaScript except with JavaScript you have to be a little bit more explicit so I just copied that code here so that is exactly what we already entered into the browser so we know that works and now I'm going to loop over these so I'm going to add an event listener so I'll say portfolio items dot for each and for each takes a function so what a function is if you've never worked with JavaScript functions is it's just a process that runs and so we're saying we want you to run this process for each one of the portfolio items we need to be explicit and say we want you to work with all of them now when I say portfolio item just like this I'm giving what's called a iterator variable now this may look really weird if you've never seen it before but this is not a special name I could say X right here I but I wouldn't recommend it mainly because if you did you wouldn't you wouldn't really know what your talk but I like being explicit with the name so I'm gonna say portfolio item then you do the equals greater than symbol so that's called an arrow function in JavaScript followed by curly breaks braces and so now everything inside of here every time that the page loads is going to be run and it's going to be run and applied on those portfolio items so now I can say I can grab one of the singular ones so as it's iterating every time it goes through for each it grabs that element and then we can do whatever we want with it so now you can say portfolio item and then dot add event listener so just like we added our hover state here we don't call it hover though the way JavaScript goes about it is it's called the mouse over event and mouse over event also takes a function so we're gonna use our fun little arrow syntax again so very similar to the same syntax we had here the only difference is for the for each loop we passed in an argument this portfolio item is called a iterator variable but it's in the item slot here we didn't have any arguments so we're just running what's called an anonymous function so we're saying just go and run this process so here I'm going to do this and let's just log it out so I'm gonna say console dot log and then let's grab the element so I'll say portfolio item and let's just see what we have when we do this so I'm gonna hit save clear this out with clear console now hit refresh now if you hover over there do you notice now how you have access and it is now every time you hover over one of the images it's doing exactly what we wanted so it is logging this value out so the very last one that we should hover on should be this one so now if I click on this this tells me exactly what's there and so gives me access to all the elements inside of it it gives me the portfolio image background the image text wrapper everything like that so that is perfect that's exactly what we need because if you remember the entire reason we're doing this is because we want whenever someone hovers in we want to add that class that we created that I forget the name of after reference at the image dark in class I think yeah so we want to add that and so now that we have access to it we can so let's come back here I'm gonna get rid of the console.log statement and and actually you know what I'm going let me keep it up there for one second so you can see this because as you may have noticed this gives us a lot of data gives us the full div but we only want one of the items here so that part might be a little bit trickier if you've never done this before so I don't want this next part I'm going to do to kind of intimidate you whatsoever it is probably the most challenging part of this entire tutorial so if it looks weird to you or anything like that don't worry it is all we're doing is we're taking that HTML object of that div in those classes and we're using javascript to manipulate it so what I'm gonna do here is I'm gonna say portfolio item dot which is what we just console logged dot child nodes so what that means is if you remember we had those child nodes which means those nested divs we had those nodes come out so if I want to I can just say console log here and let's see how this works okay so if I hit refresh now now you can see we have this node list so this looks a lot like an array it's a collection and we have these indices here so the first one is just text we don't want that one so what we want is to grab that element the portfolio item background it had an index of so what I can do here is let me just get rid of this I'm gonna say portfolio item dot child nodes I want to grab that at one with the index of one and then I want the class list so I'm going to say class list okay and this will be the last console what we do in awhile I promise but I the other thing I did promise you at the very beginning of this tutorial is I'd walk through my exact process and this is exactly what I would do so if I were asked to build this kind of thing out I would walk through all of these steps where I would console.log constantly I would run the debugger like this and I would be able to see all the values that are there because as long as I know the values I will not get stuck I've been doing this for a long time and one of the biggest challenges that I found is when I don't know enough about the data that is when I run into bugs so I try to always make sure that I'm listening to the data and what it's telling me so let's come to the console here now if we hover over you can see we have this Dom token list now we have that portfolio image background and we have the value of it so notice how we've kind of traversed this entire element we first started off with grabbing all of them then we narrowed it down we filtered it down until we got the exact div we wanted and then from there we filtered it down even more and we said just you know what just give me the class list and so now that we have all of that let's actually just take all of that I'll keep that console log just in case we want to see anything else now I'm going to say class list dot add and now this is where we finally get to call that image darkened class so here I can say image darken and so now let's hit refresh and look at that now that is working now when we're hovering over these it is actually making that happen so that is fantastic now you may notice that it is and it's acting a little tricky because why because these images and are stained dark well that is because we need to add one more event listener so I'm just gonna copy this and come here and this time instead of adding event listener mouse over I'm going to say Mouse out just like that and I'm gonna remove all these console.log statements and now instead of classlist add I'm gonna say remove it save now if you come back here hit refresh now you can see that when you mouse out now it is doing exactly what we're looking to do that it fades in goes out as you're navigating all around the page so this is working beautifully very nice job if you went through that because now you not only know how to work with animations and all kinds of styles like that and create your layouts you also now know how to traverse the entire DOM all of these HTML notes here and to apply dynamic Styles based on the user behavior so very good job with that we only have one very small piece left and we're gonna be done let's switch over to the about page and now let's jump into the text editor and we're going to actually build this out now as you may have noticed we have a lot of content here and with the way that just vanilla HTML CSS sites work is in order to get this on the other page we're actually going to have to copy and paste this now if you are working on a larger application that uses a framework such as Ruby on Rails or react or view or something like that then what you'll see is that you don't have to copy and paste this you simply will have one layout or multiple layouts for the application and then you will dynamically update the content inside of it so this isn't something you'd have to do if you're working with a framework but because we're not we do have to do this so I'm gonna first come here and I mean just gonna do clear all this out because if not then we would run the risk of having two versions of HTML in there which would be a little tricky so now let's just copy and paste this and then we'll remove everything we don't need which is the majority of it so here we'll change the title to about and we still want the style reference and we want the nav the home the about and all that kind of good stuff and then we also want to have the container so that container was there at the top and we want the content wrapper so we want that I'm gonna get rid of everything else for the portfolio items wrapper we don't want that and we don't need that Java Script so I'll delete that okay save and now we are good to go so let's come back here hit refresh and you can see that this is working we have the home and about links now we have this nav bar and we can start adding what we need in this page so this is our last element so inside of here I'm gonna create a class and I'm gonna call this one something a little more generic because if you're building this out for an application that may have all kinds of pages then you don't want to do something like call this the about Us page or something because and it'd be weird if you wanted a two column layout for your contact page or something so here I'm going to say two column wrapper just like this and then inside of here I want to have the profile image and let's take a look at this just don't forget anything so we want to have the profile image here and then on the right-hand side we want to have that content so we want to have then one class then we'll just call this profile image wrapper and then inside of here we're gonna have an image but I'm gonna wait on adding that until I've added the full structure and then so right below profile image wrapper let's have the dot profile content wrapper and that's where we're gonna add the content and for this for the sake of this obviously you're gonna have your own content that you'll put in there but for mine I'll just copy mine over so we have a image if you look through the image directory and if you go all the way down the bottom you see we have this profile image so we can call that so I'll say image and the source is gonna be images profile dot JPEG you don't need an alt tag for this and now inside of here we're gonna have our one heading and two paragraph tags now we haven't dealt with paragraph tags yet but what they do is pretty self-explanatory they just give you paragraphs or way of segmenting different pieces of content we did see an h1 tag before so that one is gonna be relatively familiar I'm just gonna copy this over and then inside of here I'll just paste all of this in and let's give us a little bit more room feeling a little scrunched here so I'll say h1 and then make sure that you close off your h1 tag and now with the paragraph it's the same thing so you're gonna have a paragraph make sure you close it off and then place that code inside of it the very end close off that paragraph tag and then we'll do the same thing here okay so now if I hit save let's go and see what we're dealing with now so if I hit refresh you can see okay kind of but not really so we have the image but it's taking up a lot of space and this is the size of the image this is the actual size that we have and then we have this below it so this obviously needs a few styles so let's go and add those I'm going to come down here at the very bottom and we're gonna add in a comment this is gonna say the about page styles so now what we can do is let's add in the styles for that two column wrapper first so two column wrapper this is gonna use grid so we're gonna say display grid and then well inside of there we're gonna have two columns so grid template columns and you may have guessed that means we're going to do one fr and one fr now we have that profile image wrapper so with that one we're gonna do is profile - image wrapper we need to make sure we're grabbing the image and then inside of here just say that we want the width to be a hundred percent let's see what this is looking like now so now if I hit refresh there we go that's looking much better I'll close this off and you can see that's giving us much more the behavior we're looking for now we just need to add a few styles here so let's do that so we have that profile content wrapper profile content wrapper and then for that I'm just gonna add some padding so padding of 30 pixels and then let's style that h1 so profile content wrapper h1 and then the color of this one will be the light C green hit save refresh and there you go so that is phenomenal this is this entire site looking's so good I'm really liking this now the one thing that's missing is the font so that font really needs to get better so the way they great spot to find fonts is at fonts google.com so I'm going to have the one I already picked out which is called the lotto but you can use any one that you want and the way you can grab it is click that little plus button and it's gonna say of this family selected here and it's all free to use so it gives you the code that you need to use right here which is very nice and handy so I'm going to grab this link and inside of both of these you need to put it put it in the top of index and the about and you need to use it above the stylesheet is to paste that in same thing here come up to the top paste that in and so now we actually have access to it so if you come to styles and go all the way to the top of the page inside of the body here what you want to do is now you have the font but you still need to call the font and so inside of the body because we want everything in the application to use it you can say font family and then we'll say lotto comma sans-serif what this means is that we're telling our CSS that we want you to use lotto by default but if you can't access it and that could happen so imagine that this URL that's sending us the font is too slow then we're saying that we want to have a backup font right there of sans serif so let's come here hit refresh now and there we go now we actually are looking like a real site so notice how much difference the right kind of typeface just makes a huge huge difference so that's looking really good come here click on about and this is working beautifully as well now there's one thing I just noticed that I forgot to put in and only take a second to do is that you notice how we don't have an active state on these links so if you come here on the final version we when you're on the about page it has the underline permanently there when you come to home it's there right now we're only getting that when it is a hover State so what we need to do is to add that active State in so I'm gonna come here and come into NAB styles let's come to just to the very bottom of these nab styles and I'm going to create a new class here called active - nav - link and we're gonna add the boarder bottom of one pixel solid black which we've already been using before and then we also need to do the same thing now with the border but with the color for the link so active nav link with an A and now we can say color and then black and then we have to do one other thing we have to say this is important and the reason for that is because we need to override the default color behavior and so this should be all we need to do that okay that is going to be part of it now we actually have to call it from the HTML so whenever we're on the home page right here then what we want is that active nav link to be there and whenever we're on the about page we want it here so here it's gonna be active nav link okay let's see if that finishes us off so hit refresh and there you go now you can see this one's active if I click on home now the home one is active and that's how you can add active States and an active class directly Chui that now you could use JavaScript to do that but that would take even longer so this is kind of a quick and easy way of doing it just fantastic job if you went through this I know that was a very long time but you literally within just around an hour so and it would end up being a little bit more than that but just in a pretty short period of time you built out a fully professional website you have now all kinds of cool things like animations you're using images you have multiple pages you're using modern technologies such as flexbox CSS grid so that you're laying these components out on the page properly and you are ready to go you can with these tools you can build any kind of website and that's really one of my top goals for this video is giving you that because I can tell you I'm built web applications literally all day and so I am using these kinds of tools constantly what I just showed you makes up the majority of the HTML and CSS code that I'm writing on a day to day basis being able to Center items being able to lay them out on the page so that they're all in the spots where they need to be applying styles using selectors those are the kinds of things that you'll be doing every day as a developer so great job congratulations you have your first website done and you're ready to move on and build out any other site that you can think of

Channel: Udemy

Views: 1,783,801

Rating: 4.9357204 out of 5

Keywords: html, html5, html5 tutorial, HTML5 Tutorial for beginners, html5 crash course, html5 api, jordan hudgens html, css, css3, CSS Tutorial, css tutorial for beginners, javascript, javascript tutorial, javascript tutorial for beginners, website design, how to build a website, learn web design, learn web development, web development tutorial, create a website from scratch, easy way to build a website, website development tutorial, jordan hudgens, udemy javascript, udemy, udemy.com

Id: 5bMdjkfvONE

Length: 98min 51sec (5931 seconds)

Published: Tue Feb 19 2019