Build A React JS Travel Website Using Tailwind CSS - Front End - Start to Finish

hey what's up guys in this video i'm going to show you how i built this front-end travel react js application styled with tailwind css so if you watch my channel you think this might be looking a little bit familiar yes i built it something very similar using just custom css in this video i'm gonna style the entire project with tailwind css i'm gonna show you how to install tailwind and configure it in your own react application so this is what we're gonna be building here we have a full screen full width video background with a nice uh nice little form embedded on the top we're using an overlay we're using react icons you see these icons up here in our custom nav bar let's scroll down everything is going to be 100 mobile responsive here we're using the grid properties and tailwind then down here some more you see our react icons and beautiful gradient buttons here the gradient colors we're using and a form here on the right boom nice selector drop down some date selectors boom but down here we are reusing a functional component here passing through some properties such as some background images here as well as some text that you see on the bottom left here and then down here this is a custom built slider carousel that i'm going to be showing how to build in custom javascript and be able to reuse this and react with the use state hook let's have a look here boom as you can see nice little slide here and then of course a nice footer at the bottom here so if you want to see how i build this using react and tailwind css then let's get started all right you guys here we are in vs code i'm going to go ahead and press the control back take button to open up my terminal here and let's go ahead and create our react application i'm going to be using yarn using npm that's fine too great react app and i'm going to call this travel react tailwind now go ahead and press enter this will only take a moment you guys all right it says happy hacking that means we are ready to get started i'm going to go ahead and pull over the directory we just created this is just the create react app now i'm going to go ahead and press this control back to button to get that back open and let's start up our development server with yarn start npm start for using npm righty here we are and this is taking just a moment since i'm recording but this is just the boilerplate code the playing correct recreate react like application that you should be seeing right here so first thing i want to do is clean up a few files here just to declutter that we're not going to be using for this tutorial so the app.css app.test the logo this report web vitals and setup test let's go ahead and remove all of those we're going to get some errors to write so to clear up these errors let's go to index.js and we'll get rid of that there in this report web vitals then our app.js we're actually not going to use any of this and again no class names here like this because we're going to be using tailwind and at the top here i don't even think we really need to do this but we're going to import react from react now let's go ahead and what's it looking for oh there we go now first thing we need to do is install tailwind so let's go over to tailwind here there we are and i'm going to click on get started here now we're using a framework we're using a react here so i'm going to click on the framework guides and let's scroll down to create react app here we are now first thing it wants us to do is create a react application we've already done that so let's move on to the next step let's go ahead and install the tailwind dependency so if you're using npm just copy that completely like i said i'm using yarn so i'm gonna do it like this so i'm gonna type yarn add and i'm gonna leave out that development dependency there go ahead and press enter and the next thing we want to do is run the npx tailwind css init and mpx is different than npm so just something to note there for you guys init dash p and what this is going to do is create our tailwind.config file over here on the left now our next step it wants us to add some information into this content array so i'm just going to copy this over right here and just paste that right into the content array and lastly it wants us to copy this into our index.css file that is why we left that here so i'm gonna go ahead and select all of that and boom there we go now i highly highly recommend if you're gonna be working with tailwind that you use this um this plug-in over here on the left here it is where are we at here so of course the react redux es7 snippets but we also want to be using yeah well where's it in here we'll look for tailwind intellisense i believe it's what it's called this is it right here what it's going to do is actually give you a little bit more information about the styles that way you don't have to look up everything and it's going to save you a bunch of time trust me you guys you have to use it if you're going to be using tailwind especially if you're new to tailwind so here we are uh we'll go ahead and close this tailwind.config file and let's have a look at our react application now if we enter in an h1 right here it is likely not going to tell when it's not going to be configured yet there we go so with tailwind styles default styles it's not going to have any bold text no enlarged text for heading tags but what we need to do is actually just close down this server so what we can do is just stop this server and we'll just restart it and now as you can see let's go ahead and get this thing started up here our text our h1 tag should shrink down to just a normal p size tag here so there it goes so now we know tailwind is now working correctly so the first thing i want to do in our application here so let's throw together this uh let's throw together our let's do our nav bar first here so what i want to do here and um i'm going to create a couple folders before we create our nav bar here so the way we're going to lay out our project we're going to have an assets folder by the way we're just going to be working in the source directory here so don't worry about the public or node modules or anything else here so i created an assets folder and that's where all of our images and our videos are going to stay and then we're going to have a components folder this is where all of our individual components are going to live now this is going to be just a single page application so it's going to be very easy to navigate around this this file structure here so i'm going to go ahead and pull over i have all the images and videos i'm going to be using in this project now if you want to use your own just go to pixels or unsplash.com and grab whatever images you like if you want to use the ones i'm using i'm going to put a link i'm going to clone this and uh or sorry i'm going to upload this to github and i'll put a link in the description below so you can clone it and use my images and videos so definitely feel free to do that so now i have all my images and the videos in here in the assets and in our components folder let's go ahead and create a file this will be our navbar so navbar.js or navbar.jsx is what i'm going to be using here i'm using the rafce it's going to generate my functional component here so in this video i'm going to be using functional components you can use whatever you like just note the uh the use state hook will only be available in the functional components so just keep that in mind now for our navbar let's have a look here so for our navbar what we want to have here i'm going to have a max now i'm gonna have it take up the full width of the screen and what we're gonna have it full screen are three little sections here a logo here on the left and then a little ul here in the middle and then some icons here on the right we'll just wrap those in some divs so let's do that first i'm gonna go over here and just to kind of throw in some tailwind here what i want this to be is uh we'll have it flex then justify and this is the tail the tailwind css intellisense that you see popping up right here so this is how powerful it is guys you save so much time you don't have to go to tailwind and look up what the styles mean we can just go to justify between now most of these names until when the class names and tailwind are are self-explanatory so obviously flex is going to be display flex you can use block absolute fixed for the positioning so this is what we want right here now i do want to do we'll say items center then we have to have a height for that so i'm going to say h20 and there you can see that means uh h20 will mean 80 pixels for our height here so let's go ahead and get going so we can actually see what we're throwing in here so like i said we want to have a div here at the fir at the beginning and i'm going to use an h1 for my logo and i'm just going to call this beaches and you're going to see this appear here on the right of the screen oh of course we need to import our navbar boom we'll go ahead and auto import it here at the top so now boom now we can see what we're working with here and so after this dip we want to have a ul and what we're going to be using we'll see this is where we're gonna be building for our drop down to you guys home destinations travel views and book so we'll say li in here home let's travel uh knock these down a few times we'll say destinations travel view and these are just going to be our list items here i'm not even putting them in a tags because we're not going to have clickable links but that is what we're doing right there and then i have a div for the far side of our screen and it's going to be these icons right there so what we need to do is install react icons so we can have access to these icons i'm going to go ahead and open up a new terminal here and i'm going to be using yarn add and then react dash icons this will install fairly quickly here now for icons before we can we use them we need to import them at the top so i'm going to import vs person is just the name of the icon i'm going to be using from react dash icons now this is not going to work we can't import this yet because we need to add that pretext here this bs we need to add that afterwards and now we will have access to that icon if you can see so we put it in here to use our icons we're going to open up a tag here and this is one is called bs person and to go back over here we should now be able to see it there we go so i'm going to close this down so we can see we're also using the search and the search is actually bi search so i believe is what it's called so i'm going to copy this down and just change this in here bi search then we need to change this the bi because like i said that pre-text has to be the same here so let's see here maybe i call it the wrong thing here what's it called bi no bi search is right perfect okay and i'm just going to add this right here like so and now we're going to have access to this there so that is looking good so far and i'm just going to give a little bit of padding here so we can have some padding on on mobile devices and on all devices really so i'm going to add right here i'm going to say px4 and what that's going to be is padding of one rim right this four is one rim as we can see here on the x-axis which is the the horizontal axis there so what we're going to want to do is this on our list i'm going to display this as flex because of course we want that to lay down and also these items here let's give that a class name of flex so they lay down as well now before we go in here and start individually styling each thing uh so like for example some of these list items we could go to each list item and and just declare a class name however that could get very very messy what we can do in tailwind is actually apply some global styling so i'm going to do that right now let's cruise over to our index.css here now for our index.css to apply global styling what we're going to say is give the at sign then layer base okay then open up some some curly brackets and now we can target our class name our custom class name or an element html element to give it some styling here so i'm just going to grab the li for the list item here since we did not give it a class name and what we can say if i want to give this a padding on the x-axis or um yeah we'll just give it a padding on the x-axis for of one rim so we'll just say apply and then i can just say px-4 i'll just say p4 and what's p4 instead of px4 is just padding on all sides so now you can see we have some nice padding around our list items here and that is what we want perfect so what i also want to do is i'm going to be using a google font here so i'm just going to go and import that and basically go to fonts.google.com if you want to use some custom fonts or you can use this one as well and what i can do to actually apply this font i can go in here and just say at i'll just say body and then we can apply font and then in css we can actually tailwind we can use the brackets to add in some custom values here i'm just going to say pop-ins because that's we're going to be using and we should now see our font change to the pop-ins font there okay so and real quick while we're in here i'm going to go ahead and add just a custom sizing for some h tags here that way we don't have to come back and um or style each individual h tag so what i'm going to say for h1 i think i'm going to use text 3 xl and then tailwind is a it's a mobile first approach so use minimum width so what we can say text 3xl and what that's going to do if we hover over it you can see it adds uh 30 pixels of the font size and really cool about tailwind also adds the line height as you can see here so but i want this to uh basically display on all screens then anything above a medium break point i want the text size to raise a little bit higher so what we can do there is just add md for medium and i'll say text for xl so now we can see our and i'm going to also add a font um font bold to give that little thicker weight there now as you can see we are at a we are underneath i think that md the medium break point for tailwind i believe is 768 pixels it goes from small medium large extra large here so as you can see as we get a little bit bigger boom you can see a small change in our h1 there so that is the break point right there so very very important to learn that there now we also i'm going to add in the h2 and what we'll say for the h2 what am i going to set this as text we'll say text 3 xl then of course font bold and while we're at it here i'm going to go ahead and add the h3 as well boom apply and just so you know just you to be here clear here you guys you don't have to go down and hit apply on each line in fact you will get a syntax error so we don't have to separate them by commas they just all go on the same line like so so for our h3 we're going to be doing just text xl and we'll do font bold there we go like so so let's get out of here for now and come back to our navbar to finish up some styling so in here we have this displayed as flex now for our our unordered list here at the top our main nav menu we actually don't want this to display on mobile devices of course so what we can say here anything we'll say hidden on all screen sizes right and then anything over the medium break point we want this to displace flex so now you see that disappears and we actually want to say the same thing for our our icon container right here so i'm just going to copy that down as well so now we don't see anything at all but what we do want to add however is our little hamburger menu here boom there we go and then this mobile menu is going to be a separate div altogether so let's go down here and what we'll add is another div here and what this is is our hamburger menu and real quick i'm going to import the the icons we're going to be using and the icons we are going to be using here is a i outline close right and this is going to be x from icons ai and then the other one import can be h i outline menu alt for from react icons slash you know what it is hi boom there we go so let's have a look what we're doing here and what i want to throw in here just for now i'm going to use that hamburger menu which is a hi boom just like so now we should be able to see it there it is now we can actually access the the properties here of the react icons what we can say i'm actually going to hold the alt button down here so i can type on all of these at the same time here and we can just say size 20 here and as you can see the icon is going to get a little bit bigger and that's going to do it for the same as the other ones as well boom now of course when we add our large screen we don't want our mobile menu to be displayed so what i'm going to say down here is give the class name and then we'll say medium we want to display as block and then everything else we want to be hidden here so oh sorry other way around here anything above medium we want it to be hidden and we actually just get rid of this here so let's have a look now if we we cannot see anything then right as we hit that break point you can see our h1 changes and now we have our mobile menu that's great that's what we want now let's style our drop down here boom there we go so for our drop down i'm just going to create another div here and let's throw this uh we'll see we'll do an unordered list and i'm actually just going to copy this right here boom there we go and then here at the top i'll add in our h1 here just like we have up there beaches boom there we go i'm gonna go ahead and save that so prettier will do a nice job format formatting that for me now i want to add a uh some buttons here when i add two buttons so i'm gonna just throw this inside of div inside the unordered list but just below the list items here so buttons here and one's gonna say search and then the next one we want to say account there we go and then we have these uh our react icons out here some social icons that i'm going to also put within the div just below our buttons here so what we're going to be using here that one is fa facebook let's see if i can remember all of these here uh fa twitter all of these are going to be fa so fa youtube and then we'll have an f a pinterest and then or so that middle one was instagram apologies for that if i instagram you already have that one in there boom there we go now what i'm going to do is actually just give these i'm going to go ahead and select all of these here and i'm going to give them a class name of icon just to save on some time here so i can say icon boom and okay what we want to do see if we can see these we need to import them so let's go ahead and import these at the top import fa facebook and i'm going to show you a real cool little trick reel real quick so now that we have one imported we're still getting some errors of course the other ones we have not imported them at the top what i can do is just click right here and press the control space bar and sometimes uh it's not going to work we'll do it later in the video sometimes you can auto import them but looks like that's not the case right now that's okay so we got twitter fa instagram we have fa pinterest and then f a youtube there we go so now we should clear up oh what's going on here fa imported oh again there we go that's what i was talking about earlier guys if you just import from react icons you're going to get an error so what we need to do is add anybody know f a and that's going to clear up all the errors for us so boom there we go now this looks kind of ridiculous right now because we don't want this menu to ever be shown unless we click on the menu button so what i'm going to say here is we want to display this as absolute ab if i can type absolute and we actually want this to be left we're going to hide this well for now i'm going to leave this as left 0 because let's see how this oh sorry i'm on the wrong side here what i want to see for our nav menu and here is our nav menu and in fact i'm just going to put a little note here we'll say mobile menu drop down here and in here it says md wrong spot once again there we go this here is going to be hamburger and then right here perfect so in here what we want to say i'm going to give this a class name of absolute and for now i'm gonna let's go ahead and style this thing as is as we're going to see it on the screen like so just like that so left zero then i'm also going to give this let's see here we'll say top zero width full width full it's going to be a hundred percent and let's use a bg gray 200 i believe is what i use i might have to double check over here on the notes so actually we're going to be using 100 but we're going to give this an alpha effect so we can kind of see through it and the way we do that is just put a slash and then 90 and the higher it is the more dense it will be so as you can see we can kind of see through here like so and that's perfect that is what we want right there so we're also going to want to give this some padding i'm going to say px4 which is one rim and then py7 is going to give us just a little bit of padding there so boom that's what we want and i'm going to flex and then flex column so everything is stacked on top and that is going to be looking good for us right now that is what we want right there boom so let's have a look at these buttons here and for our buttons what we can do we actually go and style our buttons and since we're going to be reusing the button component or the the button styles i'm going to go ahead and go into our index.css and give our buttons some some styling here and also we're going to be using css variables and how we do that the colon here i'm going to access the root and then i'm going to add in my variable names primary dark and this first primary color we're going to be using is let's see 5 6 5 1 e5 there we go and the second one i'm going to call primary light and this one is going to be let's see here 709 dff let's have a look at that there all right so in here let's go down and let's target all of our buttons here so i'm just going to say button and then for our button what we're going to say is the apply here now we have a whole bunch of styles that we're going to apply to our buttons so as you can see our buttons right now we got this thing over there um i'll just say p3 so just giving a padding of of three which is 0.75 ram all the way around but as you can see our buttons here they don't come until when they come default with zero styling whatsoever so we actually have to declare everything so if we say border you're now going to see a little bit of a border around them like so that's what we want right there now we're going to be doing a gradient so bg gradient this is how we do gradients and tailwind so you can already see it's giving us some suggestions and i'm going to use the bd gradient 2r right so to the right so what we can say is from and then open up our brackets here and this is our color here that we can specify so from and i'm going to use the variable that we created so the way we do that we create we say var open up our parentheses there i'm just going to say primary dark so now we should start to see our colors there and then we can say from and then the next one is going to be 2 then the same thing here var and we're going to be using the primary primary light like so so now we can see that is what we want right there we still need some more styling though i'm going to use text white and then we'll have a rounded corners here now as you can see they get a little rounded and we can go up to from sm for small medium large to xl3 xl and for this video i'm going to be using rounded md and as you can see that raises our border radius so that is what we want right there everything's looking nice and then like i said for these icons we gave this a a class name so what we can do here is just target icon and i'm going to give this a little bit bigger size and text to excel and then cursor pointer on all of our icons there so that's going to raise up the sizing a little bit and up here i'm just going to target that again and we'll say color variable primary darks there you go and i've been using tailwind you guys for a little less than a month now and i really fall in love with it it's really really great i'm loving using this it's so functional and you save so much time developing so we're getting there starting to look a little better there we go now for our list items might want to even add these a little bit add a little bit bigger text here so what we can do in here is we'll say so we can see what we're doing here text xl unless we can bump this size up a little bit if i can spell things correctly there we go that's what we want right there you guys snagging some coffee now for our buttons let's do this for our buttons let's uh blacks and then flex columns so they can just stack nicely on top of each other probably going to need to give let's give this a little bit of a margin here we can just do this on one of them we'll say m y for margin on the y y-axis which is top and bottom there we'll say my4 which is one rem i think that looks okay maybe a little bit more we'll say my my6 there perfect now for our icons we'll say flex and let's do justify um between so they spread out all across our of the page there but let's give them some my of eight which is two ram let's see how that looks maybe six i think that's looking pretty decent right there you guys boom boom boom that looks pretty close that looks pretty good now let's give a little underline here at border bottom so i'm gonna go in here into our i'm gonna stay in our nap bar in here i'm not gonna apply this to our global styling because i only want to show uh this line here the border on the bottom on our mobile menu so i'm gonna go ahead and save it formats everything very nicely for us so in our mobile this is our mobile menu here that we're targeting i'm just gonna hold down the alt button and click on multiple lines that way i can type in multiple places at the same time and just save a little bit of time here so what we can say is border b and let's see if we can like to see what we're doing now we can see what we're doing here a little bit and we can even i think that looks okay for now so a few things we need to do um what we want to do is actually hide this because right now it's displaying at all times and that's not going to work so right here we left this at a left zero and what i actually want to do is put some brackets around here i'm actually going to leave this at left 100 percent and what that's going to do is just slide it off of the screen and that's what right there now what we want to happen is when we click this mobile hamburger button we want our menu to slide in so we're going to do that with state so let's go ahead and import the use state hook there we go and our state we're going to put right here inside of our nav bar so what we're going to say is just const and then open up a bracket we're going to have two values here i'm going to call this nav and set nav and this is going to be equal to use state and we're going to give this a need to value and we're going to use a boolean value of false here there we go now we're also going to need a function i'm going to make this an arrow function here called handle nav yep sorry no values passed in here and then what we want to do is just set nav to opposite of its current value there perfect so that's what we want right there next we want to go down and grab our hamburger menu here so right here what i'm going to do is just open up here and i'm going to enter in a ternary operator here okay and what we want to say here basically is nav is is true which is default setting is false so if the nav is true what we want to display is actually what i just copied this outline close and i'm going to go ahead and give that the size property of 20 as well so what we're saying if nav is true we want to display the close icon else we want to display this one right here and i'm just going to cut it out and paste it in here like so now if we save that once we oh we need to add an on click here so for this div here let's add on click what we want to do is call that function that we just created the arrow function we just created and we called that handle nav so every climb every time we click this div it's going to run this function handle nav and it's going to change our state the opposite of its current value so now as you can see whenever we click this our button changes back and forth and essentially we want to do that exact same thing for our mobile menu so what i'm going to do is actually just copy this styling right here okay and so now you'll be copied let's get rid of this and we don't need the quotes there we need some curly brackets and we want to say the same thing if nav is true and again the default value is false if nav is true we want to display this styling here and i'm going to paste the styling back in there only in this case i want to drop this change this back down to left zero okay so if nav is true display these these styling else let's display this as absolute and a left of the negative 100 percent there and that's going to hide it off the screen whenever it is false so now if we click this of course we're going to need our on click function so on click and again this is going to be the same handle nav function so let's have a look and boom there it is that's what we want right there now we actually want this to be uh black so let's change our outline close we'll just give this class name of text black boom it's not working oh so the reason it's not working i suspect is the z index so what we can do i'm just going to apply to this one here the parent div here i'm just going to say z10 and what that is if you hover over here it increases the z index so as you can see now everything is fixed um but i don't like how we can still see i've misspelled beach there i don't like how we can still see the the logo on our navbar the in the background there so let's go ahead and change that i'm gonna put that in there so here i'm gonna add in a little more state so we can just toggle that logo so in here i'm gonna do this one more time const logo and set logo and i'm just going to let this default value of the same false here and again in this handle nav function we can do the same thing we'll just say set logo the opposite of its current value like so and basically this exclamation point is just a logical operator javascript that means um or or the opposite there so what we can say in here is basically saying if something is not its current state then it will change it back so let's go in here to our h1 here and what we can say class name open up some curly brackets and we'll do our ternary operator again and what we can say if logo is is true give this a class name of hidden else we'll display this block well we need to add an on click as well so on click run our function handle now now let's have a look and see how this looks boom that's what we want whoa what's going on right there oh okay so let's add this actually i'm gonna cut all of that and put this on the h1 there class name what's going on here unclick h1 let's jack this all up here there we go so cutting that there i'm going to paste it in here what it was doing was sliding over our whole our whole layout here so let's have a look again that is what we want that is perfect you guys i think we're about done with our navbar let's scroll this thing open just so we can make sure everything is looking good right there let's give a little bit of padding right here or margin on that icon here so what i'm going to say is class name arm mr2 for margin right is going to be 0.5 ram so i think that looks a little bit better there perfect perfect now for the sizing let's go i don't want our links this big and i know we increase the size but what we can say is anything over we'll say let's just take this away for now i'm going to keep that i think it looks a little bit better on smaller sizing here so boom there so here we are everything above 768 pixels and once we hit our break point boom changes down and now we have access to our nav bar so that is our nav bar here we go let's move on to the next section here i'm going to go ahead and close this out and let's move on to our video background right here so i'm going to close these out and i'll see you on this next one okay so to create a full screen full width video background here using tailwind let's go ahead and create our component here so i'm going to components here and then we want to create our hero.jsx there we go now r a f c is gonna get our functional component here and let's go ahead and add this to our app here and i'm gonna press the control space button there we go we can auto import it now in our hero.jsx what i want to do first is actually import our video so now we have access to our video so let's do that and i'm going to call this beach vid i think that's the name of the file as well from so we actually have to find the file so we need to go outside of our component folder and into our assets and then i believe it's called beach bid.mp4 if you're using the same files i am so now we have imported it we now have access to it let's give this a class right here so we actually want to display the full width and height of the screen so i'm going to say w dash full for a width of 100 h screen and h screen is the height of 100 viewport heights and i want this to be relative so we can position some a div here right here in the middle so let's go ahead and add our video element here and we actually this can just be a self-closing tag we don't really need that there and instead of the quotes there we actually use our curly brackets same as we would do a image in react and we just call our video there that we named it up top beach vid so that's not how we want it to be displayed so let's give this some class name here and i want it to be width full full there we go and right now as object cover well we want or sorry object contain we want it to be object cover so it takes up the full width and height of this uh of the parent div there so i'm just going to say object cover there we go and that's what we want now our video is not playing and that's because we need to add some properties in here easy as that so i'm going to add in auto play now this does have to be camel case keep that in mind since we are in react and then loop and there's no uh there's no audio in this but i'm gonna go ahead and say muted as well go ahead and save that so prettier formats is nice and neat for us now if we refresh you can now see our video is working properly and it is covers the full width and height of our browser no matter what size we are at full screen or if we drop it down to mobile sizes now if we look at our nav bar here we don't want it to have a white background we want to change this to transparent we're going to position it absolutely and our text here let's change that over to white so let's just hop back into our navbar.jsx we didn't do this at the beginning of video because you wouldn't be able to see what we are typing so we'll say absolute and that's actually going to hide it behind our video there so we can change the z index at 10 and we'll say text white there we go and that's what we want right there uh oh something's going on here so this is displayed as flex we need to we don't have a dimension here on the width here so let's just say with bull and i believe okay there we go so that fixed that now perfect that's what we want however we're going to want to change the text in here so let's change that this is our mobile menu and i'll just add it in right here it doesn't really matter where we add it text black let's see there we go that is what we want right there you guys that's perfect all right boom that looks nice smash the like button if you like the value that you're getting out of this video trying to build this uh subscriber count up here so please smash the like button if you would i'd much appreciate it now let's throw in a div here in the middle okay so i think we're done with this nav bar for this here or let's add our overlay first so for our overlay it's just gonna be a div here nothing's gonna be inside here but what we need to do for our overlay when a position is absolute this is going to take up the full width and height of the of its parent div and we need to specify top zero and left zero now what we want our overlay to be we'll say bg i'm gonna say gray 900 and that's going to be very very dark in fact you can't even see through this so what we can use is the alpha property and tailwind reason to put the slash there and we can say 10 now you're not going to be able to see anything i don't know if you know if you could even notice a light that was if we go up to 90 the higher you go the darker it's gonna get i'm gonna leave it i think i had it set at 30. yes i had it set at 30. so this should look the exact same so i'm going to leave it just like so now let's create this div here in the middle and this is going to be outside of the overlay so keep that in mind that div stays on its own there now for this div here um we're going to have to see here an h1 and it's going to say burst class travel let's see if we can even so you're not going to be able to see what we're typing right now that's okay in our h2 we said top one percent locations world worldwide there we go now outside of this div here we're going to have our form let's go ahead and give this some this uh this div here i'm going to give it a class name absolute and then we'll say top top 0 with full h4 and we just want to be able to see this flex column so now we can start to see it that's what we want we'll say justify center there and then we'll have text center now i want you guys to be able to see what we're doing here text white and then we'll say p for for the p-4 for our padding perfect so now we have everything right in the middle of the screen that's perfect that's what we want so inside of this div let's add our form okay and we don't need an action for our form and this is going to be just a little bit tricky not too bad but what we want to have this essentially what you see here is our entire form and then we actually have our input hidden inside of our form and then our button in here with a react icon inside of our button so let's do that right now for our form what i want to give here is um let's do our input first so we're going to have i'm going to wrap this in a div as well so we're going to have an input and this is going to be a type of text and i'm going to give it a placeholder that says search destinations there we go so that is what is looking right so far and then outside the step we're going to have another div and that's going to have our button and it's going to have our react icon inside and his ai outline search is what the button is called and i'm going to give this size 20 and then we'll give it the class name of icon so we can grab in all the other styles we put in our global styling here so let's see um we need to import this boom there we got it here at the top import a outline search make sure you add the slash ai afterwards so this is what it's looking like right there that is perfect you guys um what i want to do is now add some styling here so let's go into this form okay so in our form element here let's add some class and we want to say flex justify between looking at some notes here items center max width of we'll open up our brackets here and say 700 pixels here for the max width and then we'll say mx auto and what that's saying is margin auto on the left and right now with a full uh border then p one for our padding so that's what we want right there you guys so now we can see uh both divs are located within our form now for our foreign background we're probably going to add in um let's make it a little like alpha here i'm going to put this on a separate line so you can see what we're doing here and so i want to say rounded md so i want to have a nice little rounded effect there we go oops sorry about it you guys hit a button got off track here so rounded md now we're also going to have um i'm going to make the text black and for the background bg gray and we're going to do that same let's do 100 which is almost a white color right and then if we add this 90 we can get a nice little overlay now but here's our search box here this is the input box so let's go down to um our input div here because this is looking great so far very very close here so let's go into our input here now let's add a class name the bg we want it to be transparent that's looking good right there perfect transparent and i'm going to say a width of we'll say 300 pixels there we go and then anything above the small break point which small breakpoint is 640 pixels so anything above there anything above small which is 640 pixels i want to actually um increase this to 400 pixels and this is just the input inside of our form that's all we're looking at right now and i'm not sure if we have this popping spot but i'm going to go if it's uh set to it but i just want to add that in there if it's not already perfect and then say we don't want that outline so what we can say on focus outline none boom i'm going to go down to another line here i think that's all our styling so that's looking good right there um so this icon i wanted to display as white now we have it set as we have it set as uh i believe since the icon the default value is going to be set to black so let's see if we can just text white see if that will work and yeah not working what we can do is just add some inline styling so the way we do that in react here style and then we're going to use two curly brackets so i'm going to say color then we have to put this here in quotes and i'll say that let's see if that works boom that's what we want right there you guys now let's give a little bit of padding just give a little bit of padding here and in this uh top one percent now i might even drop that down let's see how h3 looks okay i'll keep it at an h2 and but let's give it a padding here py3 let's have a look a py4 so i think that looks pretty good right there you guys let me know what you think in the comments below and smash the like button if you like what you're seeing here boom look at this a very nice drop down this is what we built so far it's looking nice you should be proud guys this is awesome learning how to use react has been so much fun so that concludes the navbar and now our hero what we're going to do next is down here we're going to create this destinations component here and so let's go ahead and do that right now so i'm gonna go back in here and let's just close these down we don't need those anymore and let's create our new component i'm gonna call it destinations dot jsx boom now go ahead hit rafce to get our functional component here and let's not forget to import it there we go auto import make sure you got it imported here at the top all right so what are we building here if we scroll down you can see our input our component is imported so we can see it down there by default so what we want to do basically is have this wrapped in a container and i set this container to 1240 pixels so and then we're going to have a couple h tags a p tag here and then some grid system there so let's go ahead and do that right now so first thing let's let's do is add a our container here so i'm going to give this a max width of and we're going to open up our curly brackets so we can define the width we want and i'm going to say 1240 pixels with a margin x of auto and then we're also going to want to do let's see we're probably going to want a padding we'll say p y of 16 so it's going to be about four rim padding on the top and bottom and you can see here we're starting to get some padding there and then i'm going to give it p dash 4 or so px-4 so we get one rim on the left and right just so when we shrink down to smaller devices now for what we're going to be using in here let's have a look we're going to be using some images so i'm going to go ahead and import these images that we're going to be using i'm going to copy them over so just to save some time here so these are all the images inside of our assets folder like i said you can use your own if you go to unsplash or any type of stock imagery website but feel free to just clone this repository and use the ones that i'm using right now in fact that'll probably be the easiest way to do it there so inside of this div let's add in let's add in right here so we want the all all-inclusive resorts so let's put this in an h1 and i'll say all inclusive resorts perfect and then under here a little p tag on the caribbean's best beaches just gonna copy that over and i'm going to throw that in my p tag boom there we go so that is what we want right there and guess what let's add a text center there and that's going to text center to everything in that div there so that's looking good right there so next what we want to have is another div here and this div is going to be a grid and what it's going to do is we're going to have basically we'll have three columns and we'll have this span over two of them okay so let's scroll back down here and let's create our div here so we're gonna have a div and inside this div we're gonna have let's go ahead and set the class names first so sorry you guys had an itch down there what i want to say is we'll say we'll say grid and then grid rows none okay and then anything above medium and like i said when we're down on mobile devices these are going to stack right so as we hit that medium break point they will they will actually just kind of lay down so what we're seeing right here is anything above anything above the medium we'll say grid columns five we'll actually give them five columns and then this main image will span across three of them so great columns five let's give this a little bit of a padding on the top and bottom and the git gap will give of 2 and then anything above medium we'll change the grid the gap there to one rim there so that's what we want right there of course we can't see anything because we don't have any images in here so let's go ahead and import some of our images here and we need to throw in a little slash in there otherwise react does like you to have an alt tag so this first one here i'm just going to take in bora bora there we go now i'm going to copy this down a few times we have i believe we have five so this next one we can say two and then we'll have what's this next one maldives and we'll say maldives 2 and i don't know i just named these whatever you guys it's not oh this one's camelcase i'm not sure exactly where these images are so don't hold me to that so let's pop this open and that's what we want as you can see we have a five here on the grid and we're gonna add some classes to these uh images but like so you're often gonna run to this and development these images are all different sizes so in these images let's go ahead and add some styling to all these i'm going to say a width a full height full and then object cover there and that should make everything the same size there we go perfect that's what we want right there now before our our first image here we actually want this image to span all three uh columns here and then all rows as well so let's go into this first one only here so we can have some room and after the object fit cover on the first image only what we want to say is column span 2 okay and then we're also going to want to say we'll say anything above medium calm span three at the large break at the medium break point so anything above 768 pixels and then we'll have row we want the row to span as two as well and let's see how that looks perfect so that's what we just did you guys perfect now if we scroll down they should take up the full width of the screen this top one here at least boom that is what we want even if we go down to like a iphone for example that is perfect that's what we want right there you guys hope you like this smash like button if you like it now i'm going to drop this back down so that is what we want right there you guys very very easy and that's essentially takes care of that whole destinations component we can actually give a little bit of spacing here on this p tag so let's just give this a py board just to give a little bit of space in between there so that is what we want right there you guys the next section we will be designing in here is this search section it's going to be a lot of fun be using the grid some forums and some icons inside of our buttons let's jump on that right now so i'm going to drop this thing back down here drop it back down and then let's go into we're done with the destinations okay and what we're going to be looking for i'm actually going to call this search here so i'm going to create a new file oh new file there and i'm going to call this dot jsx now let's go and get our functional component going there we go and let's import this as search there we go perfect now what we want to do here is um it's going to be a this probably be one of the more bigger components we're going to be creating here in this video so let's have a look at what we want to do first of all in our search here so in our outer div here basically we want to give it like that we did above a max width of a max width container here then we're going to be using the grid as well and apologies this one above was actually five columns this one is going to be three columns and this left side is going to span across two out of the three columns so let's go ahead and do this right now so for this div here class name and let's do max width of 1240 pixels we'll do mx auto so everything here is in the middle and basically that's what we want to do now as we scroll down boom as we scroll down we want everything to stack like so so let's go ahead and give this a uh we want to display this grid and by default when we when we display this as grid by by default everything is going to be stacked up as a one column here but anything over we'll say medium or we'll say anything over large we want to display the three columns so we'll say grid columns three and then also a gap of four and then px4 for padding on the x-axis of one rim then py of 16 okay so we're not going to be able to see anything there yet but we will have just created some space with all of our padding now what we're going to want to do is pull in a couple of our react icons so let's go ahead and just import those so we have access to them and we're gonna import the first one is gonna be called ri customer service to bill and this is going to be from react icons slash you know what that is ri now i'm just going to copy that down but this one is going to be called md outline travel explorer and this one of course is going to be md now we have access to the icons that we're going to be using here in just a moment so first thing we created our our container here now we want to have two divs this is what we created we want to have this div on the left then also a right so we'll say left and then this one is going to be right now okay so for this left div here and now we can actually see in here boom we have our containers here basically what we want on this left side is let's do a class name and then anything above the large break point to believe the large break point is 10 24 pixels i'm not for sure i'd have to cruise over to tailwind to find that out exactly but basically you want this to calm calm span 2 okay and then flex flex column and then justify evenly and that's going to space everything out in between here so now as you can see this column and if we use this really cool extension called pesticide highly recommend you get it's really awesome developing so now you can see that this left column is spanning two thirds of our grid here and this one over here is just going to be the remaining one-third so now we can go in here and let's add our content in here so what we want to have is going to copy that over looks like it can be just like a h1 or an h2 and i'm going to actually put this inside of a i'm going to put this inside of my div here and it's going to have an h2 boom there we go and i'm just going to copy this over to um you could probably just say a lorem 100 or something like that would probably be pretty close let's go ahead and save that so it formats all nicely boom so that is looking right that's exactly what we want right there you guys now next thing we want to do is create another div right there we're going to be using grid as well we're going to be using two columns there so inside of this div here right so it's actually outside of this diff but still within this is our left side here still we want to create another div and then here we're going to say class name grid and then and again if we go down to our small devices here we actually want this to display boom so at default we want this display as one column then anything over i think we did medium or so it's small because if we open this up just a little bit we can see they're now side by side and that's the small break point right there so it's going to be grid that anything is above this small break point i'm going to say grid columns 2 like so and then we'll just give a gap of 8 which is actually two rim and then py4 so we'll get a little padding on the top and bottom here so that's what we're putting in right now um so what we're going to be adding in is a div in here so now we have we can add in our two divs let me go back here add in our two dibs and inside this div we open this up we're going to have our button with an icon here so let's go ahead and do our button and we're already going to see some things here boom there we go and our icon in here the icon we're going to use on on the left side is ri you can use on whichever side you want here customer service to fill it looks like i actually spelled that wrong at the top test i left out a t so that should be what we need right there and as you can see we now have our button with our icon in the middle right and then um so i'm gonna go ahead and save this with format so we can see what we're doing and then we're gonna actually want to display this as flex right so flex flex column and then we're gonna say anything above large we'll change this to flex row and then items to the center and then text center and now we can go in here and just below our our button tag we're going to have another div another div here and this is we're going to add our h3 if we go over here this is what we're adding in right now i'm just gonna copy over leading service okay and then in our p tag i'm just gonna use this on both sides here so we'll just copy that in boom and let's have a look at what it's looking like so that's actually pretty good that's pretty close to what we're needing so far that is looking good um i can actually probably just copy this here yep i'm just going to copy that down because we want it on both sides and that will appear right here that is perfect now i'm going to go ahead and get rid of that pesticide outlining there so perfect that's what we want instead of instead of the ri what are we using the md outline travel on this next one here perfect now let's go ahead and change the sizing of these remember we can use the size property of react icons so i'm going to say size and i'm going to go up to 50 on this which will significantly increase the size that is looking really really great there you guys i hope you like it um and that just see here let's cruise back over here that just about takes care of this left side or sorry left side um what we could do is actually add some spacing though so let's go ahead and add this little p tag right here let's add some spacing in there so i'm going to say class name we'll say p y of we'll say py4 see how that looks looks good and then let's add some spacing to this little block right here and that's gonna be so we have four rim or four which is one rim i think that might be okay um we could add a little bit more to that if we wanted to see here and see i'm looking down at these blocks here to see if we need to add any more spacing in there um ui2 let's do this we'll say on this h3 let's say class name py2 and then on this p tag again i'm going to say class name py-1 which is very small just about a quarter rim there so just to give a little bit of spacing and make things look a little bit nicer now if we scroll this down since we added up here our media queries we can now scroll this down and it should take up the full width of the screen perfect and as we get down below the small break point which is what we threw in right here these should now um should now stack so if we go a little before sorry this right here should now should now stack and let's have a look boom there we go that's exactly what we want you guys that is looking clean very nice let's take care of this form on uh let's take care of this form down here on the right side uh when we're at larger screens here so we'll go ahead and leave it right there for now and let's do our form all right we got an extra dip in there we can delete that make sure that doesn't break anything perfect now for our right div we probably want this to deciding if we're going to do text center or not this is fine for now but for our right side what are we doing here on the right side so what we're going to have here is we have the div we already have that created now we're going to have a div here as our top box and inside of this top box it looks like we're gonna have we'll say three p tags here and this top one i'm gonna say get an additional ten percent off okay and let's just copy this down but this one will say 12 hours left 12 hours left and then this bottom one right here will say book now and say sorry not safe book now and save so that's what we want right there you guys perfect now let's give some styling to this here um and for this div here at the top one here as well i'm gonna give some space here so for this div what we actually probably want to do is um let's give this div here a class name of c border turn that caps lock back off border and now you're going to be able to see a little line around it there we'll say text center so everything comes into the middle there and i'm going to give a little bit of padding in here as well so let's just say probably on this middle p tag say p y or for a little bit padding there we go perfect now this bottom one here we want to add a little box over it so i'm going to give this a bg gray sorry bg gray and what are we using 800 and then we'll have the text change colors we can actually see now there we go so the text gray we'll say 200 and then py2 for just a little bit of padding on the top and bottom there oh forgot to add their little dash there so that's looking good right there you guys exactly what we want doesn't matter if we basically this hour div we added some padding we don't need to do that um i think that actually looks a little bit better anyways so that is looking nice okay for this top i might even add let's say py i would say padding top two there we go perfect so let's look at that that looks nice there so let's do our form next you guys so underneath this div we're just going to throw in another um not a dip but we can just use the form element we don't need an action in there and for this form what are we going to have so i'm going to make sure we don't have any queries so basically we're going to have a div this is going to be a div here this is going to be a div and then another div here so let's go just go down the line here and we'll just say div copy that down boom boom now in here it looks like we want to have a label and we're not using any of this for not for this tutorial destination and then this act box is actually a select element and again we're not going to need any of these input for the select we need to have options okay so the options are our elements inside here when we click on these these are our options so for our option um and really we for this tutorial we don't need any values because we're not hooking this up to a back-end so what i can say is grand antigua and i apologize if i'm spelling things wrong i don't know if that's right or not let's go drop these down a few times here and we'll say key west and what do we have so we have in here key west and we have the maldives and we'll just say we'll just do one more here we'll say cozumel there so let's have a look on our side here so as you can see at the tailwind it takes away a lot of our styling but that is what we want to happen right there now uh let's go hound here for our next div and it looks like we're gonna have a check in and a checkout date and move that check in and check out so let's do those real quick label none of that there this one's going to say check in boom and then input and this type is going to be a date and we don't need any of that there so and if in fact i'm just going to delete that and then just copy this down just to save a little bit of time and we'll just change this to check out that's what we want right there so like i said with tailwind we have these default styles attached so let's go ahead and go in here and style this thing how we want it so for our form i'm going to target our form element first and we want this to take up the full width of the screen okay full width of the screen now these here i believe we're going to want to display these as flex here so this div yeah we just do it separately here so flex and then we want to say flex column and then let's give it a margin of 2 which is going to be 0.5 rim so that's what we want right there and you know let's just we're going to give this to all of them here so i'm just going to copy this we're going to put that one in here and then for this bottom div as well so we can just stack them all that's what we want right there now for our select and all of our inputs we're going to want to give basically the same styling here on all of them so let's go ahead and do that so this select i'm also going to hold that down and type on this input and then this one here and so let's give all these a class name and for this we're going to want to do a border okay and then we're also going to say rounded medium and we're going to want to give a little bit of padding p dash 2. that is what we want right there you guys looking good um now yeah that's looking good right there perfect we're probably going to want to give a little bit of um padding on these divs here hey mr margin that might be okay let's see let's have a look and see um i'm going to add a little bit more on this middle one right here boom there we go so let's have a look and see how far off we are i think that's looking pretty good right there you guys looks like we need to add a button so let's go ahead and add our button that says rates and availabilities so we can go down here and we'll just add another div here um another div in there for our for our button or really we probably don't even need a dip let's just do that we'll say rates and availabilities there we go rate and availability is perfect that's what we want right there um i'm going to give this a little bit of padding and also we want to display the full width of the screen and then we'll say sorry not padding but my4 for some margin have a look at that you guys look at that element there that component we just created there you guys that is looking clean looking nice with our buttons here i really really love this gradient feature that we're using and these icons embedded into our buttons that's looking really nice you guys this is what you have created so far man you should be proud of yourself this is awesome so awesome awesome work you got this is looking beautiful let's go ahead and move on to our next component which is going to be right here we're going to be using the grid system and passing through properties to these components here so let's do that here on the next one so i'm going to go ahead and close this down here there we go so done with the search here and what i want to open up i'm going to basically i think i'm going to call this one selects here so inside of this components folder create a new file this one's going to be called selects for the select images that we like there okay so let's go ahead and generate our functional component with rafce and we want to import this one so selects there we go make sure it's imported at the top and so let's have a look at what we want to do real quick and it looks like so that's the grid and we're going to default down to one column so we're going to have a container on here at 1240 pixels uh looks like three columns and we would have an overlay with some text in there we should be passing through some properties and whoop that's not what we want to do so as we scroll down we want to look at see change this to two two columns and then once more down to one column so let's have a look at that right now and close that let's go ahead and find our max width of 1240 pixels okay and then we're going to say margin auto and we want a padding of one ram on the left and right then 16 which is about three or i believe four rim on the top and bottom okay so now we can see we have created some space in there and we are going to be using the grid like i said so let's go ahead and say grid remember it defaults to one column and anything above the small break point which is 640 pixels let's say grid columns two then anything above large which i believe is 1028 we'll say grid grid columns three okay now in here we're going to have this is our our image div in here right so we'll say div there we go and the class name here is just going to be relative because we want to position things absolute within this parent div so we want to have our image and now would be a great time to go and import our images here so i'm just going to go ahead and not the maldives there i'm going to copy them over here find these here and again you can use whatever you would like these are the ones i'm going to be using there we go and so here we have our div with our image i'm going to give that an alt tag and instead of the quotes of course we want to use the curly brackets here and i'm just going to say maldives for this one here and in here we want to have our overlay this is where our overlay is going to be as you can see our picture is now on the screen but we want to have a div here and this is going to be our overlay and within here we'll have a p tag it's going to say maldives now right now it's going to show up below it there so let's go ahead and give this class name we want the background gray 800 we'll say 900 and with an alpha of 30 i believe it's what we've been using and then we want this to be absolute so we can see this we'll say top top zero left zero width full height full boom there we go that is perfect right there that is what we want you guys now for this p tag let's go ahead and give this class name now i'm going to say left 4 bottom four and this is a left one rim and bottom one rim say text xl text white so this should move this right down here we need to give this class name absolute of course and that'll move it right down there perfect font and i want this to be font bold as well so i think that is looking good right there and let's even raise this up a little bit boom so now we have a nice overlay here everything is looking terrific now if we put this to a full screen that's exactly where we want we're image and if we wanted to we could just copy this down a bunch of times and keep opening this package.json and this will work just fine we need to add a gap in there let's go and do that super quick so just to this outer this parent div here we'll say gap four to give it a gap of one rim but this is a lot of code and it is unnecessary so what i'm gonna do i'm just going to delete all this extra code that we did because we don't need all of that and we'll go back down to one now let's create another component here and we'll just pass through the properties to each component so i'm going to create another file here and i'm going to say selects card dot jsx you can call it whatever you'd like to call it rafce let's get our functional component in here and let's just cut this out we're going to cut that out completely and we're going to replace that div with what we just got now we're going to get some errors because we're not using an image in here so let's have a look here we don't have the image yet because we haven't imported it but selects card is what we just called it boom there we go now we have our image or our component being passed through but it's throwing a fit because we don't have that image and we're actually not going to be pulling this image here so we're passing it through with props so let's go ahead and add some properties in here i'm going to say bg and then we just say the name of our images here at the top so for this one for example i'll say bora bora and the text i want this to say bora bora now let's go in here and grab our our properties here so the way we take in properties we have to intake props here at the top and then we'll just say props dot whatever we named our our value which was beg and then down here let's open up some curly brackets and we'll say props dot text now we should be passing in the properties so there we go we've passed in our image we've passed in our text now we are done with this right here we're done with this image this selects card component so we can go back here and what we can do is just copy this down because we have six all together and this next one we're going to pass in is bora bora 2 and i'm just going to take what are we using here i don't know again we're all where all of these uh images are from so don't hold me to it i know they're not correct here and then we'll say maldives and this one's going to say maldives oh sorry we already said that this one can be this one can be uh antigua and let's see maldives ii and i'm just going to say this is let's see cozumel again these are not the same i can say that as much as i like and people are still going to get onto me so is what it is maldives 3 and i'm going to say this is jamaica and let's do our key west here there we go camel case yes there we go and now we should be seeing everything should be passed in flawlessly let's have a look boom oh that's the original one this is what we're looking at here let's open this up so as you can see boom default to one column as we get a little bit bigger we have two and now three that's perfect that's what we want uh we look like we're having some uh issues here with our um sizing of our images so that is probably we just need to define our image classes here so let's look i'm gonna keep this open a little bit so we can see actually so let's go into our card component here and yeah we just haven't added any classes for our image so let's just go ahead and say width full height full and we'll again we'll say object cover just so none of our images are distorted in any way and that should fix everything there so that is what we want you guys to have a look again one column boom two columns then anything past the large break point we're now going to have three columns so let's open this up and see what we've built so far that is perfect you guys smash the like button if you're getting some value out of this i hope you like it next up we have finished that component let's see what we have after this ooh our custom react slider you guys let's jump into that next i'm going to scroll that back down all right here and we can close these and what we're going to do next here is start our call this carousel.jsx let's go and generate our functional component for our carousel there and what we're going to want to do is import this next here caro curacao perfect now just for some some styling here it looks like we're getting an error here carousel is not defined okay let's just looks like we just need to import that okay sometimes you just have to reload there so there's our carousel and what do we want to do with our carousel so we wanted this to give it uh we want to give it a container here so it's going to stay in our container and then we're going to loop through our images here so let's start off with let's start off in our carousel with our container here so we'll say max width of 1240 pixels there we go we want to say mx auto so it sits right there in the middle i'm gonna give it a padding of four one rim on the left and right and then four rim on the top and bottom perfect now we want to display this or position it as relative right because we want to position some buttons in between there flex and then we're going to want to say justify center and then also items center as well items there we go so i'm going to drop this down now for our images now would be a good time to load up our images and how we're going to do it we're not going to import them as we did in the previously in this tutorial what i want to do is a little bit different is i'm going to say const slider data here okay and i'm going to have it um an array then i'm just going to paste this inside of an array and basically these are just objects here if we save it it'll get nice and formatted and you can what you can do is you can go to unsplash this is what i did here unsplash and click this here now what you can do is for example you can click this image right click and just hit copy image address and then just paste it right here in the url property there value so but i already have mine here that i'm going to be using so let's do first what we want to do is just let's just map through all of our images the way we're going to do that is what we defined up here slider data so we'll say slider sliderdata.map function here and the map function is actually going to take in an arrow function okay and a couple values we're going to pass in uh i'm going to say item you can say whatever you like for the first one but the second one i'm going to say index and like i said it's going to be an arrow function and what we want to do is map through and create a div we don't need this extra stuff at the end we're going to create a div here and then also we're going to have an image source and what we can say now is item because each array here is going to be item each item in the array we defined this item and then we're going to grab the url and then of course we want to give it an alt tag and that should be good there so now we should now see all of our images down here being mapped through that is perfect that's what we want right there and i'm just going to go ahead and give this a class name i'm going to say width width full and then rounded medium so we get a little bit of the rounded corners there we go perfect just like so now if we just real quick if i show you the index here since we are using array this first item in the array is going to be zero it starts zero one two and we can see that down here if we just map it through this is the first item in our array the second and then the third i'm sure you're quite aware if you're watching a tutorial in react so let's do this first the what we want to do is basically hide the ones we want to only display one picture at a time and then we'll toggle that with our u state hook so i'm just going to say use state and then let's throw in some state right here const i'm going to say slide and set slide and i'm going to set this default value just to uh to zero there all right so let's go ahead and toggle some some our class here and i'm going to use that on this div here i'm going to give it a class name and basically what i want to say is get rid of that we're going to use a ternary operator here so if the if the index here the number is equal to the slide then we want to if that is true i'm going to say opacity opacity set that to a hundred there it is else we'll set the opacity to zero now boom that hides all the other ones there so that's what we want right there that is perfect and this image here what we can do i'm actually just going to copy that or rather oh let me go back what did i just do there let me put that back in sorry about that so for this here i'm just going to cut this out and what we want to say we're going to be using the javascript i believe it's the and operator here so what we're going to say if index equal to slide or and operator then i'm just going to paste this in boom like so so now we should see it right there in the middle that is perfect um however we probably need to add some buttons in here so we can click through to the slides so let's go ahead and add some buttons in here i'm going to throw it just right underneath this div will be fine here or i guess we can do it right above here let's do it above here so we're not actually going to map through them so for our buttons that we're going to be using bs arrow left square fill boom there we go and we'll copy this down this one's going to be bs arrow right square fill and let's give these some class names i'm going to give them both here at the same time so class names we want these to be absolute the top we want to say 50 gonna open up the brackets so we can put in our custom sizing there and we'll say text 3xl we'll say text white and let's say cursor pointer there we go so we should now be able to oh can't see them we need to import these let's see if they'll let us do that yes and this one here as well boom there we go so now we can see we have them imported at the top let's scroll down so there we have them they're sitting on top of each other we just need to put the left one here over to the left side so i'll just say left and it's going to be two rim there it goes and we'll do the same for this one only we'll throw it on the right side so perfect that's what we want right there however nothing happens when we click these because we need to create some functions to go to the next slide and also the previous slide let's do that right now so i'm going to throw that in right here i'm going to have a const pre slide okay and this is going to be an arrow function we're not going to be taking in any values and let's copy this down and this one over here can be next slide perfect so for this here and let's go ahead and add this in here we're going to have some on click functions here so on click here on the previous one on the left arrow we want to run previous slide and then on the right arrow we want to run the next slide so what we're going to do next is add some logic in here and first off before we add our logic we want to grab the slide length so the way we can do that say const length equals to looking at slider data dot length there we go and if we go ahead and just console.log length we should now see here we should now see three down there perfect so that's what we're logging there now i'm gonna go ahead and comment that out so let's give this some logic here what we want to say every time we click on this button we're going to run the previous slide function here and every time we run this function we want to set the slide to we'll say index or sorry slide equals to length minus one true will be zero else we'll say slide plus one okay and then for the next slide what we're going to say is set the slide and if i will say slide equals to 0 we'll say length minus one else slide minus one so let's go ahead and save that and see how it works boom there we go i'm not adding any uh transitioning or anything yet but that is how we create our slider right there smash like button you guys hope you're liking this right here so just to recap here we have all of our images that we're grabbing up here at the top so we have access to them and now we're mapping through all of them right here we're mapping through all of our images and then what we're saying right here is if the index which is the number of the array is equal to this the slide right that we're setting basically we're going to trigger between an opacity of 100 which you can see the the image in zero which is see through and then we're using the javascript and operator here to display this right here in the middle there and what we're going here up top we are using our on click functions to run the previous slide and the next slide functions here and basically we're using that to go back previous item in the array or the next item in our array so that is how we create a full width slider here and react and now let us go back and let's finish up the next component here which is our footer you guys we are almost there i'm going to go ahead and open this back up we are now done with carousel and i'm going to create our footer component and let's generate our functional component with raf ce there we go and of course we need to import this make sure we get that imported there we go all right so for our footer let's just have a look here that's what we want to do basically it's a full width div here with the background and then we're gonna have a container in here this is gonna be one div here at the top displays flex and then a couple unordered lists here displays flex and we're gonna have some media queries in here um so they actually turn into a flex column on smaller devices so let's take care of that right now let's do a class uh class name we're gonna do width full and we'll do bg gray 100 there we go and then we're also going to do a padding of 16 which is 4 rim on the top and bottom so we should be able to see some gray down here since we added some padding perfect so for our this is our container here we'll do max width of 1240 pixels all right and margin out of there and we're also going to say flex and a flex column there okay and padding of one rim on the left and right so as we said this is gonna be one div here and we're gonna have an h1 that says beaches and then we're gonna have another div for our um for our social icons here so let's actually go into our nav bar we can actually just steal uh steal these here so that way we can save a little bit of time and let's just import these here at the top there we go and i'm gonna go back into the nav bar and actually just grab them right there whoa what happened wrong one there sorry about that so like i said go in here we're gonna grab all of these in here we've already imported them and so now we can just paste them right in there they already have our icon class name so we should be able to see them in here boom that's what we want right there so basically for this step here what we want to say is that anything above small we're going to display is flex right otherwise we'll say text center and we're going to say justify justify be oh man came and typed this right justify between and items center okay and we'll go ahead and lay these down okay so let's give this class name uh plex boom there we go and what we were saying here also is um basically for for our div here we're gonna say is flex and then justify between and a width full so where i can actually see our item spread out then anything above small right we want to say a max width of 280 pixels okay and we'll say my 4 for a margin of 1 ram on the top and bottom so that's what i want you guys and if we scroll this open past there we go it kind of changes at our break point right there our our small breakpoint 640 pixels so that's perfect right there now we're gonna have a couple unordered lists underneath that so um below this diff but still within our parent our container here we're gonna have a div and we're gonna have an unordered list in here and when i say these were so just i can see we're typing here oh i will say about and let's copy these down this one is going to be partner chips and we'll have careers and this one's going to say news newsroom and then one more for advertising and i'll actually just do the same go to our navbar and let's just copy down these list items here just underneath that or list we'll create another one boom let's go i don't need that now go ahead and save that let's have a look it's perfect that's what we want right there over this bottom div here let's just right here we probably want to display this as uh flex and we'll say justify between there we go and boom and this one we can just say text align or text right for the text align right and that's perfect that's what we want right there now anything above the large break point i actually want these uh under our list here to be displayed as flex so let's go ahead and say anything above large let's show that on our list is flex and we'll throw that in here as well so any above large will display as flex there we go so as we shrink down i think we should be pretty close to the large break point there yep there we go so as we streak down below large break point everything is stacked so i think that concludes our video guys let's have a look let's blow this thing up to full screen boom there we go so let's look at our footer that is perfect that is exactly what we want you guys let's go up to the top here boom so we have our custom header and let's make sure our drop-down menu boom as we go below our media break point boom we have a very nice custom nav menu there we styled some buttons and react icons boom there we go using the react icon dependency here for our search and little little person there our account person we have a full width full screen video background style with tailwind css with a nice form on top next we're using the grid system we have five columns here with our first image spanning cost three columns and two rows and this changes down to two as on a mobile break points here then down here another uh grid here with a nice form at the bottom using our react icons and our beautiful background gradients here for our buttons and then of course we have another grid styled layout here passing in a we're using a functional component passing through a background property as well as a text property and then we have our custom react react um carousel here that we coded from scratch i hope you guys like that one and then a footer so thank you so much for following along in this video you guys i hope you like it make sure you like this video if you feel like you got a little value out of it i would appreciate that and consider subscribing to my channel i'm going to be putting out some more react content just like this here in the near future so also leave me a comment in the below if you liked it or anything else you'd like to see please let me know so i can have some more video ideas thanks for watching you guys i'll see you on the next one

Channel: Code Commerce

Views: 25,564

Keywords:

Id: gXdHvoWvViQ

Length: 95min 58sec (5758 seconds)

Published: Sat Mar 19 2022