Tailwind Crash Course | Project From Scratch

[Music] hey what's going on guys in this video we're going to build and deploy a tailwind css website now if you've never used tailwind before that's fine i'm going to go over everything including how to get set up with the cli we're going to go over most of the utility classes and deploying to an in-motion hosting server using git and inmotion is actually sponsoring this video now tailwind is a css framework like bootstrap or materialize bulma there's a whole bunch of them out there however it's different because it doesn't use high level classes for components like alerts nav bars cards all that stuff when you work with tailwind you use lower level utility classes and you have specific classes for things like margin or spacing colors position stuff like that there's no pre-defined button classes or alert classes which does make it so you have to write a bit more classes in your html but you can really customize your layouts and you don't have to write much or if any css at all now like with anything i definitely suggest that you learn css before moving to something like tailwind you really want to have that foundation first and then use tailwind as a tool to build upon that and and create projects and get things out quicker all right so what we'll be building is this manage landing web page which was actually one of the front-end mentor projects or challenges from the front-end mentor website i'll put a link to that in the description and basically we'll create from the top down we have the navbar here this hero section with the images a background svg then we have the the features here the numbered list we have some testimonials then we have this heading and button and then the footer at the bottom with an input and of course it's responsive tailwind has a bunch of classes that we can use to make this responsive and uh we'll actually have the menu of a hamburger menu on smaller pages so we will be adding just a little bit of javascript to add that functionality all right so like i said we will be deploying to in motion hosting they're sponsoring this video and i've personally used inmotion for years and i've been happy with everything from the support to the the speed of the websites that i create and all that stuff and they have everything from shared hosting to vps's dedicated servers so you can host just about any project and we'll be deploying our site to in motion using git at the end of this tutorial all right so that's it guys let's go ahead and jump in and start to create our tailwind website all right so we're going to get set up with tailwind and before we do that i just want to say that this is a project video so ultimately we're creating a landing page however i will take some time out to just explain what the the utility classes that we're using actually do i don't want this to be something where i just type and you copy and that's it i want you to understand all of or most of the utility classes that we use so that you can go on and you can start creating your own layouts alright so i just wanted to mention that uh and and i would suggest that you follow along obviously you don't have to but if you can just sit down and get yourself in the zone and you know grab a coffee or a tea and just really get into it follow along maybe pause it look at the docs if you want to get some more information on some of these classes that we use that's what i would really recommend that's the best way to learn all right so this is tailwindcss.com and the docs are here which are really good anything that you want to search for you know if you're just putting colors here you can see all the text colors uh background outline border colors you can find just about anything you want in this from this search box and then there's a few ways that we can get started with tailwind so one is using the play cdn which is really simple we just include the script tag here and then you can go on and you can use tailwind classes you can even add a config object in a script tag so you can add some configuration so that's one way to do it and then there's the tailwind cli which is what we're going to do and in this case what we what we do is install tailwind on our system and then we have it watch our html files that we're working on and it will then compile any any tailwind classes we use it'll go ahead and compile a static style sheet that we can then include in our html all right so that's what we're going to do and you do install tailwind with npm which is the node package manager so you do need node.js installed on your system i'm sure that most of you probably do but if you don't just go to nodejs.org download it install it and you should be all set all right so i'm going to go ahead and open up vs code which is the the text editor i'm using and i just have a completely empty folder here and i have my integrated terminal open of course you can use your regular terminal or windows command prompt whatever it is that you're you're using and we're going to go ahead and first thing we want to do is npm init dash y so that will initialize a package.json file so you should see that now and then we're going to install tailwind as a dev dependency so we do that with npm install dash uppercase d tailwind css okay so that's going to create a node modules folder which has all the dependencies for tailwind and then in your package.json you should see your dev dependencies and you should see tail and css all right now if we look at the documentation here it's telling us to run this npx tailwind init what this will do is create a config file so let's go ahead and do that we'll do npn uh it's actually npx tailwind css and then init and you should get a tailwind config file here and it's going to look like this by default and here you can add like any custom colors or whatever any customizations you want now we do have to tell tailwind where to look for for the utility classes so here they're saying look in a source folder and then look at any html and javascript files now if you want to use a source folder you can i'm just going to keep everything in the root since this is a really simple project and file structure so in content i'm just going to do dot slash asterisk dot html so basically it's just going to look for any html files in the root and it's going to watch those and it's going to compile anything that's in that you know into a static style sheet all right so let's save that close it up and if we look down here it's saying to create they're calling it input.css obviously you can call this whatever you want and they put it in the source folder but i'm just going to put it right in the root so we'll say input.css okay and then we want to add these three lines here and these are the the layers of tailwind so we have the base the components and the utilities so basically what what the cli will do what tailwind will do is watch this file it's going to compile this and give us everything all the tailwind stuff and then if you want you can put cut your custom css down here if you want to do you know add classes that have nothing to do with tailwind so that's all we need in here for now just save that close it up and now it's telling us to run npx tailwind css dash i and then the input file which for us is input css and then dash o and wherever we want the output to go in this case they're saying they want to put it in a dist folder call it output css and then what dash dash watch does is it'll have it com you know constantly watch it and compile which is what we're going to want to do in development now instead of typing all this out in the terminal i'm going to add a script in the package.json so right here let's change test to build and then let's get rid of everything in here and we want it to run tailwind css and then dash i and then our input file which is going to be dot slash input dot css then we want to specify our output which i'm going to do dot slash css slash main dot css so basically it's going to watch this file right it's or build from it and then this is going to be the output and this is what we include in our html now i want to copy this down and have the same thing but add dash dash watch at the end and then just change the name of the script to watch okay so one will just run once build it and this one will constantly watch it so we can you know we can do our development all right so we should be able to run that even though we don't have an html file or anything yet if we do npm run build okay and you're going to see this message no utility classes were detected in your source files it's because we don't even have an html file with any classes in it but you can see it did compile and if we look up here we now have a css folder it created it and then this main.css with all of our tailwind stuff okay so basically it just it just took that from this compiled it turned it into this main css so let's go ahead and create an index dot html file and we'll just add a boilerplate i'll say manage landing page and then let's add a link here and this is going to go to our css slash main dot css okay so it's going to go to our the file that was created or built and then for now let's do an h1 actually let's add a tailwind class here we'll do text let's say text dash 3xl and then we'll just say hello world all right so we'll save that now we have to compile it again so that you know it it sees this class it watches it it compiles it into that main file this right here so what i'm going to do is instead of running build since i want to keep developing i'm going to run npm run watch and you can see that it'll just constantly watch it now i'm going to open this up with live server which is a vs code extension alright so i can click on this go live button here and it should open it and now you can see i have a 3xl heading here if i change this to 4xl and i save it there we go i don't know why that happened so 4xl 2xl and it should autoload at least for me because i'm using live server now before we get into writing our html with the utility classes i want to first add some config okay because we do have some some customization that we want to do so within theme we can specify a whole bunch of stuff but first thing i want to add here is screens because i want to set basically the break points what what what's going to be the the small medium large and xl break points because in a lot of a lot of times we'll have you don't have to type this out but we might have md colon and then flex which is just saying we want to add the flex class on medium screens and up so here we can specify what we want medium and all the other sizes to be so for small i'm going to set that to 480 pixels okay so sm 480 for medium screens let's make that 768 pixels and for large let's say we'll do 976 pixels and then for xl that'll be 1440 pixels okay now the only the other thing that i want to do as far as customization is colors so we would add that within this extend object we can say colors now you have a ton of colors available to you with tailwind just by default you have all the standard red green blue orange yellow you also have like zinc and emerald and all kinds of colors but we're going to specify some custom ones here so this one is going to be bright red so you could use hex values rgb we're actually going to do an hsl value here and say 12 88 and then 59 59 so i have a few other colors that i want to add here and instead of typing them out i'm just going to go ahead and paste them in so we have bright red bright red light bright red super light dark blue dark grayish blue very dark blue very pale red and very light gray alright so let's just save that and now we can use these colors for whatever backgrounds text border colors whatever for instance we'll have the class available to us now of bg dash bright red okay or any other custom colors that we add here so we'll save that and close it up and now we're going to start to work on the layout now i have the the final version open right here so we can kind of look at it and we can kind of you know i can explain what we're actually doing so first we're going to start top down and we're first going to do this navigation area which has a logo it has a menu and it has a button and we'll be using flexbox or flex classes to align everything and if we if this is on a smaller screen the items and the button are going to be hidden okay so i'll show you how to do that as well so you can have a responsive layout and then later we'll add this hamburger menu much later after we do everything else all right so let's start on that and i'm going to be commenting a lot of this stuff because i just want you to know exactly what we're working on so first we're going to do let's say we'll just say navbar and here we're going to use a nav tag and then the first utility class i'm going to use is relative what that's going to do is is make it position relative and i'm doing this because later on the hamburger menu will be positioned absolute and in order to do that the container has to be relative okay next i'm going to add container which just adds the break points it'll use the screen sizes that we just that we just used now unlike bootstrap and some other frameworks container doesn't automatically put the container in the middle and add the margin auto all right and i can actually show you that so if i make this bigger actually let's make this and just temporarily i'm going to give this a background color so i'll say bg red 500. all right so you can see that it does have a container that pertains to the screen sizes that we added but it's not in the middle so we have to do that ourself so we're going to add an mx-auto so with the spacing classes for margin and padding you can do like m dash 2 m 3 and each of these numbers pertains to a rem unit or a number of pixels and you can look that up in the documentation but if you do m that means that this is going to be applied to all sides okay margin on all sides if you do mt that's margin top margin bottom margin right so mr would be right m l would be margin left m x is going to be on the x axis so it's margin on the right and left if you do m y that's margin on the top and bottom what i want to do is auto on the left and right so i'm going to do m x dash auto so now if i save that it's going to be put in the middle okay so now we have a container that is in the middle uh and i can get rid of this this color now i do want to have some padding so i want it all the way around so again i can just do p dash six m six would be margin but p6 is going to be pad padding so that's our nav now inside the nav we wanna have a flex container so let's say this is gonna be our flex container so we'll have a class of flex and what that does is it puts all the items that are inside of it into a flex row by default you can do flex call if you want it to be a column going up and down instead of left to right all right but we do want this left to right and then i want to align item center so there's a class called items center and then i also want to set justify content to between so we're going to use the justify dash between class okay so that's our flex container now the first flex item if we look at this is going to be our logo then we have our menu then we have our button all right so let's add the logo i'm going to actually let's put a comment here the logo i'm going to put in a div with pt2 which is padding top 2. and then the image i actually have to bring over the images so let me just grab those real quick um yeah so i'm just going to bring over the whole image folder and you can get this from the link in the in the description so we have this image folder with a bunch of stuff here and the image that um that we want to use here is the logo so we'll say image and then logo not the white version just the regular alright so we have that if we save it we should see our logo here good and then the next flex item we want is going to be the menu so under that logo div let's say menu items and we're going to have a class here so this time i do want this to be flex because we're aligning these these menu items but i want it as i showed you before i want it to disappear on smaller screens so i'll actually show you how to do that in a second but let's finish up flex then we also have this space so we can do space dash x or y x is horizontal y is vertical and i'm going to say that everything in between these items i want to do six which i think is i think is two rem units you can look in the documentation so if we go so if we look at let's be a space between so these are all the possibilities these are all the classes so space x6 which is right you know space y6 but it's the same yeah y and x right here so it's actually 1.5 rem alright so we're putting that in between in between each of these items the menu items that we're going to add here so let's add the menu items we'll do an a tag and uh yeah we'll just so this is going to be pricing so if i save that we should see that and then we have two three four five of these so pricing product and let's do about about us and careers and contact community all right so we have our menu items now as i said on smaller screens i don't want these to show so what we would do is we can add the hidden class all right so hidden if i save that it's just going to go away now it's it's obviously it's gone for all screen sizes so what i can do is this flex class because right now it's displayed hidden i can make i can add this flex class on certain screen sizes we have sm md so small medium lg and xl i'm going to say on medium screens colon then i want this to show as flex instead of display hidden so if i save that and i make this and i make this bigger so now on medium screens and up it's going to show as flex as soon as it hits that medium break point it's going to be hidden all right so it's actually mobile first it's going to be hidden first but then when it hits that medium break point it'll display okay i hope that makes sense and then again the space x is the space in between each of these items if i change this to let's say 12 then that's going to add some more space so i mean it's all preference if you want to have it wider or more narrow that's fine so next let's actually do a hover on these on these links and i'm actually going to use one of our custom colors so if you want to add styling on only for the hover state you can actually do this you can say hover and then colon all right and you can use any state hover focus whatever so we're going to say hover we want to add the text dash and then we could add any color here red or whatever but we're going to use dark i think it's yeah dark grayish blue which is one of our custom classes so now if i hover over that you'll see we get that color and this again we define this in our config so i'm just going to copy this class here and we'll just go ahead and put a cursor in each of these and then we'll paste that in and now we have that on all of them alright so next flex item is the button so right here let's add our button and it's going to be an a tag it's not an actual button so a tag let's do padding all around three i'm also going to do padding left and right is going to be 6 padding top will be 2 and i'm going to do text white and whoops for the for the background let's do bg dash bright red which again is one of our custom classes and i want it rounded so we'll use the rounded full class and we're also going to use the baseline class and then the m i want it to have a hover effect so we'll say hover colon actually i don't know if i can do that with emit you know what let me not do the hover here let's just end that baseline and then for now let's just in here we'll say get started all right so it doesn't have a hover effect so let's add in here now hover colon and then i'm going to do bg bright bright red light like that so if we hover over it we should get a lighter color now again i don't want this to show on small screens so we can do the same thing that we did up here we'll set it to hidden by default and then let's say on on on smaller screens or i'm sorry on larger screens medium and up i want it to display as block so now it's going to go away it's hidden by default and then when we hit the medium break point now it's going to display as block all right so that should do it for now later on we'll add the hamburger menu but for now this part is done so now we're going to move on to the next which is the hero section so basically we have this this is going to be a flex row and then we have this as one flex item and then the image as the other we want it as a row on medium screens but we wanted to stack as a column on smaller screens so keep that in mind all right let's uh let's jump back over here and let's go under the nav let's say this is going to be the hero section okay and i'm just going to use a section tag and i'm going to give it an id of hero okay and then first thing we'll have in here is the flex container of those two items that i showed you and let's do a div we're gonna do another class of container we're gonna add flex and again remember it's going to be a flex row on larger screens going horizontal but i want it to stack on small so we're going to set it to flex column to begin with okay and then what we can do is say on medium screens and up we want it to be a flex row okay actually you know what we're going to do instead of flex call we're going to do flex call dash reverse because i want the if we look at this here i want the image to be on top and the image is actually the second item so to make that on top we're going to we're going to use the reverse flex flex call reverse so anything you want to do within css just about anything you can do with just tailwind classes now the the downside to that is you have a ton of classes within your html and i think that's the reason why some people really don't like tailwind but on the other hand we're not writing any css whatsoever and we're able to do just about anything all right so let's say item center because we want to align everything align item center we're going to do some padding on the x-axis so padding 6 we want m x auto so margin auto on the left and right and then margin top we'll do 10 space in between on the y axis is going to be zero and then also on medium screens space on the y is going to be zero and i think that's yeah i think that should do it for the container all right now we're gonna have two items within this container again so if i show you oops that's not the right one so this which is going to be a heading a paragraph and a button that's going to be the first and the second will be the div with an image in it so let's actually just add a div here alright so this will be let's say this is the left item i'm just commenting it out so you know exactly what we're doing and i know this is taking a little longer but again i want people to really understand what's going on because it doesn't really teach you much if you can just build this i want you to be able to build other stuff so let's give this div a class of flex so we're displaying it as flexbox we're going to add flex call remember the the stuff we're putting in here are the headings the text and the button so flex column i'm going to do margin bottom 32 and let's do space dash y so space between the y elements are going to be 12 and again these numbers pertain to a certain number of rem units i i don't memorize them so i can't tell you exactly what they are but you can look that up in the docs and a lot of its trial and error you know you'll you'll try certain numbers out you might have to make it more or less now on medium screens i want the width of this to be half of the or 50 percent so what we can do is say media on medium screens and up we can do i'm sorry we need to do with so with dash half and you can do with dash two three four just like you can with the space and the margin but you can also do half you can do one quarter you can do three quarters again the documentation can show you all that stuff all right so in this first in this item we want to have our h1 and we're going to do a max with so you can also do min and max with medium and the text size i'm going to do 4 xl so you have text sm text lg xl then you have 2 3 4 xl i think it goes to 8 and i want it to be bold so we have a font bold class text center which is going to be text align center and on medium screens i want the text to be a little larger so let's do a text dash 5 xl and then on medium screens instead of text center i'm going to set it to text left okay so that's the h1 and and a lot of this is again just memorizing classes so once you you memorize the classes and you know what they do it it's pretty easy to create layouts so let's say bring everyone uh together to build better products alright so if we save that we should see our heading and let me see here i think yeah it should be text left on medium screens let's see i must have messed something up here yep i did dash so medium screens now it's text left so that's the h1 next is going to be the paragraph so let's put a paragraph tag here and we're going to do max let's say max with sm and then we're going to do text dash center and let's do let's make this text one of our colors so we'll do text dash dark grayish blue and then on medium screens again i'm going to do text left so on larger screens i think it looks better if it's a line to the left rather than center and then the paragraph text i'm just going to grab that and paste it in all right good now i just want to mention one thing so when you add your your medium or large or whatever this doesn't have to be medium screens it could be large it could be xl whatever i think that it's a good idea to have this stuff at the end and i didn't do that like up here because i wanted to show you that on we were setting this to hidden by default and then on medium screens it would be blocked but i think it's better practice if you have these md's at the end right or the hovers anything that has a prefix like that it's just i think it's better practice to have it at the end you know even right here md flex again the reason i put it there was because and you can do that it's totally up to you i just think it's a it's better practice if you have this stuff at the end okay so now that you know what that actually means that on medium screens we're adding the class of flex we'll move that to the um to the end and that's that's what i'm going to do from now on so just like right here we have md flex row so we'll put that there and again you don't have to do this it's just a preference all right so after the paragraph we have the get started so let's put a div here we'll do flex so flex justify let's say justify center and then on medium we'll do justify start and then the link or the button i can just grab that from the heading because it's kind of the same thing so we'll grab that a tag and put that in this div right here except we don't want hidden so we'll get rid of that um padding padding is going to be all the same hover we can get rid of this md block because it's just going to be it's going to be there all the time so let's save that there we go so that takes care of the left side now we have the image which is going to go in this div right here let's say image and actually yeah we'll put the image in which is going to be image slash illustration intro and then the div here i'm just going to give it a class of on medium screens we want to do width of 50 or half okay so we'll save that now we have our image and if i make the screen smaller it it stacks because of the responsive classes that we added so basically here we have on medium screens it's going to be a flex row on small screens like this it's going to be a flex call reverse which is why the image is on top okay so i know that this is it's kind of taking a long time to to build this but hopefully my explanation is is helping you learn what these all these classes do so next we have the features say features section which if we take a look and and we're going to add this background svg in a little bit um that's going to the features is this section right here so again flex row on big screens this will be the first flex item this will be the second then we have a flex column of these these numbered this number list afterwards all right so let's start to add this i'm going to use a section tag and let's give it an id of features and in here let's say just say flex container and it's going to be a div with container and flex flex call to begin with remember mobile first and then space wait a minute no flex yeah flex call and we'll do some padding 4 and mx auto margin top 10 space on the y axis in between items will be 12 and then let's do on medium screens we want the space the y space to be zero so we're going to cut that out and then we also want on medium screens it to be a flex row again i'm putting the medium stuff at the end so this is the flex container so we'll have let's do two divs so that's the first flex item and then the second so the second one is the numbered list and the first one is the what's let's say what's different okay so again if we just take a look that's the what's different that's the numbered list so for the what's different we have a heading what is it a heading and a paragraph i think right um yeah so let's do an h2 well actually let's add these classes to this first so this is going to be flex and let's say flex dash call and space on the y is going to be 12 in between the items and on medium screens we want this to be a width of 50 or one half okay and then inside here we'll have our h2 let's do a max with medium and a text we'll do 4 xl then we want to font bold and text center except on medium screens we do want the text to be aligned to the left all right and the heading is going to say what's different about manage or manage okay and then underneath that we'll have a paragraph let's say max with small and text center by default and for the color we'll do text dash dark grayish blue and let's also do on medium screens we want instead of center we want text left okay and i'm just gonna grab the text for this all right so that should be the left side let's check it out all right good and then we want the numbered list so for that let's add the container stuff first so class and we want to set this to flex flex dash call we're going to do space on the y-axis eight and on medium screens we want it to be a width of fifty percent or one-half so that's numbered list now we have the list item one so the item itself and just to show you so what we just did was the container now we're going to do the first list item and we have you can see on on larger screens this heading has no background but if we make whoops if we make this smaller we have this style where it has that light orange kind of or light red background so keep that in mind i know this is kind of like orange but i don't know we just called it red so let's see item one let's do flex and flex dash call and then we want to do space on the y-axis three so in between items and then for medium screens let's say md space dash y is going to be zero and also on medium screens space dash x we'll do six and then on medium screens flex let's say flex dash row all right so that's the container for list item one and then inside that let me just see let's just see this real quick all right so we have this is list item one right here so let's do the the heading of that so we'll say heading and then let's do rounded rounded l full because we want to round the left right just see how that works yeah so we want this rounded so rounded l full and then the background is going to be bg da uh bright bright red sup so super light so sup light and we have some other classes on this as well and now on medium screens we want the background to be transparent so let's say md and then bg dash transparent because i showed you how we have the background only on smaller screens all right now within here we're going to have another flex and we're going to align items to the center and we're going to set the space on the x-axis items to 2 and then we have one final div which is going to have the number the 0 1 0 2 etc so this is going to have padding on the left and right of 4 padding on the top and bottom 2 and then text will make it white and let's say rounded so we want the number to have you know rounded full and then on medium screens let's do padding on the y-axis one and then let's also add our bg class of bright bright red all right and then here we'll just say zero one so let's check that out all right now underneath that zero one div so underneath this right here will be the text so let's add an h3 here and we're going to do text dash base font bold and on medium screens let's say mb-4 now we're going to have an issue here because the way that the text is is displayed and formatted and positioned is different on larger and smaller screens and i'll show you what i mean in a minute so let's add the text here we'll say company what is it track company wide progress okay so yeah you can see it's it doesn't look right there but if we make it smaller that that looks good so what we're actually going to do here is make this hidden on on medium screens and up so md hidden on the h3 so that way it shows there but it doesn't show here and then the next the heading we want to show here i'm actually going to put that under where we have this heading div where it ends so 2 after the h3 and then we'll add in a div here and that's going to have the h3 and the paragraph in it so this h3 we want to give it a class of hidden because we don't want to display it on smaller screens so hidden and then mb-4 text we're going to do text lg font dash bold bold bold and md block uh wait is that right yeah because we want it showed on larger screens and it's just going to be the same as this okay so now we see it like that on large screens and like that on small screens and then for the text underneath let's go ahead and do that so under the h3 here we'll have a paragraph let's do text the color we'll use is dark grayish blue and then i'm just going to grab that text paste that in and save okay if i make it smaller good now obviously we want three of these so what we can do is copy so we have numbered lists this is the container then we have list item one which starts here and ends here so i'm going to grab list item one and we're going to copy that we can make this i don't know why i have this so big and then underneath that we'll paste it in two more times so that way we have our first one right this is now this is list item one and then this one is going to be list item two we just want to change a couple things here we want to change the number to 2 and the heading is going to be instead of this i'll just select both of these and replace that with advanced built-in reports and then the text for that let me just grab that as well paste that in and then this one will be three change that to zero three and see what's the text for that we're going to replace those with everything you need in one place and then finally we have the paragraph text and let's go ahead and save it and now we should have our one one through three if we make it smaller it should look like that so i think that looks pretty decent so next we have the testimonials excuse me so we have these three testimonials here well we have a heading first then we have the testimonials and we have a button so let's start on that we're gonna go under this last section say testimonials let's do a section all right so the container say we'll say container to because it's for the heading because we do have that heading and testimonial blocks all right so this is going to have a let's say max width of 6 xl and padding so we'll do px 5 and then mx dash auto and margin top 32 and text center and that should only be one x all right so this is going to contain the heading and the testimonial so the heading let's give it we'll do an h2 we'll give it a text let's say 4xl and font dash bold and let's do text dash center and the heading is going to say what's different about manage all right so let's make sure that shows up good and then for the testimonial container because this is the container for the heading and testimonials then we want to go under the h2 this is going to be the testimonials container and hopefully these comments help you guys out a little bit so this will be a div with the class of flex let's do a flex call to begin with margin top will be 24 push it down a little bit and then on medium screens it'll be a flex row you can see kind of the repetitive uh this is pretty repetitive of what we're doing making it a flex row and then on smaller screens it flex well flex column to begin with because it's mobile first and then turn it into a flex row and then set the spacing so we'll do on medium screens let's say space on the x-axis will be six in between the items okay then we have testimonial one and that'll be a div with the class of flex pretty much everything in this is is a flexbox so flex column let's do items center so that's a line item center padding six let's do space y6 rounded large so rounded lg and then the background background is going to be very light gray which was a custom color that we added and we're going to say on medium screen so dot medium screens we're going to take up one third because it's three testimonials and what the hell one oh it's not it's not letting me do the oh it's width what am i doing it's width dash one third it's still not letting me do it all right so i'll just leave that off for now and then i'll add it here so medium screens width will be one slash three all right that should do it now the image we're gonna have here this is gonna be the first image um actually i'm gonna give this image a class so this image is going to have a class of what we'll do a width 16 and then we can also i didn't show you this we can do negative margins like minus mt so negative margin top dash 14 and then the image itself is going to be in the images folder and it is an avatar anisha so it'll be the image we can take a look at it now so we just have the image of anisha and then underneath the image will be the name which will be in an h5 so h5 let's do text dash lg and then font dash bold and anisha lee so h5 then underneath that will be the paragraph we're going to do text as small so sm and text will be dark grayish blue and let me just paste that in text here okay so we take a look should look like this we have the the picture if you can see there's the light very light gray background we have the picture has a negative margin top so it comes out of it and then we can just copy testimonial one which ends here so we'll grab that and then that'll be two and three so this one will be two we're just going to change uh let's see we're gonna change the name to or the image right here so avatar and it's going to be i think it's ali yeah ally and let's change the name here to ally bravo and i'm just going to change the text as well okay and then this one will be testimonial three and let's see the name for this one is richard richard sorry my accent's coming out so avatar richard richard richard and in real life i'd say richard but you know i try to try to keep it professional so richard watts and let me just grab his text there we go actually his text is the same as the first one but that's fine doesn't really matter all right so we got our three testimonials now i'm gonna make it so that there's only one on mobile screens because they are going into each other we could just add some margin but what i'm gonna do on testimonial two and three is just add a hidden so we'll do yeah hidden and then this md one third so basically on medium screens and up it'll take up one third but on to begin with it'll be hidden so we'll do that here as well so that way on small screens it's it's cleaned up a bit we just have uh one testimonial whoops okay so that's not showing it should because we have hidden and then on medium screens we have with one third oh we need to add the display sorry about that so we want to do um yeah we want to change so we have flex here let's actually do we'll get rid of that and then down here we'll say md flex so that should show the second one let me see yep so we get the second one just shows on large screens and then we'll do the same thing for the third so this flex right here will get rid of that oops and let's add over here md flex i mean you can do what you can change it up if you want but that's what i'm gonna do okay and then we have the button underneath so that's going to go let's see so we have the last testimonial here and the testimonial container is here so under that second div let's do a div we're going to add a margin on the y-axis 16 all right and i'll just put a comment here this is the button and we can just grab the button from one of the ones we have up here so this a tag right here get started get started i'm going to put that down here maybe i should just drop trying to not talk with my accent let me know what you guys prefer all right so here we go background yeah that should be good let's check it out all right so now let's open up the final thing here so now we just have this part this is the call to action and then the footer so we got those two left then we can deploy so let's create a new section this will be the let's say cta section section id cta all right so we actually want the the whole section to have a background so let's add a class to the actual section of bg dash bright red okay and then within here let's say this is the flex container because in inside here we have what a button and the heading right we have yeah the heading on this side then we have button there's a whole bunch of get started buttons here but it's not it's really just to show you guys how to lay things out so let's see flex container um we're gonna do container flex flex call to begin with and items dash center justify content is going to be between then padding on the left and right will be six padding on the top and bottom will be let's do 24. um margin on the left and right will be auto and space on the y-axis 12 on medium screens we'll do padding on the y-axis 12 and on medium screens of course we want it to be a flex row and then also the space on the the y-axis will be zero on medium not o zero on medium screens all right i'm kind of losing my voice so heading heading let's do h2 and we'll make it a 5xl so it's a pretty large heading so 5xl let's do font dash bold and we're going to do leading tight which is the the letter spacing so we're bringing in the letter spacing type and then text center we want the text to be white because it's on the bright red background and then on medium screens we're gonna actually make the text for excel and on medium screens let's do a max we'll do max with dash xl and what else um we're also going to align it on the left on medium screen so center to begin with and then text left on on medium and up and we'll say simplify how your team works today let's check it out all right cool and then the button i'll just copy this button and we'll just change it up a little bit so let's see we have our heading under the h2 is our button and that's going to just be in a div all right so we're going to change this up a little bit uh let's see the background is actually going to be white so we'll do bg white and then rounded full we can actually we can do a shadow as well we haven't used any shadow but we'll do shadow dash 2xl and for the text obviously we don't want text white on vg white so let's say text bright red and then on hover let's see bg bright yeah that's good all right let's see what that looks like um the hover i don't really like that i guess hover we could do like bg gray 100 something like that actually that's too light let's do 300 yeah so colors we haven't actually all we've used is pretty much customized colors but for the colors that you have available in tailwinds you can do different shades you can do 100 through i think it's 900 right so if i do gray 900 you see actually that's probably better yeah we'll just leave it like that but yeah you have red green blue yellow orange zinc emerald um there's a whole bunch of them you can check out the docks but yeah that's it for this section let's make it smaller see if and it just stacks cool so the last thing is the footer which has quite a bit in it if we take a look so we have this mat the logo these uh social icons the menu items and then we have this input here as well so uh yeah let's do that let's go under section footer and we're going to use the footer tag here and let's give it a class because we want the background so bg we're going to do very dark blue then we have our main flex container so it's a class of container and flex we're going to do flex column reverse and let's say justify between and px i know i'm going to start to pick it up a bit i pretty much explained all of these these classes so you guys should know what they do mx auto uh what else we have space dash y dash 8 and then on medium we want this to be row and then on medium we want space dash y 0. all right so that's our flex container and then we're gonna have our logo let's say logo and social links container okay so this will have both the logo and the social icons and links so let's give this this will be a div with the class of flex and again we're going to do flex call reverse and then items dash center justify between space dash y dash 12 and then on medium screens we want this to be a flex row and then i'm sorry on medium screens it's going to be a flex call it's flex call reverse to begin with and then on medium screens it'll just be flex call so that the logo and icons are are going up vertical and then md so on medium screens we'll do space dash y dash zero and then on medium screens we're also going to do items start instead of items center all right then we have the logo so logo will put that in a div and then that'll be an image it's going to be image slash this time we're going to use the logo white and then i'm also going to add a class here uh it's going to have a height class so h dash eight just like you can do with so w dash one two three whatever you can do h for height as well so that's the logo then underneath that we have the social social links container so we'll do a class of flex and justify center and space 4 and then these will be the links so we'll say link one which is going to be an a tag and then in here we'll have an image it's going to have a class of h dash 8-8 and the source for this is going to be let's see what is the source for this icon and let's do facebook for the first one so if we save that we should see here manage and then we have our link underneath icon so i'm just going to take this link one and i believe how many is there there's five of these so let's take that two three four five and we'll take this second one here which is gonna be youtube and then this one is the third one here is gonna be um twitter then we have what is this one pinterest and then link five is gonna be instagram all right so there we have our links um then we have our our lists our menu items i should say that's going to go underneath see underneath the social links container i believe let's see where's this end that ends here actually no it's going to go under the this right here logo and social links container so this div has the logo and the social links then underneath that is where we'll have our list container so let's say class flex and this time we're going to use justify around which just since it sets the justify content property to around so all the remaining space gets put on the sides and in the middle of the items and then we'll do space x 32 and then we'll have in here um basically we have two two menus so if we look at the final version here we have this menu and this one these are going to go in two separate divs so first one let's do flex and flex call and we'll do space y three and text dash white okay then we'll have our links these are going to have a class of hover so on the hover state we want the text color to be bright red all right we'll just have this go nowhere and then copy this down two three four so first one will be home so we have home we have pricing we have products we have about and then what we'll do is just grab this div copy that down and let's see is there anything different about this no we're going to use the same same classes but let's change up the text here so this one will be careers see this one will be community and then this one will be privacy policy all right cool so now we have the input so now let's go underneath here and let's say input container so input container is going to be a flexbox it's going to be a column and it's going to be justify justify between so in here we'll have our form which we're not actually going to make work so we'll just get rid of that and then let's have a class of flex and then space x three and this is going to be our input and button so i should say our our text and and button so input uh let's actually give this some classes so i'm gonna do flex 1 so you can set flex properties too as well so you can have you know the the input have a much wider column than the button so flex 1 and let's do px4 for padding we'll do make it a rounded input so rounded dash full and we can do this too we can say on the focus state we want to set the outline to none okay so basically we're just doing everything that we would do in css we're doing that in within the html which you might like or you might not you might do this and then decide that you absolutely hate this you hate tailwind but it's it's all preference you know so let's see if i save that that's what it looks like right now excuse me uh let's see so in addition to class actually that's really all we need let's do a placeholder so placeholder will say updates in your inbox okay and then for the button so let's go right under that text input and we'll have a button and let's do px-6 and py2 and text so text will be white rounded and background is going to be bright red and let's do a hover so on the hover state we'll do bg dash bright red light and on focus we're going to do outline dash none all right so that's our button and we'll just say go save that cool then let's see we have just the copyright that's gonna go under the form so right under that uh the copyright we're actually gonna have two in different places depending on the side of the screen size so this one's going to be set to hidden by default and let's say text text dash white and then let's say on medium screens and up we want that to be a block displayed as block and we'll say copyright let's do um what do i want to do here copy 2022 and we'll just say all right reserved so that's only going to show on large screens now what we're going to do if i make this smaller uh we no longer see the copyright and you can see that the we need some space here so i'm going to go let's see we're actually going to go right above where we have the logo which is right here and probably should do this earlier but we're going to have a class of mx dash auto and my-6 margin on the y-axis text center because this is we're going to have our copyright in here we want it centered and the text color is going to be white and we want this hidden on medium screens and up so md hidden and then we'll have the same just copyright all rights reserved and there we go so now we have our copyright here it also brought some space in between all right so i think that we're all set aside from the the responsive menu so let's go back up to the top here and we have our nav bar and then we have the flex container which wraps around this stuff and this is the ending div we want to go right above that ending div and we're going to add our hamburger icon or him i guess hamburger menu well no we'll say icon because this isn't the actual menu just yet uh so we're gonna add a button here and let's give this uh we'll give it an id of menu dash btn because we need to grab on to it within the javascript and then we'll have some classes we're going to give it a class of block a class of hamburger we're going to write some custom css and then on medium screens we do want this hidden so md hidden and then focus we want to set outline to none all right and then within the button here we're going to want to have our our lines now you could put like an svg or something but we're just going to use spans and use css to create the lines so let's say hamburger dash top for this one and then we're going to have three of these the second one will be middle and this one obviously will be bottom okay now if i save it we're not going to see anything just yet because these are just empty spans now the menu itself is going to go outside of this div and under this or right above the nav so here let's say mobile menu and this will be a div let's give it a class of md hidden because on medium screens and up it should be hidden and then we'll give it an id of menu and a class of absolute so it's going to be placed within the relative div we added the relative class earlier and let's say flex flex call and let's do items dash center and self and so a self end this is something we haven't used yet it's just the align self property and then setting it to end which is kind of obvious and then let's say hidden py-8 so that's the padding on the y-axis mt we're going to add some space to the top of it so margin top 10 and let's also do our space y we'll do 6 space dash y six and then font we're gonna make the menu bold give it a background white and on small screen so sm we want the width to be auto and also on small screens we're going to set self so align self set that to um center so self center that's kind of a funny class name and then we're gonna set left to six and right dash six and we can add a drop shadow as well there's a drop dash shadow and then we can put a size we'll do medium all right so in this div is where we're going to have our links so they're obviously they're not going to go anywhere and let's say pricing copy this down a few times so we have pricing product and what else about us and careers and community all right so let's go ahead and save that now it's hidden by default let's actually this this class right here of hidden let's remove that and no that doesn't look right i mean it should be wait a minute there we go i forgot flex all right cool so that's our menu we do want to add the hidden class again we'll put that back because we don't want it to show we only want to show when we click the the button so now let's get into actually styling the button so we're going to go into our input css and another thing that we need to add is the background svg for um so this right here this this background shape so we want to add that as well and all this stuff any custom stuff is going to go in here so let's add let's say body and we'll do our background image so let's say background image set it to url and dot dot slash image slash bg dash tablet pattern and dot svg okay and then we're going to add some other background properties like background repeat set that to no repeat we're going to do background size and set that to 800 pixels and let's do a background position and of course you can change these values up if you want but we're going to do 90 and negative 25 percent for that all right so if we make this bigger it should look like that now with with paths notice how i did dot dot slash and you might be saying well we're in the root here it shouldn't be dot slash image well no because once this compiles it's in the css folder right so your path you want to pertain to this file so we go out of the css folder into the image folder okay in case that was confusing what else do we have the the cta section has a little background as well if we look at this right here if we look you can see this svg right here see that where it's light you get that circle shape we can add that as well cta has an id so we can do this cta and background image and the url is going to be dot dot slash img slash bg dash simplify dash section dash desktop dot svg and then let's set a background repeat to no repeat all right so if we scroll down here actually i think yeah that's the desktop version see how it comes up on desktop it looks good so what we can do um because we actually want to do this for the this as well this doesn't look too good the body background so we're going to add a media query in here let's say media or i'm sorry at media and let's do a max we'll say max with and let's do 576 so max with 576. anything in here is only going to take effect when the screen is less than 576. so for the body let's set the background position from what it is to 50 we'll do 50 pixels and negative 50 pixels and we'll set the background size let's change that as well from 800 to 500 so that's for the body and then for the cta let's set the background image so we actually have a separate image for it so url and then dot dot slash img slash bg dash simplify dash section dash mobile dot svg so we have a different image for that and yeah that should do it let's save so now you can see the the body's background that looks better and if we come down here now that images is over here all right cool so now we can start to work on the menu so let's say hamburger menu and we have a class of hamburger i'm going to set the cursor to a pointer i'm going to set the width to 24 pixels let's do the width and the height at 24 pixels and then we're going to have a transition of all and set the time to 0.25 seconds and set the position of this to relative all right so the transition we will have the hamburger menu when we click it it's going to transition into an x or animate into an x all right now if i save that we're still not going to see anything so let's do our spans remember we have hamburger dash top so we have top middle and bottom okay so we're gonna set the position to absolute and we'll set top to zero and left to zero so that's where it's going to start the width uh the width of all of these are going to be 24 pixels so same as the the menu itself and the height we're going to set to 2 pixels okay then we'll set the background to black or whatever color you'd like and yeah we'll just do that for now we'll add the transition and stuff after but let's save that and now you can see one line there there's actually three lines but they're just all on top of each other so what we'll do is we'll take the hamburger let's take the middle and let's move it so we'll use transform and we want to translate on the y-axis okay up and down vertical y-axis we want to move it seven pixels okay so i save that now you can see we have this top one so it went up seven pixels now for the bottom let's say we want bottom and for that we'll just go another seven so we'll set it to 14 pixels all right and now you can see we have our three lines now when we click this i do want it to turn into an x so for that what we'll do in our javascript is just add a class of open to the button so before we add the javascript just to test it out let's manually add the class of open to the hamburger button here and then let's style that so we'll come down here let's say open and we want to use transform and rotate we're going to rotate 90 degrees all right and then let's add another transform and set translate y so on translate on the y-axis to zero pixels and then we want to take we want to go outside of this and say open and we want to take the hamburger top and we're going to transform let's rotate that and you don't have to add this rotation i just think it's a nice effect so let's say 45 degrees and then translate y and 6 pixels and translate and this usually takes i mean you guys are just kind of copying this but it usually takes some testing to see to have it you know look like a perfect x but you can gladly take this code and use it anywhere you want you know to add this this kite this effect um now the next thing we want to do is the middle so the middle when we have the open class active the hamburger middle we don't even want it to show so we just set that to display none okay and now if you look up here after i save that we have display none and then the the top one is rotated going this way so now the bottom we want that to rotate going like an x so let's actually just copy this and let's change that to bottom and basically all we have to do here is do a negative 45 degree here and then a negative six here if we save that now you can see that we have an x all right and then let's see where we have this our top middle and bottom under the background let's add a transform and set the rotate here to zero and let's also do a transition transition all and we'll do 0.5 seconds so that it we want this to smoothly go into an x when the open class is applied and removed so let's get rid of the open goes back to the three lines now we just have a tiny bit of javascript to write and then we're all set so let's create uh we'll we'll just create a folder called js and in here we'll create a file called script.js and then we just need to include that in our html so let's go down to the bottom here go right above the body and let's add in our script source js and script js okay and then first thing we're going to do here is just grab on to the button so we'll create a variable called btn we're going to use document.getelement by id and remember i gave it an id of menu dash btn okay and then we also want to grab the menu so this will be we'll call this nav all right then we want to have an event listener for when we click this this menu button so let's say btn and we want to add an event listener we want to listen for a click and then when that happens we'll go ahead and run a function and we want to then take the btn and we can add a class by saying classlist and we actually don't want to add it because then we need to remove it we're going to toggle it meaning if it's if it's open it'll close or if it's not there it'll add if it is it'll remove so let's say toggle so classless toggle and we want to toggle the class open all right now if i save this and i come over here and i click this you can see that i can now turn it into an x because it's it's now dynamically adding that open class that before i just added manually you know so now i can toggle it however we're not seeing the menu yet so there's a couple things we need to do with that with the nav so let's say nav dot class class list and we want to toggle on that we want to toggle the class of flex okay and then we also want to toggle the class on the nav of hidden so basically it's going to go from hidden to flex so it's going to display and not wait a minute oh you know what yeah earlier in the html remember i added that flex class i actually don't want to do that because that gets added here so let's get rid of this on the um on the mobile menu there we go all right cool so now we have a responsive menu so i think we're pretty much i think we're pretty much done now the the version in um what is it called front end mentor i think has a carousel for the testimonials you can go ahead and add that if you want i was going to but this video was already way longer than i wanted it to be so i think now we'll do is go ahead and just deploy this to in motion hosting i'm going to show you how simple it is using git okay so now we're going to deploy to in motion hosting and this could be a shared account this could be an account on your vps or dedicated server i happen to have a vps with them so i can set up multiple cpanel accounts so i have this account set up to the domain app001.dev which right now you can see is just has absolutely nothing so i'm in my cpanel here and i can come down to files and there's multiple ways to deploy you could use even your file manager here and for something so simple like this you might even do that or an ftp but that's kind of the old school way of doing it so we're going to use git so you have this git version control okay now you need to create a repository first before you can do anything here and you can use github let's see if we click create so i believe you can use more than github let me see if it says anything um yeah i'm not sure if you can use like get lab or bitbucket i believe you can but i don't use anything but github so i wouldn't know but from here is where we want to add our repository info so first thing we need to do in order to deploy is create a github repository so let's come back over to vs code i have the i have tailwind running so i'm going to stop that with command c and before i even initialize a git repository i'm going to create a file here called dot git ignore all right so what this file does and i know a lot of you might already know this stuff but for those of you that don't what this does it allows you to specify what files you don't want to add to your repository all right so in our case we don't our files or folders i should say but we don't want our node modules right because those are just all dependencies we definitely don't want to add those let me just shut off github copilot so we definitely want to add node modules um another thing that i want to add actually i think that's i think that's really it now if if you're deploying just to host you don't need to you don't need your input css because your your um the the the site that you're deploying doesn't use this right this is what tailwind uses to look at and then it creates this main css so if you're just deploying to um to host then you could put input css here as well however i do want it available in my repository for you guys so i'm not going to add that and you don't need to add your tailwind config either that's all for that's all for development so i'm just going to add node modules all right everything else i'm okay with that being being put up so now let's initialize a git repository so we're going to come down here and say git init so that'll initialize it right it creates a dot get hidden fi folder and then let's run git add dot so that's git add all what that does is it adds everything to the staging area on our machine then we're going to add git or write git commit dash m and then a comment which is usually like initial commit for your first one so we'll say initial commit now everything is in our local repository now we need to put it on github so let's go to github go ahead and log in sign up if you need to and click new repository and i'm just going to call this i don't know tailwind tailwind landing page i guess yeah we'll just call it that and i don't need a description so i'm going to make this public and create repository all right now we've done most of this that it's telling us to do we already did init you can add a readme.markdown file if you want we already made a commit now we can actually we can just look at this one so push an existing repository we can grab these commands so i'm just going to copy that paste that in all right so that will just add github as our remote repository then we want to create a branch or check out the the main branch and then we want to push that to the repository so go ahead and hit enter and then if we come over here and reload we should no longer see those instructions we see our code oh you probably want to add this if you're on a mac you might see this ds store you can add that in your git ignore as well so it's dot ds underscore store actually it's an uppercase s so you might want to add that as well all right so now we have this on github so now if we click on code you'll see this git github.com and then whatever your repository and your username so we're going to copy that come back over here to in motion to our our control panel and under where it says clone url we're going to go ahead and paste that in i'm sorry we want the https actually so over here https copy it come back over here paste that in now here's where you choose your path if you if you want to deploy this to your actual like the root of your your website of your domain then you want to add public underscore html okay so that's that's the route that's what is going to be shown when they come to your domain and obviously you need to hook connect your domain to your hosting account if you haven't done that already so that's pretty much it that's how easy it is to deploy so now if we click create so system successfully initiated the clone and if you look down here everything looks okay so now i'm going to come to my domain which is connected to my account and reload and there it is all right so it's as simple as that to deploy to inmotion hosting using git um you can come over here you can view you know your history of your commits and you can manage so we click manage that shows us our last commit and shows us the checked out branch so pretty cool pretty easy and of course you have your your control panel where you can set up email accounts and and all that so inmotion hosting is a great company i've used them for years they're not just someone that just paid me to to say stuff and i don't know anything about them i've used them for about six years now in fact my traversingmedia.com is is hosted with them and has been for a long time so that's it guys thanks for watching hopefully you enjoyed this and learned a little something so i'll see you in the next video

Channel: Traversy Media

Views: 34,673

Keywords: tailwind, tailwindcss, tailwind css, css

Id: dFgzHOX84xQ

Length: 95min 39sec (5739 seconds)

Published: Tue Apr 05 2022