React JS & Tailwind CSS Responsive Website - Beginner Friendly

hey what's up guys in this video i'm going to show you how to create your very own react.js project from scratch we're going to be starting from a blank terminal and we're going to build this data website right here it's just a front end only we're going to be styling this entire project with tailwind css you guys is super super powerful and if you're not a fan of towing or if you've never used it before get ready because it's going to be awesome it's going to absolutely blow you away tailwind css is so incredible so check it out this is what we're going to be building right here so basically it's just like a data website right here and this is a really really cool react package i found right here called uh react hyped basically can help you level up your portfolio or any other applications you're working on and it just has this really cool typing effect right there that we're going to be using so this is our hero up here of course everything is 100 mobile responsive you guys 100 here's a little component right here then we have a newsletter component and then these card components with a nice little hover effect boom there you go it scales up just whenever we hover over here and then a nice footer right here and like i said we're gonna be coding this all from scratch if you're brand new to react.js and this is gonna be perfect for you so without further ado let's get started all right you guys here we are in vs code it's just a blank code editor and what i'm gonna do first is open up my terminal and i actually i just want to change the directory to my desktop excuse me and then i'm going to go ahead and create our react application now i'm going to be using yarn if you use npm that's fine too but let's create our react app yarn and then we're going to type create now with yarn you have to type create then give it a space with react app and i'm going to call this um see we'll say data finance youtube now go ahead and press enter this will only take a second you guys all right you guys it says happy hacking that means we are ready to go so i'm just going to pull over that folder that we just created close that down so we're going to be working out of this source folder okay so don't worry about any of these others for now and first what i want to do is actually just clean up some files so i'm going to get rid of app.css this app.test the logo svg report web vitals in this setup test let's just go ahead and delete all of those if you've already started your server your development server you're going to get some errors so don't worry about that in fact let's just go ahead and start our development server here and so basically we're leaving in here the app.js the index.css and our index.js so to avoid these avoid the errors here let's go into our index.js we're going to get rid of this report web vitals and then also um in our app.js we're just going to go ahead and delete some of this boilerplate code we're not going to be using any of that and then at the top here we just go ahead and import react from react okay so now we should have a blank screen here and first what i want to do is go ahead and install tailwind so let's go ahead and close our server here you can or you can open up another terminal here but you're gonna have to when you install tailwind you're gonna have to restart your server anyways so if you install tailwind and it's not still not working correctly then just try restarting your server so i just went to tailwind css clicked on the get started button and here i'm going to look at the framework guide here so we're looking for create react app boom that's what we did we've already created our our package here so let's go on to the next step and i'm just going to copy that again i'm using yarn so i'm just going to copy in after that and i'm going to type yarn add then paste that in there then this next command here is mpx tailwind css init and what i want to do is just copy that what was getting a little laggy there i just want to copy that over and what this command is going to do is create our tailwind config file here right in here and it's very important because our next step is actually to just copy this into into our array so i'm just going to copy this into the content array there go ahead and save and that's going to be all that we need to do with that file and then the next thing we need to do is just copy over our directives here and that's just going to go in our index.css file so from there we can go ahead and get started now for this for this file let me go ahead and close this for this project i'm going to use kind of this background i know it looks black but it's a bit like off colored here and i'm just going to go ahead and type this in so we can get about here i'm gonna say background color and it is actually let's see here zero zero zero three zero zero i believe yes cool so i'm just gonna go ahead and set that then we can just close the index.css so that is the one line of css that we're going to be writing outside of tailwind okay so what i want to do first is we can actually close that let's go ahead and structure our application here so inside of our source folder i'm going to create a components folder these are where all of our components are going to live here and our first file is going to be our navbar so navbar.jsx and i'm going to use rafce to generate my functional component here i'm going to go and zoom in for you guys hope that helps a little bit so you can see and so for our navbar let's go ahead and start writing some code here so for our navbar tailwind is really really cool so tailwind applies baseline styles right so basically we can type in here and i'm going to have an h1 in here and for my h1 i just wanted to say react and this is actually just going to look like a p tag it's going to be very like start my server back up even though it's an h1 now that tailwind is installed it just applies these baseline styles so the h tag will actually just look like a regular p tag and then we can style it however we'd like to do that so there we have our uh our background here so let's just give this a class name and i'm just gonna say text white just to start off with okay and let's see what we have of course we had we have to import this so let's go into our app.js here and i'm just gonna import down here my nav bar boom i just gotta auto import it there there we go so that is exactly how it should like look right so what we can do next is i'm gonna go ahead and style this here so with tailwind all we have to do is just type in these classes and by the way if you don't if you're using tailwind for the first time or if you have been using it it's so difficult without without this um this uh this package right here to install tailwind css intellisense you guys it will 100 save you time i stand by that so go ahead and download this if you're if you don't already have it it is amazing for tailwind is definitely a must-have so basically this intellisense as i'm typing if i would say with full which is the same as saying with a hundred percent i can just type w and then you should be able to see our little pull up here book with full so it's not showing there it goes right there so as you can this is intellisense you guys you can actually see and it provides some some options here for you guys so you can choose what you'd like to like to use so it just makes typing so much easier so much faster as you can see it's starting to give me some more options here so for this i'm actually going to use i'm going to say text 3 xl i'm going to say font bold and then i'm going to give this this cool green text right and the green color code i'm going to be using which by the way you can actually open up some brackets here if you want to add in some custom values and i'm going to say 00df9a and that's going to be a really cool green that we're going to use right there boom there we go so after that h1 tag right i want to have we want to have our our links over here and for our links i'm going to use an unordered list here so an order list then our allies and what we want to say here i'm going to pull this open home account sign in i'm actually going to use these over here home company resources about contact so let's just say home and i'm just going to copy this down company and then we have our resources here and about i'm not sure if i missed one out that's fine i'm gonna say contact there we go perfect and so how we want this to display i'm gonna drop that down so we can see what we're doing we want this to display as this owner list we want to display that as flex right so it's really easy to tell when we just say flex and then um what also we want to do we're going to give these list items some padding so i'm just hold down this alt button or if you're on a mac is going to be the option button there so we can type multiple places at once and i'm just going to say p 4 to give it a nice padding around our list items there so i'm going to use this div here as kind of like our wrapper right so we already have text white in there but what i'll we'll also want to display this as a flex and then i'm going to use the justify between and that's the same as saying um justify content space between okay so boom that's what we want right there now we're also going to want to say item center we're going to have to give this a height here and i'm just going to say h 24 for my height which as you can see here is um 96 pixels there equivalent to six rim so that's what i want to use right there um i'm going to give this also a max width of 12. i'm going to open up my brackets here 1240 pixels there we go and i'm going to say margin auto so it sits right there in the middle of the screen and we're also going to want to give some padding on here so i'm just going to say px for just on the left and right boom there we go now we're not going to want our our list items to show on smaller devices but we're going to come back here in a little bit and do our media queries but as you can see as we open it up we have our max width of 1240 pixels and i'm going to use a really really cool extension called pesticides awesome awesome tool so it kind of shows you outlines of your of your html elements here so that's really really cool right there that's exactly what we want 1240 pixels you guys the margin is set to auto so it's right there in the middle of the screen and we have a little padding on the x-axis of four which is four and tailwind is equivalent to one rim so just so when we shrink down into smaller screens we're all gonna always gonna have that little um space on the sides so perfect so what we want to do next right we're probably going to get rid of that there what we're probably going to want to do is um add in let's close this down we want to add in our little button here and we'll do our our drop down so we're going to be using we're going to be using react icons for for our icons here so let's just look for react icons boom there we go so to install this npm install you just copy this i'm actually just going to be using yarn like i said so i'm going to open up another terminal to the side i'm going to say yarn add and then just go ahead and press enter and then i already know what i'm going to be using so if you can you can search for all kinds of things here for example menu and you have all these options so really really cool i was using uh hero icons but i noticed i didn't find any social icons in there and that was kind of annoying so kind of going back to just react icons so where are we at here so for our icons here i'm going to go ahead and import a couple icons so the way we do that we just import then open up some curly brackets and it's going to be from react icons and in this case i'm going to use ai because as the pretext to the icon i'm going to be using i'm going to be using ai outline closed don't see it there outline close there we go and i'm also going to be using ai outline menu so if you you can import multiple react icons on the same line however if they have a different pretext and this is the pretext i'm talking about here if it's different then you're going to have to import that on the second line so that's what we want right there now let's create a div here there we go and in here i'm going to have my ai outline menu boom there we go and we should see it show up over here there there it is and for this i want to see i'm going to go ahead and set this as hidden just for now there we go so for just for now so we can take care of this mobile these mobile styling here so that's looking a little small so what we can do we actually have access to the the recticons properties here so we can just say size instead of writing given a tailwind class i can just say size 20 and that's going to bump up the size a little bit right there so that is looking good right there next let's go ahead and style our mobile drop down and we're going to be using the use state hook for that but let's go ahead and just code this up so what i want to do i'm going to create another div here oh another my auto generate there we go with a unordered list and some lis and i'm actually just gonna boom i'm just gonna copy all of those just to save some time here boom go ahead and paste that in that's looking good right there so way we want to display this we want to display it as fixed so i'm going to give it a fixed class name and i want it oh there it is on the left i'm going to say left 0 top 0 so it starts right at the top and for the width i want this to take up let's say 60 percent not pixels 60 of the screen and i'm gonna go ahead and give this a border right i'm going to say border oh there he goes perfect that's what we want right there and i'm going to say a border right i'm going to grab its color here gray 900 so it's a very subtle border we're going to darken it up i don't know if you can even really see it just a very very faint line so next to the width i just do want to say height full which is going to be 100 boom there you can see it drops down to the to the bottom of the screen there so also what we want to do is i'm going to give this some padding on the top so this unordered list i'm gonna give it a class name i'm gonna say pt for padding top and i'm just gonna say 24 which is again if we hover over that it is six rim that's looking pretty good right there now also i can say uppercase something like that and that's going to transform all the text uppercase boom very easy and let's give this a little um and here i like to have a little bit of this border there we'll say border bottom and we can have we're going to throw our icon in over that so right now there's actually i know it looks black but there's actually no background for example if we put a background on here if i just say bg gray 600 it's going to be a light gray boom there you now you'll see that everything behind it fades away so we do want to add a background and i'm just going to say bg and let's add it this let's make this the same background that we've been using which is zero zero three zero zero one more zero in here it's a real faint hit of green and for our logo i'm just gonna copy that again boom and i'm going to paste that i'm going to put it right here it looks like i deleted my opening tag there go and save that so it gets nice and formatted boom there we go cool so we actually probably don't need to add that much padding anymore i'm going to move this down to 12 and i'm gonna add margin of a let's see how that works no we'll say four and we might actually just get rid of this all together all right so that's looking pretty good right there maybe i might say p4 i'm just playing around see what looks nice there we go by the way all these uh these sites that i build i don't use figma or any kind of design software i just piece it together as i go so i've already built this obviously but like i said i don't use any design software i have used a figma in the past but i'm not really a great design person so that's what we're going to be doing here so let's just select these here i'm leaving that um that bottom one off intentionally and i'm just going to say border b for border bottom and there we go now i don't want um i don't want it to be that bright so i'm going to say border gray and i'm going to give this 600. so the higher the number it goes from 50 i believe up to 900 and the higher it goes the the darker it is and the lighter it goes for example if we say 100 it would be almost white there but i'm gonna leave this at six and i think that's looking pretty good now it's not going to be functional yet that's cool don't worry about it but let's go ahead and uh let's go ahead and get that functionality working with our use state hook so let's go ahead and import the use state hook there we go now for our state we're just going to put this in our navbar component right here just above the return now for you state we'll say cons and it's going to take in uh two values it's going to take in i'm going to say nav then the next is going to be it's actually going to be a function i'm going to call it set nav and this is equal to use state and let's give it a default value of false so a state you can give it all kinds of values does not have to be a boolean value it could be an empty object an array or or actually hard code some some a value in there but we're going to leave that as false for now and then we're going to want to have a function and i'm going to define this function it's going to be an arrow function and i'm just going to say handle nav and basically whenever we click on our menu we want to run this function that says handle nav and all this function is going to do is just set nav to the opposite of its current value right so now like i said we hard coded this to be open but what we want to do is actually go ahead and down here and remove that so where are we looking at right here i'm going to go and save this so it formats nice and pretty whoa i didn't need that format it's nice and pretty for us over here there we go now for our let's see here this right here is our mobile our our mobile menu here so let's let's actually we're going to use okay first let's go and do this what we want to do next is actually add in our close icon because we don't want this to change we want this to toggle between a close icon so i just open up some brackets here some curly brackets and basically when we open our curly brackets down here in our jsx we can actually just type javascript so what i'm going to say if nav is not true then we want to show the ai outline close all right and i'm going to go ahead and give this a size we're going to give this a size of 20. make sure we close that else i'm just going to copy this in right here i'm going to go ahead and cut that and paste it in there just like so boom so now we can see we click on it oh we need to add we need to add an on click here so we're going to say just on click now on click we just want to run our handle nav function so now whenever we click this our menu is not going to change but we should toggle back and forth between buttons that's what we want right there perfect so next what do we do here so we only want this to show uh basically when we click our button so we're going to use the basically we're going to come in here to our this is what we're looking for right here this line of code our div this is our menu our menu uh component here or sorry our menu element and what we want to say i'm just going to copy all of this right all of that code there i'm going to actually cut it out and then instead of these quotes there we're actually going to use some curly brackets now we can add some javascript and our class name and we're going to be using a ternary operator again so basically what we want to say same thing if nav is not true put a little question mark in here then i'm just going to paste in these styles and we want this to be fixed else we want this to also be fixed but we want it to be hidden off the screen so we're going to say left we open up our brackets and we're just going to say negative 100 so let's see if this works here boom there it goes now let's add a nice little like transition to it um so just in here i'm just going to say ease and out and then we say duration let's say duration 500 let's see how that looks boom there we go nice slide in this is how easy it is with telling you guys smash that like button if this is your first time using tailwind or if you're learning some new stuff really really love tailwind this is so powerful we don't have to mess around with any css files or anything like that we just write it right into our class name how easy is that so boom that's looking good right there let's go ahead and i think we have a couple more things yeah so let's just i had that set to hidden so let's just uh take care of those things real quick so our let's close this back down so actually for our menu button there boom right here so i'm just going to give this a class name because we don't want this to show unless we're on a on smaller screens so what we actually want to say is display we'll just display block but anything above the medium breakpoint which i'm saying md and there's different break points we have a small medium large extra large so media are small i believe by default is set to 640 pixels and medium i believe is 768 so tailwind is built with a mobile first approach so basically it uses a min width here so we want this to basically be displayed as block and then once we get over the medium break point which is 768 pixels we want it to be hidden so i'm not sure what we're going to be pretty close to it yeah there we go so this is right at the 768 break point so as soon as we get down there we go and we can now access our mobile menu but where i put the hidden class we want this to where is it at right there we want that to display flex actually we want it to be hidden on mobile devices right we're doing mobile first and then anything above medium what are we going to say flex so let's open this up here boom there we go looking nice and i know it looks a little bit different from what's going on there fix that so i know this looks a little bit different with the um well there's a little bug in there you guys we're gonna have to fix that so i know this looks a little bit different there with that button but that's all good it's gonna look awesome when we're done so that's it for the nap are you guys looking good smash like button if you like what you're seeing here so let's go on and do our hero component here with the react typed package that's super cool you guys i think i'm going to use that on another um next like portfolio app i do here so let's go ahead and just close that nav bar in fact i'm going to go ahead and copy that green just so i have it and so closing this nav bar and what's our next file here i'm going to create a new one i'm going to call it hero.jsx rafce to generate my functional component here and let's just go ahead and import this so i'm going to import hero auto import yes thank you cool drop that down now here you are with our hero component and first i just want to say let me give this a class name of text white so we can actually see what we're doing here there it is perfect so inside my hero right this is gonna be just um basically full screen full width and then we're gonna have a div here in the middle with some content inside drop that down so what do we want to have here first we want to have a this is going to be a div here and we're going to give this a class name i'm going to say max width and where the max width is going to be see 800 pixels is what i set it to 800 pixels i still haven't got a microphone arm a boom arm you guys i'm still kind of sitting this mic in front of me so i'm kind of navigating around that and so for this div here i'm going to give it a margin top of i'm going to say [Music] negative 96 pixels what i did and i'm going to show you why i did that in a minute so i'm going to say width full h h screen and h screen is saying height 100 viewport height so that's what that's saying right there and we just wanted this to be displayed in the middle so i'm going to say mx auto and we want the text to be center flex and then flex column right and then any other styles here we're going to add we might just do a justify center here and i know you can't see anything yet and that's kind of annoying so justify center boom just like that so for our first text i'm going to go ahead and copy this over here this growing with data analytics so i'm just going to put this in as a p tag boom there we go whoa what's going on there save that boom and for the next i'm going to say this grow with data and that's just going to be an h1 go with data boom and then here i'm just going to copy i'm just going to type that in because it's moving all around and this is actually going to go inside of a div you guys so what i'm going to say this is just going to be a p tag i'm gonna say fast flexible financing for and then leave that at so and let's just go ahead and give this some styling here so let me give this class name and what did we use kind of i know i copied something i'm just going to take that green again there we go so i'm going to say text and open up my brackets here the brackets are used whenever you want to add in your own custom value it could be could be a color it could be a percentage it could be um it could be pixels rams anything like that so that's what brackets are used very very awesome stuff and what are we doing here so text we have oh there we go that's better let's give it a font font bold and just give it a little bit of padding so p2 there we go now for our h1 i'm going to do the same thing here i want to say a text so this we're going to do with our break points i'm going to say medium anything over over medium which is 768 pixels i want to say text 7xl so it's going to be quite large then anything over small i'm going to say text text 6 xl and then on mobile devices we're just going to leave it a text for excel so let's see what's going on here i'm going to say font bold as well i'm going to get this in here real quick font bold the text is already right and i'm going to say anything above medium i'm going to give it a p y of 6 so padding y is 6 which is 1.5 rim so let's see we're on a small device right now if we shrink it all the way down okay now if we hit our medium breakpoint we boom there we go and then as we get to large so that's looking good right there grow with data perfect cool and we have this next our fast flexible financing let's go ahead and style that in here so i'm going to give it a class name and for this here what are we doing here i'm going to say so we're going to have the text why i'm going to say a medium basically the same thing text 5xl and then anything on small we're gonna do text for excel and then otherwise just text excel on our mobile devices and we're saying font bold so next let's grab our package that we're going to be using so this is the npm npmjs.com so i'm going to search for this it's called react typed and let's look looks like this is the one right there exact match perfect so what we need to do just go ahead install that i'm just going to copy that whole thing add it in there press enter and then next here's how we need to import it we can just copy that in and we just need to import it on each component they're going to be using it for so i'm going to import typed from react typed and then very very easy we can just open it up right here right so i'm just going to put it right below this p tag and we're going to just play this uh this parent div is a flex so what i'm gonna say is typed okay and then we can just close it off here yes can be a self-closing tag but what we want to say we're gonna use some values in here so the strings is what it takes in whoops string now we got the stings strings there we go and this is just going to go in here as an object here with an array so let's just take that and so what do we want to say uh when we say buyer to buyer someone say buyer to buyer and then our next one is say bye gotta be in quotes here buyer to customer and then we're gonna say also just software as a service here so let's next do next is going to need the type speed and back speed so i'm going to say type speed now it says 40 i'm going to be using something a little bit faster i think he used one yeah 120 and then for our for our back speed and that's just the rate that it deletes it we're going to say back speed and i'm just going to say 1 130 i'll say 140 boom perfect and we'll just want it to loop infinitely so let's say loop now let's go ahead and save this and see what it's doing which oh there you go that's what we want you guys perfect so i want this text to actually match this text here so i'm just going to copy this boom there we go i'm going to copy that and just give this a class name i'm just going to paste that in so now it should look the exact same that's what we want right there you guys now i want this to be uh displayed as flex on the same line so that parent diff here as i was saying we're going to display his flex so i can just say flex like so and we want to say justify we're going to be in the center perfect and we want to say might want to say items center and we're going to give this a little space here so let's say in our typed we can probably just say pl 2 for padding on the left hey there you go that is looking good you guys and now let's open this thing up boom that is looking good right there looking good smash the like button you guys if you like what you're seeing here so i'm just going to select this here we're going to put that in a p tag here and it's just going to go right below that parent div and i can just throw it in the p tag just like so but there we go and for this p tag what i'm going to say so what we're going to say in here i'm going to give this class name and i'm going to say basically anything above medium let's see text to excel and then otherwise just text excel we want to be font bold we're going to give this the text gray we're going to say 600 okay so let's go a little bit lighter with 500 boom there we go perfect you guys so um i think this is looking great so far i'm going to drop this down just make sure everything is looking good so we might want to add just a little bit of sizing on there a little more so we do have padding left but basically basically anything above medium let's do um pl padding left of four which is actually one rim so shouldn't see any changes till we get this larger screen that looks a little bit better that looks a little bit more uh that looks a lot better all right so we could probably actually give this um we're going to want to give this it's kind of jumbled up right now so let's just give this a little bit of room i'm going to do that in here i'll just say p y this might be too much whoop p y four there we go i think that's looking all right and let's just open this thing up there it is you guys looking good they're looking good so we have our navbar done and we have our hero component the next what we're going to be doing oh wait i forgot that button let's go ahead and add in that button you guys let's add in the button not the button all right so we're going to put this just a below that p-tack here but still within that div and we're going to say button and we'll say get started so for the classes for the button right so really cool if you noticed here when you use a button using tail and css like we talked about the default styles it has zero padding no border nothing at all which some people might find as a pain i love it because we can customize everything that's why i hate bootstrap so much you'll never see me using bootstrap i'm unsure about material ui as of right now but really not a fan of bootstrap because it's so i mean it's just one style basically and there's no customization so that's why i love tailwind super awesome to use so i'm gonna use that background and what's that green we're using i know we have it up here i'm just gonna copy it because i want my button to be that color boom there we go and there you go perfect and once i give this a width and i'm going to give this a custom value of 200 pixels there we go and rounded is going to give some rounding quarters there we go so you can do rounded rounded small rounded medium i'm going to be using the rounded medium so there we go just a little bit more more intense there and let's say font medium i'm going to say my6 to give it some padding mx auto so it sits right in the middle and then a padding x of six and well actually we just need this py maybe a three there all right let's look at it oh that text black i'm gonna move the text change the text to black see how that looks looking good that's not bad you guys looking pretty good so far let's open this thing up looking good looking good so let's move on to what's our next section we're using this analytics section right here boom there we go so basically all this component is going to be another component all it's going to be is um it's just going to be a component here and we're using grid here and we're going to have the image on the left and then some text on the right there so i'm going to drop that back down and of course it's going to stack on on mobile devices so let's go ahead and i'm going to close i'm going to save that green again okay and i'm going to close this hero.jsx and our next file to create is going to be analytics analytics there we go.jsx now rfce is going to get our functional component again you guys analytics there we go boom all right all right so let's have a look here uh we it's down here you can't see it there there we go okay so for our analytics it's gonna this would be a really easy component you guys and i'm gonna bring over some of the so the images i'm gonna be using so i'm gonna put a link to my github in the comments below so feel free to just clone this you'll have all the source code you can grab all of my images feel free to use this in your own projects so or if you want to use your own images that's cool too so all right um like i said this is going to be a grid now we are going to have a wrapper so for this outermost parent container i'm going to say width full and we want the background to be bg oh bg white there we go and i'm going to say py 16 which is going to be 4 ram top and bottom then just px four all right all right now next this is going to be our our container here so for each container i'm gonna keep it all consistent with a max width of 1240 pixels there we go and we're also going to say mx auto so it sits right in the middle of the screen here now this is we're going to define our grid and like i said we want to say grid and then anything over i'm gonna do the medium break point because right now uh grid at tail one css like we said it's mobile first when we just say grid it's gonna automatically default to just one column and then once we get past this medium break point which remember guys is default set to 768 pixels once we get past this medium breakpoint we want to change this to grid columns to what we want to use perfect perfect so in here we're going to be using an image now i'm going to go ahead and give me just a second here and i'm going to grab this pull this open here and what i'm going to do is just um let's create a inside this source folder here i'm going to create a new folder called assets and whoops assets there we go and i actually have four images i'm gonna bring it over one image and then just a few uh vector icons here so feel free to use all of them you guys all right there we go now that we have those dropped in the way we import an image and react here so we're just going to import and then we have to name our image and i'm just going to call this um we're using this a laptop so i'm going to say laptop make it easy right from and then we need to go and find the file so we're going to go outside of our components folder into our assets folder and then we're just looking for that laptop dot jpg perfect okay and now i'm going to use so we're going to have our image in here and instead of the quotes we open up our brackets and we just call our laptop and react will throw use good idea to have some alt tags in here you guys um react will throw a fit at you if you don't have those so i'm just going to put a slash in there for now and we're going to come back and hit this with some some styles but right next to here i'm going to have a div and this is going to be the left side of the page and in here we're going to have an h1 and i'm going to grab that over actually i'm going to grab my p tag first here so i'm just going to say p tag with that right there and this is going to be my h1 there we go and this is just some lorem text i'm going to say p tag and you can just say lorem i'm going to say lorem 30 that should generate some text for you there there we go so that's looking good so far uh we still need to give this thing some styles so let's go ahead and do that so for for this div over here i want everything let's see how it's gonna look so that's looking good right there i want to change probably the size of this image and if i use my neat little pesticide plug-in you can kind of see this is our 1240 pixel um with margins set to auto so that's looking good right there and if we just kind of use it over here just to there we go so our image is going to be a little bit smaller that's cool so let's go ahead and take care of our image and then we're going to style this right side boom boom boom there we go so for our image i'm going to go ahead and give our image a class name and basically i'm going to give this a width of 500 yeah i'm gonna say 500 pixels over here is what i have it set to and then also we're going to do mx auto so it kind of just sits in the middle it sits in the middle of our um sorry my four it's kind of sit in the middle of our left column and that should be good right there so as you can see it shrunk down a little bit perfect and now on the right side here i'm gonna give this class name we want this to be flex and then we're going to want to say a flex column and we're just going to say justify center because i want it to sit in the middle uh vertically there all right so for this p tag let's go ahead we want this to be that green color so i'm gonna go ahead and class name i'm gonna say text open up our brackets and i'm not sure if i still have that up no of course not i don't have that my clipboard so let's just go ahead and go into our hero there we go cool all right there we go perfect perfect so now we have that text there and i don't have to say uppercase because i just typed it with the i just copied it over so that's looking good there let's give this a font of bold though boom there we go and like i said we don't have to say uppercase so for our h1 let's go ahead and give this class name we're gonna do anything above medium i'm gonna say text for excel there we go and anything above small text 3xl and then just text to xl on the small screens boom bold and then py of 2. let's give a little padding in there oh there we go there we go now we see what we're doing here so it gives it a little bit of padding in there and then for this text here at the bottom let's um [Music] let's leave that blank for now let's see how this looks we're going to want to add a button down here and whoops parse integer so a button and i just want to say get started boom now to make this easy let's just go back into our hero and let's just copy all of our button styles you can do some global styling and um and tailwind it's very very easy but for this project since it's really just like a landing page um i'm just gonna only i'm only using like four or five buttons so i can just copy it copy it in for now just to make it easy here so that's looking good right there let's see so it looks like in that one i did black so let's go ahead and just change that to black so i'm going to say almost and copy that whoops change this text and then i'll say bg black so how does that look oh dive text in here okay looks like i have text in here two spots so you can see if you try and use the same um styling class there it will throw in air so that's pretty nice nice functionality there let's open this up to full screen there we go oh we don't want margin auto on that one though again that's what happens when you just copied in so looking for margin auto what do we do over here i'm not going to want to use that margin auto say font medium rounded medium md okay so i'm just going to say it looks good on on mobile devices but we're at full screen i don't want this button to look like that i want it to slide on over here so very very easy fix analytics here where's our margin margin margin auto so let's just say margin auto but anything above medium we'll just set the margin to see margin x to zero and that should be what we want to do there we go now it should be right in the middle perfect that's what we want you guys that's how easy it is look at that so we're already done with this whole component there are zero css files in here aside from our index.css everything is just looking so nice you guys perfect now next let's do this uh newsletter here we go right here a little new newsletter sign up looking good right there so for our newsletter sign up let's go ahead and pull this open here so we're going to go ahead and close that one there and our next our next component say newsletter dot jsx all right we're going to use rfce to get our functional component here now what we can do with our with our newsletter here is let's open that up here so for our newsletter we want it to display the full width of the screen and we're going to have our little container in there so let's go ahead and do that ah that's not what we want to do so let's see here i'm going to give this a class name i'm going to say width full p y of 16 it's gonna be four ram on the top and bottom then we want our text to be white and let's import this we can actually see what we're doing news letter go ahead and auto import that if it doesn't auto import make sure you just type it at the top and a little trick here you guys if you select at the end of your component you hold down the control button press space it actually brings up a list of suggestions to where you can auto import it so just a little quick time saver for you guys so for our next div this is going to be our container so i'm going to give this class name max width and we're going to say 1240 pixels here mx auto because we're going to sit right here in the middle of the screen and this is going to be a display grid right so i want it to be a grid and this side this first element is going to take up two thirds we use our pesticide here it's going to take up two thirds and then just one third over there so we can just say grid then anything above we'll say large right which i believe is somewhere around a little over a thousand pixels we'll say grid 10 um grid columns three there we go so for our first div this is gonna be the text this is gonna be the text over here on the left so i'm just gonna copy that there i'm gonna refresh so i can get rid of that oh i'm gonna have to fix that so whenever i'm refreshing it's automatically showing up i'm gonna have to fix that for sure so in here i'm just gonna select that and this is gonna be my h um this will be my h1 so boom h1 let's paste that in and then next i'm going to have this text as a p tag there we go go ahead and save now for this text here let's bring this up a little bigger so class name and i probably should have put this i'm kind of tired of typing this over and over again probably should have put this in a bigger in a i'm going to copy that for now could have put this as a global styling so let's have a look i think 5xl let's move this down let's say four then three and then two there we go and then we're gonna want to say we're going to say font bold and then py of 2 now for our text in here we should probably just leave that alone so that's looking good right now it is only in one column as you can see there if we use our pesticide tool you can see that it is sitting in one column there so what we want to do let's add in our search box here and then we'll go back so for our search box boom and like i said this is all stacked right now it's all stacked right now so next we have that h1 and our p tag and then in our next div which by the way this first div let's go ahead and give this class name and we're going to have this anything above large so i want this to stack right on on mobile devices to anything above the large break point we just want to say um how do we type this column span columns call one word column span and we want this to span two out of the three columns right so that's how we're going to write that so now as you can see we scroll up increase our browser size you can now see it takes up two out of the three columns and and that only applies on large devices if we scroll back down takes up the entire column cool so for this div here um i'm gonna go ahead and give this a margin and give class name my for and in here we're going to have a we're going to have a div and kind of wrap it around with our uh our input and a button so i'm going to put input it's going to just be email doesn't really matter it's not going to be a functional button here in this tutorial but let's give it a place holder and we'll just say enter email boom there we go and next we want to have a button and for our button i'm just going to copy over some some classes here but basically i want it to be a the green button here and i'm just gonna say for this button notify me notify me and then for this class give this class name and what i'm saying is our background of green right our text is going to be black then i'm also saying rounded empty remember we can go up you can increase this if you say full it's going to be it's going to be a complete circle which we don't really want like that so we'll say rounded md our font is going to be medium slightly under bold and we have our width here of 200 pixels margin left of force that way we have just a little bit of space between our input and our button then we have margin uh y so on the y-axis 6 which is 1.5 ram there's some padding for our button whoa so let's go ahead and give some styles to our actual input itself it's a good class name so we're probably going to want to do p p three i believe yes flex and we'll say with full round whoa rounded m d there we go and might have to say text black otherwise you wouldn't be able to see our text in there i'm gonna refresh this i'm gonna have to come back and fix that so that's looking good let's open this thing up perfect so we need to add px-4 because we don't want it hitting the edges of our screens that's looking much better there and so we also want to add just a couple more things let's add our for this div here i'm actually going to put this no that's right so for this div we're going to say clap not children ass we're going to give this a class name and we want this to be flex and we want to be a flex column then anything above above small we'll say we want it to be just a row and not stack as a column then we say items center and we're also going to want justify between and then a width with a full so let's have a look perfect because i don't want this to stack until we get below that break point because that's what we want right there then everything else boom and then as we get past this large it's gonna take up three columns hope that makes sense there you guys that is looking good right there we missing something yes this p tag down here i'm gonna go ahead and copy that so let's put that p tag just below our button here so i want it to be in here now let's put it below here so margin my four i'm gonna put it right below here make sure we're in the right spot ah we can't see it let's move this up one there we go looking good right there now i'm gonna copy this green and let's put that in a span our privacy policy almost like it's a link so spam and we'll just say class name whoa class name and we'll say text nothing let me sign there we go and we'll just copy all this perfect all right get rid of that go ahead and save that that is looking good right there you guys awesome awesome um looks like we might need a little bit of padding yeah let's give this a little bit of padding there so we we can say my4 we're looking on this left side here column span two we could just say um that does the trick that looks pretty good there let's just refresh i'm gonna drop that down and refresh sometimes i like using that pesticide but i also want to get rid of it at times there so perfect that's looking good right there and let's open it up perfect that's what we want you guys next let's go down to these cards we're going to do some hover effect on the cards very very nice a little uh using some box shadows you can see they're very very faint and then we're going to display these icons here so we're just designing these from scratch here boom and then they stack on on mobile devices so let's go ahead and open up our sidebar here and this one is going to be we'll say i'm just going to say cards.jsx now let's get our functional component here all right and we already have these icons we're going to be using here the single double and triple now for our icons here we're also going to be using our see any icons in here besides those okay perfect the rest of the react icons we're going to save for our footer down there okay so we're going to have a single double so in here we're going to have cards and we want this to be basically if we open this up we want to be a full width component and then are we already using grid and we just want to shove that into three columns here in the middle so let's do that so i'm going to give this class name say width full py and i'm going to give this some pretty big i'm going to say 10 ram padding px4 px4 there we go and let's say bg white right all right and we're probably going to say give our text a black color here so for our this is going to be our our um excuse me our container here so i'm going to say max with and we're going to use the same 1240 pixels there we go mx auto so it all sits in the middle and we're also going to want to use this is where we're going to display our grid and we'll say grid columns three and we can have a gap gap of eight and let's see so we actually right now it's going to default to three we can't see that yet i'm going to import that cards boom there we go but we actually only want to throw show three columns above a medium or a large break point i'm gonna say medium so only show three columns when we get above medium otherwise just gonna be there it's all gonna be stacked so right now you can just see our padding in there which is totally fine so next let's have our actual cards so i'm gonna have a div here and let's go ahead and just give this some class here so they're all going to be the same so we're going to say with full and i just want some text in here actually before we install those so that way i like to see what we're doing in here so i'm gonna have in here an image and this one where we're gonna bring in gotta bring in our images so let's import i'm gonna say so say single from let's go into our assets folder and it's going to be looking for the single okay can't remember exactly what it is yes just single dot png png perfect all right now i'm going to copy this down this one's going to be the double and this will be all right all right okay oh and yes we're getting that air so let's just put that in there [Music] massive picture you guys we're gonna go ahead and give this let's just go ahead and give this class name and i'm just going to say w20 for width of 20 which is going to be 80 pixels there we go and mx auto empty and let's just say negative 3 because i actually want it to be just above my border and pg white there we go all right and then next we're gonna have our h2 and that's just gonna say single user then under our h2 shouldn't have a p tag and i'm going to say 149 it's going to be our price under that p tag we want to have a div and then here we're going to have a p tag you see we have 500 gb storage copy this down a couple of times we'll say one one granted user and then we'll say then outside here let's have our button and it says start trial boom there we go trail trial okay so that is what we want right there perfect now i'm going to go ahead and copy in some of these stylings here or paste or go ahead and type them in for the h2o i'm going to say text 2xl a font font bold text center then py of 8 so we get some nice padding and let's go ahead and add a border to this so all you have to say is border and it's going to automatically throw a border around there so as you can see just to go over some of the styling here this image we gave it a width of 20 so that's why it shrunk down mx auto right so it sits in the middle of our component and then the margin top i set to my own value of negative three rim so and that's how it jumped up there if we delete that as you can see it's going to shrink down and i just want it to kind of just sit right in the middle of um i just wanted to sit right in the middle there and i use the bg white so we kind of have that little space in there so that's looking good right there so far um see if we want to do anything else so yeah we definitely want to give this some i'm probably not even going to use a border i'm just going to say shadow dash xl and that's going to take away our border so as you can see you can't even see anything up there we have our drop shadow there that is looking nice that's what i want there um so next we want this displays flex we're going to say flex column give it some some padding around there p4 then my 4 on the top and bottom and i want this to be rounded lg's i won't want these square corners down there so when we say rounded not log but just lg that's going to take care of those corners down there so that's what we want right there perfect perfect and then whenever we hover on this thing so i'm going to use the hover class right so you use our colon there hover and i'm just going to scale and i just put my value in here 105 so it's just a little bit bigger so if we just hover this oh nothing happened yet we need to add a duration so duration and i'll say 300. i'm gonna open this thing up so that's perfect that's what we want right there you guys um we already had our hover class make sure i typed this in correctly so hover scale sorry we actually don't want these right there you used to type it in my custom class perfect that's what we want right there you guys awesome awesome awesome let's go ahead and add in some styling for this thing uh for our p tags here and our eight tag the h2 tags looking good now for this p tag i'm gonna give it a class name and we're gonna say let's see we want this to be text center text for xl and then a font of bold and then for this div i'm just going to target everything in here with uh text center and then font medium perfect that's what we want now for this p tag i'm just going to hold down my alt button so i can type on multiple lines this option if you're on a mac and let's give this a class name i want to say py of two border bottom and then we want to say mx eight perfect that's one right there now for this top one only i'm gonna give a margin on top of eight there we go and i think that's looking good so far i'm liking this so far looks good all right so border bottom everything looks good there you guys i'm not going to put a border on top i don't think it needs one that doesn't look good so perfect that's looking good you guys everything's looking good let's get our button down here and i'm just going to copy everything over for our button uh basically we're using our background green we want the width to be 200 pixels rounded medium font is medium my six so a margin of 1.5 ram on the top and bottom then margin x on the x-axis is going to be auto then just some padding so boom that's one of our components right there that's one of our card components now that we have it all styled i'm just going to go ahead and select it over here so this full card component here and really and truly guys this could be its own component by itself and we could pass in properties or anything like that but for the sake of this tutorial i'm just going to keep it simple there we go perfect that's what we're right there now we definitely want to change out our icons so this is our middle so i'm going to change this to double and we've already imported them here at the top so there we go and then we have our triple now i actually want this to stand out my middle one to stand out so for our middle one i'm going to change the i'm going to make the text here green and then we'll just say bg black there that's what we want right there and i actually want this one just to be a little bit bigger so the way i did that the way i did that you guys um i'm going to say margin my let's say margin y eight let's see boom i'm gonna open this up some oh i'm on the wrong one here so where are we at margin y eight i'm just gonna select that there and change that no that's not looking right there so what do i do over here on the second one okay margin y of eight and then basically anything above medium make sure i'm in the right spot and above medium we'll say margin zero and the reason i'm gonna open this up make sure we're on the right one here margin okay [Music] that's what we want right there you guys so just to kind of explain what we did basically i added anything over the media breakpoint i want the margin to be zero but the reason i added margin y of eight on mobile devices if we scroll all the way down here so this if we if we change this my to zero on all devices you're gonna see some overlay you kind of see that box and that was just kind of annoying me i didn't like that so that's the reason i set it to margin y of eight so it just kind of blends in nicely so let's open this thing open it wide up there we go looking good so we have our component that we'd like our customer to choose kind of highlighted and we could even just give it a little background right so let's check that out if we want to make uh we visit this is right here we could just say bg gray 100 just to give it a slight just a slight little stand out there or something like that looking nice perfect perfect and let's see this is a bg white what we could do what was our image here so this is i'm just gonna say transparent there we go so that's looking a lot better there boom if we hover we get a nice scaling effect so boom there we go that is our cards component you guys and if we scroll everything down everything should be looking good on mobile devices have our sidebar menu looking good side door menu we can scroll down we have our nice react type package hit the like button if you're liking that uh that technology there that's super cool you guys definitely gonna be using that on the next portfolio build and then we have this nice button down here with our newsletter component then our card components here with a nice scaling whenever we hover so that leaves us with our footer you guys check out this footer we're going to be doing some awesome things with this footer down here we're going to be using grid we're going to be using see looks like i think we did five uh grid components here boom so two we're gonna be using um three blocks here then this one over here is just gonna take up two thirds so basically just the opposite of what we did for our newsletter let's get going with that you guys so i'm gonna go ahead and close that cards component here and let's close that assets folder let's create a footer.jsx rfce let's get our functional component in there and let's go ahead and import footer boom there we go perfect perfect all right so for our footer what we want to do what do we go over so first of all we are going to be using our react icons over here so if we want to go ahead and import those i'm going to go ahead and import i'm going to copy these over you guys but they're going to be from react icons remember we're using the pretext so instead of ai this time i'm just going to say f a and i'm just going to copy all of these over here so i don't have to type them in manually like i said they're all the same pretext there fa the other ones were ai that's why we use the ai afterwards so like i said that's all set up looking good now for our for our outermost component here we are gonna have a we do want to have our container here and we're gonna use that in our outer component here so let's just go ahead and set this one right here so give that a class name i'm gonna say max with 1240 pixels now since the default background is already that black color we don't have to mess with any of that right here we do want this to be sitting in the middle of the screen and we'll say py of 16 and then px 4 and this is going to be a grid right and anything above large so i'm going to say large we'll say grid columns three otherwise we're just going to leave it as one i'm going to say gap eight for our grid gap and we'll say text gray 300. so let's see nothing is in there right now we should be able to nope can't even see our footer so next we're going to have a div in here we're going to have an h1 and i'm going to go ahead and go into our nav bar because i'm just going to steal that right i'm just going gonna copy that completely we'll just paste over that how's that looking boom there we go looking good looking good then we're gonna have our alarm text in here i'm just gonna copy that and let's see here we're to have a p tag paste that in there and then we're also going to want our icons let's see how it's looking in perfect so for our icons and we're going to give this a little bit of give this p tag class name and we'll say um py2 don't really find it was a py4 now let's do our our um icon so i'm going to wrap all of our icons in a div and let's just go ahead and paste them in here oh i can't do that so i'm going to say fa let's start out with uh facebook so facebook square okay and we just copy these down a few times so and then next we're going to say insta gram that one's not going to say square next one is going to be f a do we have twitter twitter square there we go now you can see there as we use them they're no longer highlighted there so next we're going to use the let's see can use f a github square and we use that dribble dribble dribbles are three b's boom there you go perfect so let's add some the size property here so again i'm gonna use my alt button so i can click on type multiple lines here and i'm gonna set the size to 30. oh massive there we go boom and let's have these display as flex you guys so i'm going to say flex and we want to give this a anything above medium break point i'm going to say a width of open my brackets 75 percent now that's not 75 percent of the page but just 75 of the the parent component here which is in our grid and the my of six and then we're also going to want to say uh since we give it the width we can just say justify between and that's going to give some spacing in there perfect so in this case it is 100 of the block which is actually in this case 100 of the screen but as we open up some you'll see it's just going to take up this component here or just that little element there so the next what we want to have is our actual menus over there drop that down so for our menus it's going to be so that's one div right and this next div is what we're going to have and we want this to say this is actually going to take up um call spam 3 right so we want that to take up but only anything above the large break point we want to display otherwise we want it to be stacked and we just going to want to say flex then justify between and what that's going to do is just spread out out of all of our unordered list so we're going to have a in here a div with an order list and then an li and the first one is going to be analytics there we go and we'll have a couple more this next one will be marketing i'm just going to type these out real quick and then we're going to say commerce and we'll have insides boom there we go and actually i'm going to put a little h6 in here and this is going to say solutions i love how it's all just basic styling to you guys love that stuff let's just go ahead and give this class name and i want it to be uh font medium and it's going to be just a little bit darker or sorry a little bit lighter than the others darker boom there we go looks good looks good you guys now if down here for our actual list items we're going to leave the unordered list alone but for our actual list items i'm going to give this class name and it's going to say pyf2 so get a little padding there and then text small listen just drop it down just a tad looking good nice nice nice so this div right here we're gonna have uh three more so i'm gonna copy that down two three boom there we go and so next this one's going to be support it's going to be pricing this one is going to be [Music] documentation then we're going to have guides status there we go looking good so far perfect perfect next we're going to have the uh c company here boom this is a company and we see we're gonna have another company we're gonna have about then we're gonna have our blog here boom there we go then after the blog we went to say jobs press and let's give this one more careers boom there we go and then this last one of course gotta have the legal side boom legal and we'll say claim this one will say policy and we'll say terms there we go awesome let's look have a look at this thing boom oh man looking clean so it's already set up like that just on the on the mobile devices that is awesome you guys let's pump this up to a full screen so this isn't what we want you guys we want this to take up two-thirds of the screen so where did we make our mistake here let's go into the div that surrounds us and it is going to be right here so anything above large want to say column span of three and we actually so there's only three uh columns to begin with so we won't actually just change that to two so that should fix that there perfect now i'm going to use our pesticide tool here and i'm just going to bump that down a little bit so that's that same element right there so margin top i'll say 6 which is just 1.5 ram there we go now let's refresh this thing boom you know what let's take this snap bar here let's figure out what's going on so what is happening basically our side drawer is showing whenever we refresh our page and we actually don't want it to show unless we toggle it so let's look what we did here what did we do wrong let's go into our nav bar um okay so it's likely right here okay so basically i think we can just remove that there there we go so basically i just put this in wrong i said if the opposite of nav is true and i just got to switch around that's it so let's refresh boom there we go and let's drop this down oh let's do it on the other one too there we go now we can have our menu that's why we weren't there so hit that our side drawer pops out perfect that is what we want right there you guys let's just make sure everything is working properly one more time boom there you go all right you guys just a quick recap here using tailwind css you saw how much time we were able to save building just a quick front end application here using tailwind css awesome awesome stuff you guys so we have a nice nav bar here we just saw our use state hook to toggle our side drawer menu very very nice then we're also using that awesome react typed dependency here for our awesome little type animation there awesome awesome stuff you guys i'm gonna be using this on a future project maybe another portfolio project i'm not sure that uh yet so uh feel free to use that in your own applications if you're freelancing doing things for clients it looks really really nice really help you level up your your apps there down here just using the grid that we have a nice and nice newsletter here with the grid columns spanning two over here and just one on the side they're nice custom card components here that we can hover on and get a nice little scaling effect then a nice footer there at the bottom are you guys that concludes the video thank you for watching thanks for following along smash the like button if you feel like you got some value out of this if you're learning tailwind css for the first time you see it how awesome it is smash the like button thanks for watching you guys make sure you follow i'm going to be putting out some more react content just like this here in the near future thanks for watching guys i'll see you on the next one

Channel: Code Commerce

Views: 121,891

Keywords:

Id: ZU-drSVodBw

Length: 78min 16sec (4696 seconds)

Published: Thu Apr 14 2022