Build a Responsive Website | HTML, CSS Grid, Flexbox & More

[Music] what's going on guys in this video we're going to build and deploy a modern website meaning we're using all modern techniques like css grid flexbox we're going to add a little bit of animation you'll see if i reload this we have some animation going on we're going to use pseudo selectors span grid columns and rows so basically what this is is a fake it's like a fake cloud hosting platform i just called it laruki i used heroku as kind of a guide for the content here and we're going to have three pages home features and docs this is the home page we have our navbar we have this showcase area with a form to request a demo that actually works so as we say john doe company name say test test at test.com and if i submit it's going to go ahead and submit the form because i we what we're going to do is deploy this to netlify which has form submission services so we have that down here just some stats with some fun awesome icons we have a little fake npm install this this is not a real program it's just for you know for this website and we're going to be using css grid to align everything we're going to span across rows and columns we have this little section here supported languages and a footer so that's the home page features so we have these two areas here and then again we'll be using css grid for this part here and then the docs so we have this header area here and then these columns with some links we're going to have a lot of different utility classes for things like background colors buttons cards even alerts like this so it's almost like we're creating a mini framework we're gonna have a separate utilities.css file for that stuff it's also responsive so we'll make this a little smaller so you can see this is around tablet right here we change the direction of the animation everything still looks good we're going to add this little slant using transform skew and if we go to even smaller you'll see the menu changes looks nice on mobile screens so we're going to do quite a bit here it's going to take a while but you have a really cool project that you'll have afterwards this was actually going to be part of a premium course i was going to add it to either my html and css udemy course or another one but i decided to just throw it up on a youtube video so hopefully you like it again we're going to deploy it to netlify we're going to make this form work so let's get started all right so let's get started on our website so i have a folder that i created on my desktop called the rookie website and i opened it within my text editor which is vs code visual studio code that's what i'm using that's what i recommend but of course you can use whatever text editor you want and then i have my browser open on the right which i'll probably have to make this a little bigger later on so in here you can see i have an images folder with a bunch of images a bunch of programming logos for the home page you can get all of these images in the github repository in the description if you're going to follow along which i would definitely suggest doing so let's create our index html which is going to be our home page also for our style sheets let's create a folder called css and for now just a style.css file okay i'm just going to close up the sidebar for now so in our index.html let's create a boilerplate with emmett using exclamation enter and for the title here we'll call this uh laruki and let's put a pipe character and we'll just say cloud hosting for everyone all right and then we want to link in our style sheet so we'll add a link tag here with the rel attribute of style sheet and an href of css style css i'm also going to be using font awesome so the easiest way to work with font awesome is to use the cdn which we can get from cdnjs.com if you just search for font and click on font awesome we want the this all.min.css so i'm going to copy the link tag and just paste that in and that will allow us to use font awesome classes to create icons now we're just going to kind of take this section by section we're going to start with the nav bar so i'm just going to actually comment this navbar and we want a div with the class of navbar and this is going to hold the logo which in this case will be just an h1 and also the menu the navigation so i do want to wrap this in a container as well because we don't want like the logo going all the way over on huge screens we want to end it at a certain point so we'll have a container that'll be about 1100 pixels max so we'll have that container and then in that we'll have the h1 give it a class of logo and i'm just going to use the website name here laruki and then a nav navigation with a nav tag and that will have an unordered list with some list items that have links so this one will go to index.html it's our home page i'm going to copy this down on windows in vs code you can do shift alt down on mac shift option down if you want to just copy line down so the second one will be features and it's going to go to features dot html and then we'll have docs dot html and text will be docs all right so i'm going to save that now i could just open index html right on my file system but i have an extension called live server which you can get by just searching here live server and you can install it and then we can just open it by saying you know right click open with live server and that'll open in the browser and anytime i edit any html or css it's going to update automatically so we don't we don't have to keep reloading so in our style sheet let's start off with just some some base styles the specific font that i want to use is lato or lato i'm going to get it from google fonts which i have here as a bookmark so fonts.google.com and we search for lato click on that i'm going to select the light 300 select the style embed and then i'm going to grab the import syntax right here and put that right in my css okay and then underneath that i'm going to create a reset so i'm going to use the universal selector which is an asterisk so basically you know all elements i want to set the box sizing to border box and i use this on just about everything i do with css it allows us to add padding and borders and stuff without having to add to the width of an element and then let's also just add a reset for the padding so set that to zero also the margin okay so we're just zeroing out the padding and the margin on everything and you can see up here that there's no more margin on the body there's no padding on the on the unordered lists or anything like that because you do have default margin and padding on some elements just from the browser and then for the body let's set the font family i'm going to set that to lato sans serif okay so that'll change our font let's also change the color to 333 which is just uh you know a dark gray and then i'm going to set a line height so line height i'm going to increase that to 1.6 just to spread things out a little bit and then for ul's let's just make sure that we don't have any bullet points so list type none or list style type none and for the links we want to get rid of the ugly underline so text decoration is going to be none and you can see as i'm saving it's updating over here i want to change the color as well to the same color as the text now for headings for h1 and h2 headings i'm going to set the font weight to 300 which will make it a little less bold and i also want to take the line height and make that 1.2 so we'll lessen that up a little bit but i do want to have a margin on the top and bottom of 10 pixels so top and bottom 10 left and right 0. and then i do want to have on the paragraphs some margin on the top and bottom just so that they're not squished together and you can actually tell you know the paragraphs apart so add that and then finally i just want to add on images a width of 100 which will keep the images within their container so even if it's a large image it's not going to bust out of its container it's going to take a hundred percent of that container so that's it for like the base styles for now so let's start to style the nav bar which is you know this whole thing right here so the class of navbar i'm going to add a background color to so the color that i'm going to use is a hexadecimal blue so let's do number sign 0 4 7 a e d for that and the color of the text we're going to make white to give it some contrast now the links won't turn white yet because we set the links to be or the a tags to be this color here but we'll fix that in a little bit in addition to that i just want to make the nav bar a height of let's do 70 pixels okay the content is busting out of it right now but ultimately this stuff will be aligned horizontal now the container i want to do that because you can see if i stretch this out really wide this is always it's always going to be way over to the side same thing when we put the links over here and i don't want that i want to have a container where it ends like here to here so we'll make an 1100 pixel wide container so let's add container and let's set a max width to 1100 pixels and then we want it in the middle obviously so we'll set the margin to zero on the top and bottom and auto on the left and right so now if i stretch this out past 1100 pixels it stays there all right so that makes it a little more clean looking and then also on the container here let's take care of this this space right here is because of the heading so the h1 here has a margin top of 10 pixels and that's where the space is coming from we can fix that by adding an overflow on this and setting that to auto and now we get rid of that space and then i also want just a little bit of padding on the left and right so we'll say padding let's do padding 0 on the top and bottom 40 on the left and right and now that'll push that over a little bit even if it's on a smaller screen than 1100 pixels so that's the container now we want to align this basically we want the h1 over here we want the nav over here on the right so what we'll do is we'll use flexbox and make this div a flexbox container and then that will make the h1 and the nav flexbox items and we can align them however we want now i don't want to put display flex on the container itself so i'm going to add a utility class of flex and then we'll add it down here so let's say display flex which is going to now turn it into a flex column and you can see that the the nav so the second flex item which is the nav is now on the side of the h1 because it's in a row we could say flex direction and set that to a column and it would still be a flex box but it would go this way instead now as far as alignment we have justify content and if i just set that to center it's going to move everything to the center this way on the horizontal axis or on the main axis i should say and then if you want to align things going vertically then we could do a line items center now if this were a column like if i change this to a flex direction column that would make justify content pertain to vertical alignment because now this is the main access since it's a column this would be the cross access if it's a column which would be align items but since we're using a row that makes this the main access and this cross okay so justify content always pertains to the main align items pertains to the cross so let's add let's see so we've aligned items let's also make sure that the height is a hundred percent of whatever the container is uh and we will see this scroll bar on the side here for now just because our ul is is you know it's still going this way ultimately it's going to be over here and the links are going to go horizontal now as far as the justify content goes so aligning it this way i don't want to put this these both in the middle i want them on each side so i'm going to change justify content from center to space between which takes this remaining space and puts it between the flex items so if i save that you can see now that space is put in between however this flex class i want to be able to use this in other places and usually most likely it's going to be center instead of space between so what i'll do is up here we have our navbar i'm going to go right below it and say navbar flex so the if if flex is in the nav bar then we'll have space between otherwise then let's have this center all right so i'll save and we still get the same result here now we should probably work on the on the links here we want these to be you know horizontal so what we'll do is set let's see so we'll set on the nav bar the ul let's display flex and as soon as i do that you'll see that they're going to line up in a row horizontally now the links let's say navbar a and first thing i want to do is just make them white so we can see them and then we just want to break them up a bit so let's do padding on the links 10 pixels and then i'll break them up a little more with margin as well so margin will be 0 top and bottom 5 pixels left and right okay so that looks pretty good i do want to have a little hover effect where we have a border on the bottom when we hover so let's say our nav bar links in the hover state i'm going to set a border on the bottom of let's do two pixels white solid okay so if i save that and now we hover over these we get the little border on the bottom okay and if i make this wider it's going to look like that which looks pretty good now i'm not going to do i mean this is pretty responsive just because we only have three links but if we had more this would run into this so we're going to do the media queries towards the end to make this responsive so we're essentially building desktop first you have desktop first and you have mobile first and the only time that i do mobile first is if i think that there's going to be more use of the website or the application on mobile devices otherwise i'll do the desktop version first and then i'll add the media queries to style the the mobile version so now we want to do the showcase area which is going to have you know some text over here it's going to have a form on the right so let's go right under where we have our nav bar and let's add showcase so this is going to have a section we're going to use an html5 section tag with the class of showcase and inside here i want to use a container because again i don't want this to go all the way up against the screen i wanted to have that 1100 pixel container and then we're going to have a utility class of grid just like we did with flex so we can use these you know flex and grid in multiple places and then if we need to specifically customize the you know the showcase grid we can do that as well now in here we're going to have two element or two divs that are going to be grid containers i'm sorry grid items inside of the grid container first is going to be let's call this showcase dash text so this will be the left side it's going to have an h1 that says easier deployment and then a paragraph which i'm going to just grab real quick and paste in and then underneath the paragraph we're going to have a link that's going to be formatted as a button so we'll have a btn class also a btn-outline class and this is going to go to features.html and we're going to say read more okay so if i save that that's what it's going to look like right now under the showcase text div is going to be the second grid item which is going to be showcase dash form and this is going to be put into a card which is like you know a background of a background color with padding and rounded borders and stuff so we want to have those two classes and then we want an h2 we'll say request a demo and under the h2 we'll have our form we don't need an action get rid of that and in the form let's have a form dash control and you'll notice i'm stealing a lot of the bootstrap class names we're not using bootstrap we're going to create our own cards and form control but i like to use these these names so inside here we'll have our inputs and it's going to be type text let's give it a name of oops what i do so type text let's give it a name of name and let's give it a placeholder of name i'm actually going to make both of these a little bigger and we'll just switch back and forth all right so we have input name so we'll just grab this form control we want two more of these this next one is going to be company for the name so company and then the placeholder will say company name and then this last one is going to have a type of email it's going to have a name of email and it's going to have a placeholder of email and let's actually make these required as well so we can use simple validation here by adding required onto the end of these inputs required and i'm going to make all of these required all right and then we need a button so under the last form control let's do an input with the type of submit value will be send and let's give it a class of btn and btn-primary so if we save it's going to look horrible right now so we need to start to style it let's jump into our style sheet and i just want to add a comment here so this is the navbar styling and then down here these are utilities what i mean by utilities is classes that we'll use all around the website and then this is going to be the showcase and i might call this hero sometimes because that's what i initially called it when i created this but i decided to change it to showcase so let's see for showcase we're going to have we're going to have a height of 400 pixels and a actually let's add the background color now the background color i'm going to use the same blue that we have for our nav bar so this blue here so this is a good opportunity to use custom properties which are basically just variables in css so that you know if we have the same color and it's repeated five times in the css we can just put it in a variable and just change it there so i'm going to cut that from here for a second and then go up to the top and the way we define css properties is we need to define a scope and we're going to use the root scope so just colon root that means we can use this anywhere and oops that's not right we want to add dash dash or hyphen hyphen this is the syntax for custom properties and then what we want to call it which i'm going to call it primary color and just paste that in now to use this we go back down to wherever we want to use it in the nav bar and we say var parentheses and then we can add that variable and then we'll grab this same thing and put it as the background color for the showcase and now if we had this in a bunch of different places we could simply change the variable like to red and it's going to change it everywhere so these can be pretty useful now let's see back down to the showcase area let's make the color of this white it's for some contrast and then i'm going to also just add a position relative so that if we need to position anything absolute within it we can and for the let's see let's do the h1 so showcase h1 i just want to increase the font size because right now you can see you know these two headings are the same this one should be bigger this is the h1 this is an h2 so let's set the font size to 40 pixels i'll make that bigger i also want some more spacing some more margin on the top and bottom of the paragraph now initially we have 10 like this but i'm going to say for the showcase paragraph let's do 20 on the top and bottom okay so that'll just add a little bit more space um and then i think now we can start to work on the on this on the grid we want to align these side by side so we do have a grid utility class and instead of display flex we say display grid now that doesn't automatically turn it into a row like it does with flexbox we have to add another property of grid template columns and define how big how how wide we want each column now just like flexbox when we use this grid class it turns this into the container the grid container and then each direct element each direct item here is a grid item so we have showcase text and showcase form which are you know this and this so we want these to be in a row and then here we can define how wide we want these so we could do for instance 300 pixels on the first column and then 200 pixels on the second and you'll see this is now 300 and this is 200. this looks bigger just because the content ends but if i open up my elements here elements tab you'll see uh wait what did i do no i did 300 200. so you can see the first one is wider the easier deployment that's 300 the second one is 200 now we don't usually use pixels here you can use percentages you can also use fr units which are fractions so if i wanted to do two fractions of the entire space and then one fraction for the second column now you can see i hover over these you can see that the first one takes up two fractions of the entire space the second one is one fraction now for this initial grid utility class i want to have them both even which is just one fr that'll make them even another way to to write this is to use repeat and say repeat twice one fr and that'll make them completely even so if we check it out now you can see they're even now see how there's no space in between here so there's no you know margin or anything we can use a property called gap which used to be called grid gap and i'm going to add 20 pixels for that and now if i hover over it again you can see that space in between okay so we can add grid gap now i also want to add our justify content center and let's do align items center so that'll center the items both horizontally and vertically now if i save this you'll see these aren't centered vertically which is the cross access in this case so that's going to be you know align items and that's because there's not a height we do have a height on the showcase so the showcase has a height of 400 pixels but on the grid we also want to add a height so let's say height and let's make it 100 of its container which will be 400 pixels now it'll put these down here in the middle now as far as the the grid for the showcase i want to customize that a little bit uh for instance we have it split just one fr each on each side i want to change that so up here we'll say showcase showcase grid and let's set the grid template columns and i want to set it to a percentage so it'll be 55 for the text part and then 45 for the form part so the left side is going to be slightly wider than the right side and i also want to widen the gap a little bit so it's 20 pixels by default let's set this gap to 30 pixels so we'll just widen that a bit good now we want to start to style the let's close this up we're going to start to style this side over here we want this we want a white card like a background with some rounded corners and then we want to of course format this form make the inputs look nice so let's start with the card class that's going to be a utility so go down here and say card let's do a background color of white and we're going to set a border radius of 10 pixels so if we take a look here you can see that starting to create our card i also want to add a box shadow so box shadow we want the horizontal offset which i'm going to set to 0 the vertical offset let's do 3 pixels we'll do a 10 pixel blur and then the color is going to be an rgba which is red green blue alpha we want white so it'll be 0 for red green and blue which gives us white i'm sorry black not white and then let's set the alpha value which is the transparency to 0.2 and if i save that you can see it gives us a little shadow makes it look like it's coming off the page just a little bit i'm also going to add some padding and we'll do 20 pixels padding and then let's do margin 10 pixels all right so we can add this correct this card anywhere we want on the site and it'll give us this little background and let's also make the uh the color since we have a background color of white let's make the color of the card 333 so we can actually see the text now we want to style the form inside of it so let's go back up here where we have all of our showcase stuff and we'll say showcase dash form and for the showcase form i'm going to actually position this to be relative because i want to add a top property so if you want to if you want to use top bottom right left and you want to position it either relative or absolute um i'm going to just push this down a little bit by setting the top to 60 pixels so you can see that pushed it down now the height of this i'm going to set to 350 which is going to actually make it go you know past the container here and by default it's going to give us the scroll bar which obviously we don't want so we can fix this by setting on the uh on the showcase grid right here i'm going to set the overflow property because that's what's happening we're overflowing that element i want to set that to visible and now if i save that that scroll bar goes away and this will kind of you know go down past this border right here which is what i want so let's continue on with the form so we have a height of 350. i'm going to set a width on this of let's do 400 pixels so that's going to make it a little smaller and then let's see what else do we want to do here let's add padding what some padding the card has some initial padding i think we did 20 but let's do 40 on this so the card is just like a starting point forever for any element you add it to and then i want to just set the z index here to 100 to make sure it's always in front and then we will add some animation later using keyframes where we have this come in from the side this come in from the side but that's not going to be until later now the let's see the inside of this we want to style let's start with the form control so we'll say showcase form and then the form control remember form control wraps the inputs i just want to separate them out by adding 30 pixels margin on the top and bottom so that will separate those out and then we want to style the actual inputs now for showcase form input that would actually target these inputs but also the button because we used input with a type of submit we don't want to style that here we just want these which are two text inputs and an email so let's target those by putting brackets in here and say type text and then i'll go ahead and copy that down and let's also do type email and we want to style these by first taking away the border so if i do border zero you can see there's no border at all but i do want one on the bottom so we'll say border bottom and that's going to be one pixel solid and the color i'm going to use for this is going to be b4b e c b so now if we take a look we have that now these still don't go all the way across so let's set uh let's go ahead and set the width here to 100 so that these go all the way across and let's set padding on this to three pixels and i'm gonna increase the font size a bit so let's do font size 16 pixels all right so that looks pretty good aside from the button we haven't done anything with that yet but these inputs look good except when we click on them we get that ugly border we want to get rid of that so let's say our showcase form input when it's in its focus state we want to take the outline property and we want to set that to none so now when we click on them we don't have that ugly border or outline whatever now before we get to adding the little slant here i want to just style the buttons because these look horrible so those are going to be utility so we'll go down here and let's go under card so btn is kind of like the base button will have other classes to style buttons differently but they're all going to get this this btn so we'll start off with display inline block and that this will be on buttons and links so links by default actually buttons and links are inline we want them inline block and we want to add some padding so let's do 10 pixels top and bottom we'll do 30 pixels left and right and we also want a cursor pointer the background i'm just going to set to the primary color by default so dash dash primary color and then the color of the text will be white oops i forgot my semicolon here and we also want the border none and set the border radius i'm going to set that to 5 pixels so we'll go ahead and save that so this looks pretty good this button over here this has the same background color as the the showcase so we can't see the background now if you recall we also set a class of btn outline on that button so let's add that so class btn dash outline and basically we're just going to set the background color set background color to transparent and then just add a border of one pixel we'll do white and solid so if we save that there we go so we get that button there let's add a little oh you can see the the required attribute that we add makes all these required but uh let's have a somewhat of a hover effect so what we'll do is say for any btn hover let's use transform and then scale and that will just scale the size and one is the default so i'm just going to go to 0.98 which will scale it down just a little bit so when we hover over it we get that little effect all right and then that should do it for now as far as the buttons go let's go ahead and add the slant here now instead of adding a new element to the html we're going to use the before and after pseudo-selector classes or pseudo selectors and we can do that on the let's take the showcase and we can do that by using colon colon before and then we also want to add this on showcase colon colon after now when you use before or after or both you have to have a content prop or prop using to react too much content property and we're going to leave this blank but you could put something in here like you could put text and you can see it's going to put it before and after we're going to leave that blank what we want to do is style this now the showcase has a position relative it should at least let's make sure yeah so i set that to position relative so this is going to be positioned absolute within that relative within that showcase so let's say position absolute and then we're going to set a height of let's say 100 pixels and then since we made this position absolute we can add you know top bottom right left we're going to set the set this to bottom but i want to go below the bottom of the showcase like down here so we're going to do a negative value of 70 pixels okay and then we'll set on the sides to zero so right zero left zero and just to show you where this is and you know what it looks like i'll set the background to red okay so this is the where we're gonna add the slant now to actually add the slant we're gonna use transform and then skew y so transform with transform you can use scale you can rotate you can position it with translate or translate x translate y you can also use skew we want to skew it on the y-axis just slightly so we're just going to do negative 3 degrees so negative 3 d e g and now you can see we have this slant now obviously i don't want this to be red so i'm going to change that to white and now it just basically looks like it's part of this okay and you can mess around with this if you want like you can slant it less if you do two you could do one and it's barely slanted but i i like the three now it's gonna go like right here flat and then start to skew up if we make this wider you can see that area is flat but i think that's fine i think that actually looks kind of cool but you can mess with it if you want uh it's all it's completely up to you now just to make sure this works in all browsers let's add our prefix versions of this too so i'm going to copy this down a few times and we're going to add our webkit so we want to do dash webkit dash transform and that's going to be for chrome and safari then we want mozilla so dash moz-transform and then we want microsoft so internet explorer or whatever ms transform so just add those prefixes i'm actually not sure if we need those anymore but we'll just add them because i added them when i initially created this project all right so that gives us that now we're going to move on to the next part here i know that took quite a while just to get what we have but that's probably the most difficult part of this this whole site so let's go back to our html and let's continue here so we the next part is the the stats area so we're gonna go under this last section and let's label this stats and then let's add a section with a class of stats and we want to use a container here because we want it to to you know we don't want it to stretch out all the way we wanted to end where the rest of this stuff ends and we'll have an h3 so i'm going to add a bunch of classes here that we haven't created yet in the css but we'll get to it so let's call this stats dash heading and then we're going to have some utility classes for like text center if we want to center text also margin classes my-1 is going to be margin on the top and bottom because y is the y-axis so you know vertical if we wanted to do left and right we could have mx-1 if you wanted margin all the way around you could do m-1 so you can create these utility classes to help you out so you don't have to add so much css and so much margin and padding on things like the whatever the the h3 here itself so in here i'm just going to grab the text real quick for this you can copy it from the repo if you want and then underneath that we want to have uh basically three different areas with the i with an icon font awesome icon and some stats like the number of deployments so i want to use the grid here and we have that initial grid class but if you remember that's only two columns right it's two even columns i want this to be three so i'm going to have a grid three class where we just change the number of columns to three and then also use text center and then i'm gonna have an my class i want a little more margin so we'll do my-4 and then inside here this will this will be a grid container so we need some grid elements we're going to have three divs here so let's say div times three and in this first one we're going to have our icon so we're going to use an i tag here with the font awesome class of fas and the class of fa-server and we can use a font awesome class to make this a little bigger and that's going to be fa-3x so you can do 2x 3x and so on so that'll be our icon underneath that will be in h3 with the actual stat with the number i'm going to say 10349 405 349 thousand 405 and then underneath that we'll have a paragraph and we're going to have some text color styles as well this is going to be text secondary so it'll be whatever our secondary color is which we haven't done yet and let's say deployments all right so that's what these divs are going to look like so i'm going to grab these these three lines here and in this next div paste these in so this one is going to be the published i guess the amount of disk space so we'll say published and for the stat here it's going to be 987 terabytes and let's change the icon so it's not going to be server this one is going to be upload and then let's go to this last div here and paste that in and this one is going to be projects and let's see the number here let's do 2 million we'll say 2 3 4 3 2 6 5 and then the icon that i want to use from font awesome is going to be project fa project diagram so let's save that let's take a look so you can see that the content is actually under the slant that we did here so what we'll have to do is push that down a bit so let's go to our style sheet and let's go right below showcase and say stats and we'll add here let's do our stats class and let's add padding top and we'll do 100 pixels so what that'll do is push it down below all this stuff here now i think what we'll do before we style like the stats heading itself let's add the utility classes and this right here you can see we used the grid class so what it's doing is taking the first two divs out of the three and it's splitting them in two because remember we set on the util on the grid utility right here we set repeat to one fr now if i do three then it's going to line them up nicely you know it's not centered or anything but you can see there's three even columns but i don't want to set that on the initial grid so we'll add that grid three so grid dash three and that's all we're going to do is take that and set that to three instead of two okay now i think i've come to the point where i just want to create a whole new css file for our utilities just to split things up a little better so in our css folder here let's create a new file called utilities.css and obviously you don't have to do this you can keep it all in the same file but i'm going to just go ahead and grab all this it just makes sense to me to split it up so we'll save we'll cut that save it and then put them in here and get rid of this comment okay so that now you can see without the utilities it's going to look like that so we have to make sure we include that in our html so we're going to copy that down and we're going to include our utilities class first and save and now it's going to go back to how it was so now we just have these separate class i'm sorry separate style sheets for just basic styles and then any utilities that are to be repeated so we know we have the text center let's add that we'll go i want to keep the flex and the grid stuff at the bottom it's just my preference so let's go right here and say text center and we just want to text a line to the center okay and then let's do the the margin classes so remember we have my-one on the heading we have my-3 i think somewhere what do we put yeah so one on the header and then the grid is my four so see how close these are we put that my4 which is going to put a lot of margin in between this so let's let's add those i'm going to go you know what let's put that stuff at the bottom just because there's so much and i'm gonna just label this margin so we'll have my dash one and that's going to be margin on the top and bottom and i'm going to use one rem so a rem unit if you're not familiar with this is a it's a css unit that basically means it's a multiplier of the root elements font size uh meaning you know the html tag which is the default is 16 pixels so unless you specifically define you know the html font size to be something specific it's going to be 16 pixels and one rem is 16 pixels times one so this will give us 16 pixels on the top and bottom as far as you know my2 i'm going to set that say my2 oops and i'm going to set that to 1.5 ram so that'll be slightly bigger it'll be whatever 16 pixels times 1.5 and then let's do so we'll do up to 5. so y three will say that this is going to be two rem not three two rem which will be 32 pixels because 16 times two is 32 and then we'll take this will be my four so margin on the top and bottom will be let's do three rem and then finally my five will be forearm so now if i save that you can see we now have our margin here if i open up my chrome tools and check this out so the my1 you can see the margin there if we go on this one you can see the my4 so now whenever we want to add top and bottom margin we can use these classes so we're almost creating our own framework here right we have all these utility classes that's pretty much what bootstrap is and materialize and all these other frameworks but except we're not using those now there's also i think there's some places where we're going to need margin all around so what i'm going to do is just copy this and right underneath i'm going to paste that in and i'm going to change it to just m so m1 m2 3 4 5 and then we're gonna set it all around so we can just get rid of the zero because if we just put one you know 1.5 ram that means all the way around so we just want to get rid of those all right and then if you wanted to you could do mx for margin on the on the right and left but we're not going to need that i know we're not so i'm not going to add them and then i want to do the same with padding so i'm going to grab all of these and paste that in and i'm just going to change let's say padding and we'll change all of the m y's so i'll just highlight this m y and then command d to select oops actually i went past it uh let's see i want this one this one this one this one and this one and i'm going to change it to p y and then let's grab this margin this one this one this one this one change that to padding okay we use the same numbers and then down here let's choose m dash we want all these and let's change that to p dash i miss this one p dash and then take these change those to padding all right so now we have all these margin and padding classes that we can use instead of putting margin and padding on every single element that we wanted on all right so hopefully you can see the use in this um what else do we want to do are there any other so we have grid three text center my so i think we should be good for now so just just doing that this looks a lot better there's some other things that i want to do though specifically for this heading i want to add some some stuff that's why i have this stats heading so back in our style dot css let's do stats dash heading and i'm actually going to set a max width of 500 pixels to kind of squeeze it in like that and then i want it in the middle here so i'm going to set the margin to auto which will put that right in the middle good now i want this stuff down here to be a little bigger like these uh this text so let's target the stats h3 and actually we don't want to do that because we have this h3 and then we have these so let's target the stats grid h3 so stats grid h3 and let's set the font size to 35 pixels all right good and then this is in a paragraph these this text here so let's target these stats grid paragraph and i'm going to set the font size of this to 20 pixels and i'm going to set the font weight to bold right so i think that looks pretty good looks nice and clean now for the next part where we have the the image of the cli i just want to take the final project here and just show you so i can kind of explain what we're going to do so this part here we're going to use the grid for this section and we're going to have three columns and two rows unlike flexblocks we can have not only multiple columns but we can have multiple rows and this image here this part is going to span two of the three columns and it's going to span two of the two rows okay and it'll put these on the side here so and i did this because i just want to kind of show you different ways you can use css grid how you can span elements and stuff like that so let's start off with our html and the image that we're using you should have in images it's going to be this right here cli.png so let's go under stats which ends right here and let's put a comment we'll say this is a cli section class cli we want to use a container here and we're going to start with just the initial grid class and then we'll you know we'll add extra styles that we need and let's add for the grid items the image will be the first one that's going to be in images slash cli png then we're going to have a card and an h3 inside that card that says easy to use cross platform cli and then we'll have another card and an h3 and this h3 is just going to say deploy in seconds okay so we'll save that this is what it's going to look like initially it's just a grid with the two you know two equal columns because that's what we have here all these are in effect in this area now i do want to change some things up so in our style sheet let's say cli and i'm going to take the cli dot grid and i want to change some things up so for one i want to have our grid template columns i want three so i'm going to say repeat three 1 fr all right so if i save that now it's going to look like this and that's not what i want right we don't want just each one in each column we want this one to span across two columns and then span across two rows now we only have one row so we can actually set grip grid template rows as well which you don't see as much and we'll say repeat and we want to do two frs because you can set the columns to be i'm sorry the rows to be um you know different units as well we're going to use fractions so now there's a there's another row here but we're only filling the first three now i want the first one to like i said span over here also span down so what i'll do is i'll take the cli grid and i want the first item so i'm going to say i'm going to use a angle bracket here and say anything that is the first dash child and what that means is just if we look at the cli grid which is this here whatever the first child is in this case is the image so i could just specify image but i'm making it so even if you wanted to put something else here it would work the same way right so the first child i want to take the i'm going to use the grid column property and i want to say i want this to go from one and i want it to span two so if i save that now you'll see that this the first child here which is this image is spanning across the grid from one to two okay remember there's three total there's three columns now i also wanted to span a row so i'm going to say grid dash row and you'll see if you haven't used css grid like this before it's really powerful so you can create pretty much any layout you want so i want this to span from one or start at one and then span two and save that and now it's spanning two rows so it's spanning two columns and it's spanning two rows leaving these over on the side here okay and that's the exact layout that i want so i mean if you if you've been doing this for a while like if you've been working with css for a while and you remember using floats even far back as you know using tables for layouts css grid and flexbox are a godsend so if you're new to web development consider yourself lucky because it used to be a hell of a lot worse alright so the next part that we want is this area here so this extreme cloud hosting this shouldn't be too bad so we're going to jump back into our html and let's go under this section we'll call this one cloud so section dot cloud and i'm actually going to add some properties here now you see it has a blue background instead of adding that right on cloud we'll have a bg dash primary class and then let's add some margin on the top and bottom let's add some padding top and bottom py2 and then we want a container and we're going to use the grid here as well so just our initial grid class let's center everything so we'll have a class of text center and in here let's do a h2 and i'm going to have specific size classes for headings so this one will be lg for large and we'll say extreme cloud hosting and then let's do a paragraph i'm going to create a class of lead for for if you want paragraphs to be a little bigger and then let's do my one which we already have established and we'll say cloud hosting like you've never seen fast efficient and scalable okay so that's our paragraph underneath the paragraph we're going to have a read more so let's do an a tag here with the class of btn i'm going to have a class of btn dark as well and this will just we'll just have this go to features html and let's say read more okay so that div ends and then i want that image to be the second grid item because if you look we have this grid container we just have this one div as the first grid item second one will be the image and that's going to be images if i can spell images slash cloud not cli cloud cloud.png all right so let's take a look at our version here which looks like this so we have a little bit of formatting to do here and before we do anything let's uh let's see let's do the let's do the template columns for the grid and so we have that image so we want to format it like this where this is this has more room than this side so let's go to our style css and call this cloud and we want our cloud section grid and we're going to set the grid template columns and then initially it's set to 1fr 1fr i'm going to set it to 4fr 3fr to get the dimensions that i want now we can't see the damn image because it's white but it's right here so let's add our utility classes remember i added a bg primary so i'm gonna go back up here right under the button and let's say backgrounds we'll say backgrounds and colored buttons because i want to be able to have a background color for the btn and bg classes so let's do bg dash primary as well as btn dash primary and we're going to give that a background background color of our primary color so primary color and then the color of the text will be white and there we go so now we have our background and we might as well just finish these i'm going to add a secondary color so what we'll do is in our style sheet we have our variables or i should say our custom properties at the top here and we're going to add some more colors so we have primary color let's copy that down let's do secondary color and that's going to be just a different shade of blue we're going to do 1 c3 fa8 so it's going to be a darker blue and we're going to have a dark color which is going to be 0 0 2 4 or sorry 2 2 4 0 so it's it's like a really dark blue so that'll be we'll call that dark color and then we'll have a actually i think let's just let's just do that for now actually let's add a light color as well so light will just be a light gray so f4 three times and let's say light color okay so now those variables are in the style css but we should be able to access them here as well so and we are you can see right here so we'll go down where was i where's the backgrounds right here backgrounds and color buttons so we have our primary let's do secondary so we'll copy this and even if you don't use all these at least you have them so we'll change this that that and that to secondary and then we'll do a dark and a light as well paste those in we'll grab this this and this and change that to dark and then this this and this and change that to light now since this is light we probably don't want white text so we'll change that to a dark text okay so now we have we can use btn or bg primary secondary dark and light and here's the the dark button now we need to add our text sizes our text size helper classes for this stuff here we have a class of lead and a class of lg so let's go under where we have like all of our buttons and stuff the buttons and backgrounds and we'll say text sizes sixes sizes and let's do the lead so lead is meant to be like on paragraphs we'll set that to a font size of 20 pixels and then the the large small medium and so on i'm going to use rem units here much like we did with the margin and padding so let's set the font size here for so small we'll do one rem which is going to be 16 pixels unless you edit the the the root font size the html tag font size medium let's do a font size of let's say two rem which will be 32 and then let's do lg so font size for that will be three rem and then we'll have an xl as well so xl we're not going to use all these but it's just good to have like i said it's almost like creating your own framework okay so i'll save that and now you can see we have our lg heading and we have our lead paragraph so that looks pretty good the next part of this is going to be the supported languages here so let's go down below our cloud and we'll say this is the languages section so sec section dot languages and we're going to have an h2 let's do h2 and give this a class of md which is our medium class we want it to be centered so text center and we'll do my2 so it feels like we're using something like bootstrap only it's our own custom css and we'll say supported languages then underneath that we're going to have a div with the class of container and we're going to use flex for this we just want to align not left flex because we just want to align them into a row and each one is going to be wrapped in a card so we'll have a card class and then inside that an h4 with the language name so we'll say node.js and then under that an image and this is going to be images slash and this is in the logos folder so logos and then node.png alright so if i just save that we take a look it's going to look like this now for the rest of these i'm just going to grab them and paste them in because they're just divs with the class of card with a heading and whatever that image is so they'll look like this now the specific css i want to add to to these cards so in our style let's go down here so our class of languages i want to add here actually not languages but languages dot card i'm going to do the text align center here now we could add text center to all of these cards but since there's so many i'm just going to add it right in the css and then i want a specific margin value here of 18 we'll do 18 top side 10 pixel and 40 pixels so if we save that okay there we go uh now i want these to wrap so if i make this smaller and we're going to do the media queries later but just to make this more responsive we're going to add a onto the flex so let's say languages and then the flex class so that's the flex container i'm going to add flex wrap and set that to wrap so if i do that you'll see that you know it'll these will actually go on to the next line when the browser is resized all right um see what else do we want to do here the h4 let's increase that size a little bit and add a little bit of margin so let's target languages dot card and then the h4 and i'm going to set the font size let's set that to 20 pixels and let's set margin bottom to 10 pixels okay now i also want to have a little feature where we hover over and it moves up a little bit so let's grab let's say languages card hover so when we hover over it i want to set the transform oops transform and i'm going to use translate y which moves it along the y axis and i want it to go up so i'm going to do negative 15 pixels if we do a positive it will move it down so if i go and i hover over you can see that they flicker up now i wanted to have a smoother effect i wanted to have a transition so on the card here i'll add a transition onto the transform property that i just added and we'll do 0.2 seconds and we'll do an ease in effect so now when i hover over it goes up you know nice and slow rather than just flicking up all right cool so let's see the next the last part of this page is going to be the footer so let's jump back into our html here and let's add our footer which is pretty simple so let's say footer and we're going to use a footer tag html tag and we're going to give it a class of footer and also a class of bg dark and a padding of py5 and in here let's set a container and we're going to use the grid and we want it to be three columns so we're going to reuse grid three let's see we'll have a div with the the site name inside of an h1 let's say look curry or laruki what i call this laruki then yeah so we'll do that h1 and then a paragraph underneath with the copyright so i'll say copyright and we'll do ampersand copy which will give us a little copyright symbol and we'll say 20 20. okay so that's the first grid item then we want just a little navigation so we'll do a nav tag here with a ul and let's do an li with link to index html and home you could have just copied the one above features and ultimately you could have like your privacy policy and stuff like that i just didn't want to create links that go nowhere so features and then docs docs okay and then the final grid item is going to be our social icons so let's do a div with the class of social and this will just be a bunch of links and you can have this go to you know your twitter page or whatever but yeah and here we're going to have a twitter icon so let's do an i tag with fa when you use social media icons with font awesome it's fab instead of fas and then fa-twitter and let's make it a little bigger we'll do fa-2 and then i'm just going to copy this down a few more times and then the second one here will be facebook and then we'll have instagram actually you know what github would probably be would make more sense so let's do github first and then we'll do yeah twitter at the bottom so let's check it out that's what it should look like let's take a look at ours and we have some color issues going on here let me just check bg dark yeah so bg dark it is white but the links aren't so what we could do here let's see i guess we'll just add yeah we'll just go down here and let's take all of these because we any links that are in these backgrounds we're going to want those to be white so we'll take that that and that and let's just add on to these a tags and set the color to white okay so now there we go um this these we want to space these out a little bit so let's do that we'll just go to our style sheet and say footer and footer dot social links i'm going to add margin and let's do 10 on the left and right there we go so we spread that out a little bit so that's it the only difference is i put documentation on this one this is docs but you can you know put whatever you'd like so that's the home page now it's not responsive just yet so if we make this looks absolutely horrible so i think what we'll do now i was going to do all the pages first and then do the responsiveness but i think we'll go ahead and add our media queries now for the stuff on the home page so we'll just make this smaller for now and we're going to just tighten this up a little as well and we're going to have two separate media queries on our in our style css the first is going to be for tablets and under and then we also want for mobile okay so tablets and under let's say at media and let's say max with so we'll use 768 pixels here so anything that's under 768 is going to be styled here and then for mobile we want to capture under let's say 500. so at media if the max width is 500 pixels then we'll go ahead and style here now for like for the menu that's going to be fine on tablets even if there's more items right but on mobile i'm gonna change things up a little bit so first of all let's say the navbar height which initially is what 70 pixels i'm going to set it to 110 because what i want to do is put the menu items under the logo so we have more more room for menu items and of course you could add like a hamburger menu or something if you wanted to do that but this is long enough so for the flex remember we have in navbar we have that class of flex and it's set to it's a row by default i'm going to set it to a column so flex direction column which puts everything on which will put the logo and the ul or the nav on top of each other and then for the navbar ul i'm going to add here padding 10 pixels and i want to give it kind of a transparent background so let's give it a background color of red green blue alpha we're going to do black so 0 0 0 and then just 0.1 and it gives it that kind of cool transparent background all right so i think that that looks pretty good uh let's let's go on to the the showcase part here so i'm gonna go up to the tablet view and i'm gonna make this a little bigger so i don't know we'll say like wherever 768 is so if we say body don't type this i'm just body display none so right here 768 so i'll keep it there get rid of that and then i'm gonna first style all the grids because there's a ton of grids here um and i just want to stack everything and this is going to be for tablets and under for so even smaller screens i want everything to just be stacked instead of two columns here three columns here you know three columns here with with a span i just wanted everything to be in one one column so let's let's take the grid class and then everything else where we customize the grid like the uh not hero showcase so showcase grid we have the stats grid we have the cli area grid the cloud grid so all of these i'm just going to set the grid template columns to one fr so just one single column that it takes up the entire thing i also want to set grid template rows because we do have the cli area where we have two rows so we'll save that okay so this stuff like this doesn't look bad this doesn't uh this form we'll have to we'll we'll do some stuff with the heat with the uh showcase area but this this is fine so let's let's work on this showcase area so we have our showcase now initially the showcase is set to i think it's a height of 400 pixels now when we're on smaller screens we're going to want that to be bigger so i'm going to actually set the height to auto so that it just takes up the amount of the container so you can see now it pushes down and the form isn't over the text and stuff so we'll add that let's also style the showcase showcase dash text so for the showcase text i'm going to i want to text align everything to the center once you know small screens and let's also add a margin to the top to push it down a little bit we'll do 40 pixels okay and then for the form we have our showcase form i want to i want to move that to the middle on actually both horizontal and vertical let's set justify self now justify content we've used a bunch of times that's going to be on either a flex box container or a grid container and it justifies all the elements inside justify self you put on an actual grid or flex item to justify just that item so i'm going to set that to center and then let's just set margin to auto okay so now that form is going to be put right in the middle that looks pretty good even where the slant is and yeah so i think that looks pretty good that's fine now this the cli area is the only area i have a problem with instead of having these you know on the same line because remember those are spanning i'm sorry this is spanning which is putting those down so what we'll do is basically reset this we have this this span so i'm going to just copy this and go down to tablets and under right under showcase form and instead of spanning we're just gonna simply set grid column to one and grid row to one so it's just takes up you know it's natural one column in one row so i think that looks better the footer let's see did i do anything no i didn't do anything to the footer and this just wraps this is using flexbox and flexwrap so that's fine so if we go down to really small screens it still looks good image is a little small but that's fine and that still looks good cool so the next thing that i want to do is the inner pages so let's work on uh let's work on the features page so what i'll do is copy everything from this index page all right so take all this and let's create a new html file called features.html and we'll paste that in and then i just want to get rid of let's see i want to keep the footer i want to keep the navbar so what we'll do is take everything from this section above the footer and go all the way up to where the nav bar ends which is keep going up here so right here so i want just the nav bar and the footer and we'll go ahead and save that and i'm just going to make this a little bigger again and if we go to features we should just have the nav bar in the footer so every new page you want to create you can just you know add this um now we're going to want let's take a look at the final version here so we're going to want this head area and then you know this and then we'll use the grid to align all this stuff so it's definitely not going to be as much work as the home page but let's go down under the nav bar and let's add the head area so this is going to be a section the class of features dash head and of course we can use our you know our utility classes i'm going to use bg primary and let's add some padding so py3 so this isn't going to be as hard because we already have all of these you know these helper classes so we're going to use a container also use grid and let's add a div here so the two items are going to be this div with the this this text and then this image over here so the first one let's do an h1 let's make this really big so we'll use xl and say features and then under that we'll have a paragraph with the class of lead and i'll just grab that real quick grab that text and then underneath the div is going to be image and this is going to be in images slash and we want server so we're going to use just server.png and if we check ours out it should look like this now we have some css to add here so let's go to our style sheet and we want to add some specific stuff for for features so let's go under what do we have not make sure you're not in your media query we're going to go under languages here and above footer and we'll say features so first thing the image is way too big so i'm going to say features features dash head features head image let's set the width to right now it's set to 100 by default let's set the width to 200 pixels okay now you see how it's i mean this is using the grid it's two even columns one two one fraction columns however i want this to be aligned at the end so remember that justify self that's gonna justify just this item and i'm gonna set it to flex dash end and it will push it over there now see i actually think that that's yeah that's pretty much all we need to do there so the next part is going to be this we're going to call this sub head so back in features let's add some more html here so we'll say subhead and this will have a section with the class of let's call it features dash sub dash head and then i'm going to use bg light here for a background and py3 for padding and we'll have once again a container with the standard grid class and let's add a div we're actually gonna i'm just gonna copy what we have here i could have just copied the whole thing because it's really just a div with some text and then an image this is going to be server 2 for the image text let's say the laruki platform and then i'll grab actually we'll just use some dummy text here let's do lorem 30. all right now i want the actually let's not do xl for the heading here let's do md and we won't do lead for the paragraph so i want that to be smaller and then the image we want that to be smaller as well so what we'll do is in our style sheet where we added it for the features head image let's add it for the s what i call it uh features sub head image features dash sub head image okay so that'll make that small as well wait that's too small um yeah let's make that a little bigger so we'll just take this and put that here and let's set the width to 300 pixels and i also want to do the justify self because i want it to be at the end so we'll say flex end there so now this is a little bigger the text is a little smaller and now we're going to move on to this part down here where we have all these different cards and icons and stuff so back in features let's go below the sub head and let's create a section here and this is going to be called features dash main it's like the main part of the page we'll do my2 so margin on the top and bottom and we want this to be a grid of cards so this first one will be card i'm also going to add the class of flex because in the card we want to align these elements using flex okay and inside here we'll have an icon let's do fas for font awesome and this icon will be fa-server and let's do f8-3x for the size and then under that will be a paragraph and we'll do lorem let's try alarm 30. so if we go down here and take a look so it has this card we will add some other styling to this but for now what i'm going to do is just copy the rest of these because they're all just card flex with an icon and a paragraph so there's really no sense in just typing it all out so i'll just grab them i'll go right under this card flex div and paste the rest in so they're just different icons and text and we'll save and right now they're just like all aligned next to each other but we're gonna add some special styles for these so let's go to style css and down here let's say features dash main and i want to first of all style the icons i just want to add a margin to the icons because you can see it's right up against the text here so let's grab in the flex or let's say in the card the initial icon or the direct icon and then margin dash right and we'll set that to 20 pixels so that's going to put some space in between those all right and then let's see for the grid we're going to use some we're going to do some spanning here much like we did with the cli part on the home page but first let's just do features main and say dot grid and set the grid template actually you know what we don't have to set that here we could just set grid three because i just want three even columns so where we have our container grid here let's say grid dash three so that'll put initially you know three columns so we don't need to put that here what i do want to do is add some padding though 30 pixels that and then let's span we'll take i guess yeah we'll take the first one we want to do this we want to take the first one and span across all three and then we'll take the second one and span across two and then the rest will just kind of fall in line all right so if you want to pause the video and try to do that on your own based on what we did before with the cli part you can do that so i'm gonna grab let's see we'll just copy this and let's say features main and then grid and i want the first element so i'm going to just use this universal selector colon first child and then i'm going to take the grid column and set that we'll say one and then we want to span that three okay so we'll save that and now you can see that first one is going to span three columns then i want the second one so let's copy this and instead of first child i'm going to use nth child because this with nth child we can just grab you know the second third fourth whatever we want i want the second one so i'm going to pass in two and we want to span two across so we'll save that and now you can see this one is spanning two this one spans three and then these are just all just normal all right so that should do it matches the final one so that was pretty simple now we want the documentation page which is this okay so it looks like this um so what we'll do is copy features because it's similar to that so we'll copy features we'll go to create a new file here called docs.html and we'll paste that in and then let's get rid of uh let's see we'll keep we'll keep the head so all we want to get rid of really is the sub head in docs and we want to get rid of the the features main and keep the footer alright so we'll save that and then if we go to docs we're just gonna see this so let's edit this part here so that's going to be in the head area we're going to change it from features head to docs head and bg primary that's good this is good we'll change this to docs and let's change this we'll say learn how to work with the rookie platform and then the image is going to be docs okay so we'll save that and the images is giant but we can fix that by going to our style css and let's it's going to be the same size as the features head so where we have features head image i'm just going to copy that and then we'll change this to docs head image rather than just create a whole new style it's going to be the same thing all right good so that takes care of that part so the next is going to be the docs main so let's go right under that say docs main so section docs dash main and i'm also going to add on to this margin on the top and bottom and we want a container grid so you can kind of see the pattern that we have with these pages and we want to i'm going to have a card let's just see what this is going to look like so we're going to have two columns here we're going to have this gray card and then this will also be in a card with all this content we'll have some menus here all right so let's in this grid let's add a class of card and i'm going to give this bg dash light because i want to have a gray background and then p3 so padding all around and then let's do an h3 i'll give this a class this h3 a class of my2 so margin on the top and bottom we'll say essentials underneath that we're going to have a nav because this is navigation a ul and then we want some list items and a link and these aren't going to actually go anywhere they would just be other documentation pages so we'll say introduction and let's do about the rookie and this one installation okay then we're going to have another menu so i'm going to just copy this h3 and this nav and then go right under this one paste it in and then this is going to be deployments and i'm just going to paste these lis in here so setting up a container using cli managing resources and so on it's going to look like that so far and then let's see we want to go after so we have the ul the nav and then this div is the first grid item so we want to create the second grid item which is the second column so right under that let's create a class of card and let's say h2 so this is basically the introduction page so just h2 introduction paragraph we'll say lorem 30 and we're going to have an alert here which is another helper class that we'll create utility class so let's say alert and let's say alert success so same as same classes as bootstrap and we'll do like uh actually let's have an icon here we'll use fas and then fa dash info right after that icon we'll say lorem 10 okay so it's i mean we still have some work to do here so don't worry about it looking pretty crappy so after let's see we have our alert and then after that we'll have an h3 we'll say lorem 3. so just some time just using dummy text now and then another paragraph and i mean you could put other stuff here if you want let's do lorem 20 here and then under that we'll have a link but let's give it a class of btn and btn primary and this is going to be a link that says install cli and then under that we'll have an h3 you can separate these out a bit all right so underneath that we'll have an h3 and let's say requirements and under requirements let's do a ul and we'll have a list item with the specific requirements so windows 10 and say mac os x and linux and then another list item so we'll say node.js version 12 or higher and i mean again you can put other stuff here if you want and then we'll have another h3 with the install and here let's say let's put a paragraph and say this is for mac using homebrew and we're going to we're going to have this as like code so we're going to use the html pre tag and also code code tag and let's say this is like a terminal line so money sign brew install the rookie dash cli all right and then we'll do another actually let's just we'll just copy this copy this down twice so that that's on mac so this will be or i should say that's for mac homebrew this is for npm so let's say npm will be npm install and then let's do yarn and that will be yarn install all right and i think that should do it so we'll save that and you know that doesn't look too good so we're gonna fix it so let's go to our style css and see we have our docs head image so let's go under features so right under features let's say docs and the first thing i'm going to add here is for all the h3s so docs what is it doc's main right docs main h3 i'm just going to add margin on the top and bottom of 20 pixels and then for the grid so the grid right now is just split i want the first one to be one fraction the second to be two because i want this side to be wider so let's target the docs main grid and let's set the grid template columns and we'll set it to one fraction for the first and two fr for the second so now this is wider now we also want to align this up to the top so let's add a line items and we want it at the beginning so we'll say flex star okay and that will align it up here because remember this is a this is a basically like a row so align items is going to be along the y-axis if you wanted this down at the bottom you could set this to flex end like that okay so you can i mean you can set these layouts to however you want now the next thing is going to be let's see let's do the these over here the navigation because that doesn't look too good so we'll say docs dash main and we'll style the nav lis so the font size i'm going to set to 17 i'll make them a little bigger we'll add some padding on the bottom so 5 pixels and let's also add margin bottom 5 pixels and i want to border on the bottom so border bottom one pixel ccc solid okay so that looks a little better when we hover over links here i just wanted to get bold so we'll say docs main links hover set the font weight to bold okay so you see it just turns bold that's fine um and then for the alert we want to style the alert and also this right here the code we want it to look like this uh the button that looks good but we want this style and we want this style down here so let's go into utilities css and let's see we have a lot of stuff here we'll go under let's see we'll go under the tech stuff and say alert so we have an alert class and we'll have like um you know different color alerts just like bootstrap does where we have success you have danger which is red stuff like that so the initial alert we'll set the background color to our light color so var dash dash light color so right away it's going to give it that light background we want some padding so padding let's do 10 pixels top and bottom 20 left and right let's make the font weight bold and let's add a margin kind of separate it out from everything else we'll do 15 pixels on the top and bottom so that's the initial alert now i want some space between the icons so let's say the alert icon i'm going to add oops i'm going to add a margin right of 10 pixels okay that looks better and then let's do the alert success and i'm actually going to add success and error as uh as variables or i should say custom properties so in our style sheet styled css let's go up here and let's add dash dash success dash color and we'll set that to hexadecimal value of 5 cb 8 5c okay so that's like a green color and i think it's even i think it's the same as bootstrap and then this one will be d say d953 4f which is a red color and this will be error color okay in case you want to have an alert that's an error so back in utilities for success let's say background color var dash dash uh dash dash success dash color all right so we want to make the color the text color white with that though all right and then if we have an error say alert error and set that to the error color and you could do others if you want but that's all we need here and then i want to style the code in pre tags down here so that's not really i mean it's not a class i want to style the element themselves so we'll just we'll put that in our style css up here with the base styles so under image let's say code pre set the background to 333 we'll set the color to white and we'll set the padding to 10 pixels all right so let's take a look alright so that looks pretty good i would say it looks you know similar to what you would see in actual documentation now the last thing i want to do as far as utility classes is have some text color classes so let's say this is supposed to be the introduction page which is this link right here so let's have a class on that so where we have the the link here of introduction let's say class equals and say text dash primary okay so obviously it's not gonna do anything yet we're going to go to utilities and let's copy whoops so where we have our background stuff right here go ahead and just grab primary secondary primary secondary didn't we have a light oh i put that below that all right so i'm just going to cut this and put this down here all right and then we'll just copy this and we'll go right under here and let's say text colors and we're gonna do like uh you know text dash primary so i'm just gonna copy that and this one will be text secondary text dark text light i know we're not using all these but it's just good to have and we don't want to set the background color we want to set the color to these because it's text so we just want to get rid of those so now if i save that and i go back we should have that the primary color here for the text so now we just want to make the inner pages responsive so if i make this smaller you'll see this doesn't look right we want to stack those if we go to features we're going to want to stack this stuff and get rid of any spans so let's go to style css and go down let's go down to our media queries well we wrote a lot of css so down to our you know max with 768 here and we already have all of this stuff stacked with just this with one column so we're just going to add to that so in addition to these we'll say features say features main and then grid and we also want our docs main so docs main grid and we'll save that so now you can see that those will stack on top of each other although you know the image and stuff we want to fix that that's not in the middle so let's uh we'll go under this stuff here still within the 768 media query and let's say features head and we want the subhead as well so features sub head and also docs head and i just want to i want to align it all to the center so text align center and then we also want to justify the image to the center because this is not you know this is off center so i'm going to copy this and we just want to add img onto the ends of these so img img and then we're gonna set justify self to the center and now those images are in the middle and that looks pretty good as far as these two go as far as the docs head goes and this looks this is fine but what we want to fix is the spans down here because remember we have this the one that spans three the one that spans two so let's uh we'll just type it out down here so let's say features uh features main grid and we want the first child because that's the one we span three so let's say any element that is the first child and i'm also i also want the second one so we'll use features main grid and we want the element we want to put a space here we want the element that is the second one so we'll use nth child 2 and we just want to set grid dash column because it's initially set to you know 1 and then span so we just want to set it to one so grid column one and save and now it's gonna just knock everything into place here all right so i think that's it our site is you know completely responsive awesome so the next thing i want to do is the animation so we're going to add a little bit of css animation here so let's uh let's close these pages here we'll just want to stick to our style sheets for now or style css i should say we don't need utilities and we're going to create some animations so let's go above our media queries right below the footer and let's create our animation so we're going to be using keyframes and all we're going to do is slide slide in certain content from the right left top and bottom so we're just going to basically manipulate translate x and translate y so let's create our first keyframe so at keyframes we'll call this slide in from left and we're just going to say at zero percent we want to set transform and translate x so the position of the x on the x axis to negative 100 percent which is going to basically start off the screen to the i just went to point like you guys can see me so it's going to start you know if it's coming in from the left we want it over here so the negative value will push it over on the x-axis over to the left 100 percent and then we want it to end up so let's say at 100 percent we want it to end up translate i mean transform translate x we want it to end up in zero just its normal position okay so pretty easy and then i'm just going to copy this and we'll go ahead and paste that in this will be slide in from right so for sliding from right we want translate x to be positive 100 which will be this way off the screen off to the right and then we want it to end same place translate x zero now we want to do slide in from the top and the bottom so once again we're going to say slide in from top so for sliding from top we're going to just change it to translate y negative 100 so it'll start up above off screen and it's going to end up at translate x zero so that should slide in from top and then slide in from the bottom say slide in from bottom so translate y will be positive 100 percent so now we just want to apply these to certain elements so let's go up to our showcase area and we want to add this the first one on the showcase text which we don't have actually defined so right above showcase form let's say showcase text and set animation and we want to set it to this is going to come in from the left so slide say slide in from left and the duration we'll do one second and we'll do an ease in so if i go ahead and save that and i go back here and i reload it's going to come in from the left in the duration of one second and i want the form to come in from the right so i'm going to copy this and in the form i'll go ahead and paste that in and change that to slide in from right so now we come to the site that's going to happen and then this stats i want to come up from the bottom so let's go to stats right here and paste that and this is going to be slide in from bottom yeah so that looks pretty cool now in small screens i mean it doesn't look bad to come in from the sides like that it's fine but i just want to show you if you want to change that like if you want the text to come in from the top and the form from the bottom we can do that down in the media query so it's we wrote a lot of css uh let's see so if we go showcase text right here which is in the media query and we do slide in from the top now you can see it comes in from the top and on the form we could do slide in from bottom okay so i mean if you want to do that you can if you want to leave it how it was that's fine as well but now we have some basic animation and i think this looks pretty cool you know i think it's it's a decent website um so that's it as far as creating it so now let's go ahead and deploy it to netlify okay so now we're going to deploy this to netlify and this is going to be pretty simple we just need to basically create a git repository we can push it to either github a bitbucket or gitlab and then we can just go into our netlife dashboard and say new site from git and there's also a form service which we're going to implement so that we can make our request form on the home page work so before we do any anything with git or anything like that let's just add the necessary fields to our form that we need so if you look at the form tag here there's a name a method of post and a data netlify attribute set to true so we want to add that to our form here like that and you also need to add the hidden hidden input right here with the name of form name value should match whatever the name of your form is in this case contact so let's put that right under the opening form tag now we also want spam protection so if we go to spam filters there's two things we can do we can use a recaptcha however where our form is located on the card it's a it has a fixed height so it's going to mess up the layout so i'd rather use this honeypot method where we can create a an input that we can hide and basically you just don't fill it out if you're a human a bot would fill it out so we want this right here netlify honeypot equals bot field we're going to put that in here as well okay and then we're going to grab the paragraph with the class of hidden and then this label and input and put that right under the hidden field now this is going to show so we have to hide it we're going to hide it based on this hidden class so in our style.css let's go and write right after all the base styles above the nav bar and say hidden dot hidden and we're going to set visibility to hidden and that's still going to take up all the space so i'm just going to set the height to zero and save all right so now we should be all set to deploy so i'm going to open up my vs code terminal with command tilde you can use your you know your mac linux windows command line whatever and i already have get installed if you don't have get installed you can go to git dash scm.com or you can use homebrew on a mac or whatever there's many different ways to install git so let's say git init that's going to create a repository on our machine it's going to be in a folder called dot get a hidden folder and then we want to add all of our files to that staging area so we want to git add dot and i do have a git crash course if you're interested in that and then we want to commit our files so let's say git commit dash m and then just a comment we'll say initial commit that's going to commit it to our local repository now we want to create a github repository so log into github new repository we'll call it rookie dash website and description we'll just say cloud hosting website and create the repository okay now we're going to grab this command here because this is going to add this repository as our remote so i'm going to paste that in enter and then let's just go ahead and get push dash u origin and then master because we're pushing to the master branch all right so that should be all set if we reload our repo on github we should see our files now we can go over to netlify and say new site from git github it's going to authorize and then you want to find that repo that you want to you want to deploy which is laruki just search for that okay and then we're going to click on the rookie website you can have different branches that you want to deploy we just have the one master branch and then no build command everything is in the root so no publish directory no custom variables so we'll go ahead and deploy the site so it says site deploy in progress and then it's going to give us this funny-looking url if you want to add a custom domain you can just click right here so we're just going to open this up and you can see that our site is now published on the web and we can go to our features page our docs page and the form should work because of how we set it up so let's try it out we'll say bob smith company name test company and email just say test at test.com and we'll go ahead and send so by default it's just going to give us this thank you message with a back to our site but you can in fact create a custom success page and uh you can set that up within netlify you just have to look at the docs so now in our netlify dashboard we can go to forms and this is our contact form and you can see bob smith if i expand it has the name company and email okay so really cool really easy to deploy you get this form functionality there's a bunch of other stuff you can do as well so we've created this website we've deployed it i really hope you guys enjoyed this i know it was a long one and that's it thanks for watching

Channel: Traversy Media

Views: 470,893

Rating: 4.9735565 out of 5

Keywords: html, html5, css, css3, build a website, responsive website, custom website, css grid, flexbox, media queries, css animation, netlify

Id: p0bGHP-PXD4

Length: 122min 21sec (7341 seconds)

Published: Fri Oct 23 2020