Zooming Up and Down to View Cards

I'm going to go ahead and just zoom up and down a little bit scroll up now so you guys can see this but now because let's scroll down and you can see that we've got those two tiles like those two rows of the cards right so we've got two rows of cards and the bottom one says 130 and it's got even got the prices on the bottom one uh really clean yeah really super clean yeah nice so now we've got that done what we need to do is go ahead and add the footer in so for the footer what we need to do is inside of app.js so yeah inside of app.js let's go back to app.js so here here we have so you can see it's very very nice labs we've got the header we've got the home page and then we're going to add pretty much a footer i'm going to add a footer so this will actually satisfy the last bit here so the footer and let's go ahead and create that photo.js oh i was wondering okay it's picking up my phone sound okay i muted it because i was uh messaging the student to join and people are like holy crap your phone sounds are jacked okay got it nice so now for the photo json the rfce here and then i'm gonna do class name so class name footer like that and then here i'm gonna do import css so import the folder wait so footer.css css save it let's go ahead and create the photo.css file support.css like this and we should pop into that file any second now nice so once we have the footer guys what we're going to do essentially is we're just going to jump in here and we're just going this will be very simple guys we're going to have two p tags all right we have two p tags one is going to say that little sort of no rights reserve this is a demo at the bottom of the page one is going to say privacy terms sitemap company details that's what you see at the bottom of the the airbnb app at a very simple level so i'm going to go ahead and pull this into our component here's by saying footer that should get rid of the error that we're facing save that and it should go ahead and drop to the bottom of the screen now so let's go ahead and scroll down quasi yep i'm gonna go ahead and scroll down on our app or the code yeah uh on there and the app and you can see at the bottom we've got the footer pop in so are we now working on the footer yeah damn bro you gotta tell me we're done with stuff all right here comes the horn sound we're done with the cards the photo will actually take pretty quick so we've only got one thing to add so far but let's go ahead so for the footer we're going to add the following styling i just added a foot emoji on the title nice so here what we're going to do is we've got the footer so here we're going to say border top 1 pixel solid light gray padding of 20 pixels background color of white it's like a gray off gray the bottom zero so it's gonna stick to the bottom uh and then we're gonna say text align center uh here we don't actually need bottom zero text line center and then for the uh we're gonna target the p tags so that text we're gonna say padding of five pixels font size of fourteen so now if we scroll down qazi we should see the the bottom so that footer should actually show us and there we go that looks okay hold on it's not showing up for the people watching so i'm going to do this and now it should show up there we go showing up now it's perfect yep now it's showing perfectly nice so now you guys can see the footer uh we just got another uh euro we got one euro donation from ita punjabi thank you so much oh thank you bro appreciate that that is amazing we're at 163 now nice that's crazy dude damn wow all right so we've got that up and running which is awesome um and then what we're gonna do is guys if you if you write a message and you do it all in caps capitals it's gonna the nightbot which is like a it's gonna like block you so so don't try not to write in all caps yeah sorry about that it's the bot is really aggressive so we can't even control him he has a mind of his own all right now what we're going to do guys is we've pretty much done the home page the home page is done like it looks very slick the thing is working um now we want to move over to the search page right so how do we get the search page functionally how do we do routing or any of that stuff

"WEBVTTKind: captionsLanguage: entalking about so i'll just search from 26th to 30th and do this and this is what i got by the way super responsive so it looks amazing and when you say search page you're really referring to this page right exactly yeah exactly what i'm referring to whoa 10 canadian dollars thank you thank you so much that is awesome and we just broke 700 viewers with a 10 donation guys you're the best thank you so much and smash that like button let's keep this rocking and rolling nice let's go guys so the first thing we're going to do is build a home.js component so because if you're going to go ahead and create the first file and then what we can do is i can create it after that but sure thing uh just to show them so what do you home.js exactly nice and once we have home.js we're going to use our nice little trick called rfce and rfce is a is a really handy extension that we it's called es7 react snippets and to get that it's very simple you just go to the vs code extensions type in es7 snippets and it will come up and that will give you that rfce functionality which is nice so at this point what we're going to do is we are going to actually go ahead and give this a class name of home so we give this a class name of home just like this and we are going to go ahead and import the appropriate css file so we're going to say import home.css like this right and obviously with that said we're going to have to go ahead and create the css file so i'm going to go ahead and create home.css and we should be popped in right here so uh i think you have to follow me cozzy so let's go ahead and re-follow me there we go so now you guys can see i'm inside of home.css and we've imported it at the top here and that will allow us guys to do a few things that allow us to actually write css which only belongs to the home folder a home component sorry so with that what we're going to do now is we're going to pull this on to you so let's just prove that this is the home we're going to say h1 um oh no my snippets don't seem to work that's fine we can do h1 and here i'm going to say uh home component like this right save this file and i'm going to go back to your app and here we're actually going to pull it in the home component so i'm going to say home like so and what we can do is we need to import the home component so i'm going to say import home from home like this right and save the file and what that will go ahead and do is it should now we should now see on the we should now see on the uh on the right side so let's go ahead and give me one second my itunes is going nuts so just shutting out my itunes and now you guys should be actually good to go oh and i just realized i got my phone as a thing so i'm gonna actually probably use that at some point but for now let's keep going nice so uh let's go ahead and pull up localhost on the right okay so we're gonna do that so we got localhost and the actual final build right here so everybody can see it nice and are we sharing the screen yeah nice awesome so now we've got uh you can see it says home component right so what i'm going to go ahead and do just prove this we're going to get rid of the h1 over here and now you should be able to just see home component right so it should be super clean we might need to refresh localhost uh because it doesn't seem to be coming up somebody says sunny check your voice is too low so let me go ahead and turn the gain up a little bit for you guys i'll turn you up a little don't turn your gain up your audio is pretty awesome i'll turn you up here more your audio today is like really clean okay awesome now you're better nice so now what we're going to do is we are actually going to go ahead and build out the home component so the first thing we want to build inside the home component is um the actual before we do that so we actually added the home component but we actually want to always show so think of it this way the header component is actually going to live in both the home and the um the search page right so it's going to exist in both of these things so what we can do is we just built the home component but we're actually going to go ahead and build the header component and this is always going to show so let's go ahead and add this in right here right here so yeah what we need to do is create header.js so header.js and we should snap into that file in a second uh let's go in it's just loading so we're now inside the header.json we'll do rfce and we're inside and i'm going to do class name equals header like so and we're going to do import header.css and then i'm going to go ahead and do header.css so we've created a header.css file as well and you should see me snap in any second now there we go so we're inside and inside of the header file let's go ahead and start sort of drafting out what it's going to look like so the header file has an image tag so i've actually gone ahead and grabbed an image and this is just an image of the um the uh airbnb logo so let's go ahead and pop this in here and what we're going to do is you can see i've given it a class name of header underscore underscore icon so this is bem this is header component and it's the icon element so that's why we've done this and now we should actually go ahead and see that if we okay so it's freaking out because we haven't imported it so we need to go ahead and import it here so we can say header like this save the file and we should now see a massive airbnb logo right so obviously we don't want it to be that big it looks a bit ugly when we have it like that so so how do we get that to look a bit smaller right so we go to header.css and we basically are going to target the header icon so we're going to target the header icon and i'm going to say give it an object fit contain so this is going to keep the aspect ratio so it doesn't stretch i'm going to say the height is 100 pixels so now you can see it's a very small size and then we're going to go ahead and give it margin left of 80 pixels so that should push it a little bit from the side so let's go ahead and decrease this a little bit for now so let's just say 20 pixels to make it a little bit subtle and we have the image tag up and running so that's all handy and that's done now we're going to create a div for the center stuff so that that search input field that you see and the header right so let's go ahead and pull out the deployed version quasi so this is a deployed version yep so this is the deployed version and you can see it in the middle of that deployed version so that's actually going to give it half and half uh so because right now it's still quite stretched there we go so you can see in the middle of the the top bar we have that search input field so we're going to go ahead and build that first and then we're going to add a header right section which is which has those uh icons that you see on the right so hold on so in the in the header this is going to be one so i'm just imagining this this is one container that will just keep the logo and that one container has only one child yeah so this is really good by the way guys because my css skills suck so it's good because if you're a beginner in css you'll pick it up this way too i imagine this is one container with two children one is the search input and one is the search icon exactly nice okay dope and then we got another one here and this has four one container with four children text logo icon icon icon yep exactly and the middle container we're going to apply flex 1 to it so it's actually going to span all of that gap that you see in the middle so this is going to apply flex 1 and so hold on let me get this straight so this container here is actually really like this right yes exactly nice and that happens when you do when you do flex one exactly so it's giving that the importance and then the the ones on the right and left are only taking up as much space as they need exactly that now another question for you sunny how do they know to be centered how does airbnb logo know to be kind of centered you know what i mean like why isn't it left aligned so what we do is we say that the um header so we say that entire container should be display flex which will pop everything into a row and then what we say is align item center and that will align everything centrally ah so this is because of align items uh center something like that yep exactly dope okay dude this is actually a really cool way for me to learn yeah it's nice okay and when you do a line item center it will center every single one of these items in the entire header we're applying a line item center to the header yeah so the actual um we're applying it to the direct children of the parents so that they had a parent so we should make sense when we do it but what will happen is for that middle one for example that will have its own display flex and then that will have to have its own align item center got it so every single container has to behave you have to give the rules to that container so um yeah we'll be able to show it out but that's a really good example of a line item center beautiful okay okay let's keep going nice so with that said what we're going to do now is go over to here and we're going to create a div so i'm going to go ahead and do div um so let's make a div and this div oh man why is he snipping this no i'm going to say div class name equals and then here i'm going to do header center right so this will be header center and it's being a bit laggy so this is actually going to go ahead and do this so header center and here we're going to have two things we're going to have an input typed as text so here's going to have an input type as text and a search icon now it's going to freak out because this search icon i mean where are we getting this from right so in order to get the search icon we're going to have to pull in material ui so let's go ahead and actually do that at this point so kazi let's head over to materialui.com and show them how to install material ui core and material ui icons yep so you guys make sure when you're at material ui grab this come back to your command line i'm gonna just open up a new one and then install this how you install core now i'm gonna go here type in icons and um in the mean and then also i think install core really fast damn and then over here choose icons because my download is what 900 900 download speed actually right now 900 megabits nice uh so make sure you also install icons you'll need this on this page make sure you click here which says search the full list of icons and yeah until somebody finds a better way to do that and then go in here here are all your icons so for example when you guys are looking at these icons here right um whoops there we go so sunny has this avatar icon at the top right i i can probably did you actually pick it from here uh no so the avatar is actually a component because you can pause something but let's look at the globe for example okay let's type in globe okay there we go yep so that's coming from right there dope and then what about that drop drop arrow drop arrow that's that's actually if you type in uh i think it's if you type in down down or something yeah there we go another is that one that one expand more it's expanding yeah that's it right there and then yeah i mean everything else oh the search is i mean obvious so then what sunny would do is once he finds search right here we got search we match it up to that one dope now click here this will give you the actual code you can copy it paste it into your app and you're good to go exactly and then that's how when you see me using snippets like search icon language i can expand more icon that's where we're getting them from right so if you do get confused at any point you can be sure to check out material ui the icon search tool all right i'm gonna give you access i'm gonna give you read and write access to both terminals as well awesome nice so with that said guys this search icon is freaking out right now because it doesn't know where to pull it from so let's go to the top of the file import the search icon like that and that will actually go ahead and it should save the file and we should have the search icon so you can see now everything by default is display blocks which means it stacks up on top of each other we don't actually want that behavior right so in order to get rid of that what we can do is we can go here and we can say header and we can say display flex so if i do this display flex check out what happens as soon as we hit save everything goes into a row so you can now see that the airbnb and the top has gone into a row let's go ahead and remove that home component let's just comment that out for now so it gets a bit confusing there we go so inside of the header now we've got the search icon and we've got an input field text input field yeah so what we're going to do now is also remember we said you have to treat every single container with its own rules so in order to do that we can target the header center say display flex and look what happens when i do this guys so if i say display flex align item center like this look how the uh search icon is now central center with the input field so that's really clean and that's the way that you do that all right now what i'm going to also do is go ahead and add a the right section so the right section i'm going to go ahead and do a div and this div is going to have a class name of let's go ahead and say header underscore right there we go and here i'm going to go ahead and add in a few things it's going to have a p tag so this p tag is going to say become a host because that's what they have on airbnb and for those of you who don't actually know what airbnb is it's a place where you can pretty much rent out a room it's like a hotels of booking website um so yeah so that's where you can become a host as well so we're gonna import the two icons at the top so you've got language icon expand more icon and also this is not an icon but it's it's a component called avatar now that's how we achieve that sort of circular profile image a very very powerful component you can actually pass it a source we use it in a lot of other builds so be sure to check that out but what we're going to do is we're going to go ahead and pop in those three icons here like so so i'm going to go ahead and do this and now we should see those things pop in and now you can see in the header right container you as you guessed it it's display block which means they stack up on top of each other by default we again don't want this behavior so what we can do is we can say header right we can go ahead and write and then what we can do is we can say uh header right display flex display flex like this right now if i go ahead and do this we can go ahead and save it and you should be able to see everything goes into a into its own line right now if again let's stick with our rule let's do a line item center and we will be able to see again that everything goes center central with each other which is really nice and it's a really good way of doing this now for the header what we're going to do is we're going to space out those components components as much as they can go so we're going to say justify content space between and that will actually push the components apart as far as they can go from each other and then for the central element remember we said that we want that center one to take up as much room as it can so we're gonna go ahead and give that a flex one rule and that will do that and you can't actually see what this is doing unless we actually make it a little bit bigger but you need to trust at this point so cause let's go ahead and make it a little bit bigger now you can see the input field is actually taking up the majority of that room but it doesn't look like it right now right so it actually doesn't look like it and the way we fix this right now is we're going to add a few things in and in order to do that uh what we need to do at this point is firstly we need to go ahead and do the following so we're going to say align items center which we've done so let's go ahead and do that first align item center at the top uh william cruz again with the um five i think that's uh what was that one he always says it every time i can't remember but thank you so much for that donation massively awesome i always actually i call it the chief keef donation but i forget what the chf man every time swiss franc how in the world does chf stand for swiss franc bro but thank you so much that is huge yeah i always get lost to that one i wish it had a better acronym like sf swiss franc that would be so much easier but thank you brother i appreciate it absolutely appreciate that so nice so now what we're gonna do is let's go ahead and do the following so for the uh header we're gonna go ahead and add the following rules so i'll explain each of these ones as we do it so we're doing a line item center we're doing position sticky and what we're doing here if when we do position sticky with the top of zero what this does is if you go to the deployed app kazi and let's go ahead and scroll down on the deployed app so let's open up the deployed app and let's scroll down can you notice how the header is actually sticking to the top yeah i can see it's very yeah yeah so it does that because we've done position sticky and then top zero so it sticks to the top and that's how we get it to look like that now an important rule that we have to add is the z index so you have to say z index of 100 100 because and if we gave something else like 99 we want it to be going to be like sort of on top of everything else so it covers everything we're going to give it a background color of white which is what we see and expect and a width of 100 because we want to span the entire width so that's going to do that for us the next thing we want to do is we've already started the header icon which is awesome we want to basically william cruz says the best of the best you both are amazing sunny would be nice to see you working with react native challenge accepted dude we will get on to that and we will start building something really native i haven't used it in a while so i mean we can definitely i'm excited to go back into it i know people are asking what happened yesterday because i wasn't on the live stream i was i shared like my dog got hurt so um i'm gonna share some of that with you guys so this is actually our puppy her name is pudgy and she ended up like really breaking her nail pretty bad so that's why yesterday we had to go to the er frankie ended up taking over the stream uh then we were waiting at the um at the vets for hours and here that's my girlfriend that's amber lee that's pudgy right there she was pretty hurt and then we pretty much got her back and this is this is what she's up to now so you can see she's passed out she got a little like cast on her arm right there and yeah got a call so she can't bite it off but yeah she's getting big really really fast um dude it's horrible when you see a little one like a little dog sort of injured that's crazy they gave her a little car yeah a little like tiny cone she's so adorable she's probably playing with it like she's just sitting there like she's out of action with her crazy stuff was going on man and then yesterday like our freaking whole alarm like our sewage system like making crazy sounds and stuff and then releasing smell i'm like what is happening can we just get back to coding good damn it man at least we are back guys and i think that deserves to smash your thumbs up man yeah guys if you yeah for the little puppy you know yeah go ahead and smash that like button thank you people are saying blessing her a you says blessing for her courtney says beautiful dog she's a english bulldog she's four months old so to see her and then like the nail got broken so they had to like actually pull it out completely so that's why they put the cast on top of it yeah but uh yeah other than that let's keep in rocking and rolling now i'm back and ready to go guys and we're here and let's crush it so what we're gonna add now for the center is we're gonna say give it a max width and fix uh and fit the content so let's go ahead and do this so fit content like that and what we're going to do is boom and here i'm going to give it a bit of styling so we'll say panning at 10 pixels a height of 30 pixels so let's go ahead and do that save the file and you can now see that it should change a little bit uh oh oops i've added that's the wrong thing we should add it over here there we go add it to the header center and that will actually go ahead and pad that out a little bit now for the top right so the center element we're gonna go ahead and give it a border radius of 999 which is a perfect oval we're going to give it a one pixel solid light gray board and you can see now it's got a so very subtle light like sort of um light gray border around the top but we don't want that input field to actually have the border around itself so what we need to do is target it like this we say header center the direct charge which is an input and we're going to say border none so we're going to go ahead and do border none and what i'm going to do at this point is i'm going to say width of 250 pixels like this and now guys you can see if we go ahead and do this so actually at this point we'll keep it responsive let's go ahead and get rid of this for a second but what we can actually say is we can say um let's leave it as width 250 for now uh let's go ahead and do that and then on the header right what we're going to do is we're going to say justify content space between those icons we want to give some space between them we're also going to give it a width of 15 view it and a margin right of 80 pixels so i'm going to go ahead and do that right now and this will go ahead and it should space it out a little bit more and there we go so let's go ahead and do this for now because let's actually make it a big screen uh sure think boom there we go nice now you guys can see everything is spaced out evenly we've got a nice little bit of spacing and what you can do at this point for desktop support you can do a width of 250 pixels and you see the middle goes into that but for now to keep it super responsive i'm going to actually comment now so let's go ahead and do half half again nice and what we're going to do now is for that input field what i want to actually say is give it a padding of 10 pixels and then outline width of 0. and what this does guys is now because if you go ahead and click the input field damn effort just dropped five pounds he says damn you guys are just awesome enough said hope you make a web app with an admin interface someday i've actually heard a lot of people say that so we will go ahead and actually make some kind of admin crud functionality app or something by the way i figured out finally how to actually increase the size of this thing that was thanks to leif i was on the coaching call for a profitable shortcut and he was like dude you can increase the size of this and i'm like oh oh nice that makes life so much easier so yeah thank you efosa really appreciate it and yeah this is another reason i actually really like django as a web framework because it comes in with a badass built-in admin interface which is so freaking nice too but i think a django and react combo could be really fun that would be awesome dude because i want to learn a lot of django that would be awesome to do that nice so kazi go ahead and click the input field yep and now can you see there's no blue outline right you don't get any blue out there but if i if i actually uh comment out the outline width uh oh no oops i'm on the wrong corner if i go and comment out the outline with this one and we now do can you see you get that nasty outline right yeah kind of defeats the entire ui so what you need to do is outline width of zero and that actually gets rid of it and now it just looks plain yeah and that's how you get that sort of desire right and it's a boolean type of thing right so whether you have zero and one that's the same even if you had a hundred it'll be the same exactly yeah okay dope yeah so that we're gonna switch to zero and then you'll be able to get that so that's really clean and with that said the header is pretty much done at this point right so the header at this point is done uh which is awesome so now we can actually go back to the uh app.js file and we can see that we've got our header over here and now we're going to focus on the home component right so let's go back into home and previously we had this where we said home components let's go ahead and see now you can see the home component renders in underneath um underneath the the header now i can see some people have just completed the google clone that's awesome yeah i love seeing people that oh damn louise eduardo just dropped 20 us dollars wait hold on hold on whoa whoa whoa whoa whoa whoa whoa whoa whoa whoa whoa whoa whoa damn thank you so much luis eduardo really appreciated holy crap you guys i mean yesterday i had to pay 400 for my dog so this is actually helping out you know this actually thank you so much really appreciate it that's insane thank you so much wow somebody said we have 20 dislikes on the video so i think he paid 20 dollars to make up for all those dislikes nice appreciate it appreciate that dude so with that said let's go to the home.js component right so what we're going to be building next is a fun component is the banner right so that really beautiful banner that we see so to get that banner up and running let's go ahead and create banner.js so i've just created that file and we should pop into it in just a second and we are in that file now and if i do rfce and the snippets should load there we go and we can see banner and then just do our little setup so we say class name equals banner and at the top of the file i'm going to go ahead and import oops import banner dot css there we go save the file and it's going to complain because it doesn't have a banner.css so let's go ahead and create that file oh we just got another donation dude by x i'm gonna i'm gonna bring that in a second but jose said qazi i just wanted to say that your content is the best out there actually spending the time to read and see your sts stats result uh see your results as speechless thank you clever programmer of course guys we're reading every single message and we're trying to respond to every single uh message as long as you guys are actually putting in the time and asking good questions we will reply to most of people and thank you so much ex lilu for the six pound donation holy crap euro six euro donation and he goes uh awesome hi qazi and sunny in the future do you have any responsive mobile project or a tutorial on how to use media media queries and react what are you thinking sunny dude we just got another one i'll let that pop in when you see that but yeah we are going to be doing a responsive oh my god we'll definitely be doing we'll definitely be doing uh some builds with media queries so stay tuned for that and you guys know you guys know that song on tick tock i should be playing that here remind me actually to put that on after this frankie but like that one goes what you do you have you heard that on tick tock ever yeah that is a 10 pound donation and he says waiting to see a facebook clone and we will be making a facebook clone with every option including live and marketplace tech one react with typescript sunny typescript is coming up i know you're gonna enjoy it two redux three apollo four graphql and five docker damn bro i think you might be asking a lot for ten dollars bro i think you're pushing it now but we'll try we'll try to add some of the things in there but thank you bro no pressure no pressure guys so with that said we've got we got holy they're gonna start asking for blood from me yeah bro just right now yeah yeah oh right for brother so inside of the banner component now it says banner is not defined and that's because inside of here we need to do an import so let's go ahead and say import import architect i've got a new keyboard import banner from banner.css there we go save that somebody else's message they're like could you make an app that includes react graphql scikit learn and tensorflow like damn holy so it's freaking out if we if you give it an empty thing right it's going to stop freaking out so this would just say hello for now something like that and then it will actually go ahead and not give you an error so it should be working completely fine once we put that in and it saves and refreshes um let's go ahead and refresh logos quasi all right i will go ahead and refresh localhost 3000. oh oops i've done it wrong this should be banner here should be sorry import from banner that's why that was happening inside of here we do import from banner css that's nice so there we go we've got hello i'm let's just just say i am banner okay i am the banner now what we're going to do is i love how people actually spot that out as well like it shows how much you guys are watching it's insane to see that yeah seriously yeah like when i see people like you forgot an import i'm like holy crap they're really like nailing in on that so now inside of banner.js we're going to have a few things right we've got the search so we're going to ignore the search just for now but for the info right so the actual banner itself let's get that looking the way that you've that the majority of it that you see i found it i found it so i'm just going to show it real quick uh i was trying to spend some time looking for it uh and i found the song in the compilation uh this is what it is let me play it actually real quick hopefully it doesn't blow your ears guys be prepared be prepared oh god yeah i can't hear it i mean uh it's i don't know how this trend started it's all about like splashing water on people and oh yeah yeah yeah i've seen a few people did it yeah but i love that song that i love jesus christ yeah so you guys can look that up it's called what you doing with that yeah i'll definitely clip it and have it in our videos playing next time no sean dawn says great what you guys do i made the netflix and google watching your video thank you yeah pretty sick names oh damn yeah sean dean maybe yeah oh damn it david jonathan said that wasn't sound wait are you serious yeah i might have not actually came through on the sound i think the sound was there but it might have been too quiet let me let me try it one more time i think it should be good guys someone jumps in like is this the place where we learn reaction did somebody say that no i'm just imagining oh yeah yeah no no the audio is there i mean audio should be there you guys all right all right let's keep coding my bad but yeah that's where the song comes from so now what we're going to do is we have the banner and we want to basically get this to a point so let's go ahead and put the banner over here we've got banner.css and just going to target the banner and what i'm going to say here is that the banner should have a height of 50 view height so this is going to be pretty much say it's got 50 percent of the screen that's going to be its height right so we're going to say that we want to be position relative because we're going to have some things positioned inside of it and we want to do some funky stuff with that and then what i'm going to do is i'm going to set the background to an image right so the background of this i'm going to set it to an image and this background i'm going to set it to is actually an image of like a sort of airbnb looking building right so let's go ahead and do this and save it and now you can actually see if we go ahead and actually make that a bit bigger quasi so let's go ahead and make that a bit bigger we should be able to see why is it looking like oh yeah oops so we've got that right now you can see the image is there but it's not centered right so all we need to do is add these two lines at the end saying center center and this will center it horizontally vertically and you can see boom there you go you get like a very nice centered image yeah so that's really cool looks super clean let's go ahead and do half half again nice and what we're going to do now is where it says i am a banner you notice how it's the background of the div that we actually set right so i'm going to actually go here and change this now so we actually have inside of it i'm going to have not i am a banner but i'm going to create a div so i'm going to say div and this div is going to have a class name so i'm going to say class name and this is going to be banner info right so it's going to be banner info and this is going to be responsible for the text that you see so that black block of text that you guys saw in the previous uh build so what we're going to have inside of here is a h1 which says get out and stretch your imagination the reason why we don't i didn't think of that that was what was on the website that's what's actually on the airbnb website and then we're going to have a h5 um i think you're muted quasi yep very good no i know but i wasn't talking oh yeah i thought i saw you talking to the camera nice oh no no i was just i was just staring everybody down in the live stream making sure they were they knew i was paying attention and watching them nice so now you can see let's go ahead and refresh localhost because there's some reason it does this when we pair program um let's go ahead and refresh quasi localhost 3000 and then what we're going to do is we are going to have so now you can see it says get out and stretch your imagination here's some good comments by the way i just want to shout them out malwaniki says after trying tons of boot camps i found my yoda you guys are the best and robert says thanks your streams and videos are great keep going guys learned a lot from you nice and you know what guys even if you're a beginner just follow along with the builds and i say this even to the students inside the course follow along with these builds it's pattern recognition just by following along with the build every single time you start to pick this stuff up naturally like if you go along with every single build it's impossible not to learn right so go ahead and make sure you do that and you guys will naturally pick up these skills nice so with that said let's actually go ahead and add an explore nearby button right so let's go ahead and add that button in so let's go ahead and do it here so say button and it's a capital b because we're using the material ui button so we need to go ahead and import that at the top of the file let's go ahead and pop down at the top and then here i'm going to say explore explore nearby oops explore there by like this and then i'm going to go ahead and give this a variant so i'm going to say this is a variant of outlined so material ui allows you to pass props to its components this one changes the look and feel of that button so the explore button you can't actually see it very well but you can actually see it now and there buttons in the chat hey she goes sorry fashionably late the girlfriend's always supporting nice and so now we've got explore nearby um and now what we're going to do is actually go ahead and style this banner info so it looks a lot nicer than what we're seeing right now right so let's go ahead and do banner on the squad score info and let's do this a balance for info oops info and let's actually go ahead and change the background color of this to black so let's change the background color to black and let's do this so we're going to say color of white as well so change the color because now we remember we just set the background color to brown to black so the text is also going to be hidden so we need to make the color white and you can see now we can see that the color of that stuff right so um now what we're going to do is now so let's go ahead and do color white and what we're going to do is we're going to add some padding right so these are different values we're going to be using i'll run you guys through what each one is so padding top i'm saying give it 25 padding top i want padding left 50 pixels padding right 50 pixels padding bottom 40 pixels um and then i'm going to say the width should be 300 pixels max right so the width of 300 pixels and that will actually tie in a little bit and now what's really nice about this design guys is that if you actually go ahead and make this uh bigger kazi we should be able to see that this will actually it's a very nice sort of overlay right so let's go ahead and make it bigger you see it like it kind of looks pretty neat how it's in there right um so you can kind of get that thing and then like yeah it looks super neat by the way ramraj says please consider adding tracked module in the pwg course what's tracked maybe he misspelled react i don't know yeah i think he might be talking about react inside the pwg course we actually do have a bunch of content we have a loads of coaching calls on inside the course and we're actually dropping some modules on react so everything is going to be inside that course yeah and apparently ashish uh enjoyed marabon and sunny's dance video on savage love on tick tock hey nice quit getting that clout damn yeah there we go all right so because do you teach hacking oh man if you if you consider debugging hacking let's go yeah right so now what we're going to do is we're going to change the style of that button right so let's go ahead and target the buttons we're going to say banner info the direct child which is a button and i'm going to go ahead and do background color and i went and actually saved you guys some time and i found the color of airbnb which is this right here so if we do that you can see the button pops in right now i you can see by default material ui give makes everything uppercase for some weird reason so to get rid of that you do text transform inherit and i'll get rid of that uppercase oh just got another donation by manav aurora i think i've seen him in a few of these videos awesome he says pwa or react native what will be great for a project depends on what you're doing dude so pwa is progressive web app i'd recommend go with that until you need a native app and i love what ram raj is saying he goes i'm loving the pwg course already way to go thanks for the awesome content and i actually want to share something pretty epic that happened in uh in pwj yesterday actually so i'm gonna show that also i know i know i know i know i will i will i i will address that in just one second i'm gonna lose my actually so i'm actually trying to hide that for myself for just one second so i can show this because we have bunch of awesome things to show you guys uh where did he post it where did devon post it trying to find uh let me actually try this uh okay let's try this here we go here we go awesome so i just found it right now i'm gonna full screen this and hopefully you guys should be able to see this so devin is our student in profit with javascript and he goes i'm not normally used to posting stuff about myself uh this is devin by the way he was coming on the live streams as well he goes but i know it's important to share wins so i'm sharing mine while i have them first of all i love my new job it's my first six-figure job and i'm learning so first of all damn devin congrats on your first six-figure job and he goes and i'm learning a lot of different things that i don't ever get to practice when i work for smaller companies i've only been working this job for a little over a week but it's awesome second i just got accepted to the second round of interviews with google yes that google and he goes i am so pumped um when i first joined the group i was working for a mom and pop agency doing wordpress sites making like one third of what i'm making now and i only joined pwj back in june july is there a correlation i'll let you decide i want to thank everyone in the channel for their support because i'm mostly here for the community and it's helped me in a large way dude that is so freaking awesome that is insane dude and look frank is here too on stage nice that's awesome guys if you want to know how to get inside this community link in the description and david is here david is also on the live chat with us right now yeah david's always watching sally guy he was actually in the coaching call yesterday we spoke loads and we'll be working quite closely together so david's awesome dude inside the course yeah and what the hell the greatest ever you should be in the course right now you're the only one left who's our biggest supporter but not joining the course you should jump in so 100 dude that is sick this is for you devon i just played the air horn and that is a massive massive win to be in the second round of training and also kiera robinson is in her round of interviews with google as well and she's in pwj i'm actually coaching her dude oh snap yeah i'm giving a bit of hand with those interviews yeah so she's doing a google interview as well and she reached out to me to get some help on that so yeah that's another student inside the course who's doing google interviews so this is like mind-blowing stuff guys like seriously it's insane that the jobs these people are getting like frank even got a six-figure contract blew my mind like for company and if you guys have heard of sonos then that's the company that he got it for so amazing stuff yeah we're just having massive wins left and right so if you guys are serious about taking your career to the next level guys i'm telling you this jump on this course before we increase the price and just for fairness so all of you know we know that this program is worth over two thousand dollars it because most people send us messages telling us how much this work this program is worth more than the boot camps that they paid for and in about in next week we're going to be doing a challenge for react and during that challenge we're going to be increasing the price of the course and then it's permanently increasing it's going to keep going up so if you find it for less than 2 000 and you're serious about this you should 1 000 join so for all of you who are here just letting you know because i think this would be a good deal for you guys before the price actually goes up in a week or less exactly and guys if you're on the fence and you can't make the decision yeah or like you're just you're tempted or whatever make sure you check out in the in the description we actually are offering a completely free training on the three top mistakes that developers make completely free training go ahead and check that out and and yeah yeah so you guys have the links in the description you guys can go to this page anytime you want and make sure you just check out this video over here for profit javascript this is the page cleverprogrammer.com pwj and it will tell you everything about this program but you guys know you're going to be getting sunny on the program on the live coaching calls you know you're going to be getting nas so it's a brilliant program guys with so much just heart and soul we put this together join it your mind will be blown that's all i can say yeah and guys like i can't stress enough like if you think that you if you enjoy the live streams me qazi nars the entire team frank we put our heart into this this into this program so like everything that we love and we aspire to like to to make an impact in this sort of uh in this community is inside that program so like if you want to be a part of that then just jump in yeah 100 percent let's keep rocking rolling nice with that said guys we were on the banner right so we just added in the text transform inherit line of code which actually changes the button text to lowercase because we don't want it to be super everything like screaming at you right now it's touching the top text so i'm going to do is margin top of 20 pixels font weight of 600 and you'll see that pushes the button slightly away from the um top of the text which is awesome so we want to make sure that that's done also the h5 tags so the one which says plan a different kind of get away to uncover the hidden gems near you gonna go ahead and target that and give it a margin top of five pixels um because we need to actually set up prettier because for some reason priya doesn't do it when we save um which is a bit annoying but will not work bro i think live share causes these problems yeah it's fine we can we can carry them without this one so we've got the h5 and what we want to do guys is when we hover over that button right so right now when we hover over that button it's not very responsive right so um it's gonna actually change to a different color so kazi if we actually go ahead and hover over the explore nearby button um yeah so guys that p that slack group bara just asked do we need to be a member uh of profit with javascript to join the slack group yes you have to be because that the way we keep the quality just incredible in that group is by whoever joins profit javascript gets access to our community as well and i think community is actually one of the best parts of that program so what did you want me to do sonny uh if you just hover over the explorer i saw some people in the comment in the comments saying who's the guy in the back frankie frankie oh yeah guys that's frankie over here uh he's getting some sick shots actually so let me show you guys actually the photo that he just took and uh look at the setup here i mean that looks amazing this is my setup right now to do this live stream this is all we have to do to actually make the make it come true nice dude awesome were you sharing your pho oh nice yeah i see it oh awesome yeah nice dope so yeah that's thank you guys uh so no it's been cause you hovered over the explore nearby button it went black right we don't actually want it to go black because it doesn't look very clean what we're going to do instead is target it so that when we hover over it so when we add this hover attribute it's going to change the background color to white and then the text to so it's basically going invert one second i forgot i'm sorry i keep doing this but i don't want to miss this so i forgot about this comment somebody in the chat reminded me thank you about that but lewis donated five dollars thank you so much and he goes my donation of twenty dollars was for your little dog damn thank you thank you so much he goes this one is for you guys great job let's go thank you lewis thank you lewis that's amazing dude nice so with that said so if you hover over the explorer nearby you'll see the colors should invert now yeah oh nice that looks clean like a crisp little look to that uh and what we're gonna do now is actually go ahead and have so we've done that sort of very nice sort of look and feel to that part what we're going to do is have an actual search button at the top so search prompt which says search dates right so at this point to add that search button i'm going to go ahead add a another div on on top of this on this one we're going to call someone say div like here i'm going to give it a class name so i'm going to say class name last name of banner and this is going to be banner underscore underscore search like this and here i'm going to basically add in a button so i'm going to say a button will exist here and this button will essentially say at this point we're going to say just search dates right so something like this button search dates and what i want to do is i'm going to give it a variant of outline so i'm going to go ahead and do this uh oops i've forgot that we don't have previous i'm going to go ahead and do variant of outlined oops variant of outline like this awesome and then what i'm going to do is give it a class name as well so i'm going to go ahead and say class name of banner underscore underscore search button so we can start this later on so banner search button and with that said it should we should have a button on top and you can see it's actually there it's a little bit difficult to see but it's actually sitting there at the top and it says search dates at the top so that's very clean now we're going to go ahead and style that so whenever we give a material ui class a class we actually need to style it with the important properties so i'm going to go ahead and add the following styles to that button i'm going to say a background color of white i'm going to say the font weight should be 900 and it should have a text transform so to get rid of the uppercase text and we're going to give it the text itself a color of the airbnb pink so that's how we get that look and feel and then what i'm going to say is for the banner search so the actual div surrounding it i'm going to say go ahead and do the following so i'm going to say give it a top of zero so it should be attached to the top give it a display flex so actually let's go ahead and get rid of this one we can do display flex and then we're going to say flex direction column and this will actually span the entire width of the screen so display column and now you should see it takes up the top of the column so you see at the top now we have that search dates and i'm going to get rid of the home component text over there because that's just ugly right now so boom there we go you've got the search dates at the top right so that looks clean but what we want to do now is have it so that when you click search dates we essentially change it so it says search dates and then hide search dates and hide and i have to to demonstrate this go to the deployed version quasi yeah let's go and if you click on search dates so you see it says hide at the top and then it says search dates every time you click the button it changes the state right right so we want to get that functionality and then basically we nice little like a nice little animation when i click it at the top yeah so that's actually already in there at the moment so if you go ahead and go to r1 so that's the reason why we get that is because we're using the material ui button nice okay yeah so that's why we get that one right there so awesome so now what we're going to do is we are going to go to the um search dates and what we've got to do to get this functionality is actually add in a piece of state so the piece of state that we're going to add in so state is essentially just how you write a variable inside of react uh here we're going to have a piece of state which is called show search right and the reason why we're going to do this is because we want this but we want this variable to keep track of if we click that button or not and by default initially when we click it we're going to have false and the reason why we want to do this is because we're going to say if you click it so let's just say for example um whenever it says show search or if so show search is true then i basically want to render out the search element that you guys saw earlier so let's just say show such uh show date picker let's show show date because that's what we're trying to do here um exactly now if we go ahead and say it says use state is not defined we need to import that so we need to import that as such at the top of the file there we go save it and then we should be able to see now if we save that so kazi now if we actually change this to true you should be able to see that it should say show date picker awesome and if i change this to false it goes ahead and it hides that right so now we have some kind of functionality to it right so what we need to do is that button we're going to tie the functionality to that button so i'm going to say on click of that button whenever you click that button i'm going to shoot off an arrow function so it's going to shoot off a function and this is going to say set show search to whatever the opposite of show search currently so if it's currently true it's going to become false if it's currently false it's going to become true so now to show this in practice kazi go ahead and hit the search date button or search yeah search dates and now you can see show date picker there we go so you see we have some kind of functionality to it now right and now that is gonna that basically sets us up for the next part this the next part is essentially building that beautiful date picker that you guys see in the final build which is that really nice all right i'll add that i'll add that to the top so currently we're working on building the date picker yep we're building the date picker at the moment okay i just added that to the top awesome so now what we're going to do is let's go ahead and go to um let's go ahead and actually go to we need to basically we're going to replace this show date picker with some kind of component which looks like this so we're going to have a search component right and this search component should render out to be essentially what we see in the final product so let's go ahead and create search.js so we should snap into that file any second now i've just created a search.js file and boom we are in it and if we do rfce we should get our es7 snippet and let's go ahead and do our normal bem naming convention so we say search let's go ahead and create the appropriate css file so we're going to import from search.css save that create the search.css file nice um by the way we just broke 1 000 likes yeah thank you guys so much for that that is huge and miraban says that if sunny could he would shower with the airpods chris cavern chris thanks so much for the five dollar donation really appreciate you damn and he goes finishing up the hulu shadow clone you did yesterday but wanted to show some love hey that's awesome dude glad you're doing that because yeah the hulu clone was the hooligan was one of the funnest builds i didn't think it would be that fun but it was free if you guys haven't yeah if you guys haven't that's something which like just looks so nice on your portfolio like the hulu clone um it might already be deployed actually so you might have it um is it clone let me go ahead and see if i've got it so i've got the actual link here i can drop it to you and let's go ahead and do it i'll drop it in the code quasi so go ahead and check out that okay boom all right got it so this is the one you guys built yesterday damn it just looks so freaking slick like look at that wow yeah and it's completely uh connected to an api so if you go to the top and you actually go ahead and click because i was wondering i'm like how much accurate dummy text and data did you guys add like holy crap oh wow so if i actually change horror romance it changes yo this build is actually sick kind of regret that i wasn't like here for this build this one was pretty fun yeah like look at how juicy it all looks like even before the even the animations like me and frankie were saying adding those animations changes it from a website to an app yeah yeah true true true yeah that's true so this is the kind this is the kind of app that you guys would see on like a fire stick tv app or something you know like this is the kind of thing that you would be used to seeing as opposed to just a website like you so you could probably build this deploy on some kind of fire stick app and yeah that'd be awesome nice somebody asked luke says why don't you guys work at google guys we're not the guys who work at google we get the guys who work at google at google yeah hopefully in the next one or two years like the probability of somebody asking like how'd you get a job at google like and somebody were like saying clever programmer would be like massive like hey it was a clever programmer exactly nice so with that said let's go ahead and build the search functionality so let's go back to search and here this is where this is going to be an intricate part of it are we building search or date picker yeah uh so we're building the date picker but this is it's part basically the date picker is the search component um okay all right i mean i i don't underst how does that work this is the date picker component yeah right so are we working are we not working on the data picker component then okay okay all right i'll just let you keep going yeah well yeah we are yeah the search component i'm gonna add this in here date picker component there we go all right so um now we've got the i think maybe loves your chair this is this new chair by the way i swear i think i've seen this in the previous ones oh yeah thank you guys by the way this is a brand new chair i just got actually it has a nice little pillow here for me to sleep on look at that you know there's a proper stream of streaming yeah yeah yeah and then it has like this back support thing which is hard to show right now but it's right here this thing right there nice so it has yeah because what was happening with other chair was i couldn't like i couldn't actually sit with my back on it so that was the problem i'm laughing because meanwhile frankie's gone yeah frankie's chair no frankie has a pretty cool chair right this is a mess it works you know yeah you know hey man when you live stream you know you got you need all this i just walk around like this now i don't even let my neck go from here oh man i try to keep my neck glued all right here we go so inside the date picker we need to do a few things right so the thing that actually allows all that date picker magic to happen is um the react date range so i'm trying to kill the laughter inside uh so it's the mpm i uh wait yeah npmi so let's open up the terminal kazi that is my amg thank you dude hey that guy's name is but his name is mine what the hell is going on here i'm rafi oh yeah nice frank goes frankie has he friend goes frankie has the junior dev chair because he has a senior dev chair yeah let's go to the second terminal um okay so second terminal right here type in here npm i i see you yep npm i and then react date range so this one right here and it doesn't matter if you're in that folder or in the actual app folder right yeah it doesn't matter which one well cd anyways bro cause we're gonna forget when we're about to deploy oh damn wait no hold up did i do it oh okay good shot dude good job yeah make sure you're in the right one because otherwise that will be an issue uh it's being super slow it's being super slow right now i was like damn what's going on send me the npm i make sure you're in the right photo guys because that will i don't know my terminals being so slow but who retracted that message damn dude why are they that's funny dude somebody's message just got retracted they're like i don't know what he said but he's like am i the only one who thinks sunny is looking fat today i don't know how people think that you're more jacked than everybody here i'm the one who's actually fat i gotta work on my my belly you know gotta work on it i'm trying to box every day hey like oh my god mma again hey let's go bro yeah doing krav maga which is like an israeli style of mma yeah damn yeah it'd be dope man yeah yeah so i'll show you jiu-jitsu you can show me some krav maga let's do it dude i'm down i want to learn jiu-jitsu as well i'll be sick yeah so now guys we're going to import the date range picker so this is like a very handy mpm module that i found um and we've got we're going to import and now you also need to import two other files so these are css files that the guys who made this uh module recommend that you you bring in and this is because basically this is this is going to give you all that styling that you guys saw in the final one that's how the date picker looks the way it looks sharia sharma said try capoeira that'd be fun that's fun and ashish says mma tutorials coming soon yeah and just to see us doing react one day jiu jitsu the next unboxing the day after that that's it nice so we've we imported the date range picker and to use it there's a few things we need to do now right so we need to add two pieces of state and to add those pieces of state it's very simple one is going to be for the start date and one is going to be for the end date so here we just done that so we've added in the start date and date let's go ahead and do yep that's it nice and for the start date we're going to give it a we're just using today's date as the initial value and for the end date we're doing today's date as well now once we've done that we need to actually add in the following object so here we basically say cons selection range now this stuff you don't really need to know why when you do it this way the main thing is is somebody said sonny can't stop laughing at frankie's chair it does make me laugh yeah frankie frankie show us your chair again oh it's because oh what happened here yo who's manning the live chat damn guys it's because you're like this you're like super stern on your jet you know bro i'm not leaving this thing bro i'm just glued to this thing because i've learned my lesson my neck starts breaking after doing the live streams yeah it does it does we need to add this selection range and this is something that they want you to do if you're using this so you need to do section range start date end date and then the key which is just selection i'm not sure what the key is for in this situation but you need to have it so add that in and then we're going to create a function and this function is basically responsible for this function is responsible for when you basically select a date so here we're saying whenever you select a date set the start date to whatever range you selected the start date and then set the end date whatever range you selected the end date now this is all done um by the library itself so we just need to have this function in here and then they handle everything else um so manavaro says are you going to launch any react native course and he just dropped a donation thank you for that thank you um yeah not a react native course at this point but react we're covering so uh yeah so we'll actually be dropping some content on react native very soon nice so we have the search here and now what we're going to do is we are actually going to go ahead and add in the following line of code now this is the date range picker itself so date range picker ranges we basically pass an array with selection range so this one here and that's an object and then on change we pass in our handle select function okay so this is stuff that i would recommend you guys just follow you literally just follow it along you do it as i've written it and everything will just work for you as well inside your project so cozy let's go ahead and open up our localhost and what i'm going to do is i'm going to import the search so import import search from search here there we go and now what we should be able to see is it says use state is undefined okay so you state is not fine we need to go ahead and do this nice save it and now it also says i can't read that it says cannot resolve something what does that say cannot resolve um let me go ahead and pop this in because oh yeah i've got it localhost 3000. nice but but it says cannot resolve date fns oh yes okay so this actually requires something called fns so you need to do mpmi so let's go ahead and pull it up npm i date fns so it's a peer dependency to be honest they should have set the modules up to actually do this for you but you need to do this step guys because you need that otherwise you're going to run into this issue so that's they're bad but it should be fine so now once that installs that should fix this issue for us um okay there we go so now if we actually see it should be loading up for us in a second so nice so now if we click search dates awesome because we go ahead and click search days hey nice it's opening that thing up bro let me refresh and let's click it again boom look at that got yesterday this week damn bro that they built all of that out of the box i was like i don't know why but i was thinking man i'm like sonny must have done a lot of math here to make this stuff work like damn bro i should have just made up some some excuse me like yeah dude you know what to be honest i have built one of these manually at a previous job and guys it's actually a headache to build that so using a package like this is actually really really handy and this one is actually looks beautiful it looks it looks really nice it's a really really good library to use because there's a lot of edge cases that you have to account for when you're doing this guys stop repeating questions in the chat we are gonna block you all right so now we're gonna do is let's go ahead and add in um let's go ahead and add in the following so i need to actually i want to check something actually i wonder if we removed this from underneath here and changed it over here and then we tried it so let's go ahead and save i just want to try something quickly so now if we go ahead and try and click the search dates okay that's pretty clean but it's not as nice as we want all right anyway so going back to the point so let's go ahead and we've added in this the this date picker functionality so we need to style it to look the way that we want it to look right so in order to get it to look like that we need to do a bunch of styling to this thing and in order to do that let's go ahead and do the following so inside of search this target search let's do the following so we're going to say position absolute uh top 35 pixels left 25 width of 100 view it so um because if you go ahead and click on the search dates yo thanks adam whoa what happened to my voice there yo thanks adam for the 79 cent uh pound is it 79 wait are you serious it's like pennies yeah 79 pennies 79 pence it's like it's like you know pounds and pence and dollars and cents oh bro i did not know this thank you for the 79 pence really appreciate it thank you dude so here we're going to do so click on search dates all right boom clicked yep and now as we style it you'll be able to see everything sort of move around as we need it so click leave that open uh what we're going to do you want me to make it half the screen yeah that's too hard enough nice so now what i'm going to do is i'm going to add in boom i'm going to add in this and we're going to make it so now it's saying top 35 pixels from the top left 25 pixels and then width 100 view it let's do half and half kazi for this bit all right i will somebody is like yo if you guys are making so much money why do these little donations impress you guys that's the humility that actually got us here today exactly yeah and that would never change guys like even if somebody sent us one like literally no like thumbs up button yeah hitting the thumbs up button we're so grateful for like it literally doesn't like i remember in the beginning we started up and it was like a four dollar donation and it was like it blew our mind so yeah yeah dude is that what mike pence is he's a one yeah one uh pound one one cent one pounds uh no it's just a bad joke but okay got it nice so now what was this i was talking about this guy like mike pence but i'll just remove it all right so now we're gonna do the we're gonna target the h2 uh which is so right now we don't actually have a h2 element so i'm gonna go back to our search i'm going to add in a h2 which is basically going to be the number of guests so we're going to have that number of guests pop in underneath and then we're going to have number of guests and also we're going to have an input field for the number of guests so here we're going to have an input field for like how many guests you want to have and they're also going to have a button which says search airbnb right so i'm going to add a button so here i'm going to say i'm going to say button and i need to do an import for that and here i'm going to say search airbnb so let's go ahead and do that search airbnb let's go ahead and import that at the top so boom like that save the file and it says people icon is not defined because the people icon is an icon that we need to import from material ui so go ahead and save that hey adam tate just dropped another donation of two pounds he says thanks for taking your evenings up to do this dude you're welcome like it's insane the amount of value that we see you guys like you know thank you bro this guy's working his way up from pants to multiple pens thank you really appreciate it i think the first one was just a feeler you know yeah damn all right thank you bro nice so now what we're going to do is we have the dates popping up so again if you could just click on the search dates button cozy reason why we have to click it is because yeah it refreshes at times so now you can see it says search uh at the moment oh salman fazad uh for faizal has dropped five canadian dollars nice so we'll be coming back to call this later at my own pace just passing by to say thank you hold on let me pop that in let me pop that in okay now cover it so he says we'll be coming back to code this later on at my own pace just passing by to say thank you from everyone by the way we will be coding react native anytime soon of course dude we will be definitely calling react native soon so stay tuned for that and again massive thank you for donating that's it we really appreciate that thank you bro awesome so let's go ahead and do um the h2 yeah so now for the h2 what i'm going to do is i'm going to do this i'm going to copy a bunch of styles in here and i'll explain through what they're doing so as soon as i hit save on this you actually see the style looked a bit different there right and the reason why that happened is because i don't display flex align item center which means that the um we now have that icon so that people icon push to the right so um we now have the pupils uh cause you might need to move our face on the uh on ecam so let's move our face to maybe the center you got it because right now it's covering the number of guests um so so that should be you should go you guys should be obscene now on the drop down it says the number of guests and then it actually has that people icon and then we got that with justify content space between and display flex so now they're spaced apart and we gave it a width of five five nine padding of 10 pixels background color of white position absolute left of zero and top of 380 pixels and the parent well we actually gave it a position relative so that's why it stays in its place so the next thing is i'm just going to go ahead and style the input so the input field is this one here so this one over here and this one i'm going to go ahead and do this so i'm going to say a width of 539 padding of 20 pixels position absolute left 0 height 30 pixels top 420 and border of none so you guys can just go ahead and actually just use these styles and copy us and it will work for you um and that actually drops it down to the next line and that's actually a very nice um uh number sort of that you can now select and it will show you uh and the final thing that we're going to do or not the final thing but i basically now when you click the number of guests because you click on the the number two and you'll see that you'll see that nasty outline so uh not not that one it says number of guests yeah so you get that nasty outline so to get rid of that we add in this we say when we focus make the outline width zero so you can see it's gone now oh that is but now i can't hold on yeah it's definitely gone yeah it's true it's gone but the date picker kind of blends into the page a little bit so i can't see where it's ending but yeah definitely it looks much better yeah so right now that's fine because we will be adding a button which you'll be able to see in a sec so for the button to style we need to do the following we're going to say go ahead and target that button and do the following so position absolute left of zero but top four a text transform inherit and that's because we don't want to be uppercase background color of the airbnb color and then color white and width to 57579 and that will give you the exact perfect dimensions that you guys are going to need and it should do what we want so there you go you've got it looking pretty good but when you hover over so if cars if you hover over search airbnb right now you'll see it kind of goes transparent which is nasty like so the the search airbnb yeah we see that kind of we don't want that we want it to basically invert the colors right so to do so to do that we add this in we say when we hover whenever we hover over it we want to basically do a background color of white and a color text to be that so now if you do it and you hover over that you actually see it so if you click uh hover over search airbnb click it nice now it looks clean you want me to click it uh not yet not yet got it got it because i will click it danny finkelstein says keep up the awesome work guys i will watch this oh snap damn thank you bro for that five dollar donation and say whoa okay nice danny thoroughly tonight hey let's go emotional code coming in with the heavy hidden twenty dollar donation thank you so much and all he said was that's his message to us thank you so much whenever i see like a 20 donation or something i just picture somebody coming in swinging everything's frank seriously yeah this is just epic thank you for that we are at 111 dollars in super chat thank you so much we just broke a hundred dollars and uh you guys are awesome that's insane thank you so much guys let's keep this going all right so now what we're gonna do is we are gonna have it so now we actually have that date picker component looking beautiful it looks really nice but when we click search dates we want to change the text and we want to change that text so that it actually says hide right so how do we do that we go back to banner and here where we had the search dates what we can do here is we can actually go ahead and change this now so that it says the following we can actually say we can do this we can get rid of this right and inside of here what we can do is we can say if show search is true then show hold up text otherwise sunny one second so sunny yeah hold up hold up hold up hold up how do we is there a way we can hide the side bar completely which one the status i think it's the is it the activity bar or the status bar oh you're talking about that blue stuff at the bottom on the left-hand side i think that's the status the on the left-hand side the one that with the file and the icons because the code is getting way too rap like it's getting wrapped up way too much um what we can do you know what i mean like it's looking too goofy now yeah i think we can do like what is this show sidebar i mean i can make it smaller but i think then it becomes really hard to read unless everybody's okay with reading that i think that's okay i think that's okay yeah i think that would be pretty good okay if you guys are okay with that text just let me know otherwise i can change it back yep and thank you so much devon for the five euro donation thank you so much brother i really appreciate it awesome that's nice thank you dude so now what we're going to do is we have the search dates uh added on and if you click on uh the search dates guys you saw in localhost 3000 you'll notice it says hide so it's a search date and then it says hi yeah that's awesome so we have this whoa yeah okay if you make it bigger there you go it centers perfectly so you get a nice like little look to it awesome so now we're gonna do is we're going to make it so that we are actually going no actually at this point i think what we need to do is add in the cards right so the cards are what we see underneath those like those really nice looking cards um and what we need to do is we go to home and essentially what we're gonna do inside of home another epic donation by path re sfl four dollar donation thank you so much my man really appreciate you and guys if like pastor you've also been enjoying this video so far what can they do sonny they can smash the thumbs up button guys make sure it's blue so it's done and yeah we appreciate that it'll get the video out to as many people as it possibly can and it will help more people out there so go ahead and smash that thumbs up button do it guys thank you awesome so with that said guys now what we're gonna do is yeah oh damn dude this is the donations of flying today damn let me let me find it first let me find it oh wow sarin always comes in hot searing just dropped one and what does he say sunny he says sharing is caring thanks guys for sharing your knowledge you guys are helping everyone a lot keep it coming please have this project pushed to get all right okay we'll do it thank you so much nice thank you dude um so now what we're going to do is we have inside of our home uh file what i'm going to do is i'm going to have a a so we're going to restructure this a bit so it says we have a div and this div is going to be called like a section right so it's going to be called so we're going to get a class name and this is going to be called uh home underscore section and what we're going to consider a section is going to be like a row of three cards for example so inside of here we're going to have three of those cards because let's go ahead and open up the actual app so the actual deployed version okay and we should be able to see inside inside the deployed version you can see we've got three cards in a row and then if we go down below we've got another three cards and this is fully responsive so they grow right so you can consider a section to be three cards right so we're going to have two sections um and then basically we're going to make it fully responsive so in this bit here we're going to have a card component which takes a bunch of props and it's basically going to be three so one we're going to hold another section so hold up hold up so one section is going to be three yep all right got it nice so these three and another section t3 dude holy crap what is happening we just got two more donations one by what is bam can anybody i mean all i know is horace is a badass for giving us 195. that's the ban it stands for and frank just sent 20 donation he goes sending some love the work you guys are doing awesome airbnb built thank you frank always appreciate you brother and god damn red we just broke 154 in the super chat this is insane thank you so much frank thank you so much this is insane holy crap nice thank you now damn dude so now what we're going to do the greatest the greatest ever goes frank i knew you were coming it's about that time we should have like suspenseful music start queuing up like later in the stream kind of know yeah frank is coming exactly right so inside of home what we're going to do is i'm going to add in a snippet of code so it says home section and for those sections so those cards that you saw they're going to be inside of a row so it's going to be display flex and you're going to give it a padding of 30 pixels right so each one is going to have a padding of 30 pixels another great donation from shubham pandey thank you so much um we've got home section over here so the card we actually need to create a card component so let's go ahead and do card.js over here i'm going to create a card.js and it we should be inside of it stop it for a second bro and here we go gotem goes i recently completed your reels clone hey uh and he goes and believe me i got an internship in a local agency thank you so much um i think yeah the rules come as well interesting that's nice dude all right that's awesome right so now what we're going to do is we have the card component so i'm going to do rfce like this and then i'm going to create a class name so class name i'm going to do here card and we're going to go ahead and do oops we're going to go ahead and do import card.css like this oh no what did it happen to card.css there we go save the file and then inside of our card so the card is an interesting one it's going to take a few props so props in a functional component appear here so props basically our properties that we can pass the components which make them look different but we can reuse them so this one we're going to destructure at this point and we're going to say it takes a source it takes a title it takes a description it takes a price right and these are the different properties that we're going to be using um for when we reuse the card component which is awesome so now inside of the card what we're going to have is we're going to have an image tag so the image tag is going to basically take whatever prop whatever um source we pass in and that's going to be the source and then i'm going to create a div so we are we're done with the date picker right yeah we're sorry we're done with the day pick and now we're building the card components all right airbnb card components here we go nice awesome i changed it and i'm gonna drop all right and the greatest ever says i just started applying today oh dude that is nice so let me share that real quick he goes i just started applying today and when i get employed i will know for sure that it was because of these amazing lives and the amazing value shared will be sharing that story in pwj chat soon let's go let's go dude that's amazing the greatest ever has been on these live chat every single time yeah we know it's you guys yeah i know hajira i've seen her very often on these live streams um alexandros joins on these live streams quite a bit so thank you guys we really do appreciate you yeah exactly manav i think i've seen a few times there's definitely a few people here which we notice and we see you guys every time so that's awesome now we had the so we're saying uh card is not defined right that's because what we need to do is actually go ahead and import the card so let's go ahead and change this and let's do card like that now it will actually should fix that issue that we're having and inside over here what we can do is it says cannot resolve card.css so i need to go ahead and create card.css and we should pop into that right now uh in a second there we go card.css and now we should get rid of that error so it's all part of getting rid of these errors guys so for the card we have an image right then we have a card info so cars let's go ahead and pop open the deployed version and i'll give you a visual breakdown of what we're actually doing right now so the card info section is actually so you see we've got the image at the top and then underneath it we've got something like i'm just making a div called card info and now that contains the title the description and the price in some cases so if you go to the box oh hold up hold up what's the card it so card info is this here yep all right so that's going to be this title that description and then if you scroll down for the bottom cards they also have a price uh okay got it so boom there we go yeah and the way that we do that is i just popped it in here so we basically render out those things if they exist as a prop nice okay dope yeah and then inside of home so i'm actually saved you guys a bunch of times so i've actually gone ahead and pre-populated some of this stuff with some props so i'm gonna go ahead and swap these out with some properties um that i've basically went ahead and found um it's gonna to do some annoying stuff right now but let's go ahead and format this but what you guys can actually do at this point is go ahead and um you can pause the video and you can pretty much grab these what i've written for these different uh components the props that we're using but if i go ahead and save that now and let's go to our local host yeah so let's go right here nice hey soham just came in clutch thank you so much and he goes awesome guys i have started to learn javascript inspired by your clone videos great content keep up the great work you so much really appreciate it and now we are over 160 dollars thanks to you guys always love and massive massive appreciation for all of you guys and if you guys are enjoying this and you want us to go out to other people make sure you smash that like button so it just keeps going out guys exactly massively appreciate if you guys do that nice so we're going to go ahead and style some of these card components so let's go to our card and for card the css what we're going to do is for the top one we're going to say we're going to target the card and i'm going to say give it a margin of 10 pixels david rakosi is in the chat now oh damn dude what's up he's a crazy student inside of pwj awesome student and it's good to see you dude yo david let's go david has a few builds for you guys already built we're either going to be delivering it live or dropping it as a video this week hopefully so really excited about that and paul nowhack came in hot uh and just dropped uh poland ten poland and he goes you are the best greetings from poland thank you so much nice oh scripting like hiro just said i watch your tutorials and i got a job in my city thank you wow that is beautiful guys we're trying to get to 10 5 000 developers 5 000 people getting jobs as developers that's our number one goal this year in 2020 so that is amazing we should have like a counter going seriously like at the top and it should always be increasing every time we find out you guys either get a client or a job but this one is going to be one of them that would be awesome we should definitely do that or on the pwj website or something have like a live counter yeah so right now you can see that image is huge right so i don't want it to be the one at the bottom this one here yeah and there's actually a few and they're in a row right now but you just can't see it so what i'm going to do is i'm going to i'm going to say card image and i'm going to go ahead and style this so let's go back to half and half and then we do this we say card image and i'm going to say oh nice object that works whatever you didn't just work so object fit fill and that should do that for us now and what i'm gonna then do is go ahead and do um i am now gonna go ahead and do so 300 pixels min width min height of 200 pixels and yep 100 and then i'm going to go ahead and say for the card component itself we're going to say that it should have the following properties so let's go ahead and add this in so i'm gonna go ahead and add in a margin of 10 pixels a border of zero pixels and a solid black so this is very important because this actually gives it it gives it zero so we don't actually need that one we can give a border radius of 10 pixels you see you get the rounded corners right the overflow is hidden so that if i don't have overflow hidden here guys you'll see even if i round the corners you see what it did like it just gets it doesn't do it as we want it you want to make sure overflow is hidden then you do box shadow now this box shadow gives it that 3d effect we're doing a transition a transform and this will actually come in because we're going to add a hover property here so let's go ahead and add this in and now what you can see is if cause if you go ahead and hover over those cards i'll do that right now oh nice they got the little feel to it yeah but i think they're doing it yeah go ahead the reason why we did we get the sort of animation with it is because we added in transition transform 100 milliseconds which says that that that animation should actually take 100 milliseconds if i get rid of that let's go ahead and check out what it does as you can see it's very snappy ugly yeah you don't want that you want that silky buttery smooth transition oh silky buttery smooth dude like that almost like releases some taste in my mouth when you say those words you know you're not the first one who said that somebody else actually said that in a coaching call they were like i wha what really made me get inside of pwj is when you said that the buttery smoother animations and i was like oh you might you just start saying that just like random times like all the times actually um also and 0.1 is gonna also do the same thing too right 0.1 seconds that should be 100 milliseconds yeah exactly okay dope so let's leave it like this nice right now what we're gonna do is we have those things uh and the good thing is guys is that here it's doing it very clever so let's go ahead and make this uh make it big big now kazi no it's how it's gonna use up this is really awesome uh the greatest ever said something really nice and he goes seren calden he was talking to sarin and he goes yeah these guys may not even realize just how valuable they truly are and just how much more value they're sharing as opposed to what they think they're doing for us so yeah like right like we're we're putting in the effort for you guys we're making this as valuable as possible but for the right people and it goes both ways right because we can give you value but also how much value do you pull and extract out of it so we love having people like the greatest ever in our community who are like really feeling like they're getting their money's worth and a ton of value out of it so exactly exactly that guys cozy go ahead and make the airbnb so the localhost a little bit bigger and notice how it grows now um yeah let me go ahead oh this one right here yeah oh to make that nice dude but if you grab the actual edge of the screen and just start pulling it you'll notice that like you get a really nice sort of uh so look at that oh look at that that is nice yes it looks really slick yeah dude i love that that is excellent yes we get that sort of responsiveness frank says cozy making the buttery smooth thing weird now nice so now what we're gonna do that's funny all right keep going we're going to basically for the card info we're going to go ahead and do the following so we're going to say margin top minus 9 that'll pull the margin up for the uh info on the text and then we're going to say border radius of 10 pixels padding 20 padding top 20 and margin uh a border 10 a border of one right let's go ahead and add those things and then the c and now what i'm going to do is i'm going to talk i'm going to style the text inside right so i'm going to start with the text so we've got a h2 and h4 inside so inside of card.js we've got a h2 and h4 the title in the description so making the font size uh 18 pixels font weight of 600 and the h4 font size of 14 font weight of 300 margin top of eight margin bottom of eight as well so let's go ahead and save that now you can see you get a much nicer look and feel to it so that looks really clean um now with that said let me go ahead and just check something so let's go ahead and cause it you zoomed in by any chance on your on your localhost are you zoomed in zoomed in to what bro what are you talking about as in have you got a zoom on right now so go ahead and press like command so zoom into that screen so press command so okay yes that's perfect nice nice yeah i was a little zoomed in i think yeah i was a little zoomed in but uh it seems like that is with just today we actually right now we got somebody to join profit with javascript arnold conway nice dude and you only join with python that's awesome dude is he watching right now i don't know but if you are watching drop it in the comments i don't remember reading arnold in the comments i've been looking at the comments pretty consistently i don't recall so he might not be on here but yeah he's famous nice so now we can see that we've got the first row up and running so this is very simple now uh if we go to our home.js we can see the second one we've got the outlines for them so guys let's go ahead and scroll down on low post yep i'm going to scroll down all here yep so now you can see we've got the outlines there so i need to give in the props right so let's go ahead and pass in the proxy again i've gone ahead and done this hard work for us so we can go ahead and go here and just paste these props so these are another set of props we have right here and i'm going to go ahead and just align this in a bit more and you can see here we've got aligned here's another source and here's another one boom and if we go ahead and save this file now we should be able to see the rest of the so i'm going to go ahead and just zoom up and down a little bit scroll up now so you guys can see this but now because let's scroll down and you can see that we've got those two tiles like those two rows of the cards right so we've got two rows of cards and the bottom one says 130 and it's got even got the prices on the bottom one uh really clean yeah really super clean yeah nice so now we've got that done what we need to do is go ahead and add the footer in so for the footer what we need to do is inside of app.js so yeah inside of app.js let's go back to app.js so here here we have so you can see it's very very nice labs we've got the header we've got the home page and then we're going to add pretty much a footer i'm going to add a footer so this will actually satisfy the last bit here so the footer and let's go ahead and create that photo.js oh i was wondering okay it's picking up my phone sound okay i muted it because i was uh messaging the student to join and people are like holy crap your phone sounds are jacked okay got it nice so now for the photo json the rfce here and then i'm gonna do class name so class name footer like that and then here i'm gonna do import css so import the folder wait so footer.css css save it let's go ahead and create the photo.css file support.css like this and we should pop into that file any second now nice so once we have the footer guys what we're going to do essentially is we're just going to jump in here and we're just going this will be very simple guys we're going to have two p tags all right we have two p tags one is going to say that little sort of no rights reserve this is a demo at the bottom of the page one is going to say privacy terms sitemap company details that's what you see at the bottom of the the airbnb app at a very simple level so i'm going to go ahead and pull this into our component here's by saying footer that should get rid of the error that we're facing save that and it should go ahead and drop to the bottom of the screen now so let's go ahead and scroll down quasi yep i'm gonna go ahead and scroll down on our app or the code yeah uh on there and the app and you can see at the bottom we've got the footer pop in so are we now working on the footer yeah damn bro you gotta tell me we're done with stuff all right here comes the horn sound we're done with the cards the photo will actually take pretty quick so we've only got one thing to add so far but let's go ahead so for the footer we're going to add the following styling i just added a foot emoji on the title nice so here what we're going to do is we've got the footer so here we're going to say border top 1 pixel solid light gray padding of 20 pixels background color of white it's like a gray off gray the bottom zero so it's gonna stick to the bottom uh and then we're gonna say text align center uh here we don't actually need bottom zero text line center and then for the uh we're gonna target the p tags so that text we're gonna say padding of five pixels font size of fourteen so now if we scroll down qazi we should see the the bottom so that footer should actually show us and there we go that looks okay hold on it's not showing up for the people watching so i'm going to do this and now it should show up there we go showing up now there is it showing now it's perfect yep now it's showing perfectly nice so now you guys can see the footer uh we just got another uh euro we got one euro donation from ita punjabi thank you so much oh thank you bro appreciate that that is amazing we're at 163 now nice that's crazy dude damn wow all right so we've got that up and running which is awesome um and then what we're gonna do is guys if you if you write a message and you do it all in caps capitals it's gonna the nightbot which is like a it's gonna like block you so so don't try not to write in all caps yeah sorry about that it's the bot is really aggressive so we can't even control him he has a mind of his own all right now what we're going to do guys is we've pretty much done the home page the home page is done like it looks very slick the thing is working um now we want to move over to the search page right so how do we get the search page functionally how do we do routing or any of that stufftalking about so i'll just search from 26th to 30th and do this and this is what i got by the way super responsive so it looks amazing and when you say search page you're really referring to this page right exactly yeah exactly what i'm referring to whoa 10 canadian dollars thank you thank you so much that is awesome and we just broke 700 viewers with a 10 donation guys you're the best thank you so much and smash that like button let's keep this rocking and rolling nice let's go guys so the first thing we're going to do is build a home.js component so because if you're going to go ahead and create the first file and then what we can do is i can create it after that but sure thing uh just to show them so what do you home.js exactly nice and once we have home.js we're going to use our nice little trick called rfce and rfce is a is a really handy extension that we it's called es7 react snippets and to get that it's very simple you just go to the vs code extensions type in es7 snippets and it will come up and that will give you that rfce functionality which is nice so at this point what we're going to do is we are going to actually go ahead and give this a class name of home so we give this a class name of home just like this and we are going to go ahead and import the appropriate css file so we're going to say import home.css like this right and obviously with that said we're going to have to go ahead and create the css file so i'm going to go ahead and create home.css and we should be popped in right here so uh i think you have to follow me cozzy so let's go ahead and re-follow me there we go so now you guys can see i'm inside of home.css and we've imported it at the top here and that will allow us guys to do a few things that allow us to actually write css which only belongs to the home folder a home component sorry so with that what we're going to do now is we're going to pull this on to you so let's just prove that this is the home we're going to say h1 um oh no my snippets don't seem to work that's fine we can do h1 and here i'm going to say uh home component like this right save this file and i'm going to go back to your app and here we're actually going to pull it in the home component so i'm going to say home like so and what we can do is we need to import the home component so i'm going to say import home from home like this right and save the file and what that will go ahead and do is it should now we should now see on the we should now see on the uh on the right side so let's go ahead and give me one second my itunes is going nuts so just shutting out my itunes and now you guys should be actually good to go oh and i just realized i got my phone as a thing so i'm gonna actually probably use that at some point but for now let's keep going nice so uh let's go ahead and pull up localhost on the right okay so we're gonna do that so we got localhost and the actual final build right here so everybody can see it nice and are we sharing the screen yeah nice awesome so now we've got uh you can see it says home component right so what i'm going to go ahead and do just prove this we're going to get rid of the h1 over here and now you should be able to just see home component right so it should be super clean we might need to refresh localhost uh because it doesn't seem to be coming up somebody says sunny check your voice is too low so let me go ahead and turn the gain up a little bit for you guys i'll turn you up a little don't turn your gain up your audio is pretty awesome i'll turn you up here more your audio today is like really clean okay awesome now you're better nice so now what we're going to do is we are actually going to go ahead and build out the home component so the first thing we want to build inside the home component is um the actual before we do that so we actually added the home component but we actually want to always show so think of it this way the header component is actually going to live in both the home and the um the search page right so it's going to exist in both of these things so what we can do is we just built the home component but we're actually going to go ahead and build the header component and this is always going to show so let's go ahead and add this in right here right here so yeah what we need to do is create header.js so header.js and we should snap into that file in a second uh let's go in it's just loading so we're now inside the header.json we'll do rfce and we're inside and i'm going to do class name equals header like so and we're going to do import header.css and then i'm going to go ahead and do header.css so we've created a header.css file as well and you should see me snap in any second now there we go so we're inside and inside of the header file let's go ahead and start sort of drafting out what it's going to look like so the header file has an image tag so i've actually gone ahead and grabbed an image and this is just an image of the um the uh airbnb logo so let's go ahead and pop this in here and what we're going to do is you can see i've given it a class name of header underscore underscore icon so this is bem this is header component and it's the icon element so that's why we've done this and now we should actually go ahead and see that if we okay so it's freaking out because we haven't imported it so we need to go ahead and import it here so we can say header like this save the file and we should now see a massive airbnb logo right so obviously we don't want it to be that big it looks a bit ugly when we have it like that so so how do we get that to look a bit smaller right so we go to header.css and we basically are going to target the header icon so we're going to target the header icon and i'm going to say give it an object fit contain so this is going to keep the aspect ratio so it doesn't stretch i'm going to say the height is 100 pixels so now you can see it's a very small size and then we're going to go ahead and give it margin left of 80 pixels so that should push it a little bit from the side so let's go ahead and decrease this a little bit for now so let's just say 20 pixels to make it a little bit subtle and we have the image tag up and running so that's all handy and that's done now we're going to create a div for the center stuff so that that search input field that you see and the header right so let's go ahead and pull out the deployed version quasi so this is a deployed version yep so this is the deployed version and you can see it in the middle of that deployed version so that's actually going to give it half and half uh so because right now it's still quite stretched there we go so you can see in the middle of the the top bar we have that search input field so we're going to go ahead and build that first and then we're going to add a header right section which is which has those uh icons that you see on the right so hold on so in the in the header this is going to be one so i'm just imagining this this is one container that will just keep the logo and that one container has only one child yeah so this is really good by the way guys because my css skills suck so it's good because if you're a beginner in css you'll pick it up this way too i imagine this is one container with two children one is the search input and one is the search icon exactly nice okay dope and then we got another one here and this has four one container with four children text logo icon icon icon yep exactly and the middle container we're going to apply flex 1 to it so it's actually going to span all of that gap that you see in the middle so this is going to apply flex 1 and so hold on let me get this straight so this container here is actually really like this right yes exactly nice and that happens when you do when you do flex one exactly so it's giving that the importance and then the the ones on the right and left are only taking up as much space as they need exactly that now another question for you sunny how do they know to be centered how does airbnb logo know to be kind of centered you know what i mean like why isn't it left aligned so what we do is we say that the um header so we say that entire container should be display flex which will pop everything into a row and then what we say is align item center and that will align everything centrally ah so this is because of align items uh center something like that yep exactly dope okay dude this is actually a really cool way for me to learn yeah it's nice okay and when you do a line item center it will center every single one of these items in the entire header we're applying a line item center to the header yeah so the actual um we're applying it to the direct children of the parents so that they had a parent so we should make sense when we do it but what will happen is for that middle one for example that will have its own display flex and then that will have to have its own align item center got it so every single container has to behave you have to give the rules to that container so um yeah we'll be able to show it out but that's a really good example of a line item center beautiful okay okay let's keep going nice so with that said what we're going to do now is go over to here and we're going to create a div so i'm going to go ahead and do div um so let's make a div and this div oh man why is he snipping this no i'm going to say div class name equals and then here i'm going to do header center right so this will be header center and it's being a bit laggy so this is actually going to go ahead and do this so header center and here we're going to have two things we're going to have an input typed as text so here's going to have an input type as text and a search icon now it's going to freak out because this search icon i mean where are we getting this from right so in order to get the search icon we're going to have to pull in material ui so let's go ahead and actually do that at this point so kazi let's head over to materialui.com and show them how to install material ui core and material ui icons yep so you guys make sure when you're at material ui grab this come back to your command line i'm gonna just open up a new one and then install this how you install core now i'm gonna go here type in icons and um in the mean and then also i think install core really fast damn and then over here choose icons because my download is what 900 900 download speed actually right now 900 megabits nice uh so make sure you also install icons you'll need this on this page make sure you click here which says search the full list of icons and yeah until somebody finds a better way to do that and then go in here here are all your icons so for example when you guys are looking at these icons here right um whoops there we go so sunny has this avatar icon at the top right i i can probably did you actually pick it from here uh no so the avatar is actually a component because you can pause something but let's look at the globe for example okay let's type in globe okay there we go yep so that's coming from right there dope and then what about that drop drop arrow drop arrow that's that's actually if you type in uh i think it's if you type in down down or something yeah there we go another is that one that one expand more it's expanding yeah that's it right there and then yeah i mean everything else oh the search is i mean obvious so then what sunny would do is once he finds search right here we got search we match it up to that one dope now click here this will give you the actual code you can copy it paste it into your app and you're good to go exactly and then that's how when you see me using snippets like search icon language i can expand more icon that's where we're getting them from right so if you do get confused at any point you can be sure to check out material ui the icon search tool all right i'm gonna give you access i'm gonna give you read and write access to both terminals as well awesome nice so with that said guys this search icon is freaking out right now because it doesn't know where to pull it from so let's go to the top of the file import the search icon like that and that will actually go ahead and it should save the file and we should have the search icon so you can see now everything by default is display blocks which means it stacks up on top of each other we don't actually want that behavior right so in order to get rid of that what we can do is we can go here and we can say header and we can say display flex so if i do this display flex check out what happens as soon as we hit save everything goes into a row so you can now see that the airbnb and the top has gone into a row let's go ahead and remove that home component let's just comment that out for now so it gets a bit confusing there we go so inside of the header now we've got the search icon and we've got an input field text input field yeah so what we're going to do now is also remember we said you have to treat every single container with its own rules so in order to do that we can target the header center say display flex and look what happens when i do this guys so if i say display flex align item center like this look how the uh search icon is now central center with the input field so that's really clean and that's the way that you do that all right now what i'm going to also do is go ahead and add a the right section so the right section i'm going to go ahead and do a div and this div is going to have a class name of let's go ahead and say header underscore right there we go and here i'm going to go ahead and add in a few things it's going to have a p tag so this p tag is going to say become a host because that's what they have on airbnb and for those of you who don't actually know what airbnb is it's a place where you can pretty much rent out a room it's like a hotels of booking website um so yeah so that's where you can become a host as well so we're gonna import the two icons at the top so you've got language icon expand more icon and also this is not an icon but it's it's a component called avatar now that's how we achieve that sort of circular profile image a very very powerful component you can actually pass it a source we use it in a lot of other builds so be sure to check that out but what we're going to do is we're going to go ahead and pop in those three icons here like so so i'm going to go ahead and do this and now we should see those things pop in and now you can see in the header right container you as you guessed it it's display block which means they stack up on top of each other by default we again don't want this behavior so what we can do is we can say header right we can go ahead and write and then what we can do is we can say uh header right display flex display flex like this right now if i go ahead and do this we can go ahead and save it and you should be able to see everything goes into a into its own line right now if again let's stick with our rule let's do a line item center and we will be able to see again that everything goes center central with each other which is really nice and it's a really good way of doing this now for the header what we're going to do is we're going to space out those components components as much as they can go so we're going to say justify content space between and that will actually push the components apart as far as they can go from each other and then for the central element remember we said that we want that center one to take up as much room as it can so we're gonna go ahead and give that a flex one rule and that will do that and you can't actually see what this is doing unless we actually make it a little bit bigger but you need to trust at this point so cause let's go ahead and make it a little bit bigger now you can see the input field is actually taking up the majority of that room but it doesn't look like it right now right so it actually doesn't look like it and the way we fix this right now is we're going to add a few things in and in order to do that uh what we need to do at this point is firstly we need to go ahead and do the following so we're going to say align items center which we've done so let's go ahead and do that first align item center at the top uh william cruz again with the um five i think that's uh what was that one he always says it every time i can't remember but thank you so much for that donation massively awesome i always actually i call it the chief keef donation but i forget what the chf man every time swiss franc how in the world does chf stand for swiss franc bro but thank you so much that is huge yeah i always get lost to that one i wish it had a better acronym like sf swiss franc that would be so much easier but thank you brother i appreciate it absolutely appreciate that so nice so now what we're gonna do is let's go ahead and do the following so for the uh header we're gonna go ahead and add the following rules so i'll explain each of these ones as we do it so we're doing a line item center we're doing position sticky and what we're doing here if when we do position sticky with the top of zero what this does is if you go to the deployed app kazi and let's go ahead and scroll down on the deployed app so let's open up the deployed app and let's scroll down can you notice how the header is actually sticking to the top yeah i can see it's very yeah yeah so it does that because we've done position sticky and then top zero so it sticks to the top and that's how we get it to look like that now an important rule that we have to add is the z index so you have to say z index of 100 100 because and if we gave something else like 99 we want it to be going to be like sort of on top of everything else so it covers everything we're going to give it a background color of white which is what we see and expect and a width of 100 because we want to span the entire width so that's going to do that for us the next thing we want to do is we've already started the header icon which is awesome we want to basically william cruz says the best of the best you both are amazing sunny would be nice to see you working with react native challenge accepted dude we will get on to that and we will start building something really native i haven't used it in a while so i mean we can definitely i'm excited to go back into it i know people are asking what happened yesterday because i wasn't on the live stream i was i shared like my dog got hurt so um i'm gonna share some of that with you guys so this is actually our puppy her name is pudgy and she ended up like really breaking her nail pretty bad so that's why yesterday we had to go to the er frankie ended up taking over the stream uh then we were waiting at the um at the vets for hours and here that's my girlfriend that's amber lee that's pudgy right there she was pretty hurt and then we pretty much got her back and this is this is what she's up to now so you can see she's passed out she got a little like cast on her arm right there and yeah got a call so she can't bite it off but yeah she's getting big really really fast um dude it's horrible when you see a little one like a little dog sort of injured that's crazy they gave her a little car yeah a little like tiny cone she's so adorable she's probably playing with it like she's just sitting there like she's out of action with her crazy stuff was going on man and then yesterday like our freaking whole alarm like our sewage system like making crazy sounds and stuff and then releasing smell i'm like what is happening can we just get back to coding good damn it man at least we are back guys and i think that deserves to smash your thumbs up man yeah guys if you yeah for the little puppy you know yeah go ahead and smash that like button thank you people are saying blessing her a you says blessing for her courtney says beautiful dog she's a english bulldog she's four months old so to see her and then like the nail got broken so they had to like actually pull it out completely so that's why they put the cast on top of it yeah but uh yeah other than that let's keep in rocking and rolling now i'm back and ready to go guys and we're here and let's crush it so what we're gonna add now for the center is we're gonna say give it a max width and fix uh and fit the content so let's go ahead and do this so fit content like that and what we're going to do is boom and here i'm going to give it a bit of styling so we'll say panning at 10 pixels a height of 30 pixels so let's go ahead and do that save the file and you can now see that it should change a little bit uh oh oops i've added that's the wrong thing we should add it over here there we go add it to the header center and that will actually go ahead and pad that out a little bit now for the top right so the center element we're gonna go ahead and give it a border radius of 999 which is a perfect oval we're going to give it a one pixel solid light gray board and you can see now it's got a so very subtle light like sort of um light gray border around the top but we don't want that input field to actually have the border around itself so what we need to do is target it like this we say header center the direct charge which is an input and we're going to say border none so we're going to go ahead and do border none and what i'm going to do at this point is i'm going to say width of 250 pixels like this and now guys you can see if we go ahead and do this so actually at this point we'll keep it responsive let's go ahead and get rid of this for a second but what we can actually say is we can say um let's leave it as width 250 for now uh let's go ahead and do that and then on the header right what we're going to do is we're going to say justify content space between those icons we want to give some space between them we're also going to give it a width of 15 view it and a margin right of 80 pixels so i'm going to go ahead and do that right now and this will go ahead and it should space it out a little bit more and there we go so let's go ahead and do this for now because let's actually make it a big screen uh sure think boom there we go nice now you guys can see everything is spaced out evenly we've got a nice little bit of spacing and what you can do at this point for desktop support you can do a width of 250 pixels and you see the middle goes into that but for now to keep it super responsive i'm going to actually comment now so let's go ahead and do half half again nice and what we're going to do now is for that input field what i want to actually say is give it a padding of 10 pixels and then outline width of 0. and what this does guys is now because if you go ahead and click the input field damn effort just dropped five pounds he says damn you guys are just awesome enough said hope you make a web app with an admin interface someday i've actually heard a lot of people say that so we will go ahead and actually make some kind of admin crud functionality app or something by the way i figured out finally how to actually increase the size of this thing that was thanks to leif i was on the coaching call for a profitable shortcut and he was like dude you can increase the size of this and i'm like oh oh nice that makes life so much easier so yeah thank you efosa really appreciate it and yeah this is another reason i actually really like django as a web framework because it comes in with a badass built-in admin interface which is so freaking nice too but i think a django and react combo could be really fun that would be awesome dude because i want to learn a lot of django that would be awesome to do that nice so kazi go ahead and click the input field yep and now can you see there's no blue outline right you don't get any blue out there but if i if i actually uh comment out the outline width uh oh no oops i'm on the wrong corner if i go and comment out the outline with this one and we now do can you see you get that nasty outline right yeah kind of defeats the entire ui so what you need to do is outline width of zero and that actually gets rid of it and now it just looks plain yeah and that's how you get that sort of desire right and it's a boolean type of thing right so whether you have zero and one that's the same even if you had a hundred it'll be the same exactly yeah okay dope yeah so that we're gonna switch to zero and then you'll be able to get that so that's really clean and with that said the header is pretty much done at this point right so the header at this point is done uh which is awesome so now we can actually go back to the uh app.js file and we can see that we've got our header over here and now we're going to focus on the home component right so let's go back into home and previously we had this where we said home components let's go ahead and see now you can see the home component renders in underneath um underneath the the header now i can see some people have just completed the google clone that's awesome yeah i love seeing people that oh damn louise eduardo just dropped 20 us dollars wait hold on hold on whoa whoa whoa whoa whoa whoa whoa whoa whoa whoa whoa whoa whoa damn thank you so much luis eduardo really appreciated holy crap you guys i mean yesterday i had to pay 400 for my dog so this is actually helping out you know this actually thank you so much really appreciate it that's insane thank you so much wow somebody said we have 20 dislikes on the video so i think he paid 20 dollars to make up for all those dislikes nice appreciate it appreciate that dude so with that said let's go to the home.js component right so what we're going to be building next is a fun component is the banner right so that really beautiful banner that we see so to get that banner up and running let's go ahead and create banner.js so i've just created that file and we should pop into it in just a second and we are in that file now and if i do rfce and the snippets should load there we go and we can see banner and then just do our little setup so we say class name equals banner and at the top of the file i'm going to go ahead and import oops import banner dot css there we go save the file and it's going to complain because it doesn't have a banner.css so let's go ahead and create that file oh we just got another donation dude by x i'm gonna i'm gonna bring that in a second but jose said qazi i just wanted to say that your content is the best out there actually spending the time to read and see your sts stats result uh see your results as speechless thank you clever programmer of course guys we're reading every single message and we're trying to respond to every single uh message as long as you guys are actually putting in the time and asking good questions we will reply to most of people and thank you so much ex lilu for the six pound donation holy crap euro six euro donation and he goes uh awesome hi qazi and sunny in the future do you have any responsive mobile project or a tutorial on how to use media media queries and react what are you thinking sunny dude we just got another one i'll let that pop in when you see that but yeah we are going to be doing a responsive oh my god we'll definitely be doing we'll definitely be doing uh some builds with media queries so stay tuned for that and you guys know you guys know that song on tick tock i should be playing that here remind me actually to put that on after this frankie but like that one goes what you do you have you heard that on tick tock ever yeah that is a 10 pound donation and he says waiting to see a facebook clone and we will be making a facebook clone with every option including live and marketplace tech one react with typescript sunny typescript is coming up i know you're gonna enjoy it two redux three apollo four graphql and five docker damn bro i think you might be asking a lot for ten dollars bro i think you're pushing it now but we'll try we'll try to add some of the things in there but thank you bro no pressure no pressure guys so with that said we've got we got holy they're gonna start asking for blood from me yeah bro just right now yeah yeah oh right for brother so inside of the banner component now it says banner is not defined and that's because inside of here we need to do an import so let's go ahead and say import import architect i've got a new keyboard import banner from banner.css there we go save that somebody else's message they're like could you make an app that includes react graphql scikit learn and tensorflow like damn holy so it's freaking out if we if you give it an empty thing right it's going to stop freaking out so this would just say hello for now something like that and then it will actually go ahead and not give you an error so it should be working completely fine once we put that in and it saves and refreshes um let's go ahead and refresh logos quasi all right i will go ahead and refresh localhost 3000. oh oops i've done it wrong this should be banner here should be sorry import from banner that's why that was happening inside of here we do import from banner css that's nice so there we go we've got hello i'm let's just just say i am banner okay i am the banner now what we're going to do is i love how people actually spot that out as well like it shows how much you guys are watching it's insane to see that yeah seriously yeah like when i see people like you forgot an import i'm like holy crap they're really like nailing in on that so now inside of banner.js we're going to have a few things right we've got the search so we're going to ignore the search just for now but for the info right so the actual banner itself let's get that looking the way that you've that the majority of it that you see i found it i found it so i'm just going to show it real quick uh i was trying to spend some time looking for it uh and i found the song in the compilation uh this is what it is let me play it actually real quick hopefully it doesn't blow your ears guys be prepared be prepared oh god yeah i can't hear it i mean uh it's i don't know how this trend started it's all about like splashing water on people and oh yeah yeah yeah i've seen a few people did it yeah but i love that song that i love jesus christ yeah so you guys can look that up it's called what you doing with that yeah i'll definitely clip it and have it in our videos playing next time no sean dawn says great what you guys do i made the netflix and google watching your video thank you yeah pretty sick names oh damn yeah sean dean maybe yeah oh damn it david jonathan said that wasn't sound wait are you serious yeah i might have not actually came through on the sound i think the sound was there but it might have been too quiet let me let me try it one more time i think it should be good guys someone jumps in like is this the place where we learn reaction did somebody say that no i'm just imagining oh yeah yeah no no the audio is there i mean audio should be there you guys all right all right let's keep coding my bad but yeah that's where the song comes from so now what we're going to do is we have the banner and we want to basically get this to a point so let's go ahead and put the banner over here we've got banner.css and just going to target the banner and what i'm going to say here is that the banner should have a height of 50 view height so this is going to be pretty much say it's got 50 percent of the screen that's going to be its height right so we're going to say that we want to be position relative because we're going to have some things positioned inside of it and we want to do some funky stuff with that and then what i'm going to do is i'm going to set the background to an image right so the background of this i'm going to set it to an image and this background i'm going to set it to is actually an image of like a sort of airbnb looking building right so let's go ahead and do this and save it and now you can actually see if we go ahead and actually make that a bit bigger quasi so let's go ahead and make that a bit bigger we should be able to see why is it looking like oh yeah oops so we've got that right now you can see the image is there but it's not centered right so all we need to do is add these two lines at the end saying center center and this will center it horizontally vertically and you can see boom there you go you get like a very nice centered image yeah so that's really cool looks super clean let's go ahead and do half half again nice and what we're going to do now is where it says i am a banner you notice how it's the background of the div that we actually set right so i'm going to actually go here and change this now so we actually have inside of it i'm going to have not i am a banner but i'm going to create a div so i'm going to say div and this div is going to have a class name so i'm going to say class name and this is going to be banner info right so it's going to be banner info and this is going to be responsible for the text that you see so that black block of text that you guys saw in the previous uh build so what we're going to have inside of here is a h1 which says get out and stretch your imagination the reason why we don't i didn't think of that that was what was on the website that's what's actually on the airbnb website and then we're going to have a h5 um i think you're muted quasi yep very good no i know but i wasn't talking oh yeah i thought i saw you talking to the camera nice oh no no i was just i was just staring everybody down in the live stream making sure they were they knew i was paying attention and watching them nice so now you can see let's go ahead and refresh localhost because there's some reason it does this when we pair program um let's go ahead and refresh quasi localhost 3000 and then what we're going to do is we are going to have so now you can see it says get out and stretch your imagination here's some good comments by the way i just want to shout them out malwaniki says after trying tons of boot camps i found my yoda you guys are the best and robert says thanks your streams and videos are great keep going guys learned a lot from you nice and you know what guys even if you're a beginner just follow along with the builds and i say this even to the students inside the course follow along with these builds it's pattern recognition just by following along with the build every single time you start to pick this stuff up naturally like if you go along with every single build it's impossible not to learn right so go ahead and make sure you do that and you guys will naturally pick up these skills nice so with that said let's actually go ahead and add an explore nearby button right so let's go ahead and add that button in so let's go ahead and do it here so say button and it's a capital b because we're using the material ui button so we need to go ahead and import that at the top of the file let's go ahead and pop down at the top and then here i'm going to say explore explore nearby oops explore there by like this and then i'm going to go ahead and give this a variant so i'm going to say this is a variant of outlined so material ui allows you to pass props to its components this one changes the look and feel of that button so the explore button you can't actually see it very well but you can actually see it now and there buttons in the chat hey she goes sorry fashionably late the girlfriend's always supporting nice and so now we've got explore nearby um and now what we're going to do is actually go ahead and style this banner info so it looks a lot nicer than what we're seeing right now right so let's go ahead and do banner on the squad score info and let's do this a balance for info oops info and let's actually go ahead and change the background color of this to black so let's change the background color to black and let's do this so we're going to say color of white as well so change the color because now we remember we just set the background color to brown to black so the text is also going to be hidden so we need to make the color white and you can see now we can see that the color of that stuff right so um now what we're going to do is now so let's go ahead and do color white and what we're going to do is we're going to add some padding right so these are different values we're going to be using i'll run you guys through what each one is so padding top i'm saying give it 25 padding top i want padding left 50 pixels padding right 50 pixels padding bottom 40 pixels um and then i'm going to say the width should be 300 pixels max right so the width of 300 pixels and that will actually tie in a little bit and now what's really nice about this design guys is that if you actually go ahead and make this uh bigger kazi we should be able to see that this will actually it's a very nice sort of overlay right so let's go ahead and make it bigger you see it like it kind of looks pretty neat how it's in there right um so you can kind of get that thing and then like yeah it looks super neat by the way ramraj says please consider adding tracked module in the pwg course what's tracked maybe he misspelled react i don't know yeah i think he might be talking about react inside the pwg course we actually do have a bunch of content we have a loads of coaching calls on inside the course and we're actually dropping some modules on react so everything is going to be inside that course yeah and apparently ashish uh enjoyed marabon and sunny's dance video on savage love on tick tock hey nice quit getting that clout damn yeah there we go all right so because do you teach hacking oh man if you if you consider debugging hacking let's go yeah right so now what we're going to do is we're going to change the style of that button right so let's go ahead and target the buttons we're going to say banner info the direct child which is a button and i'm going to go ahead and do background color and i went and actually saved you guys some time and i found the color of airbnb which is this right here so if we do that you can see the button pops in right now i you can see by default material ui give makes everything uppercase for some weird reason so to get rid of that you do text transform inherit and i'll get rid of that uppercase oh just got another donation by manav aurora i think i've seen him in a few of these videos awesome he says pwa or react native what will be great for a project depends on what you're doing dude so pwa is progressive web app i'd recommend go with that until you need a native app and i love what ram raj is saying he goes i'm loving the pwg course already way to go thanks for the awesome content and i actually want to share something pretty epic that happened in uh in pwj yesterday actually so i'm gonna show that also i know i know i know i know i will i will i i will address that in just one second i'm gonna lose my actually so i'm actually trying to hide that for myself for just one second so i can show this because we have bunch of awesome things to show you guys uh where did he post it where did devon post it trying to find uh let me actually try this uh okay let's try this here we go here we go awesome so i just found it right now i'm gonna full screen this and hopefully you guys should be able to see this so devin is our student in profit with javascript and he goes i'm not normally used to posting stuff about myself uh this is devin by the way he was coming on the live streams as well he goes but i know it's important to share wins so i'm sharing mine while i have them first of all i love my new job it's my first six-figure job and i'm learning so first of all damn devin congrats on your first six-figure job and he goes and i'm learning a lot of different things that i don't ever get to practice when i work for smaller companies i've only been working this job for a little over a week but it's awesome second i just got accepted to the second round of interviews with google yes that google and he goes i am so pumped um when i first joined the group i was working for a mom and pop agency doing wordpress sites making like one third of what i'm making now and i only joined pwj back in june july is there a correlation i'll let you decide i want to thank everyone in the channel for their support because i'm mostly here for the community and it's helped me in a large way dude that is so freaking awesome that is insane dude and look frank is here too on stage nice that's awesome guys if you want to know how to get inside this community link in the description and david is here david is also on the live chat with us right now yeah david's always watching sally guy he was actually in the coaching call yesterday we spoke loads and we'll be working quite closely together so david's awesome dude inside the course yeah and what the hell the greatest ever you should be in the course right now you're the only one left who's our biggest supporter but not joining the course you should jump in so 100 dude that is sick this is for you devon i just played the air horn and that is a massive massive win to be in the second round of training and also kiera robinson is in her round of interviews with google as well and she's in pwj i'm actually coaching her dude oh snap yeah i'm giving a bit of hand with those interviews yeah so she's doing a google interview as well and she reached out to me to get some help on that so yeah that's another student inside the course who's doing google interviews so this is like mind-blowing stuff guys like seriously it's insane that the jobs these people are getting like frank even got a six-figure contract blew my mind like for company and if you guys have heard of sonos then that's the company that he got it for so amazing stuff yeah we're just having massive wins left and right so if you guys are serious about taking your career to the next level guys i'm telling you this jump on this course before we increase the price and just for fairness so all of you know we know that this program is worth over two thousand dollars it because most people send us messages telling us how much this work this program is worth more than the boot camps that they paid for and in about in next week we're going to be doing a challenge for react and during that challenge we're going to be increasing the price of the course and then it's permanently increasing it's going to keep going up so if you find it for less than 2 000 and you're serious about this you should 1 000 join so for all of you who are here just letting you know because i think this would be a good deal for you guys before the price actually goes up in a week or less exactly and guys if you're on the fence and you can't make the decision yeah or like you're just you're tempted or whatever make sure you check out in the in the description we actually are offering a completely free training on the three top mistakes that developers make completely free training go ahead and check that out and and yeah yeah so you guys have the links in the description you guys can go to this page anytime you want and make sure you just check out this video over here for profit javascript this is the page cleverprogrammer.com pwj and it will tell you everything about this program but you guys know you're going to be getting sunny on the program on the live coaching calls you know you're going to be getting nas so it's a brilliant program guys with so much just heart and soul we put this together join it your mind will be blown that's all i can say yeah and guys like i can't stress enough like if you think that you if you enjoy the live streams me qazi nars the entire team frank we put our heart into this this into this program so like everything that we love and we aspire to like to to make an impact in this sort of uh in this community is inside that program so like if you want to be a part of that then just jump in yeah 100 percent let's keep rocking rolling nice with that said guys we were on the banner right so we just added in the text transform inherit line of code which actually changes the button text to lowercase because we don't want it to be super everything like screaming at you right now it's touching the top text so i'm going to do is margin top of 20 pixels font weight of 600 and you'll see that pushes the button slightly away from the um top of the text which is awesome so we want to make sure that that's done also the h5 tags so the one which says plan a different kind of get away to uncover the hidden gems near you gonna go ahead and target that and give it a margin top of five pixels um because we need to actually set up prettier because for some reason priya doesn't do it when we save um which is a bit annoying but will not work bro i think live share causes these problems yeah it's fine we can we can carry them without this one so we've got the h5 and what we want to do guys is when we hover over that button right so right now when we hover over that button it's not very responsive right so um it's gonna actually change to a different color so kazi if we actually go ahead and hover over the explore nearby button um yeah so guys that p that slack group bara just asked do we need to be a member uh of profit with javascript to join the slack group yes you have to be because that the way we keep the quality just incredible in that group is by whoever joins profit javascript gets access to our community as well and i think community is actually one of the best parts of that program so what did you want me to do sonny uh if you just hover over the explorer i saw some people in the comment in the comments saying who's the guy in the back frankie frankie oh yeah guys that's frankie over here uh he's getting some sick shots actually so let me show you guys actually the photo that he just took and uh look at the setup here i mean that looks amazing this is my setup right now to do this live stream this is all we have to do to actually make the make it come true nice dude awesome were you sharing your pho oh nice yeah i see it oh awesome yeah nice dope so yeah that's thank you guys uh so no it's been cause you hovered over the explore nearby button it went black right we don't actually want it to go black because it doesn't look very clean what we're going to do instead is target it so that when we hover over it so when we add this hover attribute it's going to change the background color to white and then the text to so it's basically going invert one second i forgot i'm sorry i keep doing this but i don't want to miss this so i forgot about this comment somebody in the chat reminded me thank you about that but lewis donated five dollars thank you so much and he goes my donation of twenty dollars was for your little dog damn thank you thank you so much he goes this one is for you guys great job let's go thank you lewis thank you lewis that's amazing dude nice so with that said so if you hover over the explorer nearby you'll see the colors should invert now yeah oh nice that looks clean like a crisp little look to that uh and what we're gonna do now is actually go ahead and have so we've done that sort of very nice sort of look and feel to that part what we're going to do is have an actual search button at the top so search prompt which says search dates right so at this point to add that search button i'm going to go ahead add a another div on on top of this on this one we're going to call someone say div like here i'm going to give it a class name so i'm going to say class name last name of banner and this is going to be banner underscore underscore search like this and here i'm going to basically add in a button so i'm going to say a button will exist here and this button will essentially say at this point we're going to say just search dates right so something like this button search dates and what i want to do is i'm going to give it a variant of outline so i'm going to go ahead and do this uh oops i've forgot that we don't have previous i'm going to go ahead and do variant of outlined oops variant of outline like this awesome and then what i'm going to do is give it a class name as well so i'm going to go ahead and say class name of banner underscore underscore search button so we can start this later on so banner search button and with that said it should we should have a button on top and you can see it's actually there it's a little bit difficult to see but it's actually sitting there at the top and it says search dates at the top so that's very clean now we're going to go ahead and style that so whenever we give a material ui class a class we actually need to style it with the important properties so i'm going to go ahead and add the following styles to that button i'm going to say a background color of white i'm going to say the font weight should be 900 and it should have a text transform so to get rid of the uppercase text and we're going to give it the text itself a color of the airbnb pink so that's how we get that look and feel and then what i'm going to say is for the banner search so the actual div surrounding it i'm going to say go ahead and do the following so i'm going to say give it a top of zero so it should be attached to the top give it a display flex so actually let's go ahead and get rid of this one we can do display flex and then we're going to say flex direction column and this will actually span the entire width of the screen so display column and now you should see it takes up the top of the column so you see at the top now we have that search dates and i'm going to get rid of the home component text over there because that's just ugly right now so boom there we go you've got the search dates at the top right so that looks clean but what we want to do now is have it so that when you click search dates we essentially change it so it says search dates and then hide search dates and hide and i have to to demonstrate this go to the deployed version quasi yeah let's go and if you click on search dates so you see it says hide at the top and then it says search dates every time you click the button it changes the state right right so we want to get that functionality and then basically we nice little like a nice little animation when i click it at the top yeah so that's actually already in there at the moment so if you go ahead and go to r1 so that's the reason why we get that is because we're using the material ui button nice okay yeah so that's why we get that one right there so awesome so now what we're going to do is we are going to go to the um search dates and what we've got to do to get this functionality is actually add in a piece of state so the piece of state that we're going to add in so state is essentially just how you write a variable inside of react uh here we're going to have a piece of state which is called show search right and the reason why we're going to do this is because we want this but we want this variable to keep track of if we click that button or not and by default initially when we click it we're going to have false and the reason why we want to do this is because we're going to say if you click it so let's just say for example um whenever it says show search or if so show search is true then i basically want to render out the search element that you guys saw earlier so let's just say show such uh show date picker let's show show date because that's what we're trying to do here um exactly now if we go ahead and say it says use state is not defined we need to import that so we need to import that as such at the top of the file there we go save it and then we should be able to see now if we save that so kazi now if we actually change this to true you should be able to see that it should say show date picker awesome and if i change this to false it goes ahead and it hides that right so now we have some kind of functionality to it right so what we need to do is that button we're going to tie the functionality to that button so i'm going to say on click of that button whenever you click that button i'm going to shoot off an arrow function so it's going to shoot off a function and this is going to say set show search to whatever the opposite of show search currently so if it's currently true it's going to become false if it's currently false it's going to become true so now to show this in practice kazi go ahead and hit the search date button or search yeah search dates and now you can see show date picker there we go so you see we have some kind of functionality to it now right and now that is gonna that basically sets us up for the next part this the next part is essentially building that beautiful date picker that you guys see in the final build which is that really nice all right i'll add that i'll add that to the top so currently we're working on building the date picker yep we're building the date picker at the moment okay i just added that to the top awesome so now what we're going to do is let's go ahead and go to um let's go ahead and actually go to we need to basically we're going to replace this show date picker with some kind of component which looks like this so we're going to have a search component right and this search component should render out to be essentially what we see in the final product so let's go ahead and create search.js so we should snap into that file any second now i've just created a search.js file and boom we are in it and if we do rfce we should get our es7 snippet and let's go ahead and do our normal bem naming convention so we say search let's go ahead and create the appropriate css file so we're going to import from search.css save that create the search.css file nice um by the way we just broke 1 000 likes yeah thank you guys so much for that that is huge and miraban says that if sunny could he would shower with the airpods chris cavern chris thanks so much for the five dollar donation really appreciate you damn and he goes finishing up the hulu shadow clone you did yesterday but wanted to show some love hey that's awesome dude glad you're doing that because yeah the hulu clone was the hooligan was one of the funnest builds i didn't think it would be that fun but it was free if you guys haven't yeah if you guys haven't that's something which like just looks so nice on your portfolio like the hulu clone um it might already be deployed actually so you might have it um is it clone let me go ahead and see if i've got it so i've got the actual link here i can drop it to you and let's go ahead and do it i'll drop it in the code quasi so go ahead and check out that okay boom all right got it so this is the one you guys built yesterday damn it just looks so freaking slick like look at that wow yeah and it's completely uh connected to an api so if you go to the top and you actually go ahead and click because i was wondering i'm like how much accurate dummy text and data did you guys add like holy crap oh wow so if i actually change horror romance it changes yo this build is actually sick kind of regret that i wasn't like here for this build this one was pretty fun yeah like look at how juicy it all looks like even before the even the animations like me and frankie were saying adding those animations changes it from a website to an app yeah yeah true true true yeah that's true so this is the kind this is the kind of app that you guys would see on like a fire stick tv app or something you know like this is the kind of thing that you would be used to seeing as opposed to just a website like you so you could probably build this deploy on some kind of fire stick app and yeah that'd be awesome nice somebody asked luke says why don't you guys work at google guys we're not the guys who work at google we get the guys who work at google at google yeah hopefully in the next one or two years like the probability of somebody asking like how'd you get a job at google like and somebody were like saying clever programmer would be like massive like hey it was a clever programmer exactly nice so with that said let's go ahead and build the search functionality so let's go back to search and here this is where this is going to be an intricate part of it are we building search or date picker yeah uh so we're building the date picker but this is it's part basically the date picker is the search component um okay all right i mean i i don't underst how does that work this is the date picker component yeah right so are we working are we not working on the data picker component then okay okay all right i'll just let you keep going yeah well yeah we are yeah the search component i'm gonna add this in here date picker component there we go all right so um now we've got the i think maybe loves your chair this is this new chair by the way i swear i think i've seen this in the previous ones oh yeah thank you guys by the way this is a brand new chair i just got actually it has a nice little pillow here for me to sleep on look at that you know there's a proper stream of streaming yeah yeah yeah and then it has like this back support thing which is hard to show right now but it's right here this thing right there nice so it has yeah because what was happening with other chair was i couldn't like i couldn't actually sit with my back on it so that was the problem i'm laughing because meanwhile frankie's gone yeah frankie's chair no frankie has a pretty cool chair right this is a mess it works you know yeah you know hey man when you live stream you know you got you need all this i just walk around like this now i don't even let my neck go from here oh man i try to keep my neck glued all right here we go so inside the date picker we need to do a few things right so the thing that actually allows all that date picker magic to happen is um the react date range so i'm trying to kill the laughter inside uh so it's the mpm i uh wait yeah npmi so let's open up the terminal kazi that is my amg thank you dude hey that guy's name is but his name is mine what the hell is going on here i'm rafi oh yeah nice frank goes frankie has he friend goes frankie has the junior dev chair because he has a senior dev chair yeah let's go to the second terminal um okay so second terminal right here type in here npm i i see you yep npm i and then react date range so this one right here and it doesn't matter if you're in that folder or in the actual app folder right yeah it doesn't matter which one well cd anyways bro cause we're gonna forget when we're about to deploy oh damn wait no hold up did i do it oh okay good shot dude good job yeah make sure you're in the right one because otherwise that will be an issue uh it's being super slow it's being super slow right now i was like damn what's going on send me the npm i make sure you're in the right photo guys because that will i don't know my terminals being so slow but who retracted that message damn dude why are they that's funny dude somebody's message just got retracted they're like i don't know what he said but he's like am i the only one who thinks sunny is looking fat today i don't know how people think that you're more jacked than everybody here i'm the one who's actually fat i gotta work on my my belly you know gotta work on it i'm trying to box every day hey like oh my god mma again hey let's go bro yeah doing krav maga which is like an israeli style of mma yeah damn yeah it'd be dope man yeah yeah so i'll show you jiu-jitsu you can show me some krav maga let's do it dude i'm down i want to learn jiu-jitsu as well i'll be sick yeah so now guys we're going to import the date range picker so this is like a very handy mpm module that i found um and we've got we're going to import and now you also need to import two other files so these are css files that the guys who made this uh module recommend that you you bring in and this is because basically this is this is going to give you all that styling that you guys saw in the final one that's how the date picker looks the way it looks sharia sharma said try capoeira that'd be fun that's fun and ashish says mma tutorials coming soon yeah and just to see us doing react one day jiu jitsu the next unboxing the day after that that's it nice so we've we imported the date range picker and to use it there's a few things we need to do now right so we need to add two pieces of state and to add those pieces of state it's very simple one is going to be for the start date and one is going to be for the end date so here we just done that so we've added in the start date and date let's go ahead and do yep that's it nice and for the start date we're going to give it a we're just using today's date as the initial value and for the end date we're doing today's date as well now once we've done that we need to actually add in the following object so here we basically say cons selection range now this stuff you don't really need to know why when you do it this way the main thing is is somebody said sonny can't stop laughing at frankie's chair it does make me laugh yeah frankie frankie show us your chair again oh it's because oh what happened here yo who's manning the live chat damn guys it's because you're like this you're like super stern on your jet you know bro i'm not leaving this thing bro i'm just glued to this thing because i've learned my lesson my neck starts breaking after doing the live streams yeah it does it does we need to add this selection range and this is something that they want you to do if you're using this so you need to do section range start date end date and then the key which is just selection i'm not sure what the key is for in this situation but you need to have it so add that in and then we're going to create a function and this function is basically responsible for this function is responsible for when you basically select a date so here we're saying whenever you select a date set the start date to whatever range you selected the start date and then set the end date whatever range you selected the end date now this is all done um by the library itself so we just need to have this function in here and then they handle everything else um so manavaro says are you going to launch any react native course and he just dropped a donation thank you for that thank you um yeah not a react native course at this point but react we're covering so uh yeah so we'll actually be dropping some content on react native very soon nice so we have the search here and now what we're going to do is we are actually going to go ahead and add in the following line of code now this is the date range picker itself so date range picker ranges we basically pass an array with selection range so this one here and that's an object and then on change we pass in our handle select function okay so this is stuff that i would recommend you guys just follow you literally just follow it along you do it as i've written it and everything will just work for you as well inside your project so cozy let's go ahead and open up our localhost and what i'm going to do is i'm going to import the search so import import search from search here there we go and now what we should be able to see is it says use state is undefined okay so you state is not fine we need to go ahead and do this nice save it and now it also says i can't read that it says cannot resolve something what does that say cannot resolve um let me go ahead and pop this in because oh yeah i've got it localhost 3000. nice but but it says cannot resolve date fns oh yes okay so this actually requires something called fns so you need to do mpmi so let's go ahead and pull it up npm i date fns so it's a peer dependency to be honest they should have set the modules up to actually do this for you but you need to do this step guys because you need that otherwise you're going to run into this issue so that's they're bad but it should be fine so now once that installs that should fix this issue for us um okay there we go so now if we actually see it should be loading up for us in a second so nice so now if we click search dates awesome because we go ahead and click search days hey nice it's opening that thing up bro let me refresh and let's click it again boom look at that got yesterday this week damn bro that they built all of that out of the box i was like i don't know why but i was thinking man i'm like sonny must have done a lot of math here to make this stuff work like damn bro i should have just made up some some excuse me like yeah dude you know what to be honest i have built one of these manually at a previous job and guys it's actually a headache to build that so using a package like this is actually really really handy and this one is actually looks beautiful it looks it looks really nice it's a really really good library to use because there's a lot of edge cases that you have to account for when you're doing this guys stop repeating questions in the chat we are gonna block you all right so now we're gonna do is let's go ahead and add in um let's go ahead and add in the following so i need to actually i want to check something actually i wonder if we removed this from underneath here and changed it over here and then we tried it so let's go ahead and save i just want to try something quickly so now if we go ahead and try and click the search dates okay that's pretty clean but it's not as nice as we want all right anyway so going back to the point so let's go ahead and we've added in this the this date picker functionality so we need to style it to look the way that we want it to look right so in order to get it to look like that we need to do a bunch of styling to this thing and in order to do that let's go ahead and do the following so inside of search this target search let's do the following so we're going to say position absolute uh top 35 pixels left 25 width of 100 view it so um because if you go ahead and click on the search dates yo thanks adam whoa what happened to my voice there yo thanks adam for the 79 cent uh pound is it 79 wait are you serious it's like pennies yeah 79 pennies 79 pence it's like it's like you know pounds and pence and dollars and cents oh bro i did not know this thank you for the 79 pence really appreciate it thank you dude so here we're going to do so click on search dates all right boom clicked yep and now as we style it you'll be able to see everything sort of move around as we need it so click leave that open uh what we're going to do you want me to make it half the screen yeah that's too hard enough nice so now what i'm going to do is i'm going to add in boom i'm going to add in this and we're going to make it so now it's saying top 35 pixels from the top left 25 pixels and then width 100 view it let's do half and half kazi for this bit all right i will somebody is like yo if you guys are making so much money why do these little donations impress you guys that's the humility that actually got us here today exactly yeah and that would never change guys like even if somebody sent us one like literally no like thumbs up button yeah hitting the thumbs up button we're so grateful for like it literally doesn't like i remember in the beginning we started up and it was like a four dollar donation and it was like it blew our mind so yeah yeah dude is that what mike pence is he's a one yeah one uh pound one one cent one pounds uh no it's just a bad joke but okay got it nice so now what was this i was talking about this guy like mike pence but i'll just remove it all right so now we're gonna do the we're gonna target the h2 uh which is so right now we don't actually have a h2 element so i'm gonna go back to our search i'm going to add in a h2 which is basically going to be the number of guests so we're going to have that number of guests pop in underneath and then we're going to have number of guests and also we're going to have an input field for the number of guests so here we're going to have an input field for like how many guests you want to have and they're also going to have a button which says search airbnb right so i'm going to add a button so here i'm going to say i'm going to say button and i need to do an import for that and here i'm going to say search airbnb so let's go ahead and do that search airbnb let's go ahead and import that at the top so boom like that save the file and it says people icon is not defined because the people icon is an icon that we need to import from material ui so go ahead and save that hey adam tate just dropped another donation of two pounds he says thanks for taking your evenings up to do this dude you're welcome like it's insane the amount of value that we see you guys like you know thank you bro this guy's working his way up from pants to multiple pens thank you really appreciate it i think the first one was just a feeler you know yeah damn all right thank you bro nice so now what we're going to do is we have the dates popping up so again if you could just click on the search dates button cozy reason why we have to click it is because yeah it refreshes at times so now you can see it says search uh at the moment oh salman fazad uh for faizal has dropped five canadian dollars nice so we'll be coming back to call this later at my own pace just passing by to say thank you hold on let me pop that in let me pop that in okay now cover it so he says we'll be coming back to code this later on at my own pace just passing by to say thank you from everyone by the way we will be coding react native anytime soon of course dude we will be definitely calling react native soon so stay tuned for that and again massive thank you for donating that's it we really appreciate that thank you bro awesome so let's go ahead and do um the h2 yeah so now for the h2 what i'm going to do is i'm going to do this i'm going to copy a bunch of styles in here and i'll explain through what they're doing so as soon as i hit save on this you actually see the style looked a bit different there right and the reason why that happened is because i don't display flex align item center which means that the um we now have that icon so that people icon push to the right so um we now have the pupils uh cause you might need to move our face on the uh on ecam so let's move our face to maybe the center you got it because right now it's covering the number of guests um so so that should be you should go you guys should be obscene now on the drop down it says the number of guests and then it actually has that people icon and then we got that with justify content space between and display flex so now they're spaced apart and we gave it a width of five five nine padding of 10 pixels background color of white position absolute left of zero and top of 380 pixels and the parent well we actually gave it a position relative so that's why it stays in its place so the next thing is i'm just going to go ahead and style the input so the input field is this one here so this one over here and this one i'm going to go ahead and do this so i'm going to say a width of 539 padding of 20 pixels position absolute left 0 height 30 pixels top 420 and border of none so you guys can just go ahead and actually just use these styles and copy us and it will work for you um and that actually drops it down to the next line and that's actually a very nice um uh number sort of that you can now select and it will show you uh and the final thing that we're going to do or not the final thing but i basically now when you click the number of guests because you click on the the number two and you'll see that you'll see that nasty outline so uh not not that one it says number of guests yeah so you get that nasty outline so to get rid of that we add in this we say when we focus make the outline width zero so you can see it's gone now oh that is but now i can't hold on yeah it's definitely gone yeah it's true it's gone but the date picker kind of blends into the page a little bit so i can't see where it's ending but yeah definitely it looks much better yeah so right now that's fine because we will be adding a button which you'll be able to see in a sec so for the button to style we need to do the following we're going to say go ahead and target that button and do the following so position absolute left of zero but top four a text transform inherit and that's because we don't want to be uppercase background color of the airbnb color and then color white and width to 57579 and that will give you the exact perfect dimensions that you guys are going to need and it should do what we want so there you go you've got it looking pretty good but when you hover over so if cars if you hover over search airbnb right now you'll see it kind of goes transparent which is nasty like so the the search airbnb yeah we see that kind of we don't want that we want it to basically invert the colors right so to do so to do that we add this in we say when we hover whenever we hover over it we want to basically do a background color of white and a color text to be that so now if you do it and you hover over that you actually see it so if you click uh hover over search airbnb click it nice now it looks clean you want me to click it uh not yet not yet got it got it because i will click it danny finkelstein says keep up the awesome work guys i will watch this oh snap damn thank you bro for that five dollar donation and say whoa okay nice danny thoroughly tonight hey let's go emotional code coming in with the heavy hidden twenty dollar donation thank you so much and all he said was that's his message to us thank you so much whenever i see like a 20 donation or something i just picture somebody coming in swinging everything's frank seriously yeah this is just epic thank you for that we are at 111 dollars in super chat thank you so much we just broke a hundred dollars and uh you guys are awesome that's insane thank you so much guys let's keep this going all right so now what we're gonna do is we are gonna have it so now we actually have that date picker component looking beautiful it looks really nice but when we click search dates we want to change the text and we want to change that text so that it actually says hide right so how do we do that we go back to banner and here where we had the search dates what we can do here is we can actually go ahead and change this now so that it says the following we can actually say we can do this we can get rid of this right and inside of here what we can do is we can say if show search is true then show hold up text otherwise sunny one second so sunny yeah hold up hold up hold up hold up how do we is there a way we can hide the side bar completely which one the status i think it's the is it the activity bar or the status bar oh you're talking about that blue stuff at the bottom on the left-hand side i think that's the status the on the left-hand side the one that with the file and the icons because the code is getting way too rap like it's getting wrapped up way too much um what we can do you know what i mean like it's looking too goofy now yeah i think we can do like what is this show sidebar i mean i can make it smaller but i think then it becomes really hard to read unless everybody's okay with reading that i think that's okay i think that's okay yeah i think that would be pretty good okay if you guys are okay with that text just let me know otherwise i can change it back yep and thank you so much devon for the five euro donation thank you so much brother i really appreciate it awesome that's nice thank you dude so now what we're going to do is we have the search dates uh added on and if you click on uh the search dates guys you saw in localhost 3000 you'll notice it says hide so it's a search date and then it says hi yeah that's awesome so we have this whoa yeah okay if you make it bigger there you go it centers perfectly so you get a nice like little look to it awesome so now we're gonna do is we're going to make it so that we are actually going no actually at this point i think what we need to do is add in the cards right so the cards are what we see underneath those like those really nice looking cards um and what we need to do is we go to home and essentially what we're gonna do inside of home another epic donation by path re sfl four dollar donation thank you so much my man really appreciate you and guys if like pastor you've also been enjoying this video so far what can they do sonny they can smash the thumbs up button guys make sure it's blue so it's done and yeah we appreciate that it'll get the video out to as many people as it possibly can and it will help more people out there so go ahead and smash that thumbs up button do it guys thank you awesome so with that said guys now what we're gonna do is yeah oh damn dude this is the donations of flying today damn let me let me find it first let me find it oh wow sarin always comes in hot searing just dropped one and what does he say sunny he says sharing is caring thanks guys for sharing your knowledge you guys are helping everyone a lot keep it coming please have this project pushed to get all right okay we'll do it thank you so much nice thank you dude um so now what we're going to do is we have inside of our home uh file what i'm going to do is i'm going to have a a so we're going to restructure this a bit so it says we have a div and this div is going to be called like a section right so it's going to be called so we're going to get a class name and this is going to be called uh home underscore section and what we're going to consider a section is going to be like a row of three cards for example so inside of here we're going to have three of those cards because let's go ahead and open up the actual app so the actual deployed version okay and we should be able to see inside inside the deployed version you can see we've got three cards in a row and then if we go down below we've got another three cards and this is fully responsive so they grow right so you can consider a section to be three cards right so we're going to have two sections um and then basically we're going to make it fully responsive so in this bit here we're going to have a card component which takes a bunch of props and it's basically going to be three so one we're going to hold another section so hold up hold up so one section is going to be three yep all right got it nice so these three and another section t3 dude holy crap what is happening we just got two more donations one by what is bam can anybody i mean all i know is horace is a badass for giving us 195. that's the ban it stands for and frank just sent 20 donation he goes sending some love the work you guys are doing awesome airbnb built thank you frank always appreciate you brother and god damn red we just broke 154 in the super chat this is insane thank you so much frank thank you so much this is insane holy crap nice thank you now damn dude so now what we're going to do the greatest the greatest ever goes frank i knew you were coming it's about that time we should have like suspenseful music start queuing up like later in the stream kind of know yeah frank is coming exactly right so inside of home what we're going to do is i'm going to add in a snippet of code so it says home section and for those sections so those cards that you saw they're going to be inside of a row so it's going to be display flex and you're going to give it a padding of 30 pixels right so each one is going to have a padding of 30 pixels another great donation from shubham pandey thank you so much um we've got home section over here so the card we actually need to create a card component so let's go ahead and do card.js over here i'm going to create a card.js and it we should be inside of it stop it for a second bro and here we go gotem goes i recently completed your reels clone hey uh and he goes and believe me i got an internship in a local agency thank you so much um i think yeah the rules come as well interesting that's nice dude all right that's awesome right so now what we're going to do is we have the card component so i'm going to do rfce like this and then i'm going to create a class name so class name i'm going to do here card and we're going to go ahead and do oops we're going to go ahead and do import card.css like this oh no what did it happen to card.css there we go save the file and then inside of our card so the card is an interesting one it's going to take a few props so props in a functional component appear here so props basically our properties that we can pass the components which make them look different but we can reuse them so this one we're going to destructure at this point and we're going to say it takes a source it takes a title it takes a description it takes a price right and these are the different properties that we're going to be using um for when we reuse the card component which is awesome so now inside of the card what we're going to have is we're going to have an image tag so the image tag is going to basically take whatever prop whatever um source we pass in and that's going to be the source and then i'm going to create a div so we are we're done with the date picker right yeah we're sorry we're done with the day pick and now we're building the card components all right airbnb card components here we go nice awesome i changed it and i'm gonna drop all right and the greatest ever says i just started applying today oh dude that is nice so let me share that real quick he goes i just started applying today and when i get employed i will know for sure that it was because of these amazing lives and the amazing value shared will be sharing that story in pwj chat soon let's go let's go dude that's amazing the greatest ever has been on these live chat every single time yeah we know it's you guys yeah i know hajira i've seen her very often on these live streams um alexandros joins on these live streams quite a bit so thank you guys we really do appreciate you yeah exactly manav i think i've seen a few times there's definitely a few people here which we notice and we see you guys every time so that's awesome now we had the so we're saying uh card is not defined right that's because what we need to do is actually go ahead and import the card so let's go ahead and change this and let's do card like that now it will actually should fix that issue that we're having and inside over here what we can do is it says cannot resolve card.css so i need to go ahead and create card.css and we should pop into that right now uh in a second there we go card.css and now we should get rid of that error so it's all part of getting rid of these errors guys so for the card we have an image right then we have a card info so cars let's go ahead and pop open the deployed version and i'll give you a visual breakdown of what we're actually doing right now so the card info section is actually so you see we've got the image at the top and then underneath it we've got something like i'm just making a div called card info and now that contains the title the description and the price in some cases so if you go to the box oh hold up hold up what's the card it so card info is this here yep all right so that's going to be this title that description and then if you scroll down for the bottom cards they also have a price uh okay got it so boom there we go yeah and the way that we do that is i just popped it in here so we basically render out those things if they exist as a prop nice okay dope yeah and then inside of home so i'm actually saved you guys a bunch of times so i've actually gone ahead and pre-populated some of this stuff with some props so i'm gonna go ahead and swap these out with some properties um that i've basically went ahead and found um it's gonna to do some annoying stuff right now but let's go ahead and format this but what you guys can actually do at this point is go ahead and um you can pause the video and you can pretty much grab these what i've written for these different uh components the props that we're using but if i go ahead and save that now and let's go to our local host yeah so let's go right here nice hey soham just came in clutch thank you so much and he goes awesome guys i have started to learn javascript inspired by your clone videos great content keep up the great work you so much really appreciate it and now we are over 160 dollars thanks to you guys always love and massive massive appreciation for all of you guys and if you guys are enjoying this and you want us to go out to other people make sure you smash that like button so it just keeps going out guys exactly massively appreciate if you guys do that nice so we're going to go ahead and style some of these card components so let's go to our card and for card the css what we're going to do is for the top one we're going to say we're going to target the card and i'm going to say give it a margin of 10 pixels david rakosi is in the chat now oh damn dude what's up he's a crazy student inside of pwj awesome student and it's good to see you dude yo david let's go david has a few builds for you guys already built we're either going to be delivering it live or dropping it as a video this week hopefully so really excited about that and paul nowhack came in hot uh and just dropped uh poland ten poland and he goes you are the best greetings from poland thank you so much nice oh scripting like hiro just said i watch your tutorials and i got a job in my city thank you wow that is beautiful guys we're trying to get to 10 5 000 developers 5 000 people getting jobs as developers that's our number one goal this year in 2020 so that is amazing we should have like a counter going seriously like at the top and it should always be increasing every time we find out you guys either get a client or a job but this one is going to be one of them that would be awesome we should definitely do that or on the pwj website or something have like a live counter yeah so right now you can see that image is huge right so i don't want it to be the one at the bottom this one here yeah and there's actually a few and they're in a row right now but you just can't see it so what i'm going to do is i'm going to i'm going to say card image and i'm going to go ahead and style this so let's go back to half and half and then we do this we say card image and i'm going to say oh nice object that works whatever you didn't just work so object fit fill and that should do that for us now and what i'm gonna then do is go ahead and do um i am now gonna go ahead and do so 300 pixels min width min height of 200 pixels and yep 100 and then i'm going to go ahead and say for the card component itself we're going to say that it should have the following properties so let's go ahead and add this in so i'm gonna go ahead and add in a margin of 10 pixels a border of zero pixels and a solid black so this is very important because this actually gives it it gives it zero so we don't actually need that one we can give a border radius of 10 pixels you see you get the rounded corners right the overflow is hidden so that if i don't have overflow hidden here guys you'll see even if i round the corners you see what it did like it just gets it doesn't do it as we want it you want to make sure overflow is hidden then you do box shadow now this box shadow gives it that 3d effect we're doing a transition a transform and this will actually come in because we're going to add a hover property here so let's go ahead and add this in and now what you can see is if cause if you go ahead and hover over those cards i'll do that right now oh nice they got the little feel to it yeah but i think they're doing it yeah go ahead the reason why we did we get the sort of animation with it is because we added in transition transform 100 milliseconds which says that that that animation should actually take 100 milliseconds if i get rid of that let's go ahead and check out what it does as you can see it's very snappy ugly yeah you don't want that you want that silky buttery smooth transition oh silky buttery smooth dude like that almost like releases some taste in my mouth when you say those words you know you're not the first one who said that somebody else actually said that in a coaching call they were like i wha what really made me get inside of pwj is when you said that the buttery smoother animations and i was like oh you might you just start saying that just like random times like all the times actually um also and 0.1 is gonna also do the same thing too right 0.1 seconds that should be 100 milliseconds yeah exactly okay dope so let's leave it like this nice right now what we're gonna do is we have those things uh and the good thing is guys is that here it's doing it very clever so let's go ahead and make this uh make it big big now kazi no it's how it's gonna use up this is really awesome uh the greatest ever said something really nice and he goes seren calden he was talking to sarin and he goes yeah these guys may not even realize just how valuable they truly are and just how much more value they're sharing as opposed to what they think they're doing for us so yeah like right like we're we're putting in the effort for you guys we're making this as valuable as possible but for the right people and it goes both ways right because we can give you value but also how much value do you pull and extract out of it so we love having people like the greatest ever in our community who are like really feeling like they're getting their money's worth and a ton of value out of it so exactly exactly that guys cozy go ahead and make the airbnb so the localhost a little bit bigger and notice how it grows now um yeah let me go ahead oh this one right here yeah oh to make that nice dude but if you grab the actual edge of the screen and just start pulling it you'll notice that like you get a really nice sort of uh so look at that oh look at that that is nice yes it looks really slick yeah dude i love that that is excellent yes we get that sort of responsiveness frank says cozy making the buttery smooth thing weird now nice so now what we're gonna do that's funny all right keep going we're going to basically for the card info we're going to go ahead and do the following so we're going to say margin top minus 9 that'll pull the margin up for the uh info on the text and then we're going to say border radius of 10 pixels padding 20 padding top 20 and margin uh a border 10 a border of one right let's go ahead and add those things and then the c and now what i'm going to do is i'm going to talk i'm going to style the text inside right so i'm going to start with the text so we've got a h2 and h4 inside so inside of card.js we've got a h2 and h4 the title in the description so making the font size uh 18 pixels font weight of 600 and the h4 font size of 14 font weight of 300 margin top of eight margin bottom of eight as well so let's go ahead and save that now you can see you get a much nicer look and feel to it so that looks really clean um now with that said let me go ahead and just check something so let's go ahead and cause it you zoomed in by any chance on your on your localhost are you zoomed in zoomed in to what bro what are you talking about as in have you got a zoom on right now so go ahead and press like command so zoom into that screen so press command so okay yes that's perfect nice nice yeah i was a little zoomed in i think yeah i was a little zoomed in but uh it seems like that is with just today we actually right now we got somebody to join profit with javascript arnold conway nice dude and you only join with python that's awesome dude is he watching right now i don't know but if you are watching drop it in the comments i don't remember reading arnold in the comments i've been looking at the comments pretty consistently i don't recall so he might not be on here but yeah he's famous nice so now we can see that we've got the first row up and running so this is very simple now uh if we go to our home.js we can see the second one we've got the outlines for them so guys let's go ahead and scroll down on low post yep i'm going to scroll down all here yep so now you can see we've got the outlines there so i need to give in the props right so let's go ahead and pass in the proxy again i've gone ahead and done this hard work for us so we can go ahead and go here and just paste these props so these are another set of props we have right here and i'm going to go ahead and just align this in a bit more and you can see here we've got aligned here's another source and here's another one boom and if we go ahead and save this file now we should be able to see the rest of the so i'm going to go ahead and just zoom up and down a little bit scroll up now so you guys can see this but now because let's scroll down and you can see that we've got those two tiles like those two rows of the cards right so we've got two rows of cards and the bottom one says 130 and it's got even got the prices on the bottom one uh really clean yeah really super clean yeah nice so now we've got that done what we need to do is go ahead and add the footer in so for the footer what we need to do is inside of app.js so yeah inside of app.js let's go back to app.js so here here we have so you can see it's very very nice labs we've got the header we've got the home page and then we're going to add pretty much a footer i'm going to add a footer so this will actually satisfy the last bit here so the footer and let's go ahead and create that photo.js oh i was wondering okay it's picking up my phone sound okay i muted it because i was uh messaging the student to join and people are like holy crap your phone sounds are jacked okay got it nice so now for the photo json the rfce here and then i'm gonna do class name so class name footer like that and then here i'm gonna do import css so import the folder wait so footer.css css save it let's go ahead and create the photo.css file support.css like this and we should pop into that file any second now nice so once we have the footer guys what we're going to do essentially is we're just going to jump in here and we're just going this will be very simple guys we're going to have two p tags all right we have two p tags one is going to say that little sort of no rights reserve this is a demo at the bottom of the page one is going to say privacy terms sitemap company details that's what you see at the bottom of the the airbnb app at a very simple level so i'm going to go ahead and pull this into our component here's by saying footer that should get rid of the error that we're facing save that and it should go ahead and drop to the bottom of the screen now so let's go ahead and scroll down quasi yep i'm gonna go ahead and scroll down on our app or the code yeah uh on there and the app and you can see at the bottom we've got the footer pop in so are we now working on the footer yeah damn bro you gotta tell me we're done with stuff all right here comes the horn sound we're done with the cards the photo will actually take pretty quick so we've only got one thing to add so far but let's go ahead so for the footer we're going to add the following styling i just added a foot emoji on the title nice so here what we're going to do is we've got the footer so here we're going to say border top 1 pixel solid light gray padding of 20 pixels background color of white it's like a gray off gray the bottom zero so it's gonna stick to the bottom uh and then we're gonna say text align center uh here we don't actually need bottom zero text line center and then for the uh we're gonna target the p tags so that text we're gonna say padding of five pixels font size of fourteen so now if we scroll down qazi we should see the the bottom so that footer should actually show us and there we go that looks okay hold on it's not showing up for the people watching so i'm going to do this and now it should show up there we go showing up now there is it showing now it's perfect yep now it's showing perfectly nice so now you guys can see the footer uh we just got another uh euro we got one euro donation from ita punjabi thank you so much oh thank you bro appreciate that that is amazing we're at 163 now nice that's crazy dude damn wow all right so we've got that up and running which is awesome um and then what we're gonna do is guys if you if you write a message and you do it all in caps capitals it's gonna the nightbot which is like a it's gonna like block you so so don't try not to write in all caps yeah sorry about that it's the bot is really aggressive so we can't even control him he has a mind of his own all right now what we're going to do guys is we've pretty much done the home page the home page is done like it looks very slick the thing is working um now we want to move over to the search page right so how do we get the search page functionally how do we do routing or any of that stuff\n"