Build a Portfolio Website & Deploy

[Music] what's going on guys so in today's video dennis ivanov is going to create a portfolio website from the ground up and he's going to deploy to aws now this is kind of a long project but i would suggest following along it's for all skill levels he's going to use css grid he's going to implement a javascript theme switcher so it's a really cool project and definitely check out his channel it's called dennis ivey and he does a ton of stuff with python django so if you're into the django framework definitely subscribe to his channel he also does a lot of javascript and he has a lot of like helpful advice videos that are really informative so definitely check them out links in the description and i think you'll really enjoy this project so let's get started hey what's up guys i'm dennis ivanov and today i'm taking over brad's channel to build this portfolio website with you guys and also show you how we can host it publicly on an aws s3 bucket so what i'm going to do really quick is just recap the project itself talk a little bit about how the video is going to go some of the technologies we're going to use and then we'll get right into coding it so the idea behind this website was to build a portfolio for myself to just display some of my work showcase some of my articles any past projects and uh just build a platform for somebody to be able to come in and get to know me a little bit better so i figured it'd be really fun to document this and show you guys how you can build a portfolio website and if you guys actually want to use this exact website that's okay go ahead and use it but i'm also going to provide the source code for you guys to actually use so let's talk about the components here so in here i have my introduction my navigation bar right here so this is supposed to look like a safari browser and in here i can actually change the theme and allow a user to customize how they see the website so the cool thing about this is we are going to use a little bit of javascript to actually save the theme settings so if i want to go to the green theme right here i can refresh this and this information will actually be saved in the browser so that's something we'll do towards the end of the video but i think it's a fun little feature so i also have my introduction right here my about me section where i'm going to link up my resume talk about some of my skills and link up my social accounts now the next section is probably the most important part of a portfolio website so from here i'm actually going to show some of my past work and write articles from but this is where you really get a chance to show a potential employer what you know how to do some of your past projects what you've worked on and get to know you a lot better so this is a cool section that we're actually going to link out to other pages and allow you to write more descriptions here so that's going to be the portfolio section and then the last section is going to be the contact form so i'm going to leave this up to you whether you want to use a plugin or a different backend but i'm actually going to use django in my own channel and finish up this entire website with a full back end so i'm going to leave that up to you if you want to see how i do it from django go ahead and check that video out but we're just going to build out the template and style it so let's go ahead and talk a little bit about the technologies and how this thing is going to be built [Music] this is going to be a static website we're just going to use html css a little bit of javascript for that theme setting effect and then flexbox and css grids for the layout so if you're not familiar with those i'm going to spend the next three minutes just doing a quick recap i want to go over this infographic that my wife made and then we're going to get right into it so i'm going to explain as much as i can in the code so you should still be able to follow along if you're completely new to this but i do want to try to give you some examples so if you look to the left right here this is actually going to be in the source code so you can download this demo right here on the left side we have a flexbox now what this is is a way to create two-dimensional layouts and we can create columns or rows so the way we do that is we create a wrapper around these three divs right here so we have three inner elements and to that wrapper we set the value of display to flex so by default to inline the elements you do flex direction row and i think that's already set to row by default so you actually don't need to use that but if you want to create them as columns like this you would just set this value to columns so flex direction column now css grids give us a lot more control over our elements and help us create three-dimensional layouts so we can create columns and rows and have a lot more control over these actual items so if you look at this we do the same thing we create a wrapper around our elements we have seven boxes inside and instead of display flex we just do display grid and this gives us a great area now we can create the columns and the height and width in different ways but i'm going to set the grid template columns value and i'm going to create three columns right here so when you create these spaces right here we create a single column by adding that value and then if we add a space and then add another value that's just going to create another column for us now i'm using fr and that stands for a fraction so right now we have three columns and they're all going to take up one fraction of that element and that's going to give us this area taking up one third for each column now if we have more than three they're just gonna stack and then they're always gonna have that value now that's a quick example right there it's a pretty simple one the one that we're really gonna work with here we're gonna use both of these but we're gonna use grid template areas to create some more advanced layouts there's different ways of doing this but in this case we're going to turn this wrapper with these three elements into this layout right here so what we need to do here is we put a class on these elements and the first thing we need to do to use grid template areas is to create an actual element inside so we take these values and we create we use the grid area property now once we have that we can set and we can create this and make this any name we want so i just called my navigation for the left column i just kept it the same as the class we create the grid areas and then we can use the grid template areas value to actually position where those elements are going to be within our layout so we have two columns right here we set a height with grid template rows and then we created a gap to create some spacing so that's not going to be a full description there's a lot of tutorials on this a lot of documentation but once we start building this i'll explain more but that's the idea of grid template areas to create more complex layouts now in the last section right here on this infographic i just want to talk about positioning elements here so for this we have justify content and align content now justify content allows us to position elements for the flexbox and css grids from left to right so on the horizontal axis here on the x-axis and by default all your elements are going to get stacked to the left side just like this right here so if we want to center those items we're just going to center them like this so those are going to get that's going to get all those elements and crunch that inside and then if we want to get all those elements and put them to the right we're going to use end and then for the flexbox we're going to use flex n so they both have that property just have to specify that a little bit differently now to actually align items on the y-axis so horizontally by default again they always start at the top but in order to actually center these items we just use align content center and that'll put all our elements in the center of that area so to put them at the bottom you just use flex and for flexbox and then end for the grid [Music] okay so i'm gonna switch my color scheme to white because that's gonna be the first one we're gonna work with and in my desktop i just created a folder and i call that my website so there's nothing in it and it's just this blank folder and i did open it up in my text editor so within my text editor there's nothing there so the first thing we're gonna do is create a few files and then we're gonna start adding to those so the first file we want to create inside of my website is going to be called index.html and make sure that's in that folder and also within that folder we want to create a default.css and i also want to create a folder for my images so i'm going to call that images and let's go ahead and change our layout so within view this is sublime text so within view i can set this up now within index.html i want to start creating my boilerplate html files and i'm going to call this dennis ivy so whatever you want to call your website make sure you add that and the first thing i want to do is add in a meta tag for my viewport so just some default stuff here and i want to link up my css files so because we're in the same directory i'm just going to do default.css and now we're connected to this file so let's just save that and i'm going to add in a little bit of html so we're going to set a few things up i'll explain along the way and then we're going to start styling it so for each section i'm going to use a section tag and i'm also going to create a div for my container so let's just add in some text and i'll explain what's going on so for the greeting message i'm going to use an h1 tag and for the actual value can't figure out how to get that working sorry about that okay so for the greeting i'm just going to use hi i'm dennis ivanov so go ahead and write your name in there and then i'm also going to add in a paragraph tag so we can see how things are changing and a link so let's just say this is a sentence and we're also adding a link with an href so do href and we're going to point that just to the pound symbol and we'll just call it link okay so now that we have that i can open up the page so let's go to that folder open up what i call it index looks like i called it index.html i thought i called it home so now we have that we have our h1 tag we have our sentence and we have our link so if you look at this website uh things are going to be broken up into sections so right now i have this gray background and then it's going to alternate to a white background and it has that border right there and then every other section is going to be a different background so i'm going to use that section tag to create this full width but inside of that there's going to be a container that's going to make sure all these items are centered and within that container is where i'm going to create that grid so i'm going to set that up we're going to use css variables i'll cover that in a second if you're not familiar with that and then we'll start building everything out but i need to do some preset stuff and make sure that everything's set up so within our css let's first work with our html and our body tag and i just want to make sure that there's no padding and margins so set that to 0 right there and also for margin and then the next thing i want to do is uh set up all of my tags so i'm going to do h1 all the way through h6 and there probably is a faster way to do this but i'm just going to do this way and i'm also going to set that for the strong tag so strong and for all of these i just want to make sure that they all have the same color so this is where we're going to use those variables so really quick let's just throw in the p tag and we'll do li and then span i want all of these to be a different shade so i'm first going to start with making all of these black and then i want to make this like a just a little lighter color just to make sure things are easier to see so we're going to add in label and then input field and text area okay so let's start with the variables and what i'm going to do here is i'm going to create a variable by using a colon right here and to do this we're just going to add in root and to create a variable we're just going to do dash dash and i'm going to call mine main text so this is going to be the color for all of my header tags and any bold colors that we have so to actually add the value i'm just going to write in black for now and then i'm going to use a hex color for the second one and what variables do here is it allows us to use a color uh repeatedly throughout the website so let's just try red right now now if i want to create or if i want to have all of my header tags to have the color of red all i have to do is use that variable by using var and then i'm going to do dash dash and we're just going to say main text so whatever we call this variable we can give it any name we want that's a capital t and we can use it like that in the in the actual website so we can apply it to any value we want now if i take a look at that we should see that value here turn red and if i wanted to apply that to the p tag that's all we're doing is we're able to just reuse the same variable multiple times so if we happen to change this value later we don't have to go through the entire website and adjust that so so now if i refresh this value we're going to see red also apply to the p tag so we're able to set one variable and we can now reuse that through the entire css file and this works for more than just colors i know i said colors earlier but it can work for any values that we set in css so let's go ahead and change this to black and we want to change this value to be a lighter black color so for this we can add another variable and this is going to be called secondary text and i'm going to capitalize that t make sure that's spelt right and for this i'm just going to paste in a hex value so i have a few values that i want to use and you can just go ahead and follow these so that hex value i'm going to paste that in right there and then i'm going to change these values to that secondary text so let's add a few more for the main website and i'm going to use a main color and for this it's going to be a light gray color and then the secondary color is going to be just white so two hyphens there secondary and we're going to color also camel case that and for that that's going to be a white hex and for the main color we're just going to use this one right here so we have our two colors and i have a border that i want to use consistently throughout the website so i'm just going to call this border color and for that that's going to be c1 c1 c1 and there we go so we have our values and we want to section these values off so i want to create these sections and we'll throw in some dummy text for now but we're going to create our about section which will have the white background uh the portfolio section with the gray background and then back to white so for this i'm going to call i'm going to give it a class of s1 so that's like section style 1 and then i'm going to give that div the container the same class of main dash container and the reason why i'm calling this main container is that this is a bootstrap class and if you want to use bootstrap by for any reason on this website just want to make sure that you don't have any conflicts here so let's take this value and we'll just uh finish this up like this just repeat that and let's just write about so just so we know this the about section now for this we're going to use a section style 2 and i'm going to repeat this but we're still going to use the main container so that's going to be reused consistently we're going to change this to s1 so that's going to be the dark color again and this is going to be the portfolio so we have that and then the last section is going to be the contact section which is going to have s2 so s1 s2 s1 and s2 so contact and now we want to set the styling to them so we have the values if we refresh it we can see those we'll see those just laid out like this let's actually set those background colors so for that i'm going to go down here and we're going to set the s1 value so for s1 i want to set the background color and this is going to be the main color so we're going to use this variable right here and to use that again we're going to we're going to use var dash dash and then the name of that variable and the border we're going to set that to just the bottom so border bottom and we're going to reuse the same border for all of those so i'm going to use that border color and let's repeat this and change up one value for the s2 so for s2 we're gonna take that make that two and we're going to use the secondary color for the background color so if i go back to the website there we go so we're seeing something it looks like a few things are off i don't see a border right now so let's make sure that that border is uh properly working let's see what's going on here oh it looks like i forgot to do one px so we're going to set the size of the border and then the type so that's going to be solid and then we set the color so i'm just going to grab that value and we're going to paste that in and i also want to make sure that we don't have this overflow right here so the reason why we still have that white space is because of the line height or margin to the h1 tag so let's fix that and to do that i'm just going to throw in overflow and i'm going to set that to auto so we're going to do that for both of these values and then things will look a little bit better so let's refresh it and there we go so those are our sections the next thing i want to do is create that container so i want to make sure that these items are properly centered and the method i'm going to use for this is a kind of an old school method i'm sure there's a lot more we can do with css grids for this but i'm just going to do main dash container and we're going to set the width to 1200 pixels and i am going to just make that responsive in a second so we're going to set that to 1200 and i'm also going to do margin zero auto just to make sure that centers it so margin zero auto create some space here and let's just give that a test so now my items are centered and when i make that mobile or when i actually change the screen size i want to make sure that also adjust so to do that we're going to add in a media query and we're just going to write that down here so just underneath our main css i'm going to app media screen and and then we're going to do max with 1200 pixels [Music] and we're going to set the value to the main container we're just going to set that to 1 or 95 so i still want some space so let's just indent that and i don't know why it's doing that so we're going to set width to 95 and it's already centered so we won't have to adjust that so now when we change the screen size we shouldn't have any issues with that so now we have the size and then it kind of crushes that down and it looks mobile responsive so we have that taken care of and the last thing i want to do is add in some more pre-built css and then i want to use a google font to actually change these values so for the css or for the size of the text i'm going to add in some sizes here that already pre-coded so i'm just going to go from h1 through h6 and we're going to set all the h1 tags to 56 pixels and then slowly decrease that size and then for all of my links right here i want to make sure that they don't have that underline so not text to line but text decoration we're going to set that to none and i also want to give them a color so for this i already have a hex color we're going to set this to a light blue some color and paste in the hex color and then i also want to make sure that any list that we have because we are going to use that for our navigation that we don't have those bullets so i'm going to say list style and we're going to set that to none so let's go ahead and refresh that and there we go so that looks good our font size matches up our links look good and now i actually want to change the font style so i'm just going to look up some google fonts and i have two that i want to work with so go ahead and do a search use this url right here so fonts.google.com and i'm gonna find the first one for my header tag so this is gonna be russo and we're gonna take this one and to actually use this font if you haven't done this before we're just going to do uh select style we're going to use embedded and we need to add this link and then we actually need to set the font family so let's go back to our header tag and i'm going to put this just above my css we're going to paste that in and actually set the value so take font family we're going to put that in here and set that for all the larger text so the font size and let's see if that's applying so now if i refresh it there we go so we set this one and for the next font let's go back and this is going to be roboto so we want the roboto font and we also want to make sure that it's a 500 in font way so let's look that up and we're going to use a roboto mono and let's actually select the style let's use the 500 one and that's this guy right here so we just need to paste this in and then we also need to change that font too so let's throw that underneath our main font for the header tags and let's grab the actual value so this is going to be roboto monospace right there and we can paste that in for this section right here so once we have that that should be our fonts and we should be able to move on to the next section so there we go so i think that adjusted it if it doesn't i'll fix it later but this is set these don't have a value because they're just text in there we don't have a paragraph tag or anything like that but uh now let's move on to this section here so we want to start creating our first grid area and actually center our header and just position everything where it needs to be and it actually looks like this is a little bit thinner than what i have right now so i want to change the font weight to all my header tags and i'm going to do that by just adding font dash weight right here and i'm going to do 500 so let's see how that looks and if i refresh that okay that looks a little bit better so the next thing i want to do is center this right now so i want to center it uh vertically and horizontally so what i'm going to do is actually create a wrapper around this now it's probably pretty easy i probably could just do text align center and add some margin or pattern but i want to start showing you how we can work with that grid so we're actually going to create a grid area i'm going to make it a little bit bigger than it needs to be and then i'm going to show you how to center that and then we'll just clean it up so let's go into this section right here and let's take out our link and our paragraph tag and the first thing i'm going to do is create a wrapper around that intro so let's close off the div and fix that indentation and i'm going to give this a class of greeting wrapper it's a greeting dash wrapper and let's take this greeting wrapper and start working with the styling here so i'm going to copy this and just underneath my main container and above that media query let's paste that in and to create the grid area we're going to do display grid so this now makes that area a great area and i'm going to create a border so we can see it so border we're going to do 2 px dashed and i want to set that to light coral so it'll be a light red color and let's set the height so i'm going to i'm going to set the height the old school way so we're just going to say min dash height and let's just do 10 em so that should be a big border around that or a tall height and then we can show that centering so let's actually do a little bit more i'm going to do um let's set that to 20 em that should look a little bit better i just want to make sure that you can see that vertical alignment so the first thing i want to do is center that horizontally so in order to do that and again we're still going to use text align center but i just want to start showing you how this works so once we have that grid we can do justify content and i'm going to do center so if you take a look at that it's going to center it right in the middle and then i want to have this aligned with right in the middle in the box uh vertically too so if i go back here all we're going to have to do is align we could do align items but right now i'm going to work with the line content and i won't explain what the other one is but there's a lot of documentation on that so line content and let's just do center for this and now if i refresh it there we go so we're aligned on the x and y axis right here so we perfectly centered our text right here so i'm just going to take out justify content and we're going to do uh text align so um that's not going to be fully responsive so we still want to do center like that and i just wanted to show you that example so let's change this height and i want to set that to 10 so i just by default want to have some space but i don't want it to be that tall so that looks a little bit more like what i have here and for now i'm just going to leave this border and let's go on to this next section so i'm going to create a container around this and then three columns in here and we'll start adjusting those so just underneath my greeting wrapper we're going to create another grid area so i'm going to call this navigation wrapper here so actually it's going to be called intro wrapper so we're going to use a class here and i'm going to say intro wrapper and within my intro wrapper we're going to create three divs right here so the first one is going to be the navigation so i'm going to say nav right there and i'm going to give that class of nav wrapper so nav dash wrapper and i'm going to copy and paste this two more times so we're going to have i probably should have better naming but i'm going to leave it like this we should have left column right here so left dash column and let's change that name right here so i'm just going to grab that paste it in here and this one's going to be right column and we'll also set that here so right dash column and if i save that let's actually add some borders around this really quick so let's go to my css right now and for the intro wrapper actually let's take a look let's just make sure that we have it so here we go we have our items and the first thing i'm going to do is set that container so for the container we're going to take intro wrapper right here and i'm going to set the background for now we're just going to actually start setting the real values and then i'm going to do the same thing where i'm going to use these uh dashed lines right here to actually show you this layout so we're going to set background color we want this white so we're going to use that variable and that's going to be the secondary color so this variable right here just fff that's the hex for white and and we want to set the border so for the border i'm going to do actually let's start writing that out so border 1px and we're going to create that to be solid and we're also going to use a variable for the border color so we have a variable called border color up there and that's going to set that value now for the box shadow what i normally do is i just use a css shadow generator so shadow generator right here and i'll just show you uh how this works if you haven't seen this so i usually use a website like this and i start creating the shadow so you can adjust it you can see that shadow right here change the blur adjust these things right here and i take this code so i already house them but i would recommend checking that out if you want to create your own and unless you know how to code that up that's probably better but for now i'm just gonna use that so i'm gonna paste in my shadow into the intro wrapper and let's see what we have okay so there's my wrapper now let's start creating that layout so i'm gonna get these three classes right here so i'm gonna take nav wrapper left column and right column and we're gonna add a border to that so nav dash wrapper and i'm gonna set border to 1px let's just do dashed and let's do light coral again and let's repeat this three times and i just want to change these values right here so i'm going to change this to left column right here and then i'm going to set the next one to right column so looks like i excluded that l right there and let's take right paste that in here and right now you're just going to see three rows right now so it's not going to do much we just have these wrappers around them and the next thing i want to do is actually start working with that grid area so just for the purpose of keeping things in order i'm going to start creating the grid area down here so we're going to do display grid so that whole area now the intro wrapper is a grid area and the first thing i want to do is do grid template columns so what i'm going to do is set the columns and the amount and the size for that grid area so we're going to set the first column 1 fr if i leave it the whole grid area will stay the same it's just going to have it to one column taking up one fraction to add another column i'm going to do one fr so this should give me two columns both taking up one fraction so we should have columns taken up uh two sides of it so right now what's happening if i zoom in a little bit we have our nav right here because it's on top it aligns it to the left our left column goes to this section and then that right column takes up this bottom area taking up the entire the entire fraction i believe so what i want to do is actually create the layout so for this what i need to start working with is grid template areas so grid template areas so we're going to start creating this but before i do anything we need to put some identifiers on these classes right here so in the css i first need to identify the grid area so right here i'm going to do grid dash area and i need to give this grid area a name and i can call it anything i want it doesn't have to be nav wrapper but i'm just going to repeat this and i'm just going to keep this consistent but again this can be whatever you want it so we're going to take this nav wrapper and or this grid area and i'm going to repeat the same thing so grid area and this is going to be for my left column right here and i also want to do that for the right column so grid dash area and right column okay so we have our three grid areas identified nav wrapper left column and right column now within grid template areas we can actually start using it because we set this value so in here i'm going to create some space and i'm going to create a string so when we create a new string we're going to create a new row and i'm going to call this nav wrapper now this is saying for this first column we have this first column go ahead and add that nav wrapper area in there now if we want to span that grid across both of these columns so remember we're trying to make this navigation bar go all the way across all we need to do is create a space and we just need to repeat nav wrapper so it's going to take that grid area and it's going to span it across both of these areas so now we can create a space we don't need any comma or anything like that there we just add another space for a string and we're going to tell this grid template areas to take our left column and our right column and put them next to each other so we're going to say left column and i'm going to create another space and we're going to do right column make sure that that was spelt right and now it's gonna align everything exactly like this so this whole area will actually look like this we're gonna have a nav wrapper and it's gonna span across like that so if i refresh that there we go so my navigation goes all the way across and my left and right column are aligned now i have full control over this this technically doesn't have to be spaced out like that we could just have it like this but just for visual effect this helps a little bit and i can move the right column over to the left side at any point and fully control that so to set some height i want to be able to see something here so we're going to temporarily set height like we did before and i'm going to do grid template rows for this now rows work a lot like grid template columns so in this case we're going to set the top row to 3em so by default it starts at the top and then we want to set the next row so if we create a space just like we did with our columns we're going to go down to the second row so it's going to set this row right here to 3em in height and then we're going to set this next one to 30 em in height so let's just do 30 instead of 20 and we'll create that space so we have our columns rows and just to see that a little bit better there we go so now we have our full layout we have our row our two sides and things look a little bit better so that's kind of the idea of grid template areas i went over that in the demo but i hope that makes a little bit of sense [Music] now it's time to actually style this navigation so what we need to do is add a background to this and i realized i left out this border radius but we need to create the background these three buttons right here and a navigation so this is going to be a ul tag right here so it's just going to be a list that we're going to inline and we're going to create a div with three little divs inside of it and then just inline those so at this point we don't need css grids it's a simple layout so we're just going to use flexbox for this so we're just going to create a two column layout inline it and we'll style it so let's go to this section and i want to create a border radius for the intro wrapper so before we do that let's first remove all of these dashed borders so we're going to take that from navigation from left column right column and our greeting wrapper so where was that looks like we had it up here so the dashed border now if i save that i just want to make sure i can remove everything and there we go and i also had a misspell actually just caught that with the right column so that's why that border wasn't showing so now we can go back up to this intro wrapper and i'm going to create a border radius and not border color it's a border radius and for this what we need is this border to uh it has to have that edge right there at the two corners so on the top left and top right but on the bottom we don't want to board the radius and we also want to be able to reuse this later in other pages where it sits outside of this but just on top of this on top of the website so let's actually set that up and for the border radius we're just going to do 5px 5 px and then 0 and 0 so that should set it and i need to change that to a p right there and that should give us the effect that we're looking for so we have our shadow we have the border radius and let's just refresh that okay so that looks a little bit better and i also want a border bottom for this so let's actually set that for the navigation so for the nav bar we're just going to do border dash bottom and this is going to be 1px solid and we're just going to do that variable we're going to use that variable for the border color so dash dash border color and let's see what we have so once we have that border what i'm going to do is create two sections right here so right now i'm just going to wrap it in a div but i want to show you how we can inline so we have this side go to the left and this side go to the right so we're going to use flexbox for that and before we do this i'm going to wrap that in a div so let's go into that navigation and we're just gonna put that text in that div so div and let's close that out and i'm just gonna paste it underneath and i also want to duplicate it so let's remove that top part so we have one side here i'm going to call this we're going to give it a class and this is going to be dots dash wrapper and once i duplicate it i'm going to change this next value to an id so this is going to be id and we're going to call this navigation and for now it's going to be a div but we're later on going to turn it into a ul tag for our nav bar for the actual links there and it's just going to be an inline list so once we have these two when we refresh it so by default they're going to stack on top of each other but if we make this into a flexbox so the first value we can set here pull up the right one here so the first thing we need to do before we actually start aligning everything is we need to go to our nav wrapper so that the item that's containing those elements and in here instead of display grid we're going to do display flex here so let me fix the spacing so we have display flexed and right away it's going to inline it at the very start so they're just going to stack up in line and it's just going to start at the left and go to the right now i want to pull up an article here that really helped me a lot so this is from css tricks here's a link to the actual article and i'll see if i can paste this in the description but in this article this is where it talks about all the properties and all the values to justify content align items and so on and the ones i talked about earlier in the beginning were flex star end and center so in this case i want to do space between so what it's going to do is just going to grab my first element place it to the left and then place the next one as far away as possible so if we have more items it's going to try to just create as much space as possible in between them so this is what we want and it'll give us this effect we're align one side and the other side to the very right instead of inlining them how we have it so the second we display it as flex i'm just going to do justify content and that value is going to be spaced between so this is why i wanted to add that text i wanted to show you that demo so one nav is going to be right here and the next one right here so the next thing i want to do with the flexbox is make sure that these are centered so if you notice i don't want space on the top and bottom here so to center those instead of align content it's all in this article so i recommend you check that out i'm just going to use align items and that's going to center it vertically for us so this is just going to be center and it should fix that space that we have in between everything else so there we go so now it's centered and the next thing i want to do really quick is create those dots and then that navigation so let's go into this dots wrapper and i'm actually quickly going to change this to a ul tag so just while we're here i'm going to change that to a ul and we'll add in the links later so for the dots wrapper what i'm going to do is create three divs right now and then i'm just going to repeat them but i'm going to give them all the class of dot and then or browser dash dot so browser dot and then i'm gonna give it an id so each dot is gonna have the same class but it's gonna have a different id so we can change the actual colors so this is gonna be dot one and then i'm gonna paste this in three times let's create the space so we can see what's going on and this is going to be dot 2 3 and then we're going to style this so let's actually go to the dots and style them and then we're actually going to create this to be a flex box within a flex box so we actually want to inline those dots and you'll see what i mean in a second here so just underneath my nav wrapper let's go to the dots wrapper and let's use this class right now so we're going to set the dots wrapper class but i'm not going to actually apply anything to it we're going to start with browser dot and the first thing we want to do is set the height width and border radius and a background color so the background color this is going to be black just to start so by default if we don't have a color it's just going to be black just so we can see it and then the height is going to be 15 pixels make sure that that's correct and the width will also be 15 pixels so 15 and 15 and then border radius we're going to set to 50 so i want to make sure that's a full circle so uh that's going to be 50 to create that and then the last thing we need is a shadow so again i use the shadow generator but i'm just going to paste in my built-in shadows so this is something that i already created earlier and didn't want to paste that in so now if i save this so we apply that to the class to browser dot make sure that i spelled that right so we have browser dot and they're just gonna line up uh just one by one like that so i actually want to create some space between them and then let's inline them so we're gonna go back just underneath our border radius we're gonna create a margin here so i'm gonna set that to five pixels and let's see what we have okay so what did i do around here not 50 need five so now to inline them we're just going to go to that wrapper so dots wrapper and i'm first going to set this to display flex and actually i think that's all i needed for that so outside of display flex remember by default it's just going to inline them at the start and i just want a padding to create some separation here so we have padding from that left side right there so now that i have that everything's in line now i just need to style these individual colors so we have that with the id so i have the id set to each one and we're just gonna go through dot one through dot two and we're just gonna start applying those and we'll change the color so for the first one i'm just gonna paste this value in that's gonna be the red color i believe so yeah red yellow and green so i already have those pre-built so we're just going to take this element repeat that twice and change the values and then change the actual hex color for that so this is going to be the yellow and then green right here so now if i save it refresh there we go so now it's starting to look like our nav bar i also want to apply a background to that so let's set that and that's going to be the background for the nav wrapper and background color is going to be that variable and i think that was our secondary or our main color that we wanted to set so let's see if that was the right one so that's supposed to be that dark gray so i want to separate it from this main container and there we go so i also want a border radius so it looks like it's kind of going outside of it because that um the actual intro section has a border radius but the nav wrapper doesn't so let's set that let's take it from intro wrapper and just apply the same border okay there we go so now let's go to this navigation inline it and actually set those colors so for this all i want to do is create three li or not three but just one li tag but i'm gonna create links inside here and uh we'll make sure that it's actually inlined by adding another link so if you want another one i just wanna make sure that you don't get any issues later so for now let's just send it nowhere and let's say contact and let's repeat it three times so i'm gonna paste that in okay so right now our our link should be styled so we pre-built that right there in the beginning and i just want to make sure that that's in line so i need to get the code for our actual navigation so for the navigation uh that's a ul right now so let's go just underneath our nav wrapper and let's say navigation and it's also an id so we're going to use that instead of a class and for this the first thing i want to do is set the margin to zero and then some padding so i want to make sure that it's separate and not touching the side there to the very right and set a padding of 10 pixels let's confirm that we're seeing that so there we go we added some space there and let's actually inline it so we're going to take this navigation id right here and i want to repeat this so we're going to do li and for this we're going to set it to display inline block so that'll inline the elements and then i want to make sure that there's actually a space between each link so margin right and that's going to be set to 5 pixels not 50. keep making that mistake and then margin left right now is going to be set to 5 pixels also okay so that looks good so i'm going to remove this link but now we know they're inlined and as we make the screen smaller it's adjusting to us so we don't have that many links right now so i don't need to do anything special with this i'm going to keep it simple like that so i'm just going to remove this next one and let's go on to the next section save that refresh it and there we go so for this next section i need to add in an image and i'm just going to add in some html and then we're going to style this so let's go back to i'm going to go back to my desktop here so if you have any pictures go ahead and add them to your website or you could just use mine from the source code but i'm gonna go to my desktop grab these images and add them to my images folder so now if i look in my text editor i should be able to see these and they're in the images folder and the one i'm gonna work with is dennis.jpg so if i go down to my left column here i'm going to go ahead and remove that and i'm going to add in an image tag so to add in the image we're just going to do images so we're going into that folder and then i'm going to paste in the image that i want so or just write it in dennis.jpeg and i'm going to give this the id of profile pics so this is just going to be profile underscore pick okay so now that we have that the next thing we need is going to be this note right here so we just want to say personalized theme and then we're going to add in those dots so let's go ahead and do that and this next section this is going to be an h5 tag and i'm going to say personalize theme make sure that i spell that right and underneath this you want to make sure i spelt that or spelt personalized right i'm second guessing myself so um just underneath this i'm actually going to style this in line so we're not going to reuse this anywhere so i'm going to just do text dash online we're going to center that and i want to make sure the line height is set to zero i don't want any space so let's just do line height zero and i'm going to create that wrapper so for this wrapper we're gonna create three dots within it and then we're actually going to use flexbox to style that so let's first create a div and i'm going to call this i'm going to give it a class of theme options wrapper and i'm actually going to change that to an id in a second so theme options wrapper and let's set that to an id and inside i'm going to create three empty div so this is going to be just like that top navigation section so we're going to create these dots and then style them so just like this we're going to put them in that wrapper and inline them and then center them so for these they're all gonna have a class of theme dot or theme dash dot and i also wanna make sure that they all have a custom id so they're gonna share a custom styling or a unique styling with all of them but then for the actual color i want to make sure that they all have their own so the first one is going to be light mode so light dash mode and then i'm going to copy and paste this three more times and i'm going to set this next one to blue mode and then green and purple okay so we have purple mode there and then just underneath that all still within the left column i'm going to add in a paragraph tag and i'm just going to paste in the sentence here so we're just going to say theme options will be saved for your next visit and i want to make sure that there's a break tag there so the text just aligns a little bit better so for that text i'm going to add an id of settings dot or settings dash note and that way i can just style that and now if i refresh this save it and refresh it so we're going to have our image our note and our text there so the first thing is i want to remove the height from this row i just want that to auto adjust to the content inside and then i'm gonna start adjusting this image so we have the idea of profile pic make sure that's right and that's a misspell right there and let's go back to my css so i'm gonna go to this section i'm just gonna take out grid template rows i just want to again auto adjust to the size of it there we go so now that doesn't break it and for that picture we're just going to set that as a height and width of 200 pixels and then we're going to center that so i'm going to go down to left column here and start setting a profile pic so profile underscore pick and set the height and width so the height is going to be 200 pixels and the width is going to be 200 and for the actual size of the image if your image is a different size just to make sure that it doesn't uh expand over it or start messing with the image let's just do object fit right there and we're going to set the value to cover so that's just going to make sure that no matter what the size of the image is that it's not going to distort it it's just going to try to position it in it and crop where it needs to so we're going to set object fit and the rest for the actual profile picture we want to make sure we have a border so we're going to set that to 2 pixels we're going to make that solid and we're gonna use that variable again of that border color so we're gonna set border dash color and i think that's it for the image we have oh we also need to center that actually so i'm just gonna start that up here we're gonna display block just to give us more control over this and then we're going to center this the old school way we're just going to do margin 0 and then auto so that's going to center my image and now i want to create those dots underneath so let's start with actually styling the individual dots and then we'll start uh putting them in line so those are going to be in a flex box and we're going to start with theme dot right here at first they're all going to have the same styling and then we're going to use the id to actually give the color so just underneath profile pic right here let's go ahead and set the height and width to 30 pixels i think that's what i had it so yeah we have 30 pixels for the height 30 for the width and then i want to set the border radius so i want to make sure those are around border dash radius 50 and after the border radius i'm going to add in a shadow so i've been doing this a lot i'm using the same shadow here from that shadow generator we're going to paste that in and i also want to add in a hover effect so whenever the cursor goes over these i want to make sure that it turns into a pointer and let's actually test that right now so if i save that those look a little funny right now so those are just white right now and looks like the width did not set there so let's see what's going on here oh that needs to be 30 pixels and by default i want to set the background color to black so we can actually see that let's try that one more time okay so there we go and we have that cursor pointer so i'm gonna add some margin and let's add the border so i'll explain what the border is gonna look like in a second so margin is gonna be five pixels and for the border what i'm trying to do here okay that bar margin works so right now that border is going to be this dark color and you see that around all of these but when we switch that theme we need to change that to white so this is why i'm going to be using a variable for this so we can actually change that value much easier so at the top here within my variable i'm going to create a variable called theme dot border so we're just going to do dash dash theme dot border and i'm going to paste in the hex color so this is just going to be a dark color for now and then we can go back to our profile picture or this section right here so to theme dot we're going to do border we're going to set that to 2 pixels and then that's going to be solid and we can use that new variable so we're going to throw that in and for the wrapper i want to make sure that these are inlined so we're going to take theme options wrapper so those are all inside of this div right here and i can display that as flex right here so that's an id we're just going to do display flex and that's going to inline them automatically and i also want to use let's see what else i want to do with the flex here so i think i want to center that so let's go ahead and look at the demo yeah so i'm just going to do justify content and center so that way we don't have to worry about the outer wrapper to that so justify content center and now if i take a look at that it should look a little bit like this or at least to what we have right now so let's set the colors and then we'll style this section and i want to add in some space at the top and bottom so for the individual elements right here i'm going to paste in some code here so i'm going to start with the light mode so just underneath this theme dot and we actually want to add a hover effect so i'm going to do theme dot and then on hover i just want to expand the border width so i want to make it obvious that we're hovered over it and this border width is going to be set to 5 pixels so right now it's at two we're going to change that to five and that's it for now so now let's actually set these colors so we're gonna start with light mode and we're gonna use these ids so we're gonna take this id and paste that here and set the background color so for the first one for light mode it's just going to be white so we're going to do fff and let's repeat that three more times so one for blue mode one for green mode and one for purple mode so let's change these values this is going to be purple or green or blue actually keep messing that up so blue mode for blue mode i'm just going to paste in this hex color we're going to use that one right there and then green we're going to use the green hex and finally we're going to use a purple hex for purple mode right here so purple mode okay so now that we have the the colors here we have the hover effect i just want to center this item right here and actually change the size of the font so i want to have more control over that so we're just going to use that id for the settings note and we're going to set the font size to 12 pixels and for the font style i'm going to make that italic so font style italic and let's center that so let's just do text dash align and center and let's just see what we have so far make sure it's all working so now that the colors look good we have that hover effect which we'll actually add in a transition later but for the padding right here let's actually go old school and add some spacing so let's just add that to my column so in the column here i'm just going to add in padding top and bottom and we'll have to do that with the right side too so padding dash top that's gonna be 50 pixels and for padding bottom we're gonna do the same okay so that's 50 pixels and i think that's it for this section so we added all those now in the next section what i want to do is start working with this right side so i'm going to build out this box right here and then we're going to make sure that it's centered vertically and i'm going to show you how to create these dots in this border along with the shadow effect so let's go ahead and get started with that so i'm going to start by grabbing my intro sentence so you can write whatever you want here and i'm going to create this wrapper around it and we're going to create the border so let's start with that right column here and i'm going to create a div and this div is going to have the id of preview so within the div i'm going to add an h1 or h3 tag and within the h3 tag i'm just going to say what i do and make sure all those first letters are capitalized and we're going to create the preview or the id of preview and just underneath this i'm going to create a paragraph tag so this is where i'm going to paste in my intro again just write whatever you feel like you'd want to say about yourself there and now let's start styling this so the preview should be there now so we just have the text and we want to create the border and set the width and then i'm going to start with the dots so let's go back to the css we have the preview id i'm going to put that just underneath right column here so we're going to use that id and let's go ahead and set a width so the width is going to be 300 pixels and i want to create a border so for the border i'm going to do 1.5 pixels so i want it just a little bit bigger than one but i don't quite want it to be two pixels so we're gonna make that solid and the color i'm just gonna paste in here so it's gonna be a light blue so it's gonna be um i think it's actually the same exact color as a link i can't remember exactly what i used here so we have the border and i also want to create some padding in here and i want to make sure that we have a position of relative so we're going to need this for how we set the dots so if i create the background color right now i'm just going to go ahead and add that in i'm going to use a variable here and the variable i'm going to use is going to be preview and then bg so the b is going to be capitalized and i need to create this so for the preview background i'm going to paste in an rgb color so we want it to be transparent i actually want to see through it so i want to be able to see the actual background here so we're going to create this color and then we'll do the background after so let's go ahead and set that variable and i'm going to paste that in so dash dash preview bbg and this is going to be an rgb that i'm just going to paste in so let's throw that in so there we go so that should set our background and there's a few more things that i want to do here so within my preview wrapper i also want to add a padding of 15 pixels and we also missed this border right here so i want to add that and i'm actually going to hold off on the position relative because for those of you that don't understand positioning i want to show you what's going to happen if we don't add it and how the dots will look so there's our border there's our slight shadow and we also need to move this down so for the two dots what i'm gonna do is actually put in four divs one for each dot right here and i'm gonna put two of them above inside of that div and two of them below and then we're gonna set the positioning and technically i don't think it matters because of how we're actually set it up but i feel like it helps to see it in the html so for this i'm going to create a div here and this div is not going to have anything in it but it's going to have the class of corners so just like we've done a few times already we're going to recreate this and we're going to have four divs with the same class and each one of these divs will have an id so this is going to stand for corner and this is going to be my top left corner so corner tl and i'm gonna repeat this three more times put one up here and two below so this one is going to be changed to corner tr this one's going to be corner br for bottom right and corner bl so for bottom left now once we set these values let's style them and then i'm going to set the positioning so in here i'm going to take the corner so i'm going to use a class here corner and the corner is going to be a heightened width of 7 pixels both ways so we want to do that and make it a full circle so we're also going to set the border radius to 50 percent that's going to give us a circle and we also want to actually give it a border so let's just do border radius like that and the border needs to be the same as the preview so we want to make it look like it's the same element so let's add that so we need the sizing and let's add a background color so background color we'll set that to fff so i want to make that white and let's see what we have so far so let's refresh the page and there we go so we have our divs and we just want to position them this way so right now if i start creating the absolute positioning it's going to put our items wherever they want on the dom so if i set it to top zero and zero so top left it's going to put it right here and i want that to set right here so i'm going to use absolute positioning to put these and i'm going to show you the issue and then how we're going to solve it so this is for those of you that don't really understand how that works so let's go ahead and do that so we're going to create the position of absolute and i want to start by grabbing these ids right here so i'm going to repeat this a couple of times so we're going to start with top left and we're gonna set the position top to negative five and that's gonna be in pixels and then the position to the left also negative five so that's gonna be negative five pixels also and if i repeat this a few times our items are going to go all over the page here so we're going to grab the top right so tr it's the next item and then we're going to have br so for bottom right and this is going to be bl for bottom left and i also need to change the positioning so this is going to be changed to right so i want to go to the top right corner and then i want to go to the bottom right corner so this is going to be bottom and this needs to be changed to right so bottom right and the next one is bottom left so for bottom left this just needs to be changed to bottom and that should do it for our positioning so i'm going to take that out right there and now if i refresh this we should see these items but they're going to be somewhere far out here so you can barely see them so we have that negative spacing there so that was what we set for the values and they're they're trying to hide outside of the page here so what we want now is for those to be inside here on these corners and slightly coming out like this so to do that all i have to do is set the positioning of the parent element to relative here so i'm going to take positioning or position and i'm going to change that to relative and that's going to contain and set the absolute positioning inside of his parents so it's going to read that value and adjust those so now if i refresh it there we go that's exactly what we wanted so let's set this on or center this on the vertical axis so i'm gonna go back to my right column here and i'm gonna display this as grid now this will work with flex too but uh just because we've been using grid this whole time i wanna just stay consistent with that so we're going to display it as grid and remember to do this it's just a line content and we're going to center that so we don't need to justify content because we do want it starting on that left column so the start is right here and now if i refresh it there we go so we just need to add the shadow looks good so far we're going to add the shadow and then we're going to make this responsive so for the shadow all i need to do is create a parent element around this now there's multiple ways we can do this but this one is a kind of a quick fix and it works so we'll stay with that while i over complicate it and let's go ahead and wrap this so i'm going to take this indent everything and for the shadow i'm going to call this i'm going to give it the id of preview shadow so let's go ahead and set that preview dash shadow okay so we have the shadow and i want to set the background color and start styling this so let's go back to our css and just above our preview i want to set the background to this and for this i need to set another variable so for the background color i'm going to use the variable of preview shadow so let's go ahead and use that and then i'll actually create it so double hyphen there preview shadow and for preview shadow we're going to use a variable because we also want this to adjust whenever we're changing the theme so we're going to paste that value and that's with a capital s right there and the value of this is going to be a hex color that i need to paste in so i'm just going to throw that in and you can copy that and we need to do a few things with that shadow so i'm going to add a semicolon there so for the shadow what i'm going to do is first set a width and i'm going to make sure that that's the same as the child element so the same as the preview that is inside of it so we have the width and the height i'm going to set to 180 pixels and this is where i'm going to create that effect that looks like it's behind it and at an angle so it's going to be a little bit smaller and then i also want to set a padding and for the padding left i'm going to set it to 30 pixels so it's going to push its inner element out and for the padding top i'm going to set that also to 30 pixels so now if i save it and refresh it we should see this effect actually play out so if i refresh that there we go so it's centered uh the shadow looks good there now something that we need to take care of is to make sure that whenever our screen starts collapsing that we don't overflow like this and we can actually fix these items so this is where grid template areas are really cool in allowing us to adjust things and change our layouts whenever something like this happens so if we can go down to this media query right here what i'm going to do is take this and i'm going to change this value because i think it's about 800 pixels where this is happening and i'm going to remove this element so at 800 pixels what we're going to do is we're going to take this intro wrapper so i'm going to find the original element and i'm going to take this entire section so we only need to change a part of it but i'm going to paste it in and we're going to remove a few areas here so the only thing we need is the grid template columns and grid template areas so i'm going to take all of this out and at 800 pixels what i need to happen here is i want this to turn into a full column and i want this to go below it so i'm going to tell my grid template columns whenever we reach this size let's only have one column and let's make that the full width so one fraction of our entire container and i want it to span only one column right here and i want the right column to go below so i'm going to create another string and now it's going to stack exactly like this so it creates that perfect visual representation and it's going to adjust for that so let's try that out now if i refresh it there we go so now the column is stacking on top of it it's overflowing we're going to fix that in a second but it's doing exactly what we wanted now as we expand it goes at about 800 pixels and it goes back to the original size so what i'm going to do here to fix this overflow i'm going to use an old school method we could use gaps and all that kind of stuff but just to keep it simple all i'm going to do is to the right column which we already specified above i'm going to set the alignment first i want to center this so i want to make sure this goes into the center so we're just going to use right column and it's already a grid so we already set that value above and all we need to do now is just say justify content and center and again if you're new to grades we can only say this because we already set it as a grid earlier so now it's going to center that content and i want to change that margin below so to do this i'm going to find the right column above so we're going to use ctrl f and i'm going to search for that so here's my right column and just like the left column i'm going to set the padding top and make that 50 pixels and the padding left is also going to be our padding bottom is going to be 50 pixels so once we finish this up it should look good and it won't have that overflow anymore so there we go so that's exactly what we want now now for the next section what i'm going to do i'm going to start going a little bit faster because i kind of got the core concepts out of the way in the initial setup so i'm going to start creating this about section which is a really easy layout it's just a two column layout we can probably even use flexbox for this but i want to introduce another great concept and this area is going to be pretty cool too so there's going to be two new concepts for the grids that we're going to apply but everything else is just going to be styling it and we're going to get into changing the theme and we'll actually end up hosting this so let's go ahead and get started with this next section [Music] so just like all the other sections we're going to start by creating a wrapper in this entire section so what we're going to do is go back to the html here and i'm going to make sure this code is open here and within my main container i need to create a wrapper that's going to be my grid area and then two columns within this so the first thing is going to be this main div and this is going to be about dash wrapper and within within this wrapper we're going to have two divs here so the first one is going to be for the about section so i'm going to call this one about me and i don't know if i'm actually going to use this class i don't remember if i needed to add custom styling to this or not but just to identify it we're going to have that right there and i'm going to create another one so we have our container so let's create some space so we can see it and we have our two columns so this is going to be our social links so i'm going to call that social links and we're going to use classes for this so we're going to stick to that and within the about section let's start adding our html and then we'll style it in a second so i'm first going to style this left column and then the right column so for this section the first thing i want to do is add in an h4 tag for this so i'm going to say more about me and i'm going to paste in this text so i'm going to copy and paste this you can just use mine use lorem ipsum or just have your own description here so we're going to use the h4 tag and i'm going to just add in a bunch of content so okay so that's there and for this section i'm just going to use two paragraph tags and i'll create two right now and then we'll actually paste in both sections right away so we'll take in this first part right here and later on i'm actually going to make this dynamic in another project but for now it's just going to be static like this so that's my first part and the second part so we want that space right there and the second paragraph if i can select that okay so we have the two paragraphs and we want to create a break so i'm going to do an hr tag here so we want that line break and we want another h4 tag so within this h4 tag this is where we're going to talk about our our skill sets what we understand so i'm going to put in top expertise and it's usually hard to list out everything here so i'm just going to put in the honorable mentions i guess the things that i want to talk about or want someone to see and then later on you can maybe have another section where you can write these descriptions so we'll just put this here so i'm going to take this first part of the sentence and then i'm actually going to add that link so i'm actually going to add a resume here so i'm going to show you how we can add a pdf if you don't understand that and then how to actually open it up in a new tab and allow somebody to download that so let's go ahead and put that paragraph tag and right within the paragraph tag i'm going to add in the h the a tag here or i'm going to add in a link i didn't know how to say that and i'm just going to say download resume so i want it to be obvious that it's downloadable so i'm going to save that and then i also want to make sure it's a different color and if we go back to my desktop here i'm going to minimize everything let's go ahead and grab this pdf and we'll drag it into this website here so i'm just going to put it right with the index.html and the default css here so we should see it now right here that's a resume and to link that up all we have to do is do resume.pdf here and i just want to make sure that's lowercase to keep consistency and one thing that's common you don't want somebody clicking this and leaving your website so right now if i refresh the page right here i'm gonna save actually round one here so i'm gonna save this link and if i refresh it if somebody clicks on this i don't want them going to another page i want them to actually open this up in another link i don't want them to leave their website so i'm going to set this to target and then we're going to do underscore blank so now if they click on that link it's going to take them or open it up in another page here so i click on it the website's still open and it just opens up a new tab then they have their resume so now what i'm going to do is add in the skills right here so these are going to be two lists right here so i'm going to use a ul tag and li tags and i'm just going to add two of them in here and then we're gonna use a wrapper around to create this background and then we're gonna create a grid out of that and then we're gonna inline that so that's how it's gonna set this like this to where they're in line next to each other so let's start creating those so what i'm gonna do here is create a wrapper for that so first i'm going to create a div and i'm going to call this div or give it the id of skills so inside of this wrapper we're going to create a ul tag and inside of this ul tag i'm going to paste in a couple li tags so i'm just going to paste in some of the things that i want to know or i want to add on here so go ahead and just add what you want or copy this for now and i also want to add in another ul tag and i'm going to paste that twice and add in some other skills here so let's go ahead and add that and if i look at it it's just going to have them going it's just going to stack on top of each other so we're just going to have them listed out here so what i want to do is first set up our columns so if you look at this we do have two columns but because we don't have that grid area set up properly it's just overflowing to the right so i'm going to do something a little bit different and show you a trick to make grids responsive naturally without having to write media queries like we did here so this is very useful when the layout is more complex but if we're doing something like just lining it up like we're doing it's going to be a lot easier this can be done with flexbox or just make grids naturally responsive so i'm going to take this this class right here so we're going to take the about wrapper and that's going to be a class so we're going to put that dot there and the first thing is to display that as a grid and then we want to use grid template columns so what we could do here is we could do something like 1fr 1fr and then create two grids but what's going to happen is just like before once we crush that it's going to keep that sizing and then crush all the items in there so what i'm going to say here i'm just going to write in some code and then i'll explain what's going on so we're going to start with adding repeat and inside of repeat i'm going to say auto dash fit and i'll get to this in a second and explain what's going on so we're going to have autofit and then we're gonna put a comma in there and then we're gonna do min max and inside of min max we're gonna set 320 and that's gonna be in pixels and then one fr so what we're saying here is repeat this action right here which tells us auto fit as many columns as we can into this row so how any however many columns will fit in there go ahead and add them in there and repeat it this way with min max say that the column should never be smaller than 320 pixels so once we get to the point where it starts crushing it go ahead and start naturally stacking those items now if we expand it go ahead and just expand the column with it so let's try this and just to be able to see this i'm going to take this text right here and i'm going to paste it into that social link section before we actually add text there and let's just try this so if i refresh that so now we have our two columns that's that dummy text i just added and we have this less this uh left side right here so if i start shrinking this right here let me try to expand this so as we're going we're gonna reach 320 pixels and then this one just like a flow is just going to get crushed down to the right so if you look at it that column on the right just got pushed down and it naturally just was responsible that's a cool little trick it's going to make things a lot easier sometimes it's an overkill to start writing too much there so it's just an easier way to go about things now let's go to the next section and what we want to do now is just style our skills here so i'm going to take that id and i'm going to go just underneath my about wrapper and i'm going to paste in skills here so we're going to display scales as flex and this can also be what am i doing here actually is it flex or yeah so we're just going to do flex here for this instead of grid just because it's a a simple little alignment here so we're going to do justify content and i'm going to do space dash evenly so we use space around earlier and that just pushed all the content as far as possible away from it from from both columns but in this case what we want to do is we want to make sure that there's space between but we're not just stacking this one to the very left and this one to the very right we just want to create a good amount of margin between them so that's what flex is going to do for us and justify content and now i just want to set the background color and for this i actually want to use a variable so i'm going to repeat the color that we have up in that shadow that we created earlier which i called preview shadow here so if i take a look at this right now it's just going to be this color right here so i just want to make sure that that's consistent and there we go so things are looking pretty good i want to add some padding to this row right here so let's just do that we'll add in padding top to the about wrapper and we'll also do padding bottom so padding bottom i'm going to set that to 50 pixels and padding top let's set that to 50 pixels so let's go into this social link section now and let's add in this image with these links right here with that header so the first thing i want to do is add in or take this out and then i'm going to add in that image so we're going to do image and i'm going to set that to images and then we're going to follow dot jpeg so in my images folder i added that image in probably about 20 minutes ago 30 minutes ago so it's already in there and if i refresh it it's going to overflow so i want to set the width make sure that it actually fits into the contents of that column so i'm going to take the id here so i'm going to add an id this is going to be social underscore image and i need to make sure to add a quote there so it's separated and let's take this value and add a width to this so i'm going to set this to 100 and that should fix our first issue so 100 percent and let's check that out okay so that looks better uh in a minute here i'm going to add in some gaps right here so i actually want to do this with css grids so i want to create that spacing but before we do that let's actually add in the rest so i'm going to take this section i'm going to copy that and i'm going to paste that just underneath here inside of an h3 tag so i'm going to create the h3 tag put that section in and for the social links i'm actually going to paste in some links here these are going to be the links to my actual twitter and youtube account and it's just a link and we're going to do target blank so it opens up in a new link here and i'll replace the actual links later so those aren't relevant to this video right now but those will go in there and if i refresh this section there we go so that looks a little bit better i want to center this text and create that gap next so let's go ahead and take care of that so i'm going to take this class right here social links and i don't think i added it anywhere here and that's going to go above social image here and that's a class so for this the first thing i'm going to do is display it as a grid so display grid and i want to make sure to align these uh on the or vertically here so we're let's just do a line content and we're going to do center so you probably won't notice it too much right now so if we look at it i just want to make sure that this is centered here and it moved it down a little bit so that looks good and the next thing i want to do is text align center here so i want to center all the text inside of it so text dash align center and i also want to create that gap so the text is going to get centered here but in order to create a gap right now so if you look at it there's no space here if we do inspect element you'll actually be able to see the grids uh the actual grid borders here so that dotted purple line you're seeing if you look at it there's no space here so as long as i'm hovered over we can see it so in order to actually add that spacing we're going to go to that about wrapper and it's already displayed as a grid here so to create a gap we're just going to do gap and i'm going to set that to 100 pixels so now if i refresh that we should see space there there we go and in between the elements you're now going to see space and it looks a lot better so we have that spacing and i think that's it for this section so i want to make sure that it's responsive so it's mobile friendly here and the links should be good once i actually add in the real ones so the next section we're going to go into is going to be this blog section so i'm going to create these cards right here so we're going to just create little boxes and then we're also going to make these uh naturally responsive with the the auto rows there that we created so the autofit rows and then we'll finish up with the contact form so let's go ahead and start with this portfolio section so let's go back to our website right here and i'm going to go back to the html section of that so in here i'm going to create a wrapper here so we're going to create a div and this is where all of those posts are going to be held so we're going to call this post wrapper and above this section without actually wrapping in anything i'm going to create a title here so we're just going to put an h3 tag in there and i want to style that by default so i'm just going to style it in line because it's a simple style and we're not going to really reuse this so we're just going to do text align center and i want to take this title right here and just paste that in so some of my past projects so however you want to call this make sure you just add that so we're going to have our title within our main container then we're going to have a wrapper to actually hold all of those posts so every single post will be in its own div here so that wrapper right there for the post itself is going to be called post and we're just going to leave it at that so it's just going to be post and we're going to repeat this three times for now and we want to add an image so for the image by default what i'm going to do is go into my images folder and i'm going to throw in a picture of myself so the one that we used earlier and then i'm actually going to go and replace these once we actually have this done so let's go ahead and just do images forward slash dennis dot jpeg and just underneath that we want to create a little section for the actual content so we're going to throw in our image inside of this wrapper and this is going to be called post intro so this is going to be like that detail section or post detail i don't remember what i call that i'm actually going to call it post preview so we're just going to throw that in here and all of the text will be inside of this inner div right here so let's add that class and this is going to be post dash preview and now inside of this preview so let's create some space here so we can actually see every single post so that ends right here now inside of this preview so we have the image above it uh let's create an h6 tag and this is going to be called post title so i'm just going to give it that text for now and i'll change this in a second and we're going to give this the class of post dash title now underneath this title i want to create uh i just want to add some paragraph tags here so i'm going to add some text and this is going to be it's going to have the class of post intro so post dash intro and we're just going to say this is a sentence and i'm going to say some more text here so that's just going to be some filler text and we'll actually change this later some more text here okay so that does it and i want to make sure to fix that and we also need a class for the thumbnail so let's just do class and we'll set that to thumbnail and now what i can do is repeat this two more times so everything looks good so far and i'm just going to take this post right here and within that post wrapper paste it two more times so we have all that content now so now if i refresh it we should see these posts lined up so what i want to do is actually create the columns fix up this image and start creating this bottom section right here so let's go back to the css now and let's start working with this so for the post wrapper i'm going to take this and put that just underneath our social image and i'm going to display this as a grid so we'll do display grid and for the grid template columns i'm going to do what i did just above here and in this case instead of setting a min max we're just going to do repeat and i just want to make sure that this is auto fit so fit as many as you can in there but never let it go below or above 320 pixels so just leave it at 320 and that should be the size of the individual columns now i want to actually style this thumbnail so for the thumbnail we want to make sure that this is going to be 100 in width to the border so whatever the actual content or the column size is so this is going to be width 100 and the height we're just going to do 180 pixels so for the height 180 and i actually want to display this as block so we want to have more control over it and i'm just going to do display block and this is going to fix a spacing issue that we're about to have so if i go back to the page here we should see our image is distorted like that because of the size so what i'm going to do is add in a gap and we'll fix the image so for the image to fix that all we need to do is we just need to do object fit and this will be set to cover so that fixes the image now for the actual spacing in between for the post wrapper we're just going to set gap to 20 pixels and we also want to center that so we're going to do justify content this will be center and let's take a look at what we have so far okay that looks good that's centered so now if i actually shrink the size here it's just going to adjust and center all of those posts so i want to add a border so let's go ahead and do that and we're also going to add a shadow so for this this is going to be for the actual post itself so i'm going to put that above our thumbnail and we're just going to do a border and this is going to be one pixel solid and we're just going to use that variable so we're going to use the border color variable that we set earlier and that's at the top of the page and for the shadow i'm just going to paste in what i've been using this whole time so we'll paste that and we also want a background for this preview so for the preview we're just going to put that underneath our thumbnail and this is just that wrapper around all of the text so we're just going to set the background color to white so that's going to be the white hex of fff and we also want to set a padding of 15 pixels so i want to create some space here and let's see what we have so far okay so that looks a little bit better and i also want to take out this line height make sure that's lined up properly here and one thing we're going to do different here is we need to actually set the colors to these two sections because when we change this so when we change the theme you notice that the text goes from dark to white but in this section we need it to stay so our default code will actually change this but if we set this down below here and actually customize that it'll fix it so let's actually set those values so for this we're going to take our post title and we'll put that just above our or just underneath our post preview and i'm going to set the color of the text to black so that's going to be black with that title right here so we put the class here and for the post intro i'm just going to paste in that hex so i want to actually change the font size too so for the color here we're just going to use this hex so paste that and i want to actually set the font size and make that a little bit smaller so i think we're at about 16 pixels and in this section i think it'll look better if it was smaller so we're just going to do 16 px right there and let's see what we have so there we go so that shrunk the text a little bit now let's actually remove some of the styling or the line height so for this i'm just going to set the margin to post title here so for title we're going to set margin to zero and i think that should remove it because i think that's what's what's causing all of that uh spacing right there so there we go that fixes it and what i want to do right now is add some padding and then i'm gonna quickly just replace this text and actually all of the images so i'll just pause it really quick take care of that and then we'll be back in a second so let's first add padding to that post wrapper so i wanna make sure we can see that css let's just do padding bottom and that's going to be 50 pixels and i actually want to change this font size to 14 pixels instead of 16 so now if i refresh that that looks a little bit better so i'm going to pause right now replace that and then i'll be back okay so i'm back i just unpaused the video and we just replaced the pictures here and the actual content inside and i also added this link right here so if you go back to the html it's just a link that says read more we don't link out to anything just yet and i want to fix one little issue here so you notice that when we have content here so we have three lines for both of these but we have two lines for this one and we have this overflow section so what's happening here is that our containers are actually set to that post so if you look back at the html we have our wrapper and these are being made into our columns so those are our containers and when one changes in height they always make sure that they're adjusting with it so the quick fix to this is to create a div around it and make that div the container so there's different ways we can probably do this but i'm just going to do an easy fix here and i'm just going to create this div and i'm going to wrap it around all three columns so i'm going to remove that and i'm going to indent this right here so once this is fixed the actual post will be treated like its own element and not an actual column within our grid so let's replace that value indent this and we need to do this one more time so the div opens and closes opens and closes and let's create the last one and need to fix that spelling error so for the last section i'm just going to paste in that closing div fix that and let's fix the indentation so now if i save this and refresh it so now the actual container so the elements in here for that post are just going to be its own element inside of a grid area so if i look at that i'm going to try to actually find the whole section so there we go so the purple lines are around it but the container is inside of it so you can see where that overflow happened on the very right one so let's go ahead and go on to the next section or move on to the next section and for this section i'm just going to style this form so we're going to create a form fill out these form fields right here and then we'll actually create the individual post and move on to the final section of actually switching that theme and then we'll just get to hosting it so let's go ahead and continue on right here [Music] so for this next section i want to go pretty quick here i'm going to do a little bit of copied and pasting just to speed things up because we are just working with a simple form but i want to show you something that we need to do here so let's create the form and we're going to style the button first so in here to replace this contact section we're just going to take this title right here and actually it's the title for this section so this h3 tag and i'm just going to say get in touch here so instead of my past projects let's do get in touch and let's take out that s so for this section we're just going to create a form we're not going to have any wrapper around it and we have our form tag so we're going to create an id this is going to be contact form and the thing i want to write manually is going to be that submit button so this needs to be customized per page so we're going to change this to submit and the value of this needs to be submit right here so we're going to take out name and or we'll just say send so this is going to be the actual text on it and i want to give this the id of submit button so we're going to set the id and we're just going to say submit dash btn and we need to create a custom variable for this so we're going to create a variable this is going to be called submit button and actually we'll change this to button color so let's just do btn color we'll camera case that and the value of this is going to be black so i want to make sure that i'm following the same styling here so this is going to be called button color instead of btn color so this is going to be black and the reason why we put this in a variable is because when we switch the theme here so if we go to purple we need this color to adjust with it now if we go to blue that color always needs to change with it so that's why we're going to start with black and then make that dynamic so once we set this value we can go down to the bottom of the page here so the bottom of my css file just above my media queries and let's create some space here so i'm just gonna paste in the entire css for that button and i'll explain what's going on so just underneath our post intro so we go and we start working with this uh id right here we create a margin top to create some spacing we set that width to full width the padding to 10 pixels to the top the bottom 10 pixels the color should be white and then that background color with no border so if i save that and if we refresh it so we have this button that's full width and it takes up the entire screen so once we actually set the form wrapper to it it's going to adjust and it's going to look a little bit better so let's start actually working with the form field so for this i'm just going to paste in the fields individually so we're going to start with our label for the name and the input field we're going to start with the name and we want to make sure that each field has a class of input field because that's how i'm going to style it now for the next one we're going to use the subject here so that's going to go just underneath and again the value or the name of that needs to be subject for when we submit that we have the input field for the class there and then our email and the last one is going to be a text area so this is going to be message and for message we're going to have the input field of text area but we need to customize this and make sure that we have more space so for this thing for this area we want to make sure that we have more height right here just for that text area where they actually write the message so now if i refresh this that's what our form fields look right now so we want to start styling the form itself and then we'll go to the input field so just above where our button is let's actually paste in the code for our contact form so just above the submit button we're going to display the form as block we're going to set the max width to 600 pixels so if we set it to max width it means that when we shrink it that this this will actually be responsive so we don't have to write a media query and change that when we're under 600 pixels and then we're just going to center that we're going to use our border variable right there and we want some padding border radius to make that round and then the background color will be that main color so that's going to be that light gray color and we also want some margin so if i refresh this section that's what we're going to have so far so that's all the styling we just centered that form and now let's actually go to the input fields so for the input fields i'm going to paste that just underneath contact form and between submit button we want to make sure that each field is 100 in width then we want to make sure that we have a padding to the top so we're expanding the size of the field padding to the bottom some border colors radius and the font size so there's not much to it we're just working with that class right there and let's take a look there so that looks pretty good i just want to add in this section make sure that's taller and some line height so i want to make sure this text is a little bit separate from the actual input fields so just above my input field i'm going to paste in the contact form and we're going to work with that label tag so we're creating some height there and we wanna make sure that the contact form text area has a min height of 100 pixels and i set the font size there so if i refresh it that looks good that's the form that we needed so what i'm going to do now is actually move on to creating that individual page so right now we're not linking to anywhere it just gives me that pound symbol right there and i'm going to keep this really simple so instead of actually formatting where our pages and our css files go i'm just going to create a new file right within our main folder here and i'm just going to call this post.html so we're going to create this new post and i'm going to take out default css and i'm gonna paste in some html into post.html so this is our boilerplate html there's our viewport our title right here so it's all basic there's our google fonts that's exactly what we have in our main page here and we just link up that style sheet with our container so we just have our main container so this is going to center all of our content and to actually link this up this is what we're going to do so we're going to go to this post page or this post section if i can find that so our posts are right here so in order to link this up just can't seem to find that okay so it's right here in main container so we're just going to take this first post and we're going to send it to post html now on this page we're actually going to move that navigation bar so i want to make sure that you can actually see how that works so let's go ahead and start with our left one right here and this is the only one that links up so we're taken to that page and this is where we can actually make this uh this nav bar reusable right here so we're not going to have this format on every page so what i want to do here is just grab that navigation bar and i'm going to close this out let's grab that nav bar and that's going to be at the top of the page and all i need to do is take everything from nav wrapper and we can take this entire section and because of our styling because of how we have it set up all i need to do is paste it into the top of my container right here and i'm actually going to take that and put it in the top of the body right there instead of the main container and the nav bar will automatically adjust to wherever it's supposed to be so it's just going to increase in size so if i refresh it and go back to this page it should look a little bit better so there we go so we have our navigation bar our post so whatever you want to put in here go ahead and add that but we can just link up to the home page maybe from this section if you want to do that i'm going to leave that up to you but now we have a navbar that can adjust and we can link out to that page [Music] for this next section i want to start by working with a little bit of javascript and we want to start changing that theme so what we're going to do is create three more css files and i'm just gonna use the variables for these so all we're gonna do is create three more files that are just gonna have these variables so the rest of the page for the layout we're gonna leave how it is and i just need to change these contents and in the top of my pages here so within the home page all i need to do is create a new link right here and we are going to link up whatever style sheet that we want so the first thing that we need to do for this section is put an id on this style sheet and we're just gonna have to change the value of this href depending on which theme was clicked so let's start by just changing this to theme dash style and what i'm gonna do is quickly explain what's happening here so right now we have this link right here and we also have our style sheet above so we have our default style sheet that's going to contain all of the styles for the page for the layout and we have all these variables up here so in a sense this style sheet's actually going to chain down so it's going to set this styling first but then if we apply another style sheet with different variables because all these values are working off of those variables we're going to overwrite these ones and it's going to change these values therefore changing the style sheet so let me give you a quick example of what's happening so let's create a new style sheet and we're going to call this blue.css and we put this id on it because we're going to have to use javascript to find this file and actually change this value so in blue.css if i copy these variables and i change these so i'm going to manually change these values without using javascript so we're going to do blue.css and now if i change these values what's gonna happen here is we're gonna see the second style sheet apply for whatever items are in there so we don't have the layout stuff here so we're still gonna take it from this style sheet but these values will change so let me actually take a color here so for blue.css we want this to be a dark navy blue and i'm also going to paste in another hex color so if i save this again we're going to work with this style sheet first and then we're going to take the values from here and overwrite what's in here so we're going to overwrite those variables and let me just show you the page right now so if i refresh this now the background and the main colors have changed so we still need to change more values but we read that first style sheet that has the layout and then we change those values so let's actually start replacing these and change the text so if i go back to the demo site let's actually set the text to white and then the secondary text to that eggshell white or that darker white and then we'll set the borders so for this and let's move this over so for the border color i'm just going to paste in another hex color we're going to change that and for the main text we're going to make this white so this is going to be fff and for the secondary text it's just going to be a darker white that's going to be that e value right there so if i refresh it we're looking a little bit better so now we have the border the text looks different and we need to change this value here so we need to change that to dark and then we actually need to change the text in here or no the text is fine but we need to change that background color so let's finish this up there's not a there's not that many values to change so the theme dot border we're going to change this to white so that's going to be the border around these items so now if i change that you can see that that's white but in the original they're supposed to be dark like that so let's finish this up here so i'm going to reset the next values and then i'll explain a little bit more so for the preview shadow we're going to change the hex here and we also want to change the rgba value and or rgb value and that's just going to be 25 39 52 and then 0.8 and finally for the button color that's going to be light blue so we're going to paste in that hex and let's take a look at what's happening so if i refresh that now that looks exactly what we need here so all of our forms adjusted that's why we needed those those variables because it makes that a lot easier we don't have to go through and change all of those styles we can just reset these variables so if i wanted to use the default css i could just change this or leave it because that styling is already applied and if we go back to the page if we refresh it now we're back to that white theme so let's actually change this to or let's actually add a blue and or a green and purple values here so i'm going to create two more style sheets and i'm going to set those so i'll show you what that looks like and then we'll actually start applying javascript and showing you how we can dynamically change this so let's just do green dot css and for this i'm just going to go ahead and start pasting in these values so for green.css i'm going to take everything from this section we're going to paste it in here and i'm actually going to look at my demo code so for green let's just take these values for our main color let's give me the hex then we have our secondary color our border color and our main text we're going to leave that to white so we're just going to use that value and then use this value for the secondary text and for the theme dot or the theme dot border that's gonna be white again and for the preview shadow that's gonna be let's see let's paste that hex in so we're gonna change that value and for the preview background i want to change those values too so preview background let's paste that in so let's just test this by moving this to our green css so let's just do green dot css now and let's refresh so now we're in the green and that looks good so far and i just realized the button color needs to be different so for the button color that's going to be this next hex color right here so need to put that in there and let's actually copy this for purple now because the main text and these borders are always going to be the same now for the dark modes or for the darker modes and the last one i want to do is purple so let's just do a new file purple and this is all in the source code so if i'm going too fast just go ahead and get the values from there so purple.css i'm going to paste this in and for purple we just need to change the main color then we have our secondary color our border color will be different so main text that's going to stay white that's that lighter white theme dot we're also going to leave that to white and we need to change the preview shadow so that's going to be different for purple and for the preview background here i need i just need to change that rgb value so if i switch that we need to change this to purple and let's refresh that so variables are really making our life a lot easier now okay so we're now in purple mode and i want to change this button color here so for the button color left that out here just want to make sure that that's actually right so we'll replace that and purple should be good now so that should be that purple value and now i like the look of the links here i like that blue but i do want to change this nav section right here so let's quickly just fix that let's go back to our default and i want to take the navigation section so let's find that nav wrapper and we're just going to take navigation and we want to update the a tag right here so we just want to edit that and we're just going to say for the navigation make sure that the color of this is going to be the main theme color so color is going to be set to that variable so whatever that variable is and we're just gonna do main and we're gonna do text so now if i refresh this we should see a light color here now if i go to that white mode here this color will be black because that's the set color for that but something i wanted to show you here is whenever we go to another page i'm not going to adjust these colors here because because we don't have that second style sheet in here so if we go to post.html i'm not going to include that so if you want to change the theme across the entire website i'll leave that up to you but i'm not going to include that so because we have that variable set it'll be dark right here and it'll always stay in white mode within a blog or other pages but within the homepage this is where we want to set the theme so let's move on to the next section and what we want to do now is add some javascript so we can grab this item by its id and then change this href property right here so i want to take this out and leave that blank until we actually load the page and i need to create a script.js file so we can call it whatever we want but i'm just going to keep it keep it script dot js and i'm going to put that in the same directory as all my other files so script.js and now i want to link it up so at the bottom of the page just above my closing body tag we're just going to add this in and for the source i'm going to set that to the new file we just created and now we have it linked up so let's close out some of these files i'm going to close out default.css and purple and put script.js on the right so now that it's linked up i just want to make sure that it's working so let's try doing console.log and say it's working and let's see how that looks so if i refresh it so this should go back to white mode here now if i inspect element we should see it console out here there we go so we know our javascript's working and what we want to do now is add an event handler to all of these before we actually start changing that so as we click on these i want to go and grab these by the class of theme dot so let's find that here so we're going to get it by this class right here so they all have the class of theme dot and we want to first query those items and then create a loop to actually add an event handler so we're just gonna do theme dots and i'm gonna do a capital d there and let's just do document dot get elements by class name and we need to throw in that value so we need to tell this what that value is so we're going to get them by the class name of theme dot and let's start creating that loop so we want to iterate over all those theme dots and add the event handler so let's just start doing this and we're going to go var i that's set to zero then we need to grab the theme dots dot length and while that's greater than i we want to increment i so let's add that value and that looks good so far i think so now on each iteration we want to actually get the item in there so we're going to index it like that and let's go ahead and add that event listener so dot add event listener and the event we want to listen for is going to be a click and we just want to trigger this function so let's trigger that function make sure that it's working and let's just console.log and say option clicked so on each click we should see this in the console and i actually want to console out an item here so what i'm going to do let's actually make sure this is working first so let's open up that console let's refresh it and looks like we have a small issue here let's see what's going on add event listener is not a function it looks like i have to capitalize that e right there so e needs to be capitalized and now that should work so we iterate on each loop here and now when we click on these we know that something's happening so i want to know what theme option was click so to do this i'm going to add in a custom attribute to my html so within here on each theme dot i'm going to create a custom attribute and we can do that by setting the value of data and then whatever we want to call it so we're going to call that mode and the first one is going to be light and then i'm just going to repeat this and change these values so this way we know exactly what button was clicked and how to actually change this value so i'm going to change all of these this to blue then purple and green or green and purple last one is going to be purple okay so now that we set this custom attribute i want to actually query this out so in order to actually get that mode let's just create a variable here and we'll just say mode and the variable will be this dot data set dot mode so we're going to take that attribute of mode and we're going to console that out and then i want to actually throw that in here so i want to be able to see it and let's try that so let's test that one more time this is not working let's see what's going on here and it looks like i need to add the equal sign there now if i refresh that as we click on it so we know light mode was clicked purple green blue and everything's checking out so let's actually start changing the theme on each click here so down below what i'm going to do is i'm going to create a function and i'm going to call this function set theme so we're going to trigger this function on each loop and we're just going to say actually let's give it a name so let's go let's say set theme and i'm going to capitalize a second t and i want to trigger this function on each loop here so to the function we want to pass in the mode and we need to utilize that attribute right here or that parameter so we're going to pass it in and i need to create a conditional here so i'm going to say if the mode is equal to let's say light so it's going to be a string let's finish this up here if the mode is light let's go ahead and grab this this value right here so we're going to take document.getelementbyid and we'll do theme style and i'm actually just going to grab some code here that i have pre-written and i'll just recap it so we're gonna do document.getelementbyid and we're gonna take that by theme style so we're gonna grab that css file and we're gonna set that to default.css now if the mode is gonna be blue we'll just change that value so we're just going to say blue and this is going to be blue.css and we just need to repeat this a few more times so we're going to do that for purple or green and purple so we'll just keep changing the values and i think you'll be able to understand what's starting to happen here and i'll recap it if not in a second here so this is purple so whatever mode is passed in whatever button we click on we just change that css value so we grab this link right here and we change that href so we're just setting that by doing themestyle.href and we set it so let's test it now and now on each click it should change the value so if i click blue now it's blue here purple and green so we need to do a few more things uh on that transition i want to make sure that that's smoother right here so it switches pretty fast i want to give it a smoother effect so if you try the demo here it kind of looks like the lights are switching out and i also want to make sure that it saves so right now whenever we refresh this it doesn't actually save so i want to save these values so if we set to purple and refresh it it just goes back each time so to actually save or to make that transition all i'm going to do is go back to my css file and within my css file i'm just going to grab the body tag and i'm just going to say star so that means all the elements all the child elements let's set transition to 0.3 seconds so it's going to delay it for a second and it's going to look a little bit better so now when we switch that it looks i don't know if you noticed that but once you try it on your own screen it should look a little bit different it looks just a little bit nicer and gives it a better effect so right now what i want to do is actually save that value in my local storage so if you don't understand local storage let's go to the console here it's a way to actually save information in the browser we can use cookies for this that might be a term you're more familiar with and we can actually do this that way but for now i'm just going to use local storage and that's going to be within application and right here so it's just going to be the value that's saved with a theme and i can delete that because that was from the other website so to get this value let's first see what we have in local storage and then actually set that so back in my script.js file and i'm going to move this to this side here in script.js the first thing we want to do is grab the theme that's in there so let's just say let and then we're going to set the value of theme and to actually find a value in local storage all we need to do is local and then storage is with a capital s so we're going to say local storage dot get item and we want to get the value of theme so right now because there is no item in there called theme it's just a key value pair it's going to look for a key called theme and if it doesn't have one it's just going to return it to null so it's not going to have anything there so we're just going to write a conditional and we're going to say if the theme is equal to null let's go ahead and actually set this the the theme here so we'll take this function and we want to trigger that and at this point i just want to manually pass in a theme so if somebody's on our page for the first time let's uh have them see the white theme here so if we do have a theme here so if local storage does have a theme let's go ahead and trigger that and we'll just say set theme and we'll take that value and pass it in so we'll take whatever was in local storage and we'll pass that in right here so that's how we're able to set the value this isn't going to do anything right now because if we consoled out local storage we would see that there is nothing in here so in order to actually set that value we're going to set it in the set theme function so at the bottom here this is how we get a value from local storage but to actually set one we're just going to use local storage and instead of get item we're going to do set item here so just want to make sure that's correct so that's going to be set item and we're going to set the value of theme and that's going to be the key so whatever you want to give it the name or whatever name you want to give it and we're going to set that value to mode so now when we load our page it's going to say null and then it's going to set trigger the set theme function which is going to pass in light and then right here we're going to set that in local storage so let's try that and now that local storage value was set so it's in light mode at first because we didn't have one there and if i switch this to blue it changes this value right here so it sets it finds the key and then it changes the value and that will stay with us now if a user refreshes this that's going to stay with them and it's going to be there until they clear that value so what's happening here is on the first load we're setting that theme to light and once we have it it finds it grabs that value throws it into this function and then we're setting this value [Music] so now it's time to host our website we are going to use aws s3 buckets so in order to do this you do need an aws account and unfortunately we do need a card so i know there's gonna be a few people that don't have this but we do need a card on file so if you have one go ahead and do a search for aws and you should be able to pull this link up so aws.amazon.com and create the account i already have one so we're going to go to our management console and in here go ahead and do a search for s3 so it's already in my commonly searched areas and i created a new account just to be able to start fresh and i am going to take down this link so the bucket that we have here i am going to provide a demo in the description but it's not going to be this one so don't follow this url now when we're creating a bucket we do need to give it a unique name so go ahead and give it a name you might need to try this a few times and i'm just going to do dennis demo let's see if that's available and for the region i'm just going to leave it to whatever i have so let's go ahead and hit next here and we're just going to leave all the standard settings but in this section i am going to turn off block all public access so in order to actually display files you do need to make them open you need you do need to make them available to the public so go ahead and change that value and let's go ahead and create bucket so we have our bucket and the first thing we need to do here so i'm going to show you a few things so the first thing we need to do is we need to grab that bucket and actually drag in the files into it so let's go ahead and just minimize this close out some of these things right here and let's close out the website or minimize that so what i'm going to do is i'm going to paste in this file that you're going to have in the source code so i'm going to leave that there for you and we are going to take all of these files in that website and we want to just drag them into the bucket so let's take this and we're just going to go to upload and now within upload i'm just going to drag in all the files and let's go back here let's hit next and right now i'm going to do do not grant public access so i'm going to leave it like this for now so what's happening here is we set our bucket to actually allow public access but we don't allow the individual items to actually be viewed by the public and i'll show you how to fix that and some ways to go about that so i just wanted to go through that manual process so they're just uploading we'll give that a second okay so all the items are uploaded in the bucket now if i go to my index.html file if i click on this link i'm going to be blocked right here so because it's not public it has this it just stops me from loading it and what i need to do to that is because the bucket was set to public we allow those permissions we need to actually go to this individual item right here and make that public now now if i open it and go to open that in a new tab we're going to be able to see that file but because that css file is not public we would have to go back to that css file and also make that public so i'm actually going to make this a little bit easier but i want to show you this process so we're going to go to default.css make public and now if i refresh it we're going to see on this link but the images also are not public so the quick work around here is you could go through all the items here and make them public but we are going to just set a buck a bucket policy permission so or we're going to write a bucket policy here and this is going to allow us to overwrite all the items in that bucket and just allow every item in it to be public so we're okay with that and to do that we're gonna go back to our code here and this right here what i just pasted in so that was that text file i put in we're gonna copy this it's gonna be in your source code so go ahead and paste that into the bucket policy now we need to change this to our bucket name so in this section our bucket was called dennis-demo we're going to take that and we can just replace that so once we save it it's going to allow all the items in our bucket to be public so now if i go back to amazon s3 it says all of those items are public now i don't have to manually go and change all of these items so if i refresh this now we should see our images and we are publicly hosting this now the next thing i want to do because this is just a static file up on a bucket right now it just has our link right here and then index.html we actually want to perform static file hosting so to do that we're going to go to properties and we're going to select static file hosting now we're going to say use this bucket to host a a website and i just need to set the file that i want to load up by default so by default i want my index.html file we can create a page for our error page there we're going to save that and if i go back to this now we're going to get this link right here and it's not going to have that forward slash index.html right there it's just going to be the bucket name so this is now a public link i'm actually going to take this down i'll provide a real one in the video description but our website is now hosted publicly we can send this to anybody you can look at it from your phone and it's now a publicly available website so to connect the domain i'm going to leave that up to you guys but all you need to do is point it to this url from wherever you're hosting that and that's it to actually host it publicly okay so that's it for our portfolio website i hope you guys enjoyed it can take a lot away from this and if you like this kind of content i do a lot of my own stuff on my channel so definitely check that out and brad thank you so much for this opportunity this was a really cool idea and i hope we can do it again so i'll see you guys in another video

Channel: Traversy Media

Views: 382,593

Rating: 4.9621153 out of 5

Keywords: html, css, portfolio website, build a website, dennis ivy, website design

Id: r_hYR53r61M

Length: 120min 45sec (7245 seconds)

Published: Wed Jul 22 2020