🔴 Airbnb REACT.JS Challenge | Day 2 (Frontend Build - Next.js, Tailwind CSS, SSG, API)

[Music] what is going on papa fam welcome to day two of the airbnb five day react next js challenge it's been sick we've been having a lot of fun and today we're going to be building out airbnb the entire front end so it's going to be a hell of a lot of fun let me know where you guys are watching from right now let's get the energy up in this place we literally have hundreds of people watching already i love it honestly this is the biggest challenge we've ever done let's do this guys let me know what you're watching from right now and let's get this energy up [Music] welcome to day two of the ultimate five day challenge let's do this guys we've got algeria canada india us poland algeria bangladesh mexico jordan whoa let's go germany welcome to day two guys let's kick it [Music] oh my god i love seeing that every single time it gets my energy through the roof chile cote d'ivoire switzerland republica dominica dominicans in the house vietnam indonesia romania germany kenya wow lebanon wow look at that hype guys that is absolutely incredible welcome to day two of the challenge today we are gonna be building this let me go ahead and give you a little quick demo of what we're actually gonna be building we're gonna build this today guys the airbnb front end react yes next year's tailwind tss gonna be fully responsive this thing is sick look at the animations across here lots of fun stuff to come your way guys gonna be completely responsive look at that oh completely changes it we're using flexbox we are using css grid you're going to learn all of that today and then we're going to deploy it to versal so that way you guys can go ahead and submit your day to homework we're going to jump into today's training right now guys prepare yourselves and smash the thumbs up button subscribe if you haven't already and let's go ahead and kick off today's training guys welcome today to are you excited let me know type i'm ready for day two in the comments right now if you are ready to go ahead and build out the airbnb clone it's going to be a hell of a lot of fun and yeah if you haven't reserved your spot already do it now the link is in the description it's links.paparriact.com forward slash challenge and make sure you've signed up you're going to get all the notifications all the emails everything that you need is going to be sent your way if you go ahead and sign up at that link right now if you haven't already look at this we've got everyone jumping in we've got zamil we've got natasha we've got william we've got a bishop we've got kb we've got ammon we've got darwin rsk sergio if i shout you guys out get ready for this one wow look at the viewers flooding in guys i love this i love seeing that number just fly up it's like a rocket taking off join the official papa fam discord server if you haven't already by the way this is where you can go ahead get a bunch of help you can go ahead and ask a bunch of questions you're not alone in this challenge remember that right you've got loads of people who are hyped ready to change their life and they're doing it right now inside that server and guys this is all happening in the facebook paper fam group okay so it's literally going to be the fourth link in the description make sure you sign up right so all you need to do is go ahead and click that link and then you'll literally get an invite into the facebook group answer a couple of questions and then i'll approve your entry so i'm improving every you know a couple of minutes it's super quick right you can go ahead and join it we have all the homework assignments videos right now i'm actually streaming to facebook twitch and youtube so all of those platforms are gonna have this video on so you guys are gonna have a ton of places to go ahead and grab it from afterwards that's not a problem at all share and use papa challenge to go ahead and increase your chances of winning the grand prize this is a social media event so as you know go ahead and share it out and it's going to help you you know it's going to help spread the positivity and get more people inside this challenge plus you're going to get bonus points for doing so okay oh if you guys are enjoying this music the newsletter you're gonna get the playlist it's so sick and guys remember don't forget to show up on day five this is the grand finale and it's gonna be august eighth where we're gonna go ahead and i'm gonna give you a free ebook as well as a full training it's going to be sick all right i'm going to go ahead and i've been preparing it for a while now it's a complete training to go ahead and crush it as a developer we're going to run through react state props all that stuff in depth i'm going to break it down so it's super easy for any beginner to understand and yeah i'm going to show you how you can go ahead and take those skills and level it up and you get this free ebook which is going to be a massive javascript cheat sheet and we're going to do the ultimate developer workshop so you have to go ahead and sign up first link in the description to the final day and that's that's where this is going to happen right you're going to have to show up to get that ebook because i put a lot of work into that thing man i want everyone to you know go ahead and appreciate it so we're going to learn all of this today react next js so i'm actually going to be doing some server side rendering which is pretty damn sick right we've got tailwind css if those guys are watching again you guys are sick i really do appreciate and love those guys and the versa deployment so that's how we host our next year's app and remember don't worry if you're a beginner i'm going to break it all down you can literally follow along with me today and it will all you know just take your time and you'll be able to get this done right who's ready to code the front and build just type in yes if you're already it's gonna be damn fun but before we get started with that it's time to focus i want the game faces on again do not disturb put your phones away the world can wait for a couple of hours while you're coding and you're getting in that flow state okay we're gonna go over a couple of reminders before we get into the coding part today look at the bloody comments wow oh my god that's insane guys thank you so much for that positivity we literally have over oh my god we've got 400 plus viewers tuning in right now let's get the numbers up jm nice he's the winner of the last challenge what's up dude let's carry on reminder for today we're building that the front end build looks pretty damn nice right looks really really nice the day agenda for today i'm gonna review the best portfolio so if you get reviewed and you know your portfolio comes on the screen today give yourself a massive shout out i know that you just won 10 bonus points so any portfolio that comes on the screen you can get 10 bonus points we're going to go ahead and review the best because you guys pulled through we're going to build that front end i showed you that beautiful front end then we're going to push it you're going to deploy it to versal and then you're going to get a url now we're going to take that url and use it for your homework submission okay it's the same setup as yesterday we're going to go ahead and push our homework because our homework is what wins this challenge and then as you know you're going to get those points right so you have to be a part of the facebook group to grab the points number one get one point for sending a message on any of the platforms two points was tagging me and using the hashtag proper challenge on any social media platform again you guys were sick if you saw my instagram i actually restored it a couple of years do it again you know pull out your phone for on social media it's been a lot of fun to go ahead and see that we're going to do that again three points for helping someone out with their homework you've got to show proof in their face in their homework facebook group so screenshot it and just say that's enough right screenshot it and that's enough to go ahead and get the points four to refer someone remember if you refer someone they're gonna win the prize as well as you and then five points for every single homework submission okay diamond mentorship for winner one platinum memberships for the second place and then 50 off for the third place so get those points in link two is your homework for today in the description okay so after we wrap up link two is where you're gonna find the how you can submit all your homework and get this show on the road okay homework submission again it's all available and guides on the facebook group so just click that you get all the links inside let's go through your day one personalized resume work did you guys enjoy the you know did you enjoy the craziness that we had yesterday right then beautiful personalized resumes let me know this was the instructions for yesterday you just had to customize the simple json file and then you hosted it on netlafly which is actually a drag and drop operation you submit the link to that homework page and then boom it's done and don't worry if you haven't done it already then feel free to go ahead and submit it today any day up until the fifth day and then you're gonna get those points so do not worry guys i've got you i've got your back 300 plus people actually pulled through that blew my mind i couldn't believe that we actually had 300 plus submissions can you believe that guys that's insane all right i could i said to y'all like you know i think we're gonna get maybe 150 200 but 300 plus that's just sick i can see you guys enjoying all of that good stuff there are some insane portfolios we're gonna go ahead and showcase them right now so we're gonna check out some of them right santiago garcia i love this one it's like a galaxy kind of vibe right it's straight away i thought of the galaxy phone when i saw this joffrey i like this he's got like you know the old-school retro arcade thing going on but i love the little planet that he's got going on here i just it just looks clean right i love them all about clean tambo went for that kind of you know that that jeff bezos vibe right in space sitting there marty i love this one this is actually a pretty sick effect in the background and he went for some glass morphism right i appreciate that i appreciate that that's awesome martin valkov this was slick that's just clean it's like a very flat ui which i really liked felix i like this because you went ahead and took it and changed up the design so i always appreciate that hence why you are featured my friend luke crush crushes it as always luke's an awesome diamond member of the papa farm so he's just playing for fun at this point killing it and rudy duran amazing amazing stuff now the girls came in clutch as well guys you guys crushed here and i want to go ahead and highlight you guys so we had two amazing submissions um from ria so this was actually an awesome awesome portfolio and monique guys look at the background from monique's it's sick i really think that is an awesome front-end background it's like the color is popping off the screen right it's just that i don't know where you got that from but that is such a wicked picture so awesome stuff guys ten points these are the worthy mentions so everyone who i mentioned before you also will get 10 points but i really want to show off a few of these number one rosen oh my god rosen your one was sick look at this guys this has to be the best portfolio i think i've ever seen look how incredible that is this is sick guys look you can click on the different tabs and he's got a picture of himself and he's got like his details he's got everything going on so i'm gonna give him a shout out here he's got a couple of projects he's got his github and look at this guys it's literally like a vs code it's so sick and this is probably using yep next yes i thought so awesome stuff dude next year you got the main branch you've got all of these little things ah that is sick that is so sick i dude like i'm gonna give you 20 points for that one because that is the best i've ever seen which is incredible man so honestly massive shout out for that tino taylor next up this one was sick look at that look i love these backgrounds you know i don't know what they're called but i always use it when i'm doing video edit editing and that kind of thing this is like you know a man walking through nature but with some tech vibe in there and you go down and he's just you know he crushes it with his client project section so he's actually taking the the sort of you know the the gig that we gave him or this of you know portfolio template i gave him he's added in this nice dynamic sort of sticky sidebar and then look at this it just shows that he knows what he does well and he crushes it and look at that he wants to present it i love this one this is why i had to give it as well look at this ah what's the point of university when we have signing thank you guys appreciate that by the way killed it dude absolutely crushed it amazing stuff we had okay uh oh yeah koya sorry dude if i pronounced that wrong but you absolutely crushed it as well this one was sick look at the intro it's just fresh like guys you're taking it to next levels honestly look at this it's actually a responsive build which is awesome and just nice little animations really really slick honestly you can go ahead and mess around with it but that absolutely killed it i love this one just for some you know you went ahead and changed it did a bunch of cell phones a bit of a bunch of changes himself it was sick we've got solomon and we've got dean i'm going to go ahead and check these ones out solomon this one was awesome only recommendation i would have said is this was so slick this is honestly one of the most modern looking designs that you probably would actually get i mean even i would look at this and be like that said the design wise this is very on point with what's currently trending i would have i would actually have a circle picture of yourself here like an avatar right i would have probably added that so i could see who you are because i see solo and i see all of this stuff and i'm like who is this guy you know who is this girl behind this because whoever they are it's a sick design so you absolutely crushed it dude and we have a dean barber let's go ahead and check this one out while it loads up there we go looks pretty sick guys honestly i love the little animations ah just anything different it's nice honestly it's very nice big and bold he went for looks sick good job dude so well done guys remember everyone that i featured before and those i just demonstrated absolutely crushed it we just have over 500 people tuning in that's what i'm talking about i cannot believe the retention that we still have over half a thousand people tuning in again for day two submissions from all around the world go ahead and comment right now if you say and say i got featured if you saw your resume here so we have ibrahim says sunny this is dean sick stuff dude awesome job on your portfolio nathan dropping that positivity he goes yep they killed it tino says respect for the worthy mention dude it was sick you deserve it so well done on that absolutely crushing it guys all around the world this is why the papa film community is the best i will say it period and i didn't make it like that i just made it as a community to help each other but you guys took it to the next level and made this the best community that i have ever seen on youtube or just ever been a part of right this is why we make it a big point about helping each other that's why you get extra points for helping each other out look at this rosen's in the in the comments right now he goes i got featured frozen dude you you blew me away i jay showed it and i was like what i was like i thought i was looking at a github repo you know that new 1s edition but i was like what is happening so you crushed it that is actually that's actually sick right let's go ahead and carry on we've got a few you know amazing examples of people helping others out so again go ahead and you know take a screenshot of you helping someone out and it's going to be huge for getting those points right all about that positivity let's build the front end of airbnb it's time it's absolutely time i think let's go ahead and drop a new vibe so we've got some new music right now i actually really like this one right so what we're going to do right now is i'm going to show you how to start your first project we're going to be using react js which is basically a library for the fundamentals html css and javascript we use react.js to build some sick apps in this case we're going to build airbnb we're going to use a framework for a react.js called nextgest which allows us to do things called server-side rendering and a few other cool stuff and that's going to make it a really slick experience and it's going to be awesome for the user and it's going to be awesome for us developing it we're going to punch in with tailwind css that way when we resize the screen it's going to be responsive it's going to be super quick to style and i'm going to make all of this capable or easy to sort of follow and understand in one simple terminal command okay so i'm going to show you how i find these commands so that way you can go ahead and do it afterwards but you guys can pretty much follow along at this point and remember submit your homework at the end of the today and you'll get a big chance of winning that 10 000 prize pool right let's build at the front end of airbnb let's do this guys so let me get this thing ready and let me prep this out oh i'm excited guys i'm excited we're gonna be building this the front end right here airbnb we've got the search bar at the top become a host a bunch of nice icons we've got this beautiful banner at the top which actually has a nice little responsive resizing element to it and then we've got this explore nearby so you can see this is going to make use of some css grid we've got some flex spots going on tailwind css all this stuff is going to be flying today gabriel what's up he goes don't forget to hit that like button gabriel is the one who crushed it with a 120k paypal job he's sitting in the comments right now so go ahead and give him a question if you are if you're curious about that but absolutely crazy i think some people think that you know you're not a real person but you absolutely crushed it and thank you so much for the five dollar donation also we have a new membership for the papa fam which is actually on youtube so you can click a little join button to support the papa fam you get nice cool little emojis and stickers next to your name so yeah consider it and it helps out the channel but let's kick this guys remember first link in the description to go ahead and register for actually register for the final day event is the first link in the description but if you haven't already links.react.comchallenge you can still sign up for the challenge it's not too late join the facebook group and let's go ahead and kick this off as you can see we've got so many members it's just growing an incredible rate do this guys let's do this we're going to go ahead and start off by setting up our project with next js okay so the guys over at nextgs and tailwind i don't know if they've collabed or whatever it is but they've actually made it extremely easy for us to set up our project to get started with this stuff so what we're going to do is we're going to open up a terminal if you're on mac or bash or command prompt or whatever you use on windows we're going to open those up first okay so what we're going to do right now is i'm going to open up my terminal so i'm going to pull this open and we're going to go ahead and get this thing started it's going to be a very chilled out jam session of a coating like it's sort of not not tutorial but it's going to be a code with me vibe okay and don't worry if you if you fall back or you know you need to kind of speed up just take your time i'm going to get into this i'm gonna enjoy this right so i'm gonna go ahead and do it on my desktop right here and what we're gonna do right now is you can go ahead and actually type in on google tailwind next js and you can actually see straight away you'll see install tailwind css with next.js and this is going to be the page you reach and this is tailwind site so this is actually we're going to be using something called mpx create next app now if you try and use mpx and you haven't already installed node then you're going to need to install node so to do that all you need to go ahead and do is go to node and literally download it and it's a javascript runtime environment built on chrome's v8 javascript engine basically allows you to run javascript on your computer so you need to install that to get started with this okay the next thing i'll say is actually install visual studio code so visual studio code you want to make sure you've got this because we're going to be using that to actually do our coding right so to get started we're back at this link we're going to copy this top portion all the way up until my project because i don't actually want my project in fact to make it easy let's copy it all now let's break this down we're using mpx which is basically a way of executing a package from this kind of global remote repos or project or whatever they call them basically this is a package that someone has made from next which allows us to go ahead and initialize our app dash e means set it up with a template which is called with tailwind css so it's actually going to do all that sort of heavy lifting and prep work for us in the beginning and then this is going to be the name of our project so to do this what we do is we simply paste this in we change the name of this to airbnb i'm going to go ahead and say youtube then we hit enter this will go ahead and prepare the code for what we need to do so let's go ahead and click on y enter and this is going to go ahead and initialize a app for us okay this is going to create a nexus app in our directory so i would recommend always kind of keeping your photo structure kind of clean you know make sure that you actually have all your builds in a place that you can locate after i've spoken to people and they kind of throw it in like these nested photos somewhere dark and deep make it accessible because it's going to help you out later on and i would really recommend that you do keep these at hand keep them in a nice photo in this case once we are done we're going to go ahead and do cd to go into that folder that we just created and i'm going to go ahead and type in cd airbnb youtube enter and now i'm inside of my photo okay once we're done with this i'm gonna go ahead and hit code dot now what that means is open up a visual studio code in this folder so if i do that it will load up a visual studio code in that uh exact specified folder now if it said code is not recognized then all you need to do is go ahead and click yes i trust the authors this is me and they can ignore that ignore that what we're going to do here is do command shift p and type in code and you can see here it says show command install code command in path do that and then you'll be able to do that command that i just did here so open up otherwise you open up visual studio code and press command o or command yeah oh and then you're going to be able to go ahead and open up the folder that way there's two ways of doing it whoever you find easier okay we've got visual studio card open this is where we're going to do everything right so this video is going to be up available afterwards on youtube on facebook on twitch so do not worry if you get stuck behind you can take your time go through at your own pace okay thank you so much saeed for the 7.99 donation coming in clutch appreciate you dude that's huge right so now we're going to do is we're going to go ahead and break down this folder structure so what we have in here you can see some tailwind configuration and what it's doing over here is it's setting up all of the things that tailwind needs to know about it's using the latest and greatest just in time compiler mode for tailwind which is actually a really cool powerful feature that they have um so i'm not going to break it down too much but that allows us to use the latest sort of version of tailwind and then yeah we're going to go into pages now intel in next.js everything happens from this pages folder the way that it works is we have the index.js file now the index.js file is simply represents our home point basically it's basically where everything starts off from okay so this is gonna represent forward slash on our website all right so at this point i think i don't know if it's getting hot in here or if it's the code or something's running my computer down but we're good we'll keep on going so at this point what we're going to do is you can see we have everything inside of main that looks like so right so what i'm actually going to do here is i'm going to go ahead and do command j and then i'm going to go ahead and start up this app the way that i start this app up is simple i simply need to go ahead and type in yarn or npm in this case if it's package lock it's npm we're using if it's yarn lock it's gonna be yarn so i'm gonna do npm today i'm gonna do mpm run dev and while that's loading i'm gonna go ahead and turn on the air conditioner so that way the room doesn't get too hot so i'll be right back while you guys do that command and uh give me one second let's do this okay we are back let's kick it guys i'm gonna go ahead and actually turn on a little thing called a noise gate which allows us to get rid of that background noise a little bit okay we are done let's carry on so at this point you can see what we're actually going to be doing is we want to go ahead and run our application so you can see here we had npm run dev right so at this point you've done npm run dev and it will start up on server uh on a server in this case it's gonna be localhost 3000. so i'm going to click that and then i'm going to go ahead and say safari someone's open up my safari open up a new you know tab and i'm going to do localhost 3000 okay yeah you're going to hear a little bit of a fan don't worry about it it's all good all right we have welcome to nexus get started by adding pages forward slash index.js okay so once we've done that you can see this this is going to say welcome to nextgs get started by editing pages index.js so at this point what we're going to do guys is we're going to actually start coding from this file index.js is essentially going to be our starting point as i mentioned before so if we had a the thing that's nice about nexus is it has a built-in router okay uh darwin oh i will check that out thank you so much dude for today it's a fan noise guys i'm pretty sure we can all deal with it in fact what i'll do is i'll go ahead and i'll save us a little bit of hassle i'll turn the fan down a tiny bit and hopefully that will actually help us out a bit okay there we go a little bit lower still good all right don't worry guys so at this point we've got this open so this is where we kickstart our app so nextgs has a built-in router okay and router is going to be some j write that down crisp i'm going to try that out tonight um but we have next gs here so it has a built-in router so index.js points to the forward slash home page of our application hence it's the index which means this is a starting point if i had search.js it's going to represent the sword slash search page okay so at this point i'm going to go ahead and say command b and i'm going to go ahead and restructure my page that way i can work nicer with this so we're gonna go ahead and get everything from the main block all right so what i like to do is go down to main grab everything and delete it i'm gonna do the same thing for the footer okay and at this point i'm going to go ahead and get type in h1 and we'll say let's build uh airbnb hit save and you can see now it says let's build airbnb so this is called fast refresh this means when we're coding it's actually going to go ahead and uh refresh the page as i save the files it's a very nice experience when we're coding okay and what i'm actually going to do is it felt a little bit weird i thought so we usually have the demo on this side that's better that feels more natural and it's a lot more easier to go ahead and follow me right so at this point we've got let's build airbnb now we've got this new head component the head component is actually from next yes now we have something called the head sort of uh let's call it element in html which allows us to have all the things which the browser cares about now one of those things that the browser cares about is the title that you see on the tab so at this point if we can see it says create next app what if i wanted that to say airbnb what if i wanted that to say papa react i can go ahead and actually use this new head component and actually pop it in the screen like so and then we can go ahead and modify something called the title anything that actually goes inside the head we can actually go ahead and change it over here like so so in this case we can change the 5v icon and we can also change this i'm going to go ahead and say papa bmb and hit save and now you can see it changes at the top this is papa airbnb okay so this is looking pretty good right now at this point we're gonna go ahead and build out our app so you can see here we've got these weird quirky class names this is called tailwind css so tailwind css allows us to no longer have separate css files but what we can instead do is actually have these things called utility classes utility classes are essentially very quick ways to go ahead and style up one of our sort of you know files or components so that way we can code really quick and we can have a super you know quite a lot of power behind it right so at this point what i would recommend you do is before you carry on any further go down here and hit tailwind css we want to go ahead and install something called a tailwind css extension you're going to see this tailwind css intellisense this gives you autocomplete so when you're typing those quirky weird names it's actually going to give you a bunch of like a nice breakdown if you do want to learn more about tailwind css i really recommend you pause the video here you head over to tailwindcss.com and you can actually give this one page a sing a simple read and this will go ahead and break down all of the nice functional sort of features that tailwind css provides as you can see here we've got loads of colors and remember when we use a color intel ntss imagine we use bg red 50. it goes all the way up to 900 and each different one so 50 100 200 300 400 500 600 700 800 900 are going to be different shades of that color okay so that's a quick kind of introduction into it if you want to use a shadow you've got different shadow depths you can see where i'm going with this right tailwind css allows us to style out our applications really really nicely and quickly all right if you guys like the pace that i'm moving at smash the thumbs up button and let me know right now in the comments because i'll keep moving at this place i think we're going at quite a nice pace and that's actually the homework link for tomorrow for today sorry that's going to be the link in the description let's continue on strong guys command b and you've got this now we know this to be something called a functional component and a functional component exists because what we can do in react is we can create one component and reuse it several times in this case we're basically pointing at the actual home screen itself we're going to keep it very simple this is our home screen okay and what we're going to be doing is we're going to transform this into this right so all you need to do is click your finger and it works i'm joking it doesn't work we're going to break it down it's not that easy but i will try and make it that easy so we've got airbnb over here we're going to go ahead and literally get to the point where where you know we've got it looking like this we want to get to the point where we're looking like this so the first thing i'm going to do is kind of you know i like to do something called commenting out the kind of layout okay so at the top of the airbnb actual clone what we have you can see is let me go ahead and actually get my stuff working there we go we actually have this nice little section at the top now this is called the header okay so for the header at the top what i'm gonna do is i'm gonna go ahead and actually create a component for the header so i'm going to go ahead and actually add in a comment here i'm going to say the header will go here the next thing i'm going to do is have something called a banner right so we're going to break this up we're going to do the header and then we're going to do the banner this is going to be responsible for here so you can see what's really nice about this is that we can go ahead and actually split up the workload right this means that you know like if you get tired when you're coding you can focus on one component come back and then do another one it's very nice in that sense and also it's actually amazing as a developer experience and it's going to help you sort of you know scale up when you're building really powerful apps right so we're going to do that and then we're going to focus on these sections down here all of the information here we're actually going to pull from an api i've actually gone ahead and prepared all of this through really nice simple api links so you can actually pull this data in so you don't have to manually add all this in you just go ahead follow me and we can do it ourselves together let's kick this off and get started first thing i'm going to do is i'm going to delete all of this information in the class name now notice when i do this it's going to go all the way you know there's nothing here now right and that's actually because i got rid of this as well if i say hello world you're going to now see that it's in the top left corner this is because we have zero styling applied to our application okay um the shortcut for quick comment is actually going to go command uh command forward slash that's how you do a little quick comment all right so at this point we're gonna go ahead and actually build this up so what we like to do is we like to keep our app very neat okay if you click on the folder structure over here you can see everything belongs in pages now ignore the api we will touch on that later on uh what's really nice is when you use nextgs because it's served off a server so literally the pages are going to be served from a server instead of directly to the browser i'll explain that in a sec but what's really nice is that we actually get a built-in api so you can run express you can run you know the actual next share server it's really powerful and i definitely recommend using it right at this point we're going to go ahead and close our pages we're going to click on package json so that we're on that lay like sort of level or folder structure we're going to add a new folder we're going to call this one components so as you can imagine all of the pages belong in pages so that's going to be the home page the search page all the reusable components are going to be put inside the components folder okay so as you can imagine what we've done here is we've got already got two we've got a header and a banner component the header component i'm gonna go ahead and click that create a file called header dot js now how do we go ahead and start right right now our app looks literally empty so what we're actually gonna do right now is go ahead and create our header functional component now there's a very nice extension right if you go into your extensions tab and you download something called es7 snippets right so it's actually the top one here and it's going to be this snippets right es7 react redux graphql recognitive snippets get these these are going to really help you out when you're doing this right so this is going to make it super easy to go ahead and get set up in today's build and what we can do with these snippets is once we've installed that we can do underscore react functional component which we export and if i go ahead and do enter you can see boom it actually creates the functional component for us we get the boilerplate code makes it super super easy right extensions are basically ways to power up our code editor so in this case you can see we've added a bunch here and they're just going to allow us to have a better coding experience they're kind of like power ups to our coding environment we can go ahead and install them and it helps us you know level up our coding environment right so we now have a header in play so what we're going to do here is i'm actually going to test this out okay so how do i actually know if my headers on the screen or not so what i do here is i type in an h1 which stands for a header i'm going to say i am the header enter save sorry i'm going to go back to my index i need to render it on the screen because right now again we have nothing on the screen so what i'm going to do is rather than having a comment i'm going to delete this and i'm actually going to put something called a component here so we have these nice little sort of you know brackets and we're going to type in header now you can see on my vs code i get a little suggestion come up here it says components forward slash header it says auto import from that folder so i'm going to click that and it says import header from components now that may not work for you if that doesn't work for you then all you're going to need to do command b and you're going to have to locate your photo so in this case it's a folder level up which is how we do dot dot it's inside the components folder and header and you just type this out okay so super super easy to go ahead and do that right so we're going to go ahead and make this extremely simple to go ahead and follow so at this point what we have is we have the header so if i go ahead and save this file we can now see the header actually needs to be something it says it's called a self-closed component okay so if we go ahead and hit save it says i am the header right so at this point it looks pretty nice and guys we're almost at 400 likes as well for a challenge video that is sick let's keep on going guys we're going very strong we have literally over 600 viewers across the platform okay let's carry on make sure you have a water break every now and then okay don't want anyone kind of you know getting dried out during this challenge right so now we have the header looks pretty good so now what we can do is you can see all the code that i provide inside this header js file gets rendered on the screen here so now you can see how we kind of you know block out our code okay so we're going to click into header.js and start building this out the way we need to okay so what we're going to do is i'm going to use this as a reference so as you can see this is our final kind of build so we have three sections here we have the left section the middle section and the right section okay so the way we do this when we're coding is we go ahead and we actually go ahead and spread like we we containerize it so there's an overall container here at the top right this container at the top is going to be used or it's going to be used to display the actual header out so i want to have three divs which separate so a div is literally a container so we literally start off by containerizing things okay so now what we're going to do is we're going to and guys please if you spam that chat it's straight timeout or block so don't spam right ecuador in the house what's up dude let's get this energy up guys let's get the energy up and let's push it because everyone's killing it today we have so many viewers i think everyone's in their focus mode that's why the chat is kind of you know everyone's trying to code along so let's keep the energy good so what we do here is we go ahead and i'm going to make this easy i'm going to pull this onto a separate screen so that way we can go back and forth from our you know the one that we're comparing to i'm going to go to my papa airbnb there we go and here what i'm going to do is i'm simply going to create those three divs i'm going to create a div here this div is going to be responsible for the left section okay so this div is going to be responsible for the left hand side section i'm going to create a the middle div over here i'm going to create a right div over here so the middle one i'm going to go ahead and type in div we go hit save and for the right one i'm going to type in another div and hit save if you're wondering how i'm doing that kind of quick typing it's called emit right you can literally google online and you can go ahead and check it out so we've got left middle right awesome stuff guys and if you're finding you know chat annoying or anything like that just go ahead and uh you can minimize the chat it's all good all right so at this point we've got the left section the middle section and the right section right so at this point you know when you're using html as well there are actually very kind of you know good um components or elements you should be using when you're building out things like a header a footer the body and so forth when you're using when you're building a header you should use something called the header tag right this goes ahead and tells you know things like google and that when they go ahead and scan the page that it's gonna actually this is actually a header that it that that kind of google robot is looking at right so it's going to be a header component now we have the h1 i'm header and it's still rendering on the page looks good awesome stuff header tags are important the good making use of the correct tags helps you a lot more than you think okay so we're going to make a good emphasis on that now i want an image in this left div this is going to resent resemble the airbnb logo so what i'm going to do is i'm going to use something i'm not going to use a normal image tag so an image tag is typically what we'll do we'll put in a source over here and this source would actually go ahead and you know point towards that image what i'm going to do instead is i'm going to use the actual next js image tag the reason why we use the next.js image tag is because the next.js image tag actually kind of optimizes that image it kind of it does a very clever compression turns the image into a format called webp which is way smaller than jpeg png or these other file types right so it makes it way smaller and it also delivers it in a lot more optimal way right again if you get stuck with this stuff don't worry about it just you know google research it a little bit come back continue the video so the way that we use the google the image tag is we simply import image from a next image i'm going to go to the top pop it in image from next image now what i do is i go down to my code i'm going to go ahead and use that over here i'm going to type in image and it's a self-closing component we go ahead and have that you know extra forward slash okay then what we do is we go ahead and we pass a few different attributes to it so at this point i'm going to go ahead and actually type in source and for the source i have a nice little link that i've shortened for you guys to make the whole experience easier when you guys are coding along with me if i provide a long one it's really hard to kind of you know know what's going on and at the end of this challenge all the code will be available at the proper github repo after the challenge no cheating okay so here we have the first link now notice what happens okay if i hit save on this we're going to get an error this error is going to say yo you need to use width and height or the layout property if you're going to do what you're doing we're going to do two things you can either pass in a width and a height to make this work the way it works now the reason why it needs a width or high or it needs the layout is because remember as i said it delivers it in a compressed optimized way the only way it does that is it needs to know those things beforehand so what we're going to do here is i'm going to say layout equals fill and what this will do is it will actually use up the maximum space of the container that it's in so in this case the div right we're going to go ahead and hit save now we get a different issue it says invalid source prop host name link stop up react is not configured under images in the next config file so basically because we need to go ahead and actually you know prepare next gs4 those pictures we need to white list the domains that we allow pictures to come from the way that we do that basically it's a way of saying that to next yes only accept pictures that come from this place okay so what i'm going to do is i'm going to do command b i'm going to go into this level so i click package.json which allows me to get back at that level click a new file and on this new file i'm gonna go ahead and type in the following i'm gonna say next config.js this is the configuration file for our next framework okay so what we need to do next is we type in module.exports equals and we do curly braces now this is a way of writing kind of old-school javascript right it's called a module export you look into it if you want but what we can do here is we can pass in an images option this is basically how we customize the actual you know configuration file i'm gonna make that a little bit bigger we customize it like so in this case i'm gonna go ahead and you know pass in an object and then what we can do is we can say domains and this is how we basically specify which domains we should accept the pictures from this takes an array hence the square brackets an array is like a list right in this case what i'm going to do is in that way you can pass in your several different domains i'm going to type in links.properreact.com and what i'm saying basically saying is accept any picture that comes from that website right that way it'll make it easy for you guys now when we do that you're going to have to go ahead and because we changed it you see it says find a change in next config.js restart the server so i'm going to do control c to cut my server command k is to clear your server now you can see i've not i'm not running it anymore so if i try and refresh this can't connect to the server in this case i'm going to rerun my app npm run dev and this will go ahead and run my app again now the reason why we need to do that is anytime you change your next configuration file you're gonna need to change that okay you're gonna need to restart your server because that's a configuration file okay so let's carry on guys i think this is actually a really nice pace 550 plus viewers across platforms incredible stuff let's keep going right we're gonna go back to now we can hit refresh and we should see we are back up and we can see a huge airbnb logo so we've done something right command j is to hide the terminal by the way all right so we've got the terminal up but this is uh we got the picture up but it looks horrible right that's not how we want it at all so what i'm going to do now is actually neaten this up a bit make it a lot more nicer to look at first thing i want to do is keep the aspect ratio you see right now it's kind of you know all messed up and it's it's looking a bit nasty right now i'm not gonna lie right so what i want to do right now instead is add a second attribute and this one's gonna say object fit and you see we get these ones right here so object fit equals contain and what this does is it stops it from changing its aspect ratio which means that even it will still use up the same space but it won't stretch it will keep the aspect ratio okay next thing we'll do is i'm saying object position left oops space left and this will actually assign it to the left hand side of its container now that will be handy for a bit later all right so we're going to push it to the left once it's done now you can see it's taken up a huge amount of room i want to go ahead and clean this up so what i'm going to do is i'm going to go to the div that is surrounding it i'm going to go to the class names and this is how we go ahead and style out the element that's surrounding our image this is a div which is a container as i mentioned before so what i'm going to do here is i'm going to make this relative which means that you know anything which is styled over here is going to be relative to the size of the container so if this container is small the image then becomes small if it's not relative then it's going to be basically relative to the entire application size which we don't want we want to kind of contain it in that div okay the next thing i want to do is i'm going to type in flex to make this a flex box now if you do get stuck at any point with flex i will explain it and i'll break it down but check out a website called flexbox froggy yes flexbox froggy like a frog dot com and do that tutorial it's a game you play literally 20 levels and you'll know flexbox it's very quick you can go ahead pause the video go watch it and come back if you're watching this back but that's going to help you out a ton and then what we're going to do is we're going to center the items again these are utility classes from tailwind css they allow us to do a bunch of cool stuff now you can see we've lost it right we we don't see it anywhere so this is because we've made it you know we've made it a flex which means it's going to go ahead and shrink itself so i need to say this is a height of 10 right and now you can see it only uses up a height of 10 okay it's looking okay all right it's looking okay at the moment what i'm then going to do is i want when i hover over this i want it to be a cursor pointer right now it's not a normal cursor i can just type in cursor pointer nice and if you're new to coding this is actually going to be typically you would do this with css but we're doing it with tailwind which is basically writing the css for us in some sense so you can see when i hover over it it's literally adding in this css code for us okay this is going to be sick tino says when your laptop dies during the live ah damn it dude don't worry that's why we record i got you dude and we're going to type in a margin y of auto this will go ahead and centralize it once we go ahead and get this thing working the way we need it or size the way we need it to okay looks pretty good at this point the header is kind of you know we don't know the sizing the dynamics around it but in this one it's got a very nice kind of padding around it so you can see how it's not touching in this case r1 is touching that doesn't look very nice so i'm going to style my header okay so for the header i'm going to say is sticky now what the hell does sticky mean sticky means as i scroll down it sticks to the top okay so we want this to actually stick to the top of the page so what i'm going to do is i'm going to say sticky that's a very nice kind of thing you should know about i'm going to say top 0. now if you did uh sticky top 50 it would be stuck in the middle of the page that wouldn't be very good experience would it right so this is going to be really nice so sticky top zero next thing we're going to do is we're going to say z50 now z index is basically where what layer it appears on so if something has a z index of let's say one and something has 50 50 is going to go in front of the one of the element with z index of one so we want this one to be to be always at the front so we're going to give it a z index of 50. that's why when we scroll down it's always at the front all right so we're going to protect ourselves here's that index of 50. now what we're actually going to do here is we're going to make this top higher top row and what i'm actually going to do to demonstrate it is we're going to make it a grid right and this is going to be grid of three different columns so if you think about this what we're doing here is i'm actually actually i'm actually going to go ahead and create let me go ahead and get a little box right and i'll freeze it on the screen there we go nice i'm going to create a box here all right this is going to be a sort of you know a container or how do i get this oops no not that one is it no not that one oh no that's a circle all right so i'm going to go ahead and um where the hell is that drawing there we go yeah i'm gonna make this a column so this entire container i'm gonna split it up into a column three columns this is called a grid layout this is gonna be column one column two column three and this allows us to go ahead and style it out the way we need to do it okay so let's go ahead and do that so right now you can see it's just pretty much you know it's raggle it hasn't got any style applied so at this point what we're going to do is i'm going to type in grid this applies the grid structure you can see it applies this css class hit save okay nothing changed so far we're gonna say grid columns three grid dash columns dash three oops three it's save again nothing visually changes yet because we have is that at the moment but to prove that stuff's happening we can type in bg for the background color and if i just do red 500 you're gonna see that there is actually something happening right now okay so i'm gonna make the top uh white right now you're probably wondering it's already white why would you make it white again no it's actually already transparent the background of the page is just white that's why we see it okay so now what we're gonna do is we're gonna type in bg white okay now white you don't have to give a shade to it it just works the way it works looks nice all right the next thing i'm gonna do is i'm gonna type in shadow md and this gives it a nice kind of you know shadow underneath it that gives us this nice floating aspect this floating feeling that we see right here that's really nice right oops there you go that's really nice okay so super simple right now shadow md and the next thing we're going to do is type in a padding to the y-axis so on top and bottom of five and you're gonna see when i enter that you see how now we have some spacing looks a lot better right but look we still have a problem on the x-axis right so it's touching the sides too much right now okay so what i'm actually gonna do right now is do padding x five and now you can see we padded it inward and guys we're starting to look pretty good at this point right this is looking pretty damn nice at this point i can see so much positivity in the chat right now and uh yeah there is a shortcut for this if you want to go ahead and combine this you can just type in so if you want five on the x and y axis we can actually go ahead and say padding in all directions of five and it gives us the same effect okay so if you're enjoying this video so far smash the thumbs up button we're actually nearly at 500 likes killing it today absolutely question you guys have been awesome so far let's keep on going ah dev mentor for live says that haircut is super fleek thank you so much dude all right so this is looking pretty nice at the moment now what we can do which is even cooler with uh tailwind is you see right now the padding here is actually um a padding of uh it's quite large right when we go to a mobile device that padding shrinks so if we go ahead and get bigger can you see there's a difference in padding between this the small screen and the medium screen it gets a bit bigger right now how the hell does that work all right so this is actually called break points now the way your breakpoint works in tailwind css is typically everything is mobile first which means that the rules and the utility classes that i'm writing right now they are all for the mobile screen unless we say otherwise so they're all going to be mobile screen and then if you go ahead and make your screen bigger it just keeps those styles but what's really cool is we can go ahead and say when you hit the medium screen do this when you hit the large screen do this when you hit the extra large and it goes up to like 2 3 xl right so what we're going to do now these are all mobile first and then we're going to see when we hit the medium screen we're going to apply a padding of on the x-axis of 10. and i'm actually going to go ahead and kill something called rocket that's why you guys can see the emoji so here medium of 10. and what this does is it adds in something called a css media query it says only apply padding x of 10 so you literally double the x padding when we reach a size of let's go again over that it says when we reach a size of 768 pixels okay hit save and now you can see if i make this a bit bigger boom after a certain point it gets bigger that is called a breakpoint and that's why i really do honestly love using tailwind css it's so easy to make responsive websites you guys are incredible wow look at the chat right so far we just broke 500 likes let's keep that number racking up guys and let's keep crushing it right we've got the left section pretty much done at this point right so if we go ahead and make this full screen looking pretty nice okay pretty nice just keep on going at this pace we've got the left side done so i'm going to get rid of that we've actually i'll keep it in there i'll keep it i think it helps you guys out we're next section is the search section so the middle is going to be representing the search the search looks like this okay there we go we've got uh i love this stuff let's go ritesh thank you so much for the positivity dude so this is actually going to be like a custom input field so we've got to have a have to do a few clever things here then we actually have a nice little icon over here that i'm going to show you guys how to go ahead and grab yourself so to get this working we have our div we go inside the div and the first thing i'm going to do is actually have an input field so an input field in html allows us to have some text so if i go ahead and pop that in right now you're going to see that it's actually over here a little bit hard to see by yourself but there you go so i can start typing in that input field now looks kind of cool but it looks a bit boring i want that to look like that now obviously an input field doesn't look like that out of the box so what we're going to do is we're going to make the div around it have this look and then we're even going to have a little kind of icon inside the div and then up to this point over here we're going to have the input field okay so it's actually going to be the div that looks like that the input field here and then a little icon over there okay so we're actually going to be using something called hero icons so someone just beat me to it marco nice job dude hero icons this is actually something awesome that the guys over at tailwind tss work with these are built by those guys and what you can do is we're pretty much going to install this into our project and then you can go to heroicons.com search for any icon here and then pretty much use it so in this point imagine we wanted a search icon we're going to see that we get two icons two variants we get the outline variant and the solid variant we've got search and search over here some of them look the same some of them have a different aesthetic okay in this case i'm going to click documentation now with this i'm going to go ahead and install this so npm install hero icons react that's it let's keep the vibe up right now we've got the command j to bring up the terminal i would keep one terminal open on your code and i'll add another one so you can now you can see we opened up a second terminal and then this one i'll do paste so npm install hero icons react hit enter and while it's doing that you can see then you can basically go ahead and pull it in so imagine we wanted the search track of the import search icon from here our icons react and then remember solid or outline you get two variants okay and you can change all of the stuff with tailwind hence why it was built by those guys because they wanted to incorporate all that tailwind utility class goodness inside these icon sets as well if you're enjoying this smash the thumbs up button i love the energy today carry on guys so what we're going to do now is we're going to go ahead and implement that little beautiful search bar right so what i'm going to do is you can see we've successfully installed it so keep that tab open but i'll go back to the terminal command j to hide it and then what we can do is we can go ahead and have the following to make sure that it's not so confusing i would add a placeholder as well to your input and i would say here what do we want we said start your search start your search enter there you go now it looks like a placeholder you can type in it a little bit more nicer to look at while you're building this out right so what i would do now is i want something called the search icon so to import the search icon from what we where we need i'm going to go ahead and say import search icon and this actually is something called explicit import so we need to define the exact name so search icon from and this one is going to be from hero icons or slash react forward slash the solid variant is what i want okay this gives me the hero icon for the the search icon sorry so what i do here is i go ahead and say render it out on the screen self closing in component and now we get a huge icon on the screen looks pretty sick right uh william nice dude he goes science days is indeed beginner friendly i'm loving it thank you so much dude i really want to kind of break it down so that way everyone can learn coding everyone can enjoy it okay let's carry on dude nice i always love william's positivity man so at this point we've got the search icon so what i can do now is i can go to class name with the class name i can start applying all the styles that i want so i want to give it a height of 8 because it's kind of huge right now all right there you go looks a bit smaller what i'm going to do is i'm going to zoom into a little bit so as i apply it you guys can see it i'm going to make this actually be a little bit responsive but we'll sort that out in a second the first thing i want to do is i want to make the background a shade of red so i'm going to do bg red and i'm going to make it 400 and what i love about that intellisense is it gives you the color samples and everything so that looks pretty nice to change the actual icon to white it's actually text dash white okay and then you can see it and that's because an icon is actually text right if you didn't know that now you know it's pretty much going to be resembled as text on the computer side what we're actually going to do now is i want this to be rounded i want it to be like a little circle so i'm going to type in rounded dash 4 and boom we have a circle at this point that actually looks pretty clean i'm not gonna lie i'm liking how that looks but what you can then do i'm gonna add a little bit of padding so it has a bit of breathing room so i'm gonna type in p of two and if you're always confused as to what it's actually adding that's the css ad so we're using ram which is a better measure to use hit save now we have our nice little icon right looks very clean at this point now when i do go ahead and hover over it i want that to be a cursor pointer i'm going to type in cursor pointer okay and then and now when i hover over it there you go looks really good right thank you so much sam he goes you're son you're an angel i appreciate it dude you guys are awesome you're the reason why i do what i do honestly i couldn't thank you guys enough so that looks pretty nice at this point but our container by default is something called display block that means that it stacks up it just stacks up on top of each other so what i'm doing is this div right here holds an input field and a search icon field right it holds these two fields it holds this one right here and this one over here so what i do is i apply something called flex to these two elements and what flex does is it by default goes into a row okay so what i'm going to do is i'm going to go to my div type in class name equals and over here i can type in flex and now you can see by default it goes into row but we have this squashed look to it that's not very ideal okay so instead what i want to do now is sort this out so i'm going to do flex i'm going to centralize the item so item center i'm going to say the actual border here should be i'm going to give it a border only once it hits that medium break point but i'll show you what i mean by that so if i say border i'm going to give it a border width of 2. you can see that we get a nice border okay and then what i'm going to say is round the borders and you get different ones you get rounded sm rounded medium rounded large all this other different sizes you see that looks pretty good but you see it's not it's not there yet it's just not looking the way it needs to look right now right and this is because of two things it's because we don't have enough space remember it's a three column thing over here we actually sort of change a couple of things we actually get rid of the icon on the small screen but we show it on the medium screen you see that otherwise we get that issue so we actually want to have that kind of responsiveness to get that to work what we do is we go ahead and firstly i'm going to add a padding of y adding a white of two so that we have a little bit more spacing i'm actually going to add a shadow as well now i want to add a couple of these style traits when only on the medium screen right now you see it doesn't make sense to render that out all right so what i'm going to do is for the search icon i'm going to by default make it hidden okay so by default it's hidden i'm only going to show it once i get to a medium screen so medium screens i'm going to make it something called inline flex now you guys are probably getting annoyed at that it's kind of covering it it's medium inline flex okay hidden media md inline flex i hit save and now when i make it bigger only on the medium screen it comes in line now obviously it's not working the way we want it to yeah we're going to figure that one out right now as well okay but at this point you can see being a bit weird being a bit un unpredictable okay the way that we fix this is we've got to change a couple of style properties firstly let's fix the outer div we're getting there we're kind of piling piling these on right so on the on the mid that sort of container element i'm going to say only apply that border once we hit the medium size so that looks cleaner on a phone right but only when we hit the medium-sized screen do i actually want to do it now i didn't do that correctly it's medium colon border so now only on the medium screen i see the border awesome looks pretty pretty good all right next thing i want to do is you see on that border it touches it that's not nice that's really not nice so the way that we fix that is we can go ahead and add in something called padding left to the input field so on the input field i'm going to say let's go ahead and say class name equals padding left of five uh in this case we should give it power left to five is good yeah you can see it touch it moved away but we still have that little issue right this is because the background of the input field is white by default so what i want to do is the input field i can go ahead and say class name transparent so i'm going to type in transparent okay and now you can see boom all right so now you can see i it actually disappeared wait a second did i type something wrong i think i did all right so it's actually not uh but it's bg transparent so bg transparent there we go and now you can see there is no background but we still have our search functionality but we have this another annoying outline okay how do we get rid of the outline well intel and css is really easy we just type in outline done and now when i type in okay looking pretty good all right it kind of gets close to that and then we've got this other issue of this is not sticking to the side hmm bit annoying right what i want to do is i want to make this input field grow i want it to take up as much room inside that container as possible when we have the container as flex what we can do is we can select one of the components we can say flex grow and what that will do is it says grow as much as you possibly can so it should push the other element into the corner now when i hit save i do that boom throws it over to the corner okay looking kind of looking kind of good at this point right so what i can now do on the search icon is we can go ahead and see it applies at this point so i'm going to go ahead and actually make this like so i'll make that a little bit smaller so we can see what's happening so for the flex box for this div and remember if this is kind of getting confusing you can go ahead and just pause it get up to speed and then carry on okay don't worry don't freak out if anything's not making sense at this point we can go ahead and say for the medium screen i also want it to be a shadow i want to say shadow sm whoa akshay shuksi just joined the youtube membership so welcome to the papa specialty i did so now you're gonna have a cool little emblem next to your name you can use our custom emojis welcome man thank you for supporting this channel if anyone else wants to support channel feel free to do so now you can see we have the shadows more only on the medium screen and actually is under here very subtle to see that but if i go ahead and change this to an extra large oops or just just say a large you can see there we go you see how it's a very subtle delicate small border that we're applying there okay now we've got this issue over there right that's not looking very good at this point so what i'm going to do there is i'm going to say for the search icon i'm going to give it a margin x of auto of auto oops oh margin x of auto but after the medium size screen actually no we don't even need that i'm gonna say it's because on the it's only visible on the medium screen so i'm gonna say after the medium screen then what i'm gonna do is i'm gonna say oops one second sorry guys that's kind of annoying right now because i think while i demo it what i'm going to do is i'm going to disable my um my tail and css but you guys make sure you've enabled it right but i'm going to disable it primarily for one reason which is because you guys can't see more i'm typing as i type i think it'll be easier for you to see i need to just quickly spin up my app no i don't that's all good okay that way it doesn't keep covering the screen right oh nice dev mentor live welcome to the pub firm special tier as well dude awesome stuff thank you so much for supporting the channel right if you guys want to become a papa fam youtube member then feel free to click the join button it massively supports the channel it helps me to do this full time thank you so much dude appreciate you guys okay so at this point what we're going to do is we're going to go ahead and say oh that's awesome dude i can see you now in green highlight special okay so now what we're going to do is we're going to say on the medium screen i want to add an extra margin so i want to add a margin on the x axis of i think it was two yeah we're gonna add a margin on the x-axis of two now you can see we spaced it out nicely now check this out okay that's looking pretty damn good all right looking pretty damn nice and look on the medium on the small screen it works perfectly nice and under the big screen we've got this perfectly responsive middle aligned centrally aligned search box right looking nice guys smash the thumbs up button if you're enjoying it so far and you're able and don't worry as i mentioned before this is being broken down for absolute beginners so take your time and do this at your own pace okay the whole point here is that you learn something okay so we've got this looking pretty nice now the search the text here i'm going to change that a little bit i'm going to say the text should be small i want it to be a slight gray so i'm going to say text gray of 600 okay and now you can see it's a slight gray and it's actually gray when i type right so if you may have thought they didn't change color that's because the placeholder is great by default i'm going to change the placeholder to be a slightly different color of 400 so placeholder grade 400 and that will go ahead and take effect now in order to do that actually we need to add in are we done are we done we're good that's good yeah place over 400 nice so at this point what we're going to do is i'm going to go ahead and i think we're pretty much done with that so we have everything being responsive it looks pretty nice and yeah so we're done with the section here this is looking pretty good haha daisa says our contacts but your beard and haircut are amazing thank you so much dude i do try no one tells me off a like you get a haircut too much i'm like on youtube is what it is it's good thank you dude so now we're moving over to the right hand side of the uh the header okay so moving on to the right hand portion of the header and again guys all the time stamps are going to be on the video after the video after it's up today so we've aimed to do it very quickly afterwards so you're going to see everything broken down it's going to be super easy to follow along skip to where you want to get to okay uh alfred says are 16 months a month to be a junior to have 100 million especially in size zero to full stack hero 1 billion i think one to three months even right so div on the right hand side over here is the next portion what we're going to have here is a bunch of things we're going to become a host and a few different icons got a globe menu and a person icon so we're gonna click become a host okay so i'm gonna do a p tag and i'm gonna say become a host oops become a host hit save now you can see it pops up now you can see it's not aligned the way that it needs to be so i'm going to show you how to fix that and get that working as well in the way that we need it right then i'm going to import three icons i'm going to need to use later on i'm actually going to import a few icons i'm going to need for at this this component so i'm going to go ahead and pop them in right here you guys can feel free to add them in as well we've got a few additional icons so we already have the search icon i've added in these four icons okay so the next thing we're going to do is we're going to go ahead and add in the little globe icon over here right so what i'm going to do here is i'm going to type in globe alt icon and i'm going to self enclose it right and if we hit save it's huge breaks everything looks awful so i'm going to add in some styling again tailwind css for the win give it a height of six right six more likes oh two more likes to 600 let's go guys absolutely crushing it just past 600 likes that's insane awesome stuff this just makes me hyped man makes me so hyped all right for this div i'm gonna make sure it's actually a flexbox because right now it's stacked up in a block view okay uh and then there you go looks really nice okay and then what i'm also going to do is i'm going to space this out so all the components that i put inside of it i don't want to add in padding for every single component when you're using tailwind you can do a very nice powerful little feature here and actually go ahead and type in space along all the x children components of four and now it will space out all the components that are inside that container with four right and you can go ahead and play around with the values change it up as much as you want 600 likes says hit 700 just keep going let's get our number up guys all right and then we're gonna go ahead and type in after that we're gonna say that we wanna make it uh items in the center so i'm gonna say flex items center and now you can see it drops centrally aligned so at this point we've now centrally aligned our elements which is looking pretty nice right looks exactly as i want it and then what we're going to say is justify end justify end and what this does is it positions it at the end of the element as opposed to by default at the start of the element okay um i saw a really nice comment but you spammed it so it gets blocked so try not to spam just my end so the next thing we're going to do is go ahead and actually change the color i'm going to make it a text i'm going to make it gray and i'm going to use a shade of 500 which is in the middle in the gray spectrum that's looking pretty clean next portion is these two now can anyone guess what i'm going to do here we have two elements and we've got a little border around it so naturally we think of this as a container aka a div but what i then do is i pop a div around it so i'm gonna go here pop a div around it there you go and then ah prashun says click on the shiny join button for supporting this amazing channel yeah thank you so much dude obviously click it if you want to support the channel really massively appreciate when i add a menu icon inside this little div self closing and we're also going to add in a user circle icon okay now you're probably wondering you added it and i saw something move but there's nothing there it doesn't work that's because we need to give it some styling right so over here i need to say it's a class name with a height of six okay and here i'll say it's a class name of a height of six as well i will give it six all around okay looks good now you're probably wondering about sunny we gave it flex what the hell is going on every time you create a new div it defaults to block which is stacking right so that remember every single kind of you know nested container can have its own layout so what we're going to do here is we're going to give that one a flexbox as well okay so that's going to be a little bit nicer to do it rain jules production email proper react.team gmail.com i will help you out dude don't worry so here i'm going to go ahead and div and i'm going to say class name equals flex and you'll see immediately it pops into the center and i'm going to say items should be centrally aligned oops inside of that would help item center and i'm going to say space x of 2 which should space them out a little bit more i'm going to give it a border of 2 which pops in a border a padding of two which spaces out a little bit and then a rounded full which makes it a rounded border and then as simple as that you can get a lovely looking ui right now for those globe icons i want them to be you know hoverable so i can say cursor pointer and things like that and then this suddenly becomes a nice clickable element looks very clean looks really sick and nice okay so what we're gonna do then and remember guys if you're enjoying this not only smash the thumbs up button hit the subscribe there's over 50 percent of you that are watching right now that aren't subscribed i really appreciate it makes this channel go to the moon and above and we are growing to a million that's all i'm not stopping until here and above but keep going and remember if any of this gets too confusing at any point the react basics link for a complete breakdown of react is actually available for free right now in the description it's a link it says you know if you find this too difficult it's a link to skillshare one month free you get my react basic scores for free so i hope you i hope that helped you out right uh let's carry on thank you mohammed that's awesome comment dude so what we're going to do is on a small screen that looks a bit messy so i want to hide that on mobile first view and then i want to include it after a certain size so the way i do that is where we have become a host i'm going to apply some styling i'm going to go ahead and say okay you know what that should actually be hidden by default so there we go mobile first but on the medium screen i want it to become an inline element so medium screen become an inline element you could say you know in a flex weather in this case now when i do this it only comes available on the medium screen right so as you see as we hit that medium break point a lot of things happen now that's a little bit of a crunch you can go ahead and modify that if you want but most likely they're not going to be at that exact portion it'll be this this or that there's typical break points that you start for okay looking pretty good guys let's carry on so we've got that looking nice and i'm gonna actually make that a cursor pointer as well because that way you should be able to hover over it it looks like a link looks really nice that's a pointer save okay nice stuff guys i'm gonna go ahead and let's have a quick water break let's keep this going the retention today is incredible 600 across platforms right part says son you're the one who taught me react and now you're the one teaching me next in term thanks a lot dude well you know thank you so much for tuning in that's all i can say incredible stuff all right so we've got this working looking pretty slick now all right the header is done we are done with the header now we are going to move to the banner right so what we're going to now do is build out another component which is the banner the banner represents this gorgeous looking image over here again it's going to be nice and responsive and it's going to look pretty damn cool and we'll show you how to get that picture looking just like that in the way that we need to do it okay so what we're going to do now is we're going to go ahead and guys remember smash thumbs up when was the 700 likes i'm going to go ahead and create this banner component command b to open this up go over here go into our components folder click and on the new file and type in banner.js underscore rfce to go ahead and get our nice little snippets and then inside the banner we can go ahead and code a few things now here i'm just going to say h1 i am banner save and let's just get this working firstly go back to my index over here i'm going to say banner and remember we get this nice little auto import hit enter and look it automatically did the import for me if it doesn't work don't worry don't freak out but you can see now it comes up on the screen so try and do things in that sense right jamie davies yes is called a hero image so yeah you know what you could call it a hero movement that's the actual correct design term you have a massive kind of image element i guess on the screen you're like the top image that's called a hero because it's like the main image that you should be looking at the hero that's what we typically call it in design language yes um let's carry on i'm a bit uh i'm a banner so i'm gonna go into that confuse me for a second i was like what am i seeing it so i'm gonna click on that and then i'm gonna go ahead and import the image uh component that we used previously from nextgs so import image from nexus x4 slash image and then i'm going to go ahead and replace that with actually something a bit more useful which is the actual image component capital i be careful self-enclosed component the source for that image is going to be the following i'm going to pop in this source right here links up already 0 fm is the one that you're looking for right so i'm going to go ahead and hit save and there you go so now we've got image with source must be used with and blah blah so we get the same issue right remember you have to prepare it for it so we say layout fill in this case layout fill and then you're going to see another slight issue oops while we're down there yeah so now you can see it takes up the full width we don't want that right we don't want it to take up the full width it doesn't look nice it doesn't you know do what we need firstly i'm going to make it not stretch now you previously saw object fit contain which keeps the aspect ratio but i want to do something called cover and that will maximize it right but it won't it will kind of you know zoom into the picture as opposed to you know contain it so in this case i mean it looks kind of cool right looks kind of cool like a huge picture it's kind of like dramatic how we've got this kid and dog and like you know some people react walking maybe that's me i don't know right but at this point we're going to go ahead and make that a bit more you know styled up so we're going to go here div and then i'm going to say class name equals and i'm going to say relative so it should be relative to the size of that container in this case it disappears because when you make it relative you have to define a height and a width okay or just the height in this case so what we're going to say here is the height should be you know in this in this case you can give it a certain value now it doesn't just work in the sense if i can type in like 67 there are certain steps up you can use the tailwind css intellisense extension that i talked about earlier to go ahead and do it but what i'm going to say is you can actually use something which is pretty cool in just in time compiler mode so the latest version of tailwind which we have right here we can go ahead and add these square brackets and we can go ahead and add in exact values so in this case i want to make the height 300 pixels now that's pretty cool right obviously that's not ideal really we want this behavior right where it looks like that but it scales up in a nice way so okay mobile first remember mobile for everything is mobile first when when we're styling that's a good principle so we're going to say okay mobile first is height of 300. then what i want to do is on the small screen because mobile is not small small is actually bigger than mobile we're gonna say the height should go up to let's just say 400 pixels okay and then on the large screen we're gonna go up to you guessed it 500 pixels 500 pixels and then on the even larger screen the extra large we're going to go up to a height of let's say 600 pixels and then finishing it off 2xl is going to have a height of and this one was 700 pixels so we're just stepping up and the different screen sizes now if i go ahead and do this look how it nicely goes ahead and actually resizes right until you reach the final big size there you go look at that now we get this very awesome kind of you know responsiveness to it right and there's many ways you can do that you can go ahead and use a percent you can use ram sizing whatever you want this is one example with exact absolute pixel sort of values and that only works with just time compiler with tailwind okay really nice little feature we've got the image working the next thing i want to do is do something called absolute positioning so this is actually a little div in its own so not sure where to go in this button here and i'm going to absolute position now what the hell does that mean it means i can position wherever i want on the page that is what we call an absolute position now if you use this recklessly you're going to start seeing a element just fly off into the corner of the screen or you know go way off through somewhere that you're not going to see and you want to be careful about using it so the way that you contain an absolute positioning positioned element to the container so that way it doesn't fly off somewhere so far is you go ahead and make the parent relative okay so we've already done that because we did that for the actual image itself we made the parent relative and what we're actually going to do now is we're going to go ahead and pop in a div and this div and i'm going to show you a little trick if you write div for uh then the crocodile bracket with a p tag inside it makes a div with a p tag pretty sick right you're gonna have to set up emmet to make that work and here you're gonna say not sure where to go question mark perfect right and then you can see uh sunny where the hell is it i don't see it i don't see what you're talking about it doesn't come up on my screen okay we're gonna go ahead and fix that i'm gonna go ahead and say class name or that div it's gonna be absolute and then you can see it comes up and it flies to the top left like i mentioned but it's relative to the container that we're in so you see it actually contains it to the parent right so this is where absolute positioning is really powerful provided you make the parent relative otherwise you're relative to the page in which case you fly off to the top of the corner of the page and that's a headache when you're learning absolute position in the beginning it becomes like oh don't use that because it's scary if you just make it like that it's not too bad right so at this point i'm going to go ahead and say the top should be let's say half and that means it will go to half the page and the width should be full right and that means okay but you didn't do anything that's because if i make the width four in the text central boom it goes really nicely actually in the corner over there okay so it looks kind of good on this screen on this screen it's kind of big though right so the p tag now i can go ahead and do mobile first styling i can say the text should be by default small right but on a small screen it's going to go ahead and be uh text large so the small screen looks really nice but on the bigger screen boom make it becomes a large oh what's up sami thank you so much five dollar donation keep up the energy brother talk to you soon sami is awesome guys he's actually crushing it for a company right now he was tuning in to the early challenges back in the day it's been an og since this channel started so absolutely question i'd love to see you know our support for the papa fan members uh thank you so much dude appreciate you so not sure where to go looks really nice all right so now what we're going to do is we're going to go ahead and add in the button i'm flexible now you won't believe it all of that the clickable dynamic element styling everything that looks sick in what you're seeing there all comes from tailwind so what i'm gonna do oh this is a vibe whenever this song comes on right so what we're gonna do is we're gonna go underneath the p tag and we're gonna go button okay now the button is gonna say i'm flexible right and i'm going to give it a lowercase f so i'm flexible now of course that doesn't look that great now the reason that you might not be used to using tailwind as well is because when we use tailwind it strips all the styling which means h1 h2 h3 they all look the same and this is because it then allows you to go ahead and apply utility classes to a blank canvas no matter what element you're using that's awesome because then you can go ahead and configure the styling otherwise you're gonna have to always fight with the h1 style or h2 star or any other thing that's why i don't like bootstrap that's why i like tailwind it actually allows you to define what the star looks like so massive use for it there let's go ahead and continue on so [Music] hold this button i'm going to go ahead and give it a class name now pay attention to this one because this is where it gets pretty cool i'm going to first give it a text purple 500 text purple 500. now the text went purple oh you know shade in the middle somewhere right what i'm going to do is i'm going to say that the background should be white right oops bg white right looks pretty nice but you can't see it much that's because we need to give it a bit of padding so i'm going to say the padding of the x actually should be 10 depending on the y axis should be four and immediately we can start to see that button a bit more okay the next thing that pretty much immediately you know pushes it out is they say shadow dash md and now it's got a shadow and that immediately makes it pop right so it's very visible now the next thing you can naturally guess make the corners rounded rounded four right and you can do the things like rounded lg and it makes it you know less of a rounded corner and so forth and then in this case i would like to do rounded four and rakesh says tail is pretty awesome feels like a shortcut to the classes you would have manually otherwise created yes exactly it's pretty much a shortcut to go ahead and you know adding all you know when you do it manually and especially css module style components wherever you decide i i've used them all and it's it's just slower right whereas tailwind is so fast it ensures consistency very nice style palette color palette and it's just got loads of benefits to using it it's definitely my favorite go-to right rounded full so at this point we're going to go ahead and we're going to say front mode to change the text to abode and then we're going to make the text itself actually become so first i actually want to add a little margin on the y-axis of three because we're touching not sure where to go i don't want it to touch it so i'm going to add a margin margin is actually on the outside of the component padding is inside the component all right or element okay so now what i'm going to do is i'm going to do some pretty cool things here where i can pretty much go ahead and you know how do we do that right that's called a hover state when i'm hovering over it when i click it it's called an active state you can target these things intel in css very easily so what i can say is okay firstly this tag or the hover state i would say when we hover i want the shadow to become an excel so i want the shadow to become slightly bigger whoa jimmy 19.99 um bloody pound 20 pound donation he says love your teaching style i've learned so much dude i love you dude thank you thank you for that wicked donation sushi i'm going to call maribel we got some sushi thank you so much to jimmy appreciate you dude if you saw the last challenge i used jimmy as an example when i was uh doing a little demonstration of how a developer can make money it's a really cool one right but thank you dude appreciate you so at this point you can see this right and it's got a nice shadow to it but i'm going to go ahead and actually make the size change as well right so in this case when we actually go ahead and click it i want it to become a little bit more frank ten dollar donation let's go tailwind is awesome frank i hope you're enjoying tailwind dude frank always comes in clutch 10 donation thank you so much man more sushi for me so in this case you can see look we get the nice kind of you know it looks like it moves but really we're just changing the uh the shadow very nice little trick right and what i'm going to do here is i'm going to say when it's active i'm going to scale the button so when i click it active state scale 90 all right so in this case look at that it looks like i click it now but this one is really smooth and this one is clear it's kind of horrible right whereas this one is like you know smooth how do i add that transition well the way we do it until when is we say transition all right and we say duration i'm going to say the duration is 150. you can give it a different range 100 200 300 there's a few different ones 150 is quite nice and now that applies a transition to all your you know even when you have this animation between the shadow which means it even looks like it moves even so did you know it's how when we add that slight animation it literally looks like it lifts off the page now but it's not actually moving all right it's crazy what design can do so this is really nice at this point in time we're just about to break 700 likes this is goddamn crazy wow i want to see if you're enjoying this hit the thumbs up subscribe if you haven't already and we're going to keep on questioning pop fam let's go this is looking sick look at that so we are pretty much at the point where we just finished the banner and we just finished the header so we've got the fun part now all of this goodness right explore nearby live anywhere and then this kind of thing so we're going to split this up we've got a few sections here and then we've got the small cards so i'm going to be calling these small cards i'm going to call in these ones medium cards and you can see there's a scrollable carousel and then we've got this large card here okay and as you can see each one is going to perfectly respond and in fact if you haven't guessed already we're going to use grid over here so grade a column of four and as it gets smaller grid column three red column two grid column one uh whereas here we're gonna have an overflow so you're gonna learn all of this cool stuff okay so yeah i'd tell into your resume dude this is the time to do it okay so at this point we're going to go ahead and continue on with the build so i want you guys to go into your index.js next and we're going to go ahead and map this out now but inside of index.js we're going to have something called a main section this is going to resemble the main portion of the screen okay so what i want to do now is i want to have all of those different small cards right and that's going to be like you know what we have and that's going to pretty much resemble this so this is going to be called a section what i'm actually going to do here is i'm going to have a section and this section is going to have a h2 because it's like a subheading which says explore nearby all right we're going to tackle this section right here first the explore nearby park right so this part here oops this part here this is what we're tackling okay so explore nearby there we go and i'm going to actually start this right now let's go to class name and this actually gives this a nice little bit of styling we're gonna say it's text i'm gonna give it four excel so text goes up quite a big amount you can check the tailwind dots by the way if you wanna know all the different you know utility classes yourself uh and that's gonna help you guys out quite a bit uh frank thank you so much because the pep rack team are awesome these builds will help a lot of people develop a solid portfolio exactly that's my main mission man so we're going to make it font semi-bold i always do this why am i doing that font semi-bold and then i'm gonna say padding on the bottom of five okay that looks kind of cool right you're probably wondering the padding bottom isn't taking place it's because it's gonna attack this bit i'm gonna style the actual section itself in just a second i'm gonna say padding top here of six right there you go and it pushes it away now the main section okay i'm gonna give this a bit of styling here now notice something in this one you notice how this entire section right so this entire main kind of you know container that we've got over here never really goes past the max width right so it's kind of got this max width restriction from here all the way over here right so it's kind of max width over here max width over here but it remains in the center the reason why that happens is because we apply something called max width 7xl oops max width 7xl so we'll never get bigger than that width if we set a kind of constraint okay so then what we're going to do is do mx auto to make sure that it's always central if we don't do mx auto it'll be left aligned here and it will end somewhere around here okay so that actually does it quite nice i can see some of you guessing beforehand it's awesome to see that you guys actually get it right a lot of the time as well so now if i try this out you see how it restricts it over here okay but if i didn't have the um if i didn't have mx auto you're gonna see it actually fly to the left and it would probably end there so that's why we do mx auto and that means a margin x on there so automatically automatically configure spacing on the left and right so centralize itself okay so at this point what i'm going to do is i'm going to type in padding on the x-axis of 8. i don't want it to touch the side ever right so that's mobile friendly but when we get to a bigger size so on a small screen so that's bigger than a mobile view i'm actually going to increase that to a padding of 16 right and the reason why is because it looks kind of nice on the bigger screens to have a little bit more so you see how it's slightly changed there but because everything sort of snaps at the same time it's very very hard to figure out where that happens right so that's going to help you out quite a lot so we have explore nearby nice looks pretty good and then we're going to go ahead and actually have and inside this section we need to implement these now these are the cards right now this is where we do a bit of nice kind of next js magic so these cards are going to get pulled through from a server all right now the server endpoint so we're going to go ahead and pull some data from a server right and these api endpoints are already made i've already created them they're super easy to pull from and we're going to go ahead and use something called server side rendering to make this possible okay and there's two ways of doing it you can either have two types of like a a sort of server rendering you can have something called static rendering or server side rendering now in the case of a home screen the data is not really likely to change so much so we can actually put something called static rendering on in action i guess in this case we're going to do static rendering but if you if you have information which is likely to change a bunch right so imagine this and news articles are being constantly changed then you want to use server-side rendering which means every request that comes in it will regenerate the page when we do static rendering it prepares it once it caches it on a server and then anytime a user comes it just delivers that same copy right but that's a problem it can easily get outdated if there's new information kind of flowing in so i'm going to show you an example of static rendering for the home page and then on the second sort of tomorrow when we do the search results we're going to use server side rendering so that way you're going to use both static rendering and server side rendering so that renderings gets redeployed when you do um when you actually release the build to the internet okay so at this point we're going to go ahead and actually include it here so the way we include static site rendering is we go ahead and include a function all we need to do is actually say export asynchronous because this is actually an asynchronous function because it's going to be doing a bunch of you know network you know work before it actually reaches the browser i'm going to say it's a function and and you have to use a special function name here you do something called get static props okay and then you write the function like so now this just by having it inside of the index.js file this only works in pages uh sort of components by the way just by having it here tells next year that this is going to do some clever server rendering stuff now i'm going to give you a quick breakdown about as to how the this differs from normal react okay so what i'm actually going to do is i'm going to open up a terminal and i'm going to make it full screen i'm going to draw on this right so typically what we have or when we're coding is we have react okay so typically we have a browser and i'm going to go ahead and freeze it there we go typically we have a browser now this is what the user sees right they have some information on the screen typically this is in react okay so a user typically comes to the website and they just get delivered this when you're using react it's so called a bundle a react bundle so when you release a react app to the website or you know deploy it online the user comes to the website they get the entire react bundle now the entire react bundle sure it loads pretty quick it's definitely a pretty good thing better than using raw html css and javascript for sure you get the power of react but the problem comes when your app gets a bit bigger this is where nexus comes in next.js essentially adds in additional steps so what nexus does is it kind of and i'm going to go ahead and simplify this nexus introduces a server okay so let's think of this server as sitting between the two points all right this is why you have to deploy in xjs apps slightly different you have to have a server running to go ahead and use it okay so what happens is is the user makes a request to go to the site but what they don't see happening behind the scenes is the user really makes the request to a server and then the server delivers the page right so what actually happens is imagine we go to index.js the user requests to go to the homepage so imagine they go to properreact.com okay so they go to paparreact.com and then they go to this page now they don't need the entire app right so the server knows that okay they're just visiting the home screen so all i need to do is pre-build the home screen and send only the home screen to the user right and that page is loaded with react now what we can do really nicely here is we can you know cut out a lot of weight or we can cut out tons and tons of weight inside the application but which which is then delivered to the browser that means that the user experience is way faster to load it's going to be a hell of a lot more powerful because now you can do loads of kind of cool things on the server to prepare these pages beforehand and that means when users come to the site it's so fast to deliver the pages okay so what we now do is we have this middle ground server so as i mentioned before if you use static rendering which is the default thing that happens in nexus when we release or deploy our website it gets put over here and it basically builds these pages beforehand so it will have these pages pre-built and it just delivers them as and when the user kind of comes in so it's super fast if we include something called server-side rendering right then what happens is every time the user comes to the website it will go ahead build this page fresh with fresh information and then it will deploy it it's still quicker than doing the entire react app because all we're all we're giving them is the one page they're visiting so if they go to let's just say the contact me page or the challenge page for example then all they're gonna get is the challenge page you're not gonna get the entire app so it's way faster and way better to use next yes over a typical react just for that one reason as well right it has a bunch of other benefits but that is a kind of a quick breakdown as to why we do it so at this point when we do the static props we are actually going ahead and actually doing this step right here so we're going to say okay when we're pre-building the page at this point i want to fetch some information so that way i can build this page really nicely okay what's nice is that we can pre-fetch this information in a bit of code which is what we're going to do now and then we can pass it over as something that's called props to the component so it's actually a lot simpler than it all kind of sounds right don't worry when we when we actually mess around with this it's going to be super easy get started props now what we're going to do here is i'm going to make a call to that api so i'm going to say const and i'm going to say the explore data right so this is going to be responsible for the data that you see here so what we're going to do is this is an asynchronous function so if i make any kind of request to you know any endpoint on the internet i have to do an await right oh we just got a donation 30 from aaron's son dude thank you you've been at og since day thank you so much man that's huge 30 dollars that means we are a huge chat revenue touching around i think it's 80 pounds right now that's incredible guys hugely hugely appreciate that we're gonna say await we're gonna say fetch and this is how we basically make a fetch to an endpoint oh my god we have another one from tino wow he says thank you for everything that you do something i've been waiting for so long to be free to do one of these challenges i really hope to learn a coding job soon with the daily drive and new knowledge here's 50 pounds and some love dude i don't know what to say thank you so much that's incredible amount of support thank you i honestly just huge massive appreciation right there great i'm grateful i'm massively grateful dude thank you so much and i hope you enjoy this um yeah so let's continue on strong guys huge right oh my god massive so we're going to make a fetch right and now i'm going to show you what we're actually going to pull right so in this case i'm going to go to this endpoint over here right so i'm actually going to fetch now you can actually see what is at this endpoint if you just put in a browser this is going to go ahead and pull the following so you see this is actually pulling some json information okay so as you can see it pulls a json array and this array right here contains a couple of objects and each object has an image a location and a distance all right so this is going to be eventually shown on the screen like so alright tino dude that was huge man honestly thank you so much i can't get over that wow all right so at this point we've got image location and distance so what i want to do now is i want to pull this in so we're going to pull that information into you know our code base and then what we need to do is remember when we make a request it comes back with all this excess information the headers all this other kind of you know information that you might want to use but all we need is that json that we can then go ahead and show on the screen so what we do is we say dot then right and then here i just say the result or the response is going to be passed and we're going to we just want the result.json okay and what that does guys is it goes ahead and it just gets us the json information which is essentially this so now i get this inside this variable okay once we do that i need to return it to my functional component up here because this stuff is actually happening on the server anything inside of get static props get server side props whatever we do down here is happening on the server beforehand it happens at this point before we reach the actual browser because this is actually where the browser is right over here okay so what we're going to do now is i need to return it to that functional component at the top okay thank you so much code edits he goes i'm going to go for a run but i'm going to carry on with this thank you so much dude appreciate you man all right so at this point i'm going to say return and what's really cool here is that you simply return it as something called props pretty much stands for properties right and what happens is this takes an object and you can pass whatever you want so i'm going to pass explore data right so the key is explored here and the value is explored there now in es6 you can go ahead and shorthand this you can go ahead and pass it back like this so what this does is is with the information that we had over at the server we pass it sorry oops we pass it to our functional component over at the browser level right so what happens now is over here we actually get props so if i wanted to go access something i could say props.explore data and i'll get access to this information that was rendered on this server okay what i can then do is es6 allows us to pull apart it's called destructuring if you want to know what destructuring is we cover it all in react basics so you can go feel free to check it on the skill share link down below and that should help you out but we can go ahead and pull it apart here and say explore data so curly braces and that will pull it apart so now i don't have to write props dot explore data i just say explore data okay so at this point i have my beautiful kind of explore data coming through okay so we've got this stuff happening here so now what i can do is i got this information on the front end so i can say explore data and now i want to do something clever i want to map through it now map is something that basically goes through all of these items that come back and it will give us each item and we can do something with the item that kind of gets shown on the screen in our case we want to render one of these components every time we run through that loop so every time we run through the loop the way we do is we say dot map and we don't do a for each because the map returns a value so we say map so every single item we should give it a name that makes sense right in this case we're going to call it something like you know let's just say item right and this item we pass it so if you put parentheses here not curly braces parentheses it means it's going to return a bit of jsx so if i type in h1 and just say um item oops so jsx item if you put the curly brace it allows you to have javascript inside your html so let's say item dot let's just give it a test and we say item.location now what you're going to see guys is if i go back to my code it's because it undevises not object i'll explore the areas not so we need to make this actually um we need to actually double check something firstly so i'm going to go ahead and debug my code okay there you go i just have to refresh there you go london manchester liverpool but to protect yourselves you want to do something called optional training that means that if for whatever reason it's not there or it's undefined it will be it will handle it gracefully that's what we say it could be there come on but it's going to be there so just protect yourself now you can see it's pulling the information from our endpoint but we're rendering on the screen what you can do then is you can destructure it even further right you can get the image the location all that stuff away from it but i'll keep it simple i just have item for here right now rather than doing it all here and then you know having all the code over here i'm gonna go ahead and guys we're about to break 800 likes smash the thumbs up button if you're watching this right now share it on social media hashtag proper challenge keep crushing them and sign up to day five if you haven't already let's keep killing it we're gonna create the small card component to represent this okay so command b go to my components and i'm going to go ahead and type in small card dot js oops a small card dot js underscore rfc e for our boilerplate code and then inside of here what do you think i'm going to do right so i actually want to get this information passed through so again every component in react can take props which means properties now props are basically something that remember i mentioned we can reuse these components the way we reuse it is we use the same component but we pass in different properties right so that's what the props are for these are pretty much the same way that we write an attribute to anything we pass it in the same way so in this case i want to pass in three props right now you can do it in a you know a simple way but in this case i'm going to destructure so i'm going to say the props will be image location and distance and this is because this is what they have on the end point over here okay so uh gargan says love your courses the way you teach next yes thank you so much dude appreciate you um so we're gonna go ahead and pass these in now how do i actually really pass that through because this is on the functional component side if we go back to our index where i actually render a small card so you see we're going to do the auto import trick here you see small card from components where we render that out guys i can actually pass it through similar to an attribute so i can say the image is going to be the item dot image all right then we're going to go ahead and continue on we're going to say the distance is going to be equal to the item dot distance and then we're also going to say the location is equal to item dot location okay so every time we loop through we're going to map it to these props inside of a component that gets passed through over here and then we can use them right so that's how it works right so now what we do next is we go ahead and remember whenever you map anything inside of react you should always pass in a key a key is a unique identifier so that way when react renders out that list of things on the screen you have to do in a clever way you have to pass a unique identifier to each of the items and that means that say we add another kind of element to that list if we don't pass the key it re-renders the entire thing now that's not a problem if you've got four things but if you've got a thousand things it becomes an issue it's what it's not worth knowing because you become a good react developer so you're gonna use something unique in our case we're just gonna mess around we're going to use something like the image itself which is not the best thing but if you should be using a key right from your back end in this case we don't have something so i'm going to use image it's okay for now but you want to use something like an id okay so at this point you can actually perform destructuring here so if you wanted to you can actually pull out the image the distance and the location and get rid of all the item stuff here so you can clean up your code like that benefit to vs6 there you go right test that it works right so again we don't get any error that's a good sign let's go over to small card and now we're going to build out the small card okay so what i want to do is i want to have two divs in this card i'm gonna have the left hand side i'm gonna have the right hand side the left hand side is gonna have an image the right hand side is gonna have um the text like so okay so how do we do this firstly i'm gonna need the image component from next js okay let's get the music back up and let's kill it guys i'm gonna go ahead and import the image tag from next image and we're gonna have a quick water break guys we're moving strong keep with me remember this is gonna be up on youtube twitch and facebook so you can take your time afterwards all right 800 likes killing it let's keep going guys absolute crush in it right so for the small card now what we do is we're going to render two divs inside remember the left hand side so the left and the right so for the left hand side i'm going to render a div and that div is going to have an image component inside of it see how nice that was but this is going to be a self-enclosed image component now this image component is going to have a source of image right and that's actually the image that we pass through as a prop it's going to have layout fill so we're going to do the same trick that we were doing earlier all right this music is such a vibe and then we're going to say the class name i'm going to show you that afterwards because it's kind of cool all right now if i just save that okay that's horrible now why is that happening remember if we do layout fill it's going to fill the entire parent so what we need to do here is we need to say class is relative now it will fill in its relative container now it doesn't show anything because we haven't set any kind of height so i'm going to say that the div here should be a height of 16 and a width of 16. okay that's pretty cool we've got this looking nice i want to round the corners off though right so whether we have the image i'm actually going to go ahead and say rounded lg and what that would do is we can actually oops sorry i've messed that one right up we're going to go ahead and give this a class name there we go and i'm gonna say rounded lg rounded lg oh nice thank you gustavo for joining the papa fam special youtube membership you can literally join it by hitting the join button on the screen dude incredible stuff thank you for supporting the channel uh that really helps us honestly keep doing what we're doing full time so thank you so much all right so you've got this now we've got this explore nearby looking pretty nice looking pretty good all right so the next thing we're going to do is we're going to go ahead and add in the text okay so we're gonna add in the right div now this is gonna have a h2 element inside of it and we're gonna have a h3 as well we're gonna prepare ourselves the h2 is gonna have the location and the h3 is gonna have the distance okay so now you can see the london 45-minute drive remember by default it's a block it means these containers stack up i want to make it a flexbox so that way it goes by default into a row i go into my class name and say okay you should be a flexbox now it's a row actually no sorry not this one this one should be stacked up the actual overall container should be a flexbox right looks a lot better that way it's not centered you know this is actually not centered so what i should say here is flex items center and that is looking a hell of a lot better okay so awesome stuff guys been really really good at this point and uh moderators are doing an awesome job as well thank you so much guys okay so at this point we're going to go ahead and say the item should be centered a margin of 2 should apply so that way everything spaces out now i want you to pay very close attention to as i make these changes look how awesome the changes are shown on the screen i'm going to say margin top should be five okay so that way it space itself even more i'm going to do this space between all the x components of four so that means the text should space away from the first dip the left div okay and then what we're gonna do is we're gonna say rounded excel so that should round out if we have anything like a background for example which we will have i'm gonna make the cursor a pointer so that way when you hover over it it's gonna be a cursor pointer and now when i hover over it boom we get a nice cursor pointer but i want this super slick background you see the rounded applies there but you see i want this scaling effect okay so let's continue on so i'm going to go ahead and say cursor pointer and then i'm actually going to say when we hover i want the background to be gray and i want it a shade of 100 so it's going to be super subtle but there you go we get this nice kind of you know it drops in like so and remember that rounded comes into effect there will be rounded xl okay and now what we're gonna do is we're gonna say when we hover over it i want it to scale up so i'm gonna say hover scale i'm gonna do 105 percent okay so you see now it scales up but again this one has like a really silky smooth scaling right so big big kind of you know nice nice bit of uh you know nice bit of work happening there so at this point i'm gonna say transition and we're gonna add in that transition effect so transition transform well that's because we're going to make a transform you know effect happen i'm going to say duration should be 200 okay looking kind of cool but you know it's how it's kind of different to this one all right so really you want it to snap in really quickly but ease out right so what we can do is right now it's easing in easing out it's kind of i know it sounds weird but the more you work with this stuff the more you understand this if we do ease out now you'll get a very nice kind of it quickly comes in the screen and it eases out so it kind of easily fades itself out and that is looking nice that is looking sick that looks awesome right if you're enjoying that go ahead and smash thumbs up that's damn cool literally nearly at 900 likes crushing it guys explore nearby moving strong the right hand side is done and with that said we're going to change the text color to text gray 500 and we are nearly pretty much we are pretty much done there right so you see it doesn't respond the way we need it to so i'm going to go ahead and make it a bit more responsive in that aspect so this is where we're gonna go ahead and actually go to a level up right so we're done with the small card what i need to do now is where we render this out inside of index over here i'm gonna go ahead and surround our explore data so all of these things popping in with a div so i'm going to go ahead and pop this i'm going to cut it paste it in there and this div i'm going to make class name and this is going to have a grid system by default the grid automatically you see it stays in a column one column by default okay remember it's mobile first right so what by default we're gonna say is columns one i'm just gonna explicitly write it so you guys know what's happening okay so at this point when we hit the small break point i'm gonna switch to a grid column of two right so if you see now when we get to the small break point it goes to two but we don't account for any bigger size pasta all right so the smooth on the mobile it's one small it's two and then we we step up when it hits a large break point grid columns three and then when i hit the extra large grid columns four and now check this out boom it works all right it's not touching the bottom yet because we need to add a bit of padding and so forth but that is clean that is really clean it comes from the server looks just as we want it boom right looking really really nice now at this point we're gonna repeat this process right so if you enjoyed that i would really recommend you know maybe rewind and watch how we did the stack props and stuff like that again because we're going to go ahead and repeat this now for two more things we're going to repeat it for the medium section or the medium cards which are basically going to resemble this over here we're going to slightly change the styling of course and then we've got the large card over here right now this middle one we're actually going to pull from the api so this data is different to this they are this is going to be hard coded for large card but this one is going to be poured in as well okay so let's continue on now down here we can have another section this section is going to have h2 this h2 is going to say live anywhere all right and this is going to be basically that part there okay if we go down here he says it says live anywhere at the bottom this is going to have a styling so i'm going to say class name last name equals and it's going to be text for excel and it's going to be font of semi-bold and it's going to say padding on the y-axis of eight and now you can see live anywhere pops up very nicely okay looks pretty sleek right so now what we're going to do is here says does the square brackets we're just in time work for all the classes such as max width um i'd need to double check but i'm pretty sure it may do for max width but it's mainly for that the height width and those glasses even for colors you can do it bg dash square brackets hexadecimal color so i need to go ahead and actually pull in that other data okay so we're going to call that data we're going to call that there are cards there bin says givens gabriel says i think i'm in love with tarawin seeing how you use it it's sick i'm telling you it's so good and if you find that you have repeating classes componentize it make it a component do it that way we're going to go ahead and pull it from another endpoint so this endpoint is going to be slightly different this one's going to be zp1 so it's going to be four slash zp1 from links.com it's going to have a bit more information like this image and title so what i'm going to do is i'm going to say const cards data equals a weight thank you british cayman films he said stream quality is amazing i appreciate you dude thank you so much await fetch i'm going to go ahead and pop that in right there so zp1 and we'll say then i'm going to pass it to get the json remember if you don't pass it you get all that extra crap but we don't always want it and then how do we go ahead and pass it back to the functional component the exact same way we go ahead and take cards data and we literally can go ahead and pull that through the component now because that comes through as a prop okay so now we have it on the front end which means that in this section over here oops i actually spot that wrong all right so in now what we can do is yup you can what's up dude good to see you here so now what we're going to do is we're going to go ahead and say cardsdata.map again same principle applies every item that we loop through aka the thing on the list over here we're going to go ahead and do parentheses which means return if you do add the curly braces if you do this you're going to have to explicitly do this return sorry you know explicitly return a bunch of stuff but if you do it yeah but that allows you to have additional code here if you want to but in this case we don't want that we just want to do a direct return for some jsx stuff and what i'm going to do is actually return the medium card component which we haven't built yet so i'm going to go ahead and build this right now go into my components go ahead and create a new file called mediumcard.js underscore rfce boom and then once we're inside of here we're going to pull through the props the props in this case are going to be the image and the title if you're wondering where i got these from this is the data format that we get back from our api so we're going to stick with it i'm going to go ahead and import this and if you're wondering how the hell i did that go to the end of the text here control spacebar auto import from components medium card and you can see now i just pulled in really nice all right that's looking pretty good at this point and now what we're going to do is we've got the medium card pulling through so we're going to say item actually what i want to pull through here is the key i'm going to use the item image for that one again if you have an id it's better in this case i'm just going to wing it with that um two images could be the same hence it's not the best key i'm just going to be real with you in this case i'm going to say the image that we pass through is going to be item item.image and then the final one is going to be the title which is going to be the item.title so what we're doing now is we're mapping through the values that we returned back and we're going to go ahead and render them pass them through as props now again es6 you can do something called destructuring so i can go ahead and put parentheses here curly brackets say image and title get poured from that object and now i can get rid of all the item dot there we go looks really good hit save go back to our application and now what we can see is we can see undefined is not an object blah blah blah blah blah blah we can refresh because it needs to fetch it for the first time as fast refresh bugging out again i would recommend you still optional chain just to protect yourselves in the event that you know it doesn't work out or there's some reason or error for pulling that information so at this point medium card how do i get this information actually out on the screen i'm gonna go to my medium card and i'm gonna go ahead and style and build out the medium card now now this is going to consist of an image and then also a title so in this case an image and the tiles are very simple okay you me what's up dude so we're going to go ahead and pull in the image component okay so we're gonna go here pop in an image component so close to 900 likes guys if you're watching you haven't already smash the thumbs up button appreciate it massively helps the channel grow but inside of here i'm going to pass in the image now again we're going to use layout fill and so at this point layout fill requires that we're going to have to surround it in a div right otherwise it's going to take up the entire screen so i'm actually going to have a div with an image component inside of it and again this is a self-closing image component the source is going to be the image okay the layout is going to be the fill oops layout is going to be fill okay looking good looking good oops and if i hit save now wait for it it's going to freak out and it's going to take up the entire space right again we don't want that although this dog is kind of ugly i mean i love dogs i'm a dog person let me know in just comment section you're a dog or a cat person i'm a dog person right pugs are not my type i have german shepherds and a few of those um but i always thought pogba a bit strange anyway back to coding so for the div here i'm going to do class name equals relative and that will actually go ahead and again restrict it to be only rendering like that for the uh the the component or the container that is in so it's only going to use up the space it has for that container the image is now being sized relatively to its parent container okay so evan says dogs for sure oh yeah dude so in this case we need to set a height and a width so in this case a height of 80 width of 80. okay hit save and now you see this look at that looks nice images right nice looks really good okay um so at this point guys oops what am i doing uh back to the thing okay at this point what we're gonna do is we're gonna go ahead and add in that little text underneath okay i really like this song h3 and then here we're going to put in the title okay so you got outdoor getaways unique stays obviously what we actually want is this nice kind of scrollable carousel you'll be really amazed at how easy it is to get from where we're at right now to that final goal stick with me you'll see that how we do that first thing i'm gonna do is i'm gonna change the styling of that text it's kind of boring right now let's say the text on mobile view should be 2xl and we're going to keep it as actually because the margin top should be three to space out okay looks pretty nice now the overall container div i'm going to style this when we hover over it i want it to have cursor pointer okay so now when i do this there we go we hover over it and then what we're going to do is go ahead and say hover scale 105 okay again now we get the scaling effect again look at that it doesn't look that great right now though okay it has this overlap so we're going to fix all of this i'm going to firstly apply a nice transition transform transition duration it's going to be 300 i don't want it to be super quick duration 300 and then i'm going to say ease out now remember what i said before ease out allows us to go ahead and it'll pop in really quick but as you let go of it it fades out really nicely okay so at this point looks very cool all right codezella make sure you turn up day five i'll answer those questions right so this is looking very nice at this point awesome stuff right so i want to now get the layout like this to make sure that we don't have this overlapping annoying issues so we're done with the medium card so the next step is go back to our index okay now inside index where we actually render out the medium cards i'm going to surround all of these inside of a div okay so i'm going to write a div i'm going to grab my card stator that gets rendered and paste it inside the div so now it's contained in another container okay and then what we're going to do here is i'm going to go ahead and say style it so it's got a class name it should be a flexbox immediately a flexbox goes into a row right but you see what happens it actually extends the entire screen and that is definitely a no-no we don't want to do that okay so what i'm going to do here is first i'm going to space out the elements on the x-axis of 3 so not touching but again it's using up more screen than it should we don't want that so here i say overflow scroll dev mentor live says dog person for sure yeah i did i agree with you i'm a dog person as well i'm not are you nothing against cats but i'm just dog person overflow scroll now if you see overflow scrolls there's anything that overflows the width of the page will add this little scroll bar in and it allows us to scroll through the overflowing contents that's what we refer to as overflow okay so at this point we can go ahead now we get this nice scrollable aspect to it okay so you see we're getting there and again we actually need to add a rounded element to the medium card so i'm going to quickly add that because it's bothering me on the image i'm going to say class name equals and i actually did i think it was medium rounded excel we did someone say round in excel and now you get a nice little rounded effect right now you see there's no overlap but we still don't have the nice kind of finished aspect that we want right so what i'm gonna do now is actually hide that scroll bar so you can see here there's a scroll bar now i don't want that scrub i want this kind of slick you know you just scroll with it with your fingers as you're on there on your computer so what we can do here is we can actually use something called a plug-in for tailwind so tailwind is extensible it means we can you know people can make plug-ins for tailwind then we can go ahead and add it into our own configuration file for tailwind and soup it up even more so we're going to go ahead and add in scroll uh scroll bar hide which is a plugin for it so in order to do this we need to install ln scroll bar height right so the way we do a command j to pull up our terminal go into our second terminal and i'm going to npm install tailwind scroll bar hide okay so you can see i entered it in there this will go ahead and pull it into our project okay so we've installed it into the project so how do i upgrade my tailwind now so it has it right because by default we can't hide the scroll bar super easy right so what i'm going to do now is i'm going to go ahead and say in the plugins we simply type in require notice how it's an array so we can actually have more than one so i'm going to say require i'm going to pass in tailwind scroll bar hide so this now upgrades our tailwind so that way we have this additional scroll bar hide functionality and you can go ahead and google that library if you want to have a look at it it's gonna be really powerful eugene you're welcome he says thank you for for this tailwind it's amazing appreciate it man uh so at this point where we've got the overflow now i can say scroll bar hide and just like that i think it's scroll bar look it's a scroll bar hide yep it's just like that and you this should hide so what we actually need to do is we're probably gonna need to restart our server to get that to kick in so because we've made a configuration file change i'm gonna do command ctrl c i'm gonna to npm run dev to restart my server okay i'm going to refresh and now give it a second and it should pick up the new configuration file and wait for it it should find that difference it says compiled and built the page successfully go down and now we have no scroll bar looks very nice no scroll bar at the bottom anymore okay so now that we've done that obviously it's kind of you know it's a bit close to the bottom so what i'm going to do here is i'm actually going to add a little bit padding command j to hide the terminal p3 padding of 3 to give it a bit of padding so it doesn't get cut off when it zooms in you see before without the padding it was getting cut off so if i get rid of that it actually cuts itself off you see that when we so you give it a padding on the outer container to fix that and we do dash margin left of three because i actually padded it a bit away from the left so we've correct that with a margin negative margin of three and now we have this beautiful scrolling container look at that guys looking awesome all right it's looking very nice at this point and what i'm going to do now is actually show you right here look at that awesome stuff all right so we've done the live anywhere getting there guys we are so close right we're so close we have the large card which is pretty quick to be honest and then we have the footer and then i'm going to show you how to deploy this application so that way you can go ahead and submit your homework get those bonus points in to win this challenge submit it and we're going to go ahead and have a party when this thing's over right but you guys can get your job your dream jobs by showcasing this so we're going to create the large card next okay so the large card is a pretty interesting one you see we're going to build this out now it's going to be a hard-coded value we're not going to pull this through and we're probably going to go ahead and just make this one relatively simple we're going to do command b create the large card component so i've kept it very simple for you guys to go ahead and follow along with me underscore rfc for a template code and inside the large card we're going to accept four props okay we're going to accept let me go ahead and say blah blah blah we're going to accept for the props here we're going to destructure them so we're going to basically go ahead and pull it apart i'm going to accept an image a title a description and i'm going to accept a button text okay so i'm gonna make it a reusable component a large card which is reusable okay now what i'll do is i'll save this here go back into my code i'm gonna go ahead and pop in a large card and you see we auto import and so that way we import it over here like so super nice neat coding keep your environment clean guys right here i'll say the image is the following it's going to be a nice shortened url that i've saved for you guys so this will go ahead and make it super easy so image is like so it's going to be a nice little url yeah awesome stuff and then so i'm up says this is live how are the zoom edits i'm literally zooming in and out on my trackpad so that's how it works everyone's always wondering like how the hell did he do that that's why i'm doing it i'm gonna say the greatest outdoors right and you know to save a bit of time i'm gonna copy the description and button text there we go and hit that boom nice so now we've got this large card obviously nothing's rendering on the screen yet so i'm going to go ahead and fix that with the image title description button text so we go over to our large code now large card now and we need to style this up all right if you're enjoying this guys literally seven likes away from 900 likes that's crazy guys honestly wow all right so this large card now the large card in itself because it's huge i'm going to make that section now it's up to you you can make a section leave it as a dip whatever you really want to do that's okay i'm going to go ahead and not happen there and then what i'm going to do is i'm going to pull in the image component from next guest image because i'm going to use that as well here i'm going to pop that in like so and then we're going to have a few things we're going to have two divs the first div is going to be this you know kind of image that we kind of you know again layout full fill then we're going to absolutely position this relative to the parent to get this perfect positioning okay nice current is i can't decide what's more clean the code or the website ah nice dude thank you so much appreciate 900 likes yep you can what's up dude yo this is what i'm talking about this is the energy we need throughout these days guys crushing it you know this replay is going to be available on youtube facebook and twitch feel free to take your pick and remember if you haven't already sign up for that final day challenge all right we're going to have a huge training e-book everything crazy i think we can hit a thousand likes before this kicks off all right so let's go ahead and add two divs the first one is for the image the second div is going to be for that texture so we're going to pop in our image over here like so and the image source is going to be the image that we passed through so it's going to be see how we're making it reusable super easy right here we say layout is fill looks really nice and then we're going to go ahead and say object fit cover remember we've done i showed you an example of contain i showed you an example of uh cover right so we've got two examples in this case and let's see what's happening so right now it's not actually showing for some reason but we're gonna go ahead and fix that in a sec oh it is sorry it's just flown up here and that's because we need to make this relative remember whenever you do that fill it's gonna be it's gonna not show it so you wanna it's gonna use up the entire uh sort of screen size you want to make it relative to its parent to sort of contain it so i'm going to say relative height of 96 and a width and actually here on to say a min width and this answers someone's question earlier so i say min width 300 pixel it works with uh dynamic min width works with dynamic content as well so that's pretty much what we want when it goes ahead and gets smaller it's we want to get to this achieve like we're going to achieve that design okay so at this point and again if you want to extend the build feel free you know go ahead and take it as far as you want uh but yeah it'd be awesome so now what we're going to do is i'm going to go ahead and we're going to take the image which we've added a few things to here i want to make the corners rounded and we'll say class name is rounded to xl okay there we go it looks really nice and we're gonna we have that's the design language today i'm gonna make the actual section relative as well because i'm gonna have the absolutely positioned text which floats around over here right so we have to make the parent relative otherwise it'll fly off we say py is going to be 16 so that way it has padding or top and bottom and then we say cursor pointer because i want it to be a clickable element cursor pointer looks great now we've got that nice little you know bit on top of it now here we're gonna have a h3 inside of here this is gonna have the title okay so the greatest outdoors you can see it pops in really nice we're gonna have a p tag which has the description okay and that has you know wishlist curated by airbnb i'm gonna have that custom get inspired button on the screen okay and then so here we're gonna have a button at the bottom of the screen so we're going to say button and then inside that button i'm going to say button text and that's going to be all the props that we passed through okay looks nice so i'm going to basically get this to this very quick using tailwind css so if you enjoy it let's get that like count up to a thousand guys right so at this point i'm gonna say idea of class name equals and we're gonna say absolute and immediately it's gonna go ahead and you know do some weird stuff like we'll stop weird things against that item saying top 32 and because it's relative to the container if i do top zero you see how it's relative to that but we've got padding here so that's actually where it starts but top 32 gets us there we're going to say we actually want to kind of you know left go away from the left 12 and that's how we get to this point okay so this is looking pretty good um krishna says should i use tailwind bootstrap or vanilla css i would say if you're learning mess around with tailwind i wouldn't recommend bootstrap i'm not a fan of it at all tailwind and vanilla is the way to go and then start composting you do that stuff but tailwind is by far my favorite for for the long haul right now okay so the h3 tag i'm gonna go ahead and customize this we're gonna say the class name equals this is gonna be a bit bigger so i'm gonna say text for excel okay margin bottom of three and a width of 64. and you can see now oh you know things just start to come together the p tag looks so great as it is the button text let's go ahead and make that that nice little black button so here we're going to say text should be small okay uh we're going to make the text white make the make the text white and then we're going to say so text white and then we'll say bg gray 900 okay there we go you get a nice little background there so we're going to make a padding x of 4 a padding y of two a rounded large that way it's not so tight on the corners oh and a margin top to separate it five boom you see how like it's crazy right you get so much power when you use tailwind and it's just really fast as well like you can get all of this beautiful you know it's really really is nice utahwin so there you go that looks pretty good okay and i think that's actually the large card section done right and you see how it oh oops i'm actually resizing the wrong thing it actually looks perfect whatever size we have and then the max width kicks in for this for the overall section looks really good okay looks really really good um so look at that guys already we've done this in just two hours two hours right and it's already implementing static you know generation for the data it's actually fetching this on the server beforehand and then it's going ahead and preparing the page and then it's delivering it to react so this is where you know angular and all those things like this is where next just blows it out of the bag so react was already amazing as it is but next gs just kills it when you when you combine it in because you have all this additional power you're only delivering what the user needs hence why it's so quick it's just crazy really powerful really awesome really nice stuff hello what's up dude good to see you in here awesome plant remember in the diamond in the papa fam awesome dab here man so the next final part of the puzzle is the footer all right the future we're going to go ahead and implement and it's going to be actually pretty fun now if you found it quite cool so far you're going to find the footer a breeze right so stick with me we are almost there and then you guys are going to have your chance to go ahead and submit your homework get those builds in and start getting those points guys it's going to be a lot of fun at this point what we're going to do is we're going to go back to our index file okay so i'm going to pop this in like so go to our index file and then i'm going to go underneath the main i'm just going to say underneath the main contents that's where i'll have the footer i'm going to create a footer component footer.js underscore rfce for our boilerplate code hit save so that way the file actually exists go back here enter end of the text ctrl spacebar to get a nice little import shortcut that imports footer at the top of the page right dev mentor live since i teach nexus 2 it's amazing it's basically ruby on rails for javascript and react it's really honestly powerful and it is awesome because you did a bang-up job on recreating time top content thank you so much dude and i appreciate you for being an awesome member if anyone else wants to join the youtube membership then feel free you get a nice little you know tag next your name i can see your chat really easily and you're going to get custom emotes and everything as well so it's going to be awesome and yeah thank you for supporting channel so at this point we've got the footer coming in so the footer now we're going to go ahead and style it up okay almost there now the footer i have hard-coded so it'd be super simple for you guys to go ahead and follow along this is going to consist of a bunch of different sections so one two three and four and each one is going to basically resemble so in this case we've just got it sort of you know very simply stacking up in that case otherwise it will be a four column layout there's gonna be four divs and then we're gonna go ahead and apply things to it okay so let's go ahead and do that let's make it super simple to go ahead and do that so at this point we're gonna go to our div and then we're gonna go ahead and say wait for it so there you go that's why it's recording so we're going to say div and now i want to do i want to say okay so for the df we're going to have five dibs okay so there's actually a trick here so let's say we got rid of all of this and we just put a parenthesis there's one say div and this should be times by uh so we're gonna have a div with a different side of it times by five there you go boom we got five divs a little shortcut all right inside the first div so we've got the first div which is the first column second day of third day fourth div all right i think that's so what yeah anyway anyway fine is what it is so at the top we're gonna have an h5 and this one we're going to say is going to be the about section right so you see the about and that's going to be resembling this and then you've got community host support so i'm going to do one and then i'm going to copy the values in and it's going to and then you guys can feel free to copy that we're going to do five paddings uh sort of paragraph sorry and for each one i'm going to have a bit of text in so i'm gonna go ahead and pop these in like so all right so we go ahead and hit save and you see how they stack up on top of each other now for the h5 tags in every single one we're gonna get a class name of font bold okay so there you go it has a little bold look to it and then for the class around it's the container that was surrounding it we're going to say a space along the y axis of three or four is better actually here and you can see it spaces out the y components or sort of elements underneath it okay and now what we're going to do is we're going to say text should be extra small text should be gray and it should be 800 okay 800 shade of 800 quite dark right so that's how we get this look and feel to it looks really nice already right so i'm going to repeat that a few times over for the other sections and this is where you can feel free to just copy them out so these ones right here i'm going to replace with the contents like so obviously at that point you could pause just copy out if you want and then you can go ahead and do it i've just added a few easter eggs in there this is not a real site it's pretty awesome clone all right and then we can go ahead and see now it stacks up by default it's a block all right it's block elements so what we could do now is we can go ahead and go to the overall div and we can apply some styling here so class name equals and we're going to make it a grid system we're going to say on the mobile view i want it to be a columns by one so it's going to be one column grid system but when you hit the medium break point then i want to get to the bigger columns and split into four okay so on the medium break point then we hit into four column territory so now you can see we hit the medium see that guys it goes into the medium view and then it goes ahead and splits into four columns like so right so that's quite neat when it works like that but then we've got this spacing issue so how do we fix all the spacing stuff right now the spacing issue can be fixed with the following so we're going to say uh a space along the y axis of 10 but the reason that we're actually going to use something cool here called gap y 10 and then that actually goes ahead and space out in this case we use a square u space doesn't always support i would say space y axis of 10 and then in here we're going to go ahead and say padding on the x axis of 32 adding on the y axis of 14. hit save okay and there you go then it kind of spreads into the middle which is a lot nicer we're going to give the background a gray so bg gray 100 and then you go it looks really nice all right gray text gray of 600 text gray of 600 there we go nice cool stuff guys all right so at this point look at that looks pretty cool now you can see this little issue here now this is a problem that happens when you're using uh space over gap gap is an awesome feature but it's not always supported in uh in a safari so i recommend using gaps because then you don't get the first element that gets faced up so gap and space that's the difference so you can see look at that guys looks really clean right and it goes ahead and sizes out as we need it i mean i think that was damn powerful guys we have literally so many we're few likes away from a thousand let's cut a thousand before we wrap up on today's build all right i'm gonna go through all the features that we have done so far so so far guys this is the build that we've actually coded today and this is the final finished build so you can see we're pretty much done for the front end portion of this build looks absolutely incredible we've got lovely little elements here we've got lovely little animations styled you know everything looks awesome look at these transitions they ease out perfectly boom beautiful silky smooth transitions going down here we can go ahead and resize and we have a max width that gets applied even the way the picture changes everything is responsive we get this nice scrollable aspect looking really beautiful here the grid element changes here it's dynamic and responsive fits the screen as it looks good and look at that look at that hero oh just so so clean all in two hours we did all of this in two hours so if you enjoyed it smash the thumbs up button because this is your homework this is gonna be your homework for day two of the five day airbnb challenge yes your homework is going to be to literally go ahead and build this out all right build this out get your application working and then we're going to deploy it to versa so the final step right now is to deploy traversal so that you get a url that you can submit on your homework so what we're going to do now guys is you're going to go over to your github okay you're going to log into github if you haven't got an account on github create one you need a github account it's so useful you're going to create new repository right you're going to go down here and then you're going to click on and let's just type in this case i'm gonna do airbnb youtube demo so from you guys i'm just gonna call it a demo okay now i'm gonna make it a private repost that way you know it's not accessible to everyone you guys can feel free to do the same create repo now it's going to be a fresh repository which means you can go ahead and click copy this line down here copy it go back to your code editor and what we're essentially doing right now is we're going to push our code to github github is a place where we have repositories repos they're called this is where code lives okay so what we can pretty much do is we can store our code on github and then with verso we can connect our github account and then we can deploy that project so that's what exactly what we're going to do command j to open up our project go down to the second second terminal and then we're going to go ahead and say we're going to say paste so we're going to paste that command that we just had previously from our github this one here we're going to copy it paste there we go and now what you want to do is get add or so dot get dot and this will add all of the your fo your files to your get push we call it a commit right we're gonna we're gonna commit all these files to a uh sort of a change request for our repo so we're gonna commit it and then we're gonna push here so it updates the repo all right so i'm gonna do git status and you should see green nice if you see red just do get all again and you're good to go at this point we're going to say git push and you should get this magic command you're going to copy that paste it and you should see a push right at this point what you want to do is go back to your github and refresh and you should see your code just got pushed into your project okay so this is really nice at this point actually we just pushed the initial thing we didn't actually commit so if i do get status check this out look still we didn't push it so what we actually need to do is we need to say git commit dash m and we need to say okay let's call it uh day one build so but we just pushed in the old code so we're gonna say day one build and now we do a git push and now if i refresh you should see it doesn't say two hours it should say 11 seconds there we go nice right so check this out so you've got all of this stuff happening down here and again if you get caught at any point with react being too complicated or anything like that remember i have a free react basics class down in the description go ahead and check it out on skillshare you get free one month free go ahead and check that one out i hope you are as well if you haven't already first link in the description sign up to day five of the challenge for that free ebook okay so we've gone ahead and pushed it to our github the next step is to go ahead and go to versal so i'm gonna go to versal.com versa we basically create an account you then want to go ahead and connect your github repo it's very simple to do so okay now what we're going to do oh kenya is announced thank you so much elvis appreciate it we're going to click on new project and i've actually connected my git repo already it's very simple to do so they have a ton of instructions all you do is connect your git repo and then you see 59 seconds ago we just pushed to this one i'm going to click import okay at this point i'm going to go ahead and click on skip for the name and then we have this now you can see it automatically detects that it's a nexus project we're going to leave all of this pretty much as it is we're going to click deploy and this is going to go ahead and deploy the application to a custom url that verso provides for us now this is going to allow you guys to go ahead and actually showcase your app to me so that way we can mark it we can see it and also you can actually host it on that portfolio that you made yesterday yes i have given you in two days already a digital portfolio and already a piece of work that you can go ahead and showcase on it if this isn't showing you guys that you are you can be successful as a developer you can get your foot in the door and start your journey and build your portfolio we're going to crush you guys so keep on going okay it's going to go ahead and build in airbnb i'm going to say universal it's going to build our airbnb yeah and then you can say congratulations you just deployed a new project to versel and then hey you get this nice confetti and then you can click this and you'll have a beautiful little link so it gives you a nice deployment and they also got these bunch of other domains but the point is you want to click on any of these come visit and you should be able to go to your actual website so i want you to copy one of these you know you get ton of different ones if you want you see if you highlight over it it's got a bunch of them but copy one of these urls this url is the basically is going to be how i can check your homework all right you're going to keep on adding it and eventually that url is going to be also the one that you link on your resume or portfolio okay it's completely free to do that so what we do now is you go to the link in the description for day 2 homework and if you are part of the facebook group it's also going to be in the guide section then what you're going to do is go you'll reach this page you're going to have to follow all these steps so register for the challenge make sure you've done that register for the last day reveal you don't want to miss it guys register for it facebook group all that good stuff but this is where you the magic happens put your name your email address and you want to pop that link in like so okay if you completed it perfectly to fully complete if you had a bit of problems right past your complete it's okay i'd love to check them through anyway full name email hit submit and boom your homework is gonna be submitted and it's golden that's as simple as it gets guys you're going to be able to build this incredible application that we went ahead and built today tomorrow we're going to continue we're going to go ahead and extend this so that way you can go and actually type into the search bar and you'll get a nice drop down okay so i'm actually going to go ahead and see if i've got my uh my actual old one that i can show you um because i should actually be able to help you guys out let me see if i've got it and then you guys can actually see for yourself what is actually gonna happen all right when you get so i'm actually gonna go ahead and see if on my versa right now i just deployed a second ago before i went live i'm gonna go to my projects my previous build and i'm going to show you guys there we go boom all right so we're going to go ahead and build this tomorrow so when you type in you get a lovely beautiful day picker we go ahead and enter some information so you're going to learn all about state tomorrow we learned about props and satisfied generation react all that good stuff tailwind css all today and tomorrow we're going to learn about state and the component for example the calendar we're going to pop in some information then we're going to serve aside render so today we did static rendering we're going to do server side render hit search we're going to implement this beautiful loading state and then it's going to server render so we're not going to build the map tomorrow that's going to be the next day we're going to build this search page results and all of that functionality this is all going to be server side rendered it's all going to be you know amazing and powerful you're going to see how you can actually append it you see all that information we put it actually gets put into the search bar so you can share the link to someone else they get the exact same search page results it's going to be a hell of a lot of fun guys papa fam if you are excited to get your homework done comment right now saying i'm excited for this homework and i'm going to get it done comment right now let's get this energy up natasha says thanks i was an intense coding session mohib says cool stuff dude uh we've got let's go through we've got vishnu says can i submit the homework tomorrow yes dude remember you've actually got until day five to submit make sure you do have mental lives they're saying if you ever want to do a collab i can show you the pop family how to build a camera using react to function programming oh nice we've even got some collabs happening in the future guys that's incredible bracket says he's excited for tomorrow the search functionality thank you you're welcome dude this is going to be awesome guys as mentioned before i'm going to go ahead and show you guys the apis that you're going to need for this build today so these are going to be the fetches that you're going to need to make and you can pretty much go ahead and re-watch this out remember re-watch the entire video it's going to be directly up straight away i'm going to be adding timestamps and everything good and go down like that so do not worry everything's going to be awesome this is your boy papa react sign up first link in the description day five get that free ebook it's gonna be a hell of a lot of fun i'm gonna go over training like this times 10 on that day tomorrow is going to be a hell of a lot of fun submit your homework help people out be supportive encourage others to kill it we are literally 12 likes away from a thousand this is your boy guys and we are gonna go ahead and everything by the way is in the description all the links everything facebook group help each other out i'm gonna end it again on our papa fam anthem as i always do this is what we built today day two of the airbnb challenge it's all gonna be in a playlist so you guys can feel free to go ahead this is what we built sorry where's it gone this is what we bought today i hope you enjoyed it guys and i look forward to seeing everyone in day three of the airbnb challenge we just hit 1 000 likes to end that off couldn't end any better i'll see you all for day three of the five-day airbnb react.js next year's challenge hopper fam go ahead kill the energy get your homework in and i'll see you in the next one [Music] peace [Music] oh [Music] you

Channel: Sonny Sangha

Views: 60,375

Keywords: react, developer, reactjs, html, css, js, javascript, papa, papareact, papa-react, tutorial, frontend, webdev, web-dev, clone, fullstack, backend, motivation, reactnative, react-native, redux, typescript

Id: BbilqOBOfg8

Length: 157min 35sec (9455 seconds)

Published: Wed Aug 04 2021