Build a Responsive React JS Website with Tailwind CSS

what is going on guys Clinton here welcome back to the channel co-commerce in this video we're gonna be creating this beautiful travel website in react.js styled completely with with Tailwind CSS at the top here you see we have a full screen nav bar that we're going to be using pretty pretty cool then down here we have a like a grid masonry layout we're going to be using CSS grid throughout this entire build here a little bit of flexbox nice little section here and as we scroll down we're going to have an image slider as you can see we can just cycle through our images and these buttons below if you click on the button it'll automatically drag you to the corresponding image there like so and I'm going to show you how whenever we add a new image it's going to automatically generate a button down here we're just going to map through our images and then a footer at the bottom so if you want to see how I built this website in react.js styled with Tailwind CSS then let's go ahead and get started and you guys just to show you everything is of course 100 mobile responsive as we shrink down to the mobile device with you see everything displays beautifully as well and our image slider there so again if you want to see how I built this and react.js style with Tailwind then let's go ahead and get started here so I'm already in vs code here actually are already in the working directory that I want to be in just this folder by the name of experience react Tailwind so I'm going to press the control backtick button to open up my terminal here within vs code so since I'm already in the folder all right what we need to do is just create a new react application so we can do that by typing MPX create Dash react Dash app now if you want to name a new folder here you could say you know my app or whatever you want to do but since we're already in the directory we want to be in we can just say mpxcrate react Dash app and then just a period there and what that's going to do is just install react or create our react project within the directory that we're currently in so this will only take a minute you guys all right you guys Happy hacking that means we are ready to go okay so first off let's go into our source folder here on the left the create react app and created for us so right off the bat this Index this app.css the app.test the logo.svg report bottles in the setup test let's go ahead and just remove these we're going to delete them we don't need them they're kind of cluttering up some stuff for the purpose of this build okay so next what we want to do is install Tailwind CSS okay so let's go over here and create a new tab here and we're going to go to tailwindcss.com go ahead and click on the get started button and we're looking for this framework guides here so next.js laravel V nux what we're looking for is create react app should be down here at the bottom here it is right there so the first step is to create our react project we've already done that so let's just move on to this one next so I'm just going to copy that in come back over here we'll paste it there then the next thing this npx tailwind and knit P let's go ahead and click that and we're going to paste it in there now what this is going to do is create this tailwind.config.js file and that's pretty important because the next step it actually wants us to add this string in here inside of our content array in this tailwind.cavig.js so let's go ahead and copy that and we'll just paste it in there like so okay and we can close the tailwind.com config file we're done with that and the final step here is just to add these Tailwind directives to our CSS or index.css files so let's just copy that over and we'll paste that in our index.css we can actually just delete all of that now you guys we can actually still add some Global um some Global styling in here and we're going to do that right now before we even get started so what we're going to say and this is how you add some Global styles with Tailwind so what we can say is at layer base and then we just open up our curly brackets and we can apply CSS so what I'm going to do we're just going to I'm just kind of showing you how to do this we're going to add most of our Tailwind CSS within our components but this is how we add our Global styling and what I want to do is for our buttons I'm going to add some styling for our button so what I can say and we're just gonna not we're not using a class or an ID or anything all I'm doing is grabbing the HTML element itself the button and what I'm going to say is apply and then we can write our Tailwind so I'm going to say border py2 for padding on the y-axis of two then PX3 for padding on the on the x-axis of three I'm going to say rounded full and what that's going to do is just give us some nice rounded buttons and you guys I'm going to talk through if this is confusing I'm going to talk through all this and by the way if you see that little pop-up on the screen that is a very nice plug-in I believe it's called Tailwind intellisense now if you're new to Tailwind I recommend you download it for vs code it allows us to um basically just get a preview of what the Tailwind is so let's go ahead and we're done with that index.css file and we can go ahead and close this by the way you guys if you have a lot of questions about Tailwind you can just uh search in here and it has a very very nice documentation it's really easy to figure out how to do a lot of things in there okay so let's start off by let's let's go ahead and start up our react server I'm just going to type npm start and what that's going to do is just spin up our developments over here yes I already have my demo here running so um what we want to do is I should just give our nice react app here we're getting some errors because we excuse me we delete excuse me we deleted a few files that um so what we're going to do is go ahead and take care of those errors so in the app.js here let's go inside of this div here we're going to delete those we can get rid of that class and it's trying to import some things that we've already deleted so we'll go ahead and remove those as well and then let's look in our index.js it's trying to import the report web vitals that we deleted so we can remove that there and that should clear up any of the um any of our errors okay so and you guys if you've already started the server um and you like create a new tab here to install Tailwind make sure you restart your server once you install Tailwind you have to restart your server so be sure to do that as well okay you guys so what we're going to start off with let's go ahead since our background is kind of our navbar background is clear uh with white text it'd be hard to see if we started off with that so let's go ahead and start off with this background image here fully responsive background image which is called a hero and then next we'll come back and do our nav bar okay so let's go ahead and start off with our hero Banner here so I'm going to use um I'm going to use like pixels and unsplash for all of the images it's really really great stock free stock images so um so yeah feel free to grab any of those Okay so let's move this down just a bit here now let's go ahead and create a in our source folder here what I want to do is create a new folder we'll call this components some courses where all of our components are going to live we can close that button app.js for now so inside here we're going to create a new component and I'm going to call this hero.jsx and let's go ahead and generate our functional component here with rafce no more class-based components you guys okay so inside this Hero Let's go ahead and in our app.js we'll go ahead and import this right so we're going to import our our hero Banner so we can actually view it inside of our application so what we're going to do is import we'll say hero from and we're looking into our components folder slash hero.jsx just like so okay and then we can go ahead and use our hero in there so let's go ahead and save and if we look at our application we can now see that our hero component our hero component is now showing in here with our text of hero okay so let's go ahead and start writing some code and build out our hero background Okay so let's go in here and first what we want to do is let's go ahead and add our image in here so I'm going to say image here now for a source I'm just going to go ahead and paste in this image here like I said I got this from pixels you can grab one from unsplash doesn't really matter I'll give a little slash in there doesn't really matter um just grab you can grab whatever you'd like here so what I want to do so for this outer div we wanted this this um this image to take up the full width and height of the screen no matter no matter how no matter the size of the screen we won't take up the full width and full height of the screen so what I want to say here I'm going to say class class name just like so then we can just write our Tailwind in here so I want to say I have a width of a hundred percent how we do that in Tailwind we say w Dash full and you as you can see this is that Tailwind intellisense you guys actually gives us a preview of the tailwind and kind of shows you off to decide what that is so w Dash full gives us a width of 100 and then what we want to say is H dash screen and that is the same as saying uh width or height excuse me 100 viewport Heights okay so that's what we want there so now we need to give some images to our so this is the parent container now for our image we need to give some some class names to that so it takes up the full width and height of that parent diff so what I'm going to say here I'm going to say top and we're going to position this here so we're going to say top zero I'm going to say left 0 width full H screen then what we're going to say is object cover and that means object fit cover so what that does is makes the image the full width and height of the screen no matter the dimensions as you can see so no matter the dimensions of this it's going to be always be the full width and the whole height of the screen and it scales perfectly so there we have it you guys so next I want to have a um I might add just a little bit of an overlay as you can see it's just a slight slight overlay and let's go ahead and do that now here so I'm going to go ahead and give a space underneath here so for our overlay here let's go ahead we're going to put this just below the image okay it's just going to be a self-closing gif so let's go ahead and say div here and like I said it can be self-closing so we can just do that right there now inside of this div we're going to give it a class name and all this is going to be is just a kind of a dark or light black overlay so what we can say is BG black just like that and I'm going to go ahead and give this a class of absolute I'm going to say top 0 left zero width full H screen so it's taking up the entire parent container and right now it's just going to be black so I don't want it to be black completely because we're gonna be able to see our image so what we can do is kind of add a um if we put a slash after the color we can add in a as you see here kind of like an alpha so what we can say is uh let's say 30 I should give it a nice little tint so the darker you go the more the more it covers up so I'm going to leave this at 30 just like so perfect okay so next what I want to do let's con we want to create a kind of a container for our text there so let's go ahead and do that right now so for our text here we'll go ahead and close that down so hopefully that gives you um you can see that a little bit better so for our text here we want to position this absolutely as well so I'm going to create a div and let's go ahead and I'm going to go ahead and add in all of uh my HTML in here at first so I'm gonna create a div in there now inside this div we're going to have another div and that's going to contain a P tag that's going to say all inclusive just like that now just below RP tag we're going to have an H1 it's going to say private beaches we'll say beaches and getaways there we go and then underneath that we're gonna have a p-tag and I'll just say I'll just say lorem say lorem 20 to generate some text there I think that'll be good and you can add that was a little a quick way a shortcut to add text so if you just want some alarm text you can say lorem and then the uh a number after it whatever number you type will automatically generate that amount of words and I'm kind of this lorem text here so underneath that let's create a button and for our button we'll just say reserve Reserve now okay perfect so we can't see that yet kind of goes right below our image but we're going to position this absolutely so it just sits right here on top of our image so let's go down we're going to find this this parent div that's just below our uh just below our overlay okay now for this div what we're going to say here we're going to say let's give it a class name and like I said we want this to be positioned absolute I'm going to say top zero I'm going to say width full so width 100 percent H full so height of 100 and I want this to display as Flex you can see it on the screen here so we're going to display as Flex I'm gonna say Flex column and then what I want to say is justify justify Center and then text white and you guys we're gonna be adding in some media queries in here as well as until when I'm gonna show you how to do it it's very very easy I love adding all of that in here so and as you can see you guys where we I'm pressing the command B to toggle the sidebar as we entered in our Global styling and you can add in as much Global styling as you want for you know your H tags or your header tags of course your buttons your inputs uh whatever you want to add I was just kind of giving you an example how we can add Global Styles here and as you can see our button is already styled that way and I just do like just like I said bass styling so that way if you want to make your button uh dark or light or with a transparent background you can do so as well so okay so back to our hero there so we have this text white that's perfect right there so next let's add some media queries here to this div right here and um we'll have that positioned how we want it so let's go ahead and give a class name here I want to say anything above medium okay and tell when we're doing a mobile first approach so what we can say is anything above this medium break point I want it to be left 10 now you can't just write 10 here because that's not a class of Tailwind but what you can do if you want to give some custom values on Tailwind you can just open up some curly brackets and then you can add in 10 20 or pixels any type of custom values inside of your brackets with tailwind and let's go ahead and give this a Max width kind of a container okay so we'll say a Max width and again I'm using my brackets so I can add in some custom values I'm going to say 1100 pixels and then I'm gonna say margin Auto again I want to position this absolute and p-4 is a padding of one Rim so and as you can see if we hover on that we get that one brim so Tailwind counts in multiples of four so if you said p dash two that would be 0.5 Ram which is eight pixels or you could say p dash eight would actually be two rim and it counts You Can Count everything up as high as you want so let's go ahead and open this up and as you can see we have this a nice margin Auto it's kind of position nice there in the middle of the screen and as we shrink down we should hit our our media queries here where's our breakpoint looks like that was it there boom there's our break or there's our break point right there so as you can see everything is working properly so next for our P tag I don't think we need to style that let's go ahead and install our H1s and again you could be doing this in the index.css giving some Global Styles taller header tags but I'm just kind of showing you how to do everything here so let's just say font bold and obviously that makes the font bold there and what we can write I wanted to increase the size of the text so I'm going to say text I'm going to say 5xl so you can say text XL text 2XL 3XL 4XL I'm going to say 5xl and then anything above the medium break point I want to say text 7 XL we're not going to see a change right now because we're not above the median breakpoint I'm going to say drop shadow 2XL and that's going to give a little um look at all that do you guys you get all this styling just by writing drop shadow 2XL that's why I love Tailwind Okay so and this is how the media queries work again and you guys you can change the the SM for small I believe a 640 yes as we hover here there's that until when intellisense again you see 768 for pixels if you go into the I think it is the tailwind.config file you can actually change the break points in here if you want but you know this is fine I'm just if you really want to get into it you can actually change the breakpoint so right now we're at text 5xl we should bump it up there's our break point right there you can see it jumps to 7xl so there we have it you guys now next uh for this P tag let's go ahead and give some class to that and what we're going to say I want to say Max width of I'm going to give a custom value here 600 pixels drop shadow we'll say 2XL py2 is going to be padding of just four RAM on the top and bottom and text XL to just beef it up a little bit there okay and then next let's go down to our button and you guys we already have you know some some Global styling on our button but that's why I like to give just like the bass uh bass Global styling and then I can go in and add um custom styles on top of this button okay so what I want to say for this particular button I want to say BG white and this just makes it easier you guys to uh to customize all your buttons so text black is going to make the text black and we already have it rounded so that's all we need to do now um let me see if I have any other see how that's looking yeah it looks good there so that's it you guys perfect right there um that's looking good perfect you guys so there you have it you guys that is the styling for our hero background okay and everything it is completely fluid and look at that you guys completely mobile responsive that looks great that's how easy it is to write CSS with tailwind and within react okay so next what I want to do let's go ahead and let's go ahead and go into our components here and let's create our nav bar next we're going to create this fully responsive uh nav bar in fact actually there's there's um we're not going to display any text this is just a full screen uh nav bar there so and like I said it shows up on full screen so we're going to be disabling the scroll notice I'm trying to scroll right now and I can't do that I'm going to show you how to disable that within uh within react and Tailwind okay so let's go in here next and create our new component our nav bar we're gonna do our nav bar now so we're gonna create a new component here I'm going to call it navbar.jsx okay raf-ce it's going to get our functional component here and let's just go ahead and import our nav bar here so we're going to a nav bar there we go and we can just copy that down sorry we'll just change this one up here so we'll say navbar navbar just like so okay so there you can see we have our navbar perfect so next let's go into our nav barcode here and we're going to be using a react icon here this is the Arcane right here we're gonna get that from MPX or we're going to use that from react icons sorry so let's go ahead and um let's go ahead let's go ahead and just write out our code here so for and we're going to be using use state to manage the state of our navbar whether or not it's displaying on the screen or not so let's go ahead and write some code in here so we have an H1 okay and that's just going to be experiences and you can see I have our experiences there so next what we're going to have here so let's go we're gonna have our icon so let's just go yeah let's go ahead and install react icons so I'm going to look for react icons just like so react icons let's open this up a bit awesome awesome package I use this all the time so what we're going to be looking for if you just search menu these are all the different menu buttons you can see so really I have a ton of selection there so what we want to do here let's just go ahead and we need to close our server down what we're going to type we're going to say npmi react Dash icons things about correctly dash dash save okay and what that's going to do is just install the react icons package so you notice some of these are with AI some BS FC so I'm going to show you how we can install these let's go and start our server backup npm start so what we're going to use is hi menu alt 3 just like so okay and let's go ahead and import this I'm going to say import uh eight we're looking forward and put this in curly brackets Ai and menu alt 3 from were you looking for react Dash icons now we have to put whatever notice I said some start with hi some start with l i some with f a you have to import these on separate lines you can group them together with a comma there but if they have a different they start with different text there you have to group that in there as well so what we can say here um let's go ahead and let's give this a size property here and put this in some curly brackets I'm going to say a size of 25 okay so let's go ahead and start a server there so we can see our icon we should be able to see our icon up here to the right so there it is you guys we have that little three bars and the third bar is kind of a miniature one off to the side so we can go ahead and close the react icons you guys really really love that react uh package there so next what we want to do let's go ahead and create a uh a div here this is going to be a div for our nav okay and we're actually just going to hide this off the screen we'll come back to that in a minute we'll have an unordered list and for our list items I'm gonna say home then I'm going to copy this down a few times so the next one is going to be destinations then we're going to have a reservations and these actually aren't going to be hooked up to anything amenities just like that and then rooms okay and that's all the that's all the HTML that we're going to be using or jsx whatever you want to say that's all the jsex we're going to be using so let's go ahead and style this thing okay so what I want this we want this bar to so it's going to kind of be an overlay right and that's why we did the hero Banner first because this is white text and you wouldn't be able to see it if we didn't do it this way so let's go ahead and give this a class so we're on the parent div here so I'm going to give it a class name and I want this displayed absolute I'm going to say with full I want it to display as Flex now you can see it there Flex I'm going to say justify justify between we'll say p dash four to give it a little bit of padding and then items Center okay there we have it there perfect so um and we're going to hide this off the screen remember don't worry about that so let's go ahead and Target this H1 give the class name I'm going to say text white I want to say font bold text to XL Z Dash let's say z-20 and this is just the Z index so perfect that's what we want right there and let's target our uh our react icon next I'm going to say class name and I'm going to say Z 20 text white and we'll say cursor cursor pointer so whenever we hover it we'll get the little hand there okay perfect so next what I want to Target let's go down here let's do our let's do our menu next so let's go ahead and display this thing let's display this off the screen so I'm gonna say class name here or you know what let's go ahead and display on the screen so this is what it's going to look like whenever our we're going to add in some state in here but let's go ahead and style our our menus how it's going to look basically just like that right there okay so what we're going to say here we're going to position this as fixed okay and I want to say text Gray 300 I'm going to say left 0 top 0 and we can give these Dimensions there because it is fixed we'll say width full a height of screen which is 100 or 100 viewport Heights I'm gonna say BG black okay then I'm going to give it an alpha of 90. there we go so you can kind of still see that in fact if you want to go a little bit lighter you can I'm just going to leave it as 90 for now PX for padding on the x-axis of four which is one REM we'll say py7 Flex column there we go and I'm going to say Z dash 10 to give it a z index and so you can as you can see when we change that Z index but this is still on top but we don't want that so all we have to do is again raise the Z index of our nav bar and and that's what we need to do there okay so perfect that's what we want there you guys and again if you didn't add this Z index same with our menu as you can see if you didn't add the Z index here above the Z index of this black overlay then you wouldn't be able to see that and the same goes for this H1 as well again if you take that away then as you can see it's going to be behind our nav bar or behind our mobile mobile viewing here so now let's go ahead and style our H1 which is all our text here because we want that display in the middle of the screen so let's go ahead and give this a class name and we want to display a flex I'm going to say Flex column and then I wanted it to display is fixed and I'm going to say text gray 300 I'm going to say left 0 top 0 then let's say width full because we're going to display right in the middle of the screen we'll say h screen and then um or sorry take this away there at six we just need let's get rid of all this here sorry I'm going to say width full H4 there item Center and justify Center so we want this to be in the middle of the screen sorry about that you guys so with justify Center item Center we now have it in the middle of the screen now for our list items and again you guys you can put this inside of your Global styling inside the index.css if you want but you know this is a very small application so there's not really much need to do that so I'm going to go ahead and add stylus here and all I did you guys was hold down the option button that allows us to type on multiple lines at the same time so kind of neat little trick there so let's say a font bold I'm going to give this text of 3XL and I'm gonna say padding of eight which is just two RAM on the left and right so that is it you guys right there perfect and that is our nav bar and now um we can't uh we can't toggle it yet but let's go ahead and add that in there right now with some state so with the U State hook we're gonna be able to toggle the state of our nav bar so we need to import use State here at the top and what we're going to do we're going to add our state in um just below our navbar component here okay so let's go ahead and we'll say right here what we can say is const now you can use whatever values you want I'm just going to say nav and set nav okay and is equal to use State and by default I just want to set this as false okay now um we're going to use ternary operators in here on on our diff to basically display whether or not our navbar is to be shown or not so let's go ahead and for this div right here I'm going to go ahead and copy all these Styles here okay so I'm going to go ahead and cut that out and instead of the quotes there what we're going to use are some curly brackets and actually we can write a ternary operator within here so what we can say if nav is true display this use this CSS else we're going to add this CSS this Tailwind so if the nav is true what I want to say we want to display this and let's give you a scenario because we don't have any other values or we want to display this over here so right now our our menu is off the screen so if the nav is true which it is actually set to false right now if it's set to true then we want to display absolute we'll say top zero and as you can see it's already on the screen top zero will say h screen and we'll say left we're going to hide it off the screen we use our brackets here at negative 100 so it's completely off screen and let's give some we're gonna say ease in uh duration five whoops duration 500 it gives me a nice little transition transition excuse me and we'll just do that right there so let's go ahead and save that so it gets nice and formatted and let's see how this works here we so we need to add an on click event here for our navbar function there so but as you can see right now our nav is currently set to false and if nav is true it's going to display the set of styles right here and if the nav is false or if it's true display this else display this right here so if if you can see if we change this to true we should be able to see our navbar is now on the screen but by default we want it to display as as false right so let's go ahead and add a function here to handle the state of our navbar okay so we'll just do that right below our our state there so what we can say is const you can call this whatever you want it makes sense to call handle nav and we'll just oops we'll just make this an arrow function here now inside here what we can do is just set the nav to its opposite state so what we can just say is just give it an exclamation mark and right now instead of just if you set this to true then every time you click the button it would just set to true so what we can say just set nav and what that's going to do is just set it to its opposite state now we need to add an on click event to this to this button here and that way whenever we click it actually runs our function so we can just add that in right here we'll say on click and again use camel case in um using camel case here and and react okay so on click we want to run this handle nav function okay so now whenever we click this it should toggle our navbar there we go so there you have it you guys everything is working properly now um let's add in some more duration here because it slides off kind of nice but it just kind of appears on the screen so let's add in we'll say ease in duration of 300 let's see how that works and let's see boom it just slides in so there you have you guys there is our mobile nav bar perfect perfect so as you can see we can still kind of scroll a little bit and um we don't want to be able to scroll even though there's no components down here we don't want to be able to scroll even that right there if we had more components below this like we do here then we'd be able to scroll we don't want that so what we can do um matter of fact I might just uh yeah let's go and handle that right now I was going to kind of show you what it could happen uh when we come back to it but let's just go and handle that right now so for our inside of our navbar here um what we want to say inside of our nav bar inside of our inside of our function so what we're all we're going to do is just change the CSS overflow property okay so what we're going to say is if nav is not its current value what we can say is document and this is how we can access the body in our in our JavaScript here so we'll say document.body.style overflow and that's what that's all we're we're looking for we're going to set it to Hidden okay else then we'll just say document.body.style overflow we want to set this to scroll okay there we go so now as you can see let's go ahead if this is active as you can see I'm trying to scroll right now but we're not getting anything and again if we just comment that out I should you can see um we should be able to scroll a little bit let's give it a little refresh show me how to scroll not very much but now you can see it still moves Okay so coming that back in and now if we give it a refresh whenever this is we can still move it whenever this is active we cannot move it at all okay all right so there you have you guys there is our nav bar we have this scrolling property set up nice react icons everything is looking beautiful so next what we want to do let's go ahead and add in this little section right here nice little grid section there so let's go ahead and do that right now so we're going to import see let's create a let's call this offers here so I'm going to toggle this side bar with command B I'm on a Mac again so a new file and I'm going to call this offers.jsx and RAF CE is going to get our functional component now let's go ahead and I'm going to import offers from and again that's in the components folder offers.jsx there we go and we're just going to import offers here we go okay so next let's go into our offers here and as you can see there's our component there at the bottom there it is okay so what we want to have here we're going to have a P tag and this one's going to say booking incentives and I'm just going to copy this down a couple times we'll say competitive rates and we'll say book with well say book with flexibility and you could just say uppercase if you want to not you know add in some selling that way that's fine too trip insurance so there you can see yeah there we have it down there so let's go ahead and style this it's gonna be really really simple we just want to have that bold um it's gonna be a spice Flex as well so let's go ahead and what we can say I'm gonna say class name and this is gonna we're gonna give this a container um we're gonna give this a container because right now it should be kind of off the screen and we're going to give that so let's go ahead and say Max width of you can again we're gonna use our brackets here so our custom values I'm gonna say 900 pixels margin Auto and we'll say uh p x 4 so padding on the x-axis of one rim and then we'll say padding on the y-axis of uh whoops what happened there go back to here depending on the y-axis sorry of 12 which is um just three Rim because again it goes in multiples of four and if we hover we can see that so I must say Flex I won't say Flex wrap and then justify between so there you have it you guys as we opened up we can do that as well and again if you want to look at this on an actual true mobile device we can just say there it is looking like on an iPhone XR again hey look at that nav bar looking good you guys smash like button if you feel like you're getting some value out of this and there we have our values on there so perfect perfect so I'm just going to close that now let's go ahead and give our P tags just a little bit of styling so I'm going to hold down this option button again on a Mac so we can type multiple places here we'll give it a class name and let's say text large as you can see that's 1.125 RM or 18 pixels font bold I'm going to say text Gray 700 and go ahead and save there you have it guys fully responsive there perfect and it was within our 900 um pixel container there that we did okay all right you guys so next next what we want to do let's add our we'll do this component next using this grid masonry layout very very nice I love the grid layouts awesome to use so let's do that right here next I'm going to close this nav bar hero close all this stuff that we're not going to be needing and we'll say was this plan we'll just do this plan your next trip we'll call that plan so let's go ahead and open this up new component here you guys we'll say plan Dot jsx rafce and you know let's go ahead and import this we'll say plan just like so and we want to import plan from components plan.jsx okay so there you see our plan down there perfect so for our plan it's going to be pretty fun like I said I love using the grid layout super super awesome so let's go ahead and I'm going to be using some unsplash images here um I love unsplash I love pixels really really great to use they're really really great to use the all their free stock images so okay so what we want to do here I'm going to have let's see a div here that we're gonna have another div and Insider div we're going to have see these five we're gonna have these five images okay so and then we're gonna have a right side so we're gonna have I'm gonna say image give it a little slash here so rack doesn't give us any issues there and I'm going to paste that in there and I'm just going to copy this down you guys so two three four and five so now we have our five images and I'm gonna go ahead and let's see here I'm gonna go ahead and add in these make sure they're different images and again if you want to go to pixels if you want to go to unsplash feel free to grab images that you think are are cool or any images that you like these are just the ones I picked out by the way you guys smash the like button if you feel like you're getting some value out of that much appreciated and we'll paste this in here which and let's see here let's say this is going to be our fourth image actually I'm going to place that in here so we are our third and our this is going to be the fourth image next here and we'll do the last image so you can see these off to the bottom as you can see we're getting all different images in there and you guys the the sizing of these images is not going to matter I'm going to show you with CSS with Tailwind actually how we're going to actually resize these images so it doesn't matter if they're if they're landscape or vertical does not matter so now we have all different images in here you see guys so let's go ahead and let's go ahead and style this thing so this is actually the left side in fact if we open this up it's going to have we're using grid here so this is the left side right there so next we're going to have the HTML there on the right so let's go ahead and let's go ahead and add that in next here so just below that div and we'll just even add in a comment here we'll say left side just like that and we can say right side just to kind of hopefully make that a little bit easier to follow along so we'll have a div over here that we're going to have an H3 and we'll just say plan your next trip there we go and let's give this a P tag we'll say we'll say lorem 10. there you go so I have some text in there and then below this P tag we're going to give it another P tag we'll say Lauren we'll say lower m30 let's go ahead and save and below that P tag we're going to have one more div and this is going to hold our buttons so we'll have a button here and we'll say learn more and we'll just have another button here that says it says book your trip there you go okay so they're all our images that we're going to style then yeah as you can see our buttons of course are already have those Baseline Styles and again you notice that we use that H3 there and it just looks like a regular P tag that is what Tailwind does you guys it gives you these Baseline styles so if you're wondering why all of your header tags um look like just P tags that is the reason there okay so next what we want to do let's go ahead and give a Max width here for our div so what we're going to say whoops not callback we'll say last class name so what we're going to say is Max width and we'll say 1100 we'll say 1400 we'll say 1400 pixels there we'll say margin Auto py of 16 so padding on the y-axis top and bottom then PX4 and we want this to display as grid then anything we're going to use a lot of media queries in here anything above the large break point here which I believe is 10 24. again you can change these in your um if you want to in your inner Tailwind file so anything above the large break point we want to display is grid columns two so just two columns and then we can just give a gap of four so a gap of one REM so if we open this up the images should be on one side and our text should be on the other and we have we have our nice container there we go there we have it you guys perfect so as you can see that is what we want there so next let's go ahead and do let's go ahead and add in the grid section this masonry grid okay and then we'll do the text so for our images here what we want these to we're going to use grid so let's just say class name display grid we'll say grid columns tubes because we want two column and then I'm going to use six rows so as you can see we have our two columns there and I'm going to use six rows for our grid so we'll say grid rows dash six and I want a height for this I'm going to say height um I'm gonna use a custom value I want to say 80 viewport Heights okay so there we have it you guys those are our images now we're going to go ahead and add Class A Class name to each of these images so for and they're all going to have um so they're all going to have a few of the same classes and then we're just going to have them span different areas so again holding down the the option button so we can add multiple type on multiple lines so first off they're all going to be object cover they're all going to have a width of full a height of full and they're all going to have a padding of two which is just a four or sorry eight pixels there so there you have it you guys now we're going to come in here and stop give each image a span to kind of span across um our grid section here okay so and when it's when it's on a smaller smaller screen it's going to look like this right there so let's go ahead and give this some spans so for our first one okay so for our first one here I'm going to say row span three there it goes right there and for the next one I wanted to say row span 2. now there you have it there see as you can see it's expanding across different rows and this one I want to say row span 2 as well and then this second to last one I'm going to say row span 3 and this very last one I'm going to say row span 2. so there you have it you guys look at that that's how easy it is to use a grid masonry layout and Tailwind CSS so that looks really really great very very nice and you can add in some more media queries if you want but I think that is looking pretty good right there and as you can see the images are fluid there so they're everything looks is displaying perfectly so next let's style this right side of the screen whenever we're on those larger devices then again mobile it just kind of stacks up so we have this label down here at the right side so let's go ahead and give this class name here and for this here I'm going to displace Flex Flex column and we'll say width or sorry height 100 so H full I want to say justify justify Center okay and again this H3 will will tackle that next um like I said I didn't add any Global styling for our header tags which would be probably a good idea to do especially on larger projects but what I want to say is text 5xl then anything above the medium break point I want it to be text 6xl and let's just go ahead and make it flat and bold so now again whenever we hit that Medium breakpoint believe it's 768 it should bump up a little bit so hey there you go you can see it increases a little bit there it is perfect perfect okay so next are um let's grab our P tags here so I'm going to give this a class name I want this to be text to Excel and we'll say py of six so there it is right there perfect perfect and this P tag we'll give it a class name as well we'll say we'll just say padding bottom of six to give a little bit of padding below our buttons and again our buttons already have some baseline Styles so let's just go ahead and add on a little bit more so for this one here for this top button or the button on the left what we'll say is border border black there it is and then we'll say margin right of four then let's give it a hover effect and we can just add a hover class there so hover then we're going to use the colon we'll say shadow XL so let's see here whenever we hover you can actually see a little Shadow that's how easy it is to do that with Tailwind you guys so this next one let's do the same we'll say BG black and this is why I like to give just kind of the Baseline Styles and then kind of style them up a little bit less whoops so writing border black this is why I like to give the um the Baseline Styles there and then just kind of add in the custom cells or the extra Styles here so shadow Excel so there it is you guys so look at that hover effect on both of them and you can change this to medium XL you can make the the Shadows more drastic if you'd like however you'd want to do it so there you have it you guys let's open this up on full screen everything is fully responsive look at that you guys smash the like button if you feel like you're getting some value out of this notice we can't scroll with our nav bar perfect everything is looking good so anyway guys if you want to take this make this nav bar you know like sticky so it kind of stays at the top feel free to do that as well so all right you guys so next what are we doing here next we have this again a grid layout here with this kind of rooms component as we can say to get some nice interior views of the rooms kind of cool how we give this light blue uh background that kind of like overlays there so let's go ahead and do that one next I'm going to shrink that down so command B let's toggle that sidebar so next component what I'm going to call this is rooms.jsx Raf CES get our functional component in here and again we're just going to put this um below our plans here so we'll say we'll say rooms just like that and we'll import rooms from our components folder slash room dot rooms.jsx okay so there we have our rooms you can see down there perfect now let's go in and add in our add in some code here we'll add in all our jsx okay so and again we're going to be using all these uh unsplash unsplash images again feel free to use whatever you'd like to whatever whatever you'd like to use but I like to use unsplash they have a lot of really great stock images that's where I get most of my images so we have an outer div there and then we're going to have another div in here then we're going to have an H3 I'm going to say fine interior rooms just like that and then let's add a P tag um we'll say we'll say lorem 15. there we go so that we have our alarm text in there so just below this div we're going to have another div here and this is going to be a grid this is going to be our grid in here and this is where we're going to just go into space there so it's easier to read this is where all of our images are going to be and we're just having um I think we're just going to do three images yeah just those three images so let's go ahead and say image give this an ALT right there and I'm going to copy this down a couple times so in here I'm just going to paste in this first one there and again feel free to use whatever images you would like to use I'm going to paste this in here as well and then for our final image here okay so there we have it there's our our three images Okay so let's go ahead and give that a save now we're actually done with our with our HTML portion here our other jsx portion so let's go ahead and style this thing here and that's kind of how I like to do it you guys sometimes I write in all the facts when I'm building it out I usually just write in The Styling as I go but I feel like that could be a little bit harder to follow along for you guys so sometimes it's easier to get the HTML portion on here and then then style it so let's give it a class name here this parent div here and again we want a um max width kind of using our container we'll say 1400 pixels you guys you can actually put your container into like a component or there's really many different ways to do this so I'm gonna give this a height of 500 pixels again custom values with our brackets here I'm going to say BG blue 100 MX Auto margin y-axis of 20. padding on the top of 16. now we're going to add in some break points here so anything above the large large break point I'm going to say margin bottom of 20 percent anything above the medium break point we'll say margin bottom 35 percent and then PX4 padding on the x-axis four but this is two displays grid anything above large we'll say grid columns 3 then a gap of Gap of four so let's go ahead and save that so as you can see we already have this displaying Stacks up there we go perfect so just with that line of code there are you can see our blue background there everything looks good okay so next what we're going to grab is this next div here um and this div is just kind of container for this this header tag and this this P tag there so what we're going to say is give this a class name and we want to say anything above the large break point top we'll say top 20 there we go I want this to display is a relative anything above the large breakpoint also we want to say column span one and then we'll just take by default column span 2. so a minimum width for or sorry minimum excuse me mobile first approach with Tailwind so like I said column span 2 is going to apply on the minimum width and then anything as we add um break points there are media queries that will come next so there we have it you guys as we shrink down perfect perfect there you have it perfect all right so next let's go in and again we'll make this header tag give this H tag we'll say see text to excel font bold looks good there for this for this P tag we'll say padding top four there we go okay now for our images here again we're going to be using grid for this so let's give this a class enabled display grid grid columns 2 column span 2 and then we'll say Gap two there it is right there you guys perfect now we want this the image on the bottom here to display the full whoops the full height over there on the right so that looks good there so for this here for our images we'll say let's give them all class names here I'm all about saving time there so class name they're all going to be object cover not contain object cover width full height full now for this last one or we can just say we'll just do the second one here we'll just say we'll put that at the beginning here we'll say row span two and there you have it you guys look at that that is awesome right there so let's make sure this thing is displaying correctly on um all our media queries hit well hey there you go look at that awesome you guys smash the like button if you feel like you're getting this value out of this everything is looking beautiful there you go and everything is mobile responsive as it shrinks down Perfect all right you guys all right so next let's move on to our next component here which is this slider how about that so look at that slider and again it is going to be responsive there you go and these buttons you can click on the buttons as well and Skip to that corresponding slide and like I said as you add in more images it will add in more buttons automatically because we're just mapping through everything so let's do this image slider right now okay so this is going to be fun so command B let's get this sidebar open and let's get a new component here and I'm going to call this one we'll say image slider.jsx okay so our afce is going to generate our functional component here and okay let's go ahead and close this rooms.jsx this plan.j6 we don't need that and let's import this here so we'll say import uh it's going to be our image slider from components dot jsx okay and we'll put that in there right there like so perfect okay so let's close that and if we scroll down we can see our little image slider component down there at the bottom okay so let's go ahead and let's go ahead and what I'm going to do is actually add in our slides here so let's go ahead and paste that in here or I'm going to paste it in here um we'll say const slides and what it is is just an array an array of objects there so as you can see each each object in our array has a URL and then also a title as well so and these are just random images from from unsplash okay so feel free to to use any of them that you'd like and I'm going to show you how we can actually add more images and she's gonna you're gonna build a loop through those as well so let's go ahead and jump down here to the actual jsx code here so inside this image this image slider right here what we're going to want here let's go ahead and give this a class name okay and we'll say Max width of we'll say 1400 pixels and there we go 1400 pixels there we go and we'll give this a height of 500 . what is going on a height of 580 pixels and we'll say width full margin Auto py padding on the y axis of 16 then PX of four and we want this to be position of of relative there okay so next this is going to be a diff here and this is actually our image okay so this is how we're going to display our images on the screen so for this image it's just going to be an empty div but we're just going to give it a style okay and we're using two curly brackets and what we're going to say is background image okay in our background image we're going to use back ticks and it's going to be URL and then we're going to use a template literal okay so we already have our slides up here so for our slides here what we're going to say is I'm going to say slides and then what we're going to say is for now I'll just say grab the first first object in either in the array and we can't see anything yet because it's grabbing the object and we actually need the object URL so what we can say is just object dot URL and then we need to add in some class names as well okay so what we'll say let's give this a class name and we'll say with full and once we give it the width and the height we'll say rounded to XL CBG Center BG dash cover and we'll give it a transition of 500. so let's go ahead and save that now yes there it is you can see your image now it's hard coded in just the um the first object of our of our array there which is lobster so if we change this to one we should see the sushi we change it to two we'll see the pasta and we change it to three we'll see we'll see the salmon there so I'm just going to change it back to one and what we're going to do we're actually going to make this to where we can cycle through the the index the current index of of our state okay so let's go ahead and let's go ahead and finish up the jsx here and so below this let's add in some arrows here so I'm going to have a we'll say a left Arrow copy this down just a few just a few notes for you guys and we'll say we'll say a right arrow now for this div here what I'm going to have is we'll say BS Chevron compact left just like so and we're going to get an error there because we actually need to import this from react icons so I'm going to say import from react Dash icons and this one's going to be BS now we're going to do the same thing but this one's going to be instead of left it's going to be a right okay whoops it's going to be right and let's go back back down here so if we scroll down you can see there is our left one so let's just copy this and instead of the left we want this one to be right okay and whoops need to make that capitalized now let's add a parent container here or a class name here and actually I'm going to add these These are basically going to be the same with the small exception of where they're positioned so let's just give this a class name here we want these to be positioned absolute one at the top of we use our brackets here 50 percent we're going to say translate X 0 translate on the y-axis of we'll say negative 50 percent I'm going to say left 5 text 2XL rounded full p dash 2 for a padding of two and then we'll say BG black let me give it an alpha of 20. text white and we'll say cursor cursor pointer okay there we go okay so there we have it now see they're both positioned on the left we just have to change this over to the right now that one will be positioned over there so I'm going to give a size property to both of these here I'm going to say size and let's just say 30. there we go beef them up a little bit now I don't actually want this opacity to show I want the arrow to show but not this black opacity until I hover on the actual the parent the parent div there that this parent image so how do we do that what we're going to say here we actually need to add a um a group class here so we're going to add that just right here after relative we'll say group then what we can say on our where's our our black here right here on our black with our Alpha 20. I'm going to type in on both lines here what we'll say is we want this to have a hover selector first so we'll say hover but we'll say because right now if we hover on it specifically it shows up but I actually want it to show up whenever we hover on the parent element so what we can say here is all we have to say is group for our group up there so we'll just say group just like that group Dash hover so now whenever we hover over this image as you can see we have this nice nice effect there perfect so they don't actually work yet so let's go ahead and and set this up so we can actually um cycle through and like Loop through our images and actually make this an image slider so let's come up here we'll go just below this array here so we need to set a a way to check our our current index of our of our images okay so what we're going to say is we'll say const we'll say current index I need to set the current index we'll just have this equal to use state of Zero by default oh we need to import this you stay hooked so we'll say use State just like that okay where were we here we are so we need a way to go to a previous slide and then as well we want to jump through to the next slide so what we'll say we'll say const slide here just going to be an arrow function not taking in any not taking in any um any any arguments there and this one instead of previous this one's going to be next slide now let's go ahead and hook up our buttons so on our on our react icons there I'm going to give an on click to this one and whenever we click this one here what we want to run here is yes the um is the previous slide and then the next we'll do the next slide as well so we'll just say previous slide then again on this one on click we want this one to go to the next slide so let's go ahead and create we already created these functions but let's actually put our logic in here so to go to the preview slide we need to basically find the current index so we'll say const is first slide and that's going to be equal to the current index if it is equal to zero then that's going to be the first slide then we'll say const new index equaled it was just going to be a ternary operator here so we'll say is first slide if this is true then we'll say slides.length minus one else current index minus one and then we need to set the current index to this new index that we're determining so let's go ahead and save that so this should go to the previous slide so let's do this um oh it's not working here and that's because so right now we have it hard coded in here this slides it's just set to the the first the first object in our array here so instead of having it hard coded we actually want to jump to the current index so what we can say is just current current index okay so current index is the salmon which is this one right here the last one we should be able to go to the previous one which is the pasta then the sushi and the lobster and it should start back over to the salmon hey there we go so let's just do the same thing for our for our next slide so let's find our next slide here and what we'll say we'll say here const if it is the last if it's the last slide how do we go to the basically to to the first slide right so we'll say current the last slide is current index equal to slags.length minus one so what we'll say is const new index equal to is last slide this is true then we'll say current index plus one and then we need to set the current index to the new index okay so let's see here this should go to this is our Sushi it should then navigate to the pasta there we go and then to the salmon and then this should start over at the current index of the lobster perfect okay so there we have it you guys now it'd be nice to have some some buttons down there some some icons so we can actually jump through to that specific index so let's go ahead and add that in add that in right now so what we're going to have here let's go ahead and um so let's see here let's go ahead and add a function we'll have a go to slide function so we'll say const go to slide just like so and it's actually going to take in taking an argument here and we're just going to say slide index because that's what we want to pass through and we'll just set the current index to that specific index so we'll say Set current index to slide index just like so so we actually need we don't have any icons down there and we actually want to be able to map through however many objects are an array that's how many buttons or icons we need to display so let's just scroll down here so just below our uh our right button here let's give some room what we'll say here is let's create a div and let's see we'll say I'm going to give this a class we want this to display just below our image right here so what we'll say is flex we'll say top four justify Center then a py of 2G but a little bit of padding now what we want here let's say map through our slides dot map and then what we want to map through we'll say slide and also the slide index and then we want to render something out on the screen here and since we're rendering something out we're not going to be using curly brackets but we're going to be using parentheses and what we want to render out is this RX Dot filled icon so let's make sure we import that here so we'll say import and again it has to be on a new line since it's from a different a different package here we'll say react icons it's not BS but it's RX Okay so there were we down here so you can actually see our icons there hey there we go and um if we see as there are there are four icons now if we were just to let's just double this here I'm just going to copy it down so now we have eight we should then see since we're mapping through each object in our array you now see eight eight buttons but let's just move this back down there so that's kind of cool right but how do we make it to where whenever we click whenever we click on a on on that specific icon in the order it goes to that array so for example the first item in the array is the lobster if we click on that first button then I want to see the lobster image so what we're going to see here let's actually put this in a we'll put this in a div in here so we'll have a div here and I'm just going to move this move this on up right there and for this diff what we're going to say here I'm going to give it a class name and in here we'll say text 2XL kind of beef it up just a little bit we'll say cursor pointer that way whenever we hover on this we can actually see it there we go now let's add this well I did it right here so what we're going to add we need a key here um you don't have to but react strongly recommends that if you map through if you map through array whether it be objects or whatever it may be react strongly encourages you to set a keys so what we'll just say is key here and for our key we can just say we can just say slide index just like so now let's have it on click so whenever we click it'll go to that current slide index so we already have our go to slide function here and since we're mapping through whenever we click on this each key has a specific index so where we click on this it's just going to go with that that specific index of that key so what we'll say is on click and we can just add in this function right here we'll say whoops we'll just say go to slide and we'll say this slide pass in the slide index so let's go ahead and save that now the first object in our array is the lobster so if we click on this we should see our Lobster hey there we go then let's go back to the salmon which is the last one then we have the pasta which is number three and the sushi which is number two hey there we go so smash the like button you guys if you're getting some value out of this I hope you are so that concludes our image slider so now let's wrap this thing up and give this thing a footer and again let's just make sure this thing is fully responsive I don't want to have any surprises at the end so there you go look at that you guys looking pretty good so far leave me a comment down below if you like what we're doing here and all right there boom and you can make this bigger you guys if you want to add if you want to make it we Define the widths here the width or the height sorry um we said it was 580. if you want to make this you know a little bit bigger you can do that as well and everything we made the background images uh to cover and everything is is fully responsive as well so as you can see you might have to change if you see their overlap whenever we change there so you might have to to change that but we'll just leave that as is so 580 everything's looking good there okay perfect all right you guys so let's wrap this thing up with the footer okay so let's go create a new component here it was a component we'll say footer dot jsx okay so ref CE is going to generate our functional component now we're going to be using some react icons down here so I'm going to import a few I'm going to grab the fa Facebook an fa Instagram an f a Twitter and let's go ahead and import those from react icons fa and let's do this again we'll import TI plus TI social Pinterest from we'll say react icons slash TI okay so here we go so now we have access to all of our icons that we're going to be using and let's make sure we can import we'll say footer it will import footer from components footer.jsx okay there we go all right so next we have our footer down there put her footer perfect so next what we want to do we can close that so for our footer let's go ahead and let's see here so we're going to have a div a div here and inside this div it's going to be kind of our parent container this is this is the the parent container here and then what we're going to have is going to be displayed with grid and we're going to have a bunch of uh grids down here C4 and five probably five and this one's going to span across too so let's go ahead and do that now so this one um let's see here we'll say a div and then we're going to create another div here and I'm going to have an H6 here that says Solutions there we go then under here we're going to have an unordered list and here we'll have we'll say travel and I'm going to copy this down a few times here we'll have see booking we'll have flights and we'll have cruises and we'll say just ground just like that perfect now I'm going to copy this down let's see here underneath this div I'm going to create another div we'll have it on our list again with an H6 and this one's going to be support and then for our support we'll have a well actually I'm going to move this above our own order list then in here we'll have our list items and for our Port we'll say about or sorry we'll say this one's going to be pricing um you'll have a documentation documentation communication then we'll have a tours and a refunds there let's go ahead and save that perfect now let's just copy this down again and this one I'll just say company and for this here we'll have an about we'll have a Blog we'll have a jobs we'll have a press and we'll make one more the SAS part nerves perfect perfect all right you guys and let's just do one more so we can have four down there and we'll have so this last one will be um we'll say legal and then for our legal we want a what was that claims privacy feel free to skip through you guys or just copy this code I'll put a link to the GitHub down below policies and we'll say conditions there we go okay so and then let's have our our last div it's just going to be this little search box down there so we're going to put that right below this here create another div we'll have a P tag and it says subscribe to our newsletter there we go and then we'll have another P tag and we'll just say the latest deals articles and resources sent to your inbox weekly there we go okay okay and then let's just have a little form with an input in there so we'll add that form we'll say form and we don't need an action so I'm not actually going to submit anywhere we'll say input type of email there we go let's give it a placeholder placeholder is going to be we'll say enter email there we go all right all right and then just below the form or sorry just below the input we'll have a button and let's give this say subscribe let's see what we're doing down here hey there we go perfect you see we already have some baseline styles on there um so let's go ahead I'm going to give this button a few more Styles we'll say uh class name oh claims say class name we'll say p-2 margin bottom four rounded medium there we go perfect perfect let's change that looks good okay so underneath the form um let's just add in this little section down there and then we'll style everything okay so for this div down here let's create a we're going to create another div and then we'll have a P tag in here that says 2022 experiences LLC there we go we'll say all All Rights Reserved hey there we go okay and then let's have a div with our icons in there so I'm gonna create another div and we'll have our uh let's see our fa Facebook in there there we go we'll have a Instagram and we'll have a f a Twitter and then we'll have our fa or sorry this one's TI social Pinterest hey there we go okay you guys so let's go in looks good so let's just style this thing okay so let's start off at the very top here so with this parent diff we'll give it a class name and we'll give our see width of full it's going to take up the full width of the screen then we're gonna have a container within it so petting top of 24 we'll say BG gray 900 and the guys the colors on tail one goes from 100 to 900 doesn't go up to a thousand doesn't go to 50 it goes 100 this is the lightest of that color as you can very barely see 900 would be the darker of this color darkest so we'll say text whoops I'll say text Gray of 300 padding on the y-axis of two and then PX of 2 as well so there you go we have our little padding there so let's actually give a container so this kind of sits within there okay so let's do that next let's give this a class name I'm going to shrink that down a little bit so class name and we'll say Max width of 1400 pixels but there we go we'll say MX Auto we want this to be displayed as grid we'll say grid columns 2. anything We'll add some some media queries here okay so anything above the medium breakpoint because that's smaller screens we just want two columns so right now we have four five and six as you can see four and then this is containing two columns but as we strike shrink down it's just two columns so what we're saying and like I said tail one is a mobile first approach and the way that we write CSS so on this at the very base it's going to be two columns then anything above the medium break point is when we'll say grid Columns of six and we'll say border bottom of two say border gray 600 so we can see it py of eight and then we'll say PX4 okay so let's see what we're doing there so as you can see everything is broken down just like we want it there we go and our media queries are looking good perfect you guys perfect and there is you can see our uh our um container as well okay perfect all right you guys so let's move on here so for this day we actually don't need any classes here and um for our H6 I'm actually just going to type here on multiple lines again I'm just holding down this alt or sorry option button I'm on a uh I'm on a Mac here not sure what it'd be if you're on on-preon Windows sorry so let's go ahead and give these a class name here oops some class class name and what we're going to say is font bold uppercase and pt2 there we go perfect looking good and you also you have there's a capitalized keyword as well if you want to use that for for your CSS as well so perfect everything's looking good there and so next let's add these p1s here and again I guess I could have just uh add this base style of p y I'm not sure if I'm using I can't remember if I'm using any other list items in here so instead of adding a global styling now at the end of the project I can't remember what I have done so this would be a good a good way we could just say um inside of our Global selling you could just add in to a list item could have a class name of py1 and that would kind of save you the trouble of doing all of this which really wasn't wasn't that bad since we can type on multiple lines at the same time so next let's come down here for this div so we actually want this one to span across right now we're at we're at two so what we want to say if this div let's give it a class name and like I said we want it to say column span to there it goes perfect and then we'll say padding on the top of two REM which is eight then anything above medium we just want to say padding top two so there we go all right so this P tag here I'm going to give it a class name and for this P tag I'll say font bold I want it to be uppercase and then this text here we'll say class name let's just give it a little bit of a padding on the on the y-axis there ah perfect cool so next list out our form here so we'll say on our form let's give our form a class name and for our form we'll say Flex column anything above small will say Flex row okay so now whenever we boom that looks good as we're there's our break point right there okay looking good there now on our input we should probably give this input a class name as well and for our input we'll say width Dash full P two so we can get a little padding on our input Mr force or margin right and we'll say rounded MD margin on the bottom of 4. you go how about that looking good so far everything is looking great you guys so for the button we already styled the button so next is just this div here give it a class name here and we'll say Flex We want to spay Flex column here there we go and what we'll say is a Max width of let's say 1400 pixels we might go a little bit smaller I think we've been doing 1400 we'll say PX of 2 p y of 4. MX Auto we'll say justify justify between anything above small list displays of flicks row we'll say text Center then text Gray 500 okay okay there it goes looking good now for this P tag here let's just say give it a little bit of padding we'll say py4 there we go now for our icons we want these to display as Flex so we'll say last name we'll say Flex won't display justify between so we can kind of spread them out here we'll say anything above small let's give it a width of we'll say 300 because if we look at right now if we open it up that looks good right there that icon's super tiny let's give this a size property of all right that looks better there now if we open this up we want these to it looks good at small devices that looks good but let's change this to justify between now we'll say anything above small since we have our break points we'll say let's give it a 300 pixel padding top what's a peg top of four we'll say text to excel and there we go okay so there we go you guys that looks good so let's open this up let's shrink it down make sure everything adjusts properly and there we have our little break point for our for our mobile icons there you guys so let's go up here cycle through our images should go to the first image the last image we don't see the black opacity until we hover have some grid here some grid masonry layouts here if we open this up everything is fully responsive you guys all right smash that like button you guys that concludes today's build I hope you got some value out of this please leave me a comment if you did or if you need help with anything please leave me a comment down below and I'll try and get to it so thanks for watching you guys I'll see you on the next one

Channel: Code Commerce

Views: 12,513

Keywords:

Id: l5gP3a--NpA

Length: 85min 24sec (5124 seconds)

Published: Mon Dec 19 2022