🔴 Let's Build a YouTube Clone with REACT JS for Beginners

it's sunny how's it going guys good to see you all again so nice to see you guys guys today we're gonna be building the youtube clone and we're gonna be showing you guys exactly how to build something like this and what technologies are we going to be sharing with them on this sunny and how they can actually build a youtube clone yeah so today we're going to be showing you guys how to use material ui how to get a responsive design using flexbox how to use some material ui how to get responsive design using flexbox we're going to be showing you guys how to use firebase so how to host data and also how to deploy the website live so that you guys can go ahead and put this on your portfolio and then we're going to show you guys how to actually um handle separate sort of um pages in an app using react brewer so a bunch of things coming up here guys uh if you're excited let us know in the comments and smash the thumbs up button and we are pumped to get this started damn this is going to be packed we see you guys in the chat you guys are already pretty pumped guys this is going to be a massively awesome build i mean look at this like this literally you will get confused whether it's youtube or not and even if we go to demo it and i type in something like clever programmer and hit search you can see how it pulls up you know a whole different thing and it's instant right it's fast does it even refresh send you and actually type it in and hit nope it doesn't refresh so no refreshing think about that like that is that is fast and then on the left hand side what you guys are used to seeing with the youtube um how all of these are and take a look as i hover over them notice how it has that nice little overlay and then the buttons turn red right that's actually what happens when you're on youtube itself exactly and all those little icons that you guys see are coming straight from material ui icon set so we're going to be showing you guys how you can pull that in and get it up and running inside your app yep so actually let's actually do this this is happening because of this is material ui right all of the let me see all of that stuff dope exactly okay what other things should we highlight so guys you can actually go if you go uh press this button here you're able to then go back to youtube i mean guys are you guys excited about this build or what i mean imagine adding this to your portfolio exactly like guys like if you could show this on your portfolio it's massive value like if you could show this and then you can go ahead and build the amazon clone all of those other things that we went ahead and built like i mean like if you're able to show this to an employer like i mean they're pretty much going to be jumping an opportunity to be giving you a job like it's it's massive value yep we have serendi and he's saying hey guys learning new things is awesome from the legends i'm so excited i am pumped and yeah we have a bunch of people who are excited about this thank you guys love your love and um with that said pretty much we're just gonna jump right into the build what do you think sonny yeah i think let's do it dude let's jump straight into it okay so oh guys yeah and just keep in mind we're gonna show you um how to have a real-time database with firebase we mentioned that and then of course you know we mentioned it light lightly but we're going to teach you how to deploy it so it will not be on ngrok it'll be like actually hosted for you on firebase and then people will be able to use this app as well exactly yeah awesome um okay so cool with that said guys let's jump into it and let's start coding this bad boy up and you can see it's even responsive yeah exactly okay we're even going to show you guys how to use the correct values so you notice even the sidebar change the size like the size actually change dynamically as we resize the screen so that's pretty important when you're doing responsive design and even like how the videos are appearing like now they're stacked but when the screen got bigger they went in like a nice row so those things are all huge and they're going to be important when you're considering front-end web development so yeah there you go awesome says you guys are doing an excellent job we're learning a lot from your live videos love you bros thank you awesome awesome we have a few people so my confidence level so vera al sangavi says my confidence levels has increased massively by following your live tutorials amazing we love to see that we love love love that's amazing i see that um marek says hey guys i just enrolled to your profit with javascript course i am so excited that is amazing thank you so much and actually we saw when you enrolled this morning i think sunny you probably saw it too so yeah that is amazing and then make sure you come to the live calls as well where sunny will be training you exactly every tuesday guys i will be teaching on those live calls so if you're gonna get involved in that link in the description and go check it out yep awesome so let's dive into it so what's the first thing should we start off with uh creating the project yeah so exactly oh we had max he's just enrolled as well welcome to the course dude nice um yeah so in order to get started guys we first have to share terminal so the way me and kazi are working right now is we're using something called vs live share um so let's go ahead and share a terminal between us kazi yep so i'm going to hit command j so that's the shortcut guys for where's my mouse where's my there we go so this is the shortcut right here guys to actually bring up the terminal command j or on your windows going to be control j i imagine and what we want to do is we want to first c actually we want cd i think we'll be right here and i'm going to give you access read and write access so we're using something called live share to share access to visual studio code exactly perfect so you can see guys i'm actually typing inside of kazi's terminals and then what we're going to do now is actually go ahead and use a really nifty tool from um from whoever keeps timing out people by accident we're going to go ahead and we're going to go ahead and use a nifty tool um called a create react app guys and it's a tool built by facebook and it basically sets up an entire react app for you so we've used it in all of our builds and to do that we say mpx create react app and then we basically give it a name so in this case we'll say youtube clone and you want to make sure that you're using dashes not spaces guys so yeah dashes not spaces perfect yeah and while that's actually getting set up cause you just go ahead and set up firebase okay so let's go over here and we'll type in firebase.com yeah and let's go to um while we're loading up guys firebase is essentially a set of uh it's a suite of tools provided by google and they basically allow you to do so many things including having a database having authentication having a bunch of other stuff including hosting yeah so if you guys know about it if you guys know about something called um if you guys have heard of something called aws um firebase is kind of like the aws but for you know aws is for amazon and firebase is for google but sunny keep giving your explanation because i think your explanation is going to be more helpful to people um so really good thing because you mentioned that aws guys is essentially we've all probably heard of that it's like the most popular one that most people will be familiar with just think of firebase as this super easy user-friendly aws right yes that's a good way to put it yeah that's a great way to put it like they just make everything so simple and vishal just dropped the first donation hey thank you so much oh nice thank you so much that is amazing thank you guys thank you awesome um so now guys what you want to do is all you need is a google uh project uh google gmail account sorry and then you can hit add project and let's just type in the youtube clone yeah there we go oh yeah youtube clone there we go and it's creating the project and what this is going to do is guys it's going to set everything up we need um and it's everything up that we need in order to get like our database up and running our firebase hosting up and running what we're going to do now is once this step is finished we didn't need to get a config file right so we need the config bar and that's going to be the magic key that connects our react app to our firebase backend so now that that's done let's go ahead and click continue yep there we go and once we're at this screen we should be able to click the the the burger menu on the top left this can we just click right here oh yeah we could click that one yeah we can click that one okay and then here we give it a nickname so we could say youtube clone also set up firebase hosting for this app yep so we set up firebase hosting for that and it will say to you now you have to install the firebase sdk and stuff like that we are not going to bother with this stuff because we actually go ahead and use node modules if you haven't done this step you will need to do this and you're probably going to have to do sudo npm install uh whatever it said so that's perfect and now this could continue to console yeah so once you've done that click the burger menu icon on the top left and then click on the uh project settings and then let's go to the config and pull the config out yeah so guys you literally just want to copy that and just keep that somewhere right you want to keep that for later so whether it's notes or something else but just copy that and paste that somewhere so that you can use that later on right um so nice should they maybe just make like a little file like firebase.js and just save it in there for now yeah that's a really good idea yeah it's really good idea so it's firebase.js because like that step you know for us i think it's good because we have like a jack clipboard but i think for most people like we're gonna be like we're gonna put this yeah no good step that's a good that's a good step to include nice um and then and then should we delete these three of the test ones that come with it yes and now basically we do some yeah so we have like a clean up process guys we want to delete the test files so the ones that cause these are highlighted here you just want to go ahead and get rid of those so the app.test.js the setup test.js and the logo.svg and but before we do that quasi let's actually go and show them what so this just created a react app right so in order to get this thing started up and to see if you're the correct step you need to go into the terminal and go ahead and type mpm star do you have to see me into it first you have to see the into it first exactly yeah so cd youtube and then you do mpm stuff or cd whatever you called your app right so if you called it like youtube demo or something it would be cd yeah we got another super chat thank you thank you so much thank you awesome cricket karma says guys you're the react legends we love that nice and we will also be dropping i think we're doing tick tock tomorrow right oh yeah yeah we should actually also make tick tocks together that would be a lot of fun yeah that would be fun i'll be so james yeah awesome so guys you see if you get to this screen you're at the right place right so obviously this screen's good it shows us the react apps up and running but obviously we don't really want this stuff so the cleanup process is deleting app.test.js the logo and the setup test file so let's go go ahead and do that so now we're going to delete that logo too guys so i'm going to select all three of those i just deleted it now in our app.js it's going to complain that logo is not found so i'm going to go ahead and delete this line right there and then sunny is going to delete it everything all of that code yep and then we're just going to put a h1 that's going to say i don't know why it does that all the time for me yeah i don't know super strange also let's build youtube clone and i'm even going to put a rocket emoji in there and hit save and now boom there we go hello clever programmer let's build a youtube let's do a youtube clone there we go also so that's a good starting point guys we've still got one cleanup step so for this bit just rename the class name to a lowercase a because we follow something called uh it's a bam naming convention so bem right some class naming convention so this is something super useful guys and we do it in every video so make sure you learn that and then what you want to do guys is go into app.css yep so inside of app.css you basically just want to go ahead and delete everything inside of app.css right so inside of app.css you want to go ahead and delete everything inside wait hold on hold on hold on um but we weren't following you so go ahead and show us now so app.css you're highlighting everything yep yeah you want to go ahead and just remove that right okay and then as soon as i hit save you'll notice the text is no longer centered right so jump to the left yeah because i was noticing i was like how was it centered i was trying to figure that out yeah so they add a bunch of rules in this starter pack so the one more rule that we need to adjust is inside of index.css this stuff you can leave guys so you can actually leave this in there for now but what you can go ahead and do is add one row inside the index or css which is apply apply this to everything which is what this little asterisk means and it means get rid of this margin so like if you if you can if you guys can see on the right above where it says hello clever programmer let's build a youtube clone there's actually an invisible margin so as soon as i hit save look what happens it goes ahead and gets rid of it right so browsers do this annoying thing where they go ahead and they do that so what if i do if i comment this out you'll see it um pop in again so like you want to go ahead and make sure that that it doesn't have that on anything right so you want to go ahead and get rid of that um so that's the first step nice now what we're going to do i guess we can actually start building the app right building that up that's right oh by the way guys i do want to let you know that tomorrow this is important for everybody to know tomorrow we are going to actually be building the tick tock clone and this is going to be one of the craziest builds we've ever done and it's very very anticipated and people are already kind of going crazy for it so i don't want you to miss out on that so make sure you put on your calendar tomorrow 10 15 a.m pacific to show up for the tick tock clone we're gonna have like probably a thousand people or more like you know maybe 10 000 people come to that and watch it and we want you guys to be one of them and actually uh take advantage of it and by the way would you guys actually be excited for the tick tock clone tomorrow drop that in the comments yeah that'd be awesome i'm excited for that and that's a challenge guys like building tick tock is a pretty like it's pretty big challenge to get that working so we're actually not even sure if we're gonna actually be able to do it but i think we will yeah like all of these builds have been like challenges we're like oh can we do it like and then we conquer it and we show you guys how to do it as well yeah so um just mark that on your calendar guys july 30th tomorrow thursday bring everybody that you know it's going to be on youtube it's available to everybody um but just you know bring the people just know put on your calendar and that's tomorrow let's keep it going exactly oh and smashing by the way and smash the like button guys if you haven't already uh it really helps supports us and you know moves this video out to everybody so they can learn from it it's free doesn't cost you anything but really really helps us so please if you just do that it's it means the world to us exactly cool nice so with that said guys what we're going to do now is i like to sort of mask out the uh the outline of the app right so in this case what does the outline of youtube look like we pretty much have like a header so let's go ahead and open up the uh the one that we have quasi the one that we built okay so open up the ngrok version okay here we go yep nice so you can see guys in our version we have a header we also have a a sidebar and we have a let's like we have like a main section so like a video section right um so we have like the header the sidebar and the recommended so like the recommended video section so hold on let me highlight what you're talking about so here's the recommended video section and then this is the sidebar exactly got it there's a sidebar and then we have the recommended and then we have the header right and the header sticks as well which means that once we scroll down that header actually sticks to the top of the screen and doesn't disappear ah so this is uh sticky this thing right over here yeah exactly nice it's stick to the top which is really really nice yeah um so that's really cool um and what we're gonna do now so pretty much in our code now i like to pretty much just put comments where we're basically gonna replace that with the code itself right so the first step is let's go ahead and actually build the header because the header is something we can visually see oh got it let me just also draw this out because i think this is helpful for me and this is helpful for other people too so guys header is this this is why i like this process that sunny does and i kind of want to just draw it out for all of you guys visually so here's the header and that's where it's going to go uh sidebar sun is just side you're just missing one e in there but here's a sidebar he's referring to this thing right there so that's your sidebar and these are going to be components right so sunny is thinking in terms of components so this is going to be you know this is like one component that header is going to be let me put that right here it's going to be one component sidebar is going to be a second component and then recommended videos is going to be the third component so in so boom that's one two sidebar yep and then third is a recommended video one and that's that whole thing guys as a component so if i was to actually kind of full screen show you you know that entire thing boom around that recommended section as a component exactly dope and we're going to show you how to do all of that with reactor so how wide like what pops up and also oh yeah and also guys we also have the the piano is like i'm literally getting goosebumps this is awesome guys keep it up damn i love that love that energy nice right so let's go ahead and actually build the first component i guess right so uh before we actually start creating stuff because if you want to do the first component so go ahead over to your um files and let's go ahead and create a component called header.js cool so all components guys so when i'm going to be building this component right what i'm thinking when i see this is i'm actually writing the code for that component right there the header so i'll just kind of visually drag it out that's the code mentally i know it's going to go in this particular file all right that's how you should think about components and anything that's a component you're also going to write it in cap you know camel case it says header with a capital h exactly exactly so now what we're going to do guys is we are going to go ahead and do a little trick that we like to do uh it's called a snippet so a snippet we can actually go ahead of my rfce and that will actually go ahead and create the entire component for us now if you're wondering how we do that it's because we actually go ahead and we use a extension so in vs code you can install extensions we've got one which is for if you type in es7 it will come up as the first listing so definitely something that all of you guys should go ahead and get es7 snippets um really really uh valuable uh yeah and um dope so yeah it's going down as an extension exactly guys um so so now guys what we're going to do is we're actually going to go ahead and give this a class name so i always like to start off everything with by giving it a class name so header and in and what we're going to do here is i guess let's just go ahead and say h1 let's just say i am a header right i am a header all right let's save it and then we go back to app.js and let's go ahead and pull that in so if we go here and we do header and then we basically do this right so i think you're not following me quasi um oh my bad go for it yeah so now if we go here and we go header so now what we can do is if i go ahead and import this so i say import header from header what this will do is it will actually pull in the header so um for some reason it's not letting me save the files properly to oh it is let me i just have to spam the same one so now what you want to do guys is basically what we can do is we can actually go ahead and comment out the top right we can come out at the top so we don't have this hello clever program oh we just got a two dollar donation nice wow thank you so much dude seriously thank you priyank really really appreciate that thank you so much that means a lot to us it just it's like a vote of confidence for us so that's huge and priyank says thank you for everything you guys do thank you thank you dude that means a lot to us um nice so we have a header at the top and we can see that it's pulling this in essentially and pretty much imagine like it literally just puts it here instead so like it literally just replaces that right so we've got our component that is basically rendering this out for us right so with that said now let's go ahead and code that so what we're going to do inside of here is have a few things so we're going to have a um firstly we need some icons here right so we need some icons so let's go ahead and actually install material ui icons so because if we go over to google chrome let's go up to material ui and the installation on this site is very simple guys so it literally says npm install material ui core and you basically just want to copy that and go ahead and run that inside the terminal so uh let me go ahead and pull that in so oh okay doing it nice there we go npm in store or npm i for a shorthand um material ui core there we go so that's the first step guys and then what you want to do is go over to the second the whole time type no need to basically search by material ui you basically want to go ahead and type in um icons and that will actually go ahead and it will show you another page so because if you go over to the search bar so go to i was just gonna say it was funny because i had you on mute on skype so you couldn't hear me so like you know i kept talking they could hear me but you were talking over me because um you can't hear me i think so i just unmuted you back on skype it should be good but yeah i was i was agreeing with you and basically i just said yeah you uh for now you guys also don't have to do dash dash save so you know just if you're a more intermediate developer you you don't need that as well but what are we up to now sonny oh i was wondering i saw you like you're moving i was like okay it's not it's not everything's not adding up but now we're basically going to go to the search bar inside the material ui and type in icons so thank you for another donation appreciate that thank you oh yeah thank you icon and so just just to just freaking hammer this point home icons why are we doing icons because so we can make icons like the home button right there so we can make that camera button and then this the gallery view button and the notification bell all of these require icons guys that's why exactly exactly that um so now what we're going to do is this mpm install material ui icon so you want to basically copy that line and then go over to your terminal and paste that in right so npm install material icons and guys remember you need to install both core and the icons oh another one nice keep bringing the live stream videos guys damn thank you appreciate it really appreciate it come on so somebody um damn oh ola is like click the money icon beside the emoticon because i think people were asking how they can donate thank you guys really appreciate it oh we just got five five is that five uh euros whoa awesome dude this is about to happen again what is happening thank you guys thank you yeah we're gonna keep going we'll work for you guys we'll put in overtime all right thank you so much guys they said can you give us the url for the demo um here's the end so guys this is the end rock please don't spam it or anything but here's you can actually type pause the video and type it in the reason why we will not give you the url i mean i can drop it in chat right crash because youtube actually uh uh took down our video at one point guys because they thought it was like a dodgy sort of suspicious clone uh yeah especially when we did the amazon yeah like took it down exactly keep going sonny you talk about it yeah so that's why we pretty much got into a situation where we stopped sharing the urls um so you guys we actually just dropped it in the in the chat so uh make sure you do go ahead and check it out please don't spam that link guys because that link is actually gonna go ahead and load it from a local and do it that way so um don't go ahead and don't swam it too much or like only open up only open it up once right but nice yeah so you know you have the link so go ahead and check that out so nice nice so what we're gonna do now guys is we just installed the icon so the stuff that you guys are seeing on the top left the burger menu and on the top right we've got a bunch of icons um so we are gonna go ahead and um if we actually go back to material ui uh-huh i'm going to show everyone how we can actually search the icon library by the way guys really thank you haze and uh nike checks and i i see bunch of people and they're like we can't donate because it's not in their region we i mean honestly we just appreciate even the thought of you guys trying to do it so thank you like it's okay if you can't you know that's totally fine but thank you sir as soon as you guys are enjoying this like that's good enough for us like honestly if you can't donate like smash the thumbs up button that's the definition right there seriously open open open up this video on another phone yeah nice so um guys what you want to do is go into icons and you see where it says if you scroll a little bit up quasi and go to it says you can search the full list of icons um oh yeah you always talk about this but it's always really hard to see so yes this thing right here exactly yep so funky way to get to this page but nice so this is actually this is going to be your go-to place for finding the um for finding so this is the best this is the right way to go you guys can just type in icons right there and then material icons and that will bring you to this material oh no i lied oh sonny all right i won't doubt you anymore i'll drop that link in chat as well i'll drop that link on chat as well that'll be dope nice so uh this right here guys so when when we're actually coding and when i sort of show you guys i'm using certain links the way i found those links is i literally just typed it in here so let's say for example we type in video you can see like we get the video call icon we get a bunch of fast forward rewind play pause all of the sort of icons that you can expect that are related to a video and you can also even get the sort of variation so on the left you have filled outline rounded two-tone sharp um it gives you oh nice i did not know about that crazy right look at that damn for youtube is it sharp it's sharp right um i think i just used filled but yeah you're why actually it was that oh yeah i'm wondering why they look slightly different i see yeah when you guys are rebuilding it you can use the shop nice um so and also these are all going to be like uh svg icons guys they're going to be like super crisp on your on your build which is really nice um okay so yeah 800 likes yes thank you thank you guys we're about to break a thousand likes we just broke 5 000 views on this video so thank you guys for that and lucas says joining profit with javascript let's go this right let's go ahead and uh carry on with the build so let's go to the header component let's open up the app on the right all right dope okay so we're in the header component now yep yeah so the first step guys is we are actually going to go ahead and sort of like plant out so we pretty much have a few things on that header component on our app so right now it just says i am a header right we don't really want that it doesn't mean anything to us so what i'm gonna first do is the burger icon so the what the sort of the the icon with the three dots in the top left side of youtube um that burger icon right now this burger icon right here exactly that burger icon right there the way we pull that in guys is we go to header.js and we do the following we say import menu icon and i found that using that search tool so i typed in menu in that so let's take a look at that where it is so let's type in menu yeah and this is the collapsible i call it the collapsible whatever and then sunny calls with a burger so whenever you guys hear burger coming out of his mouth he's not hungry he's just talking about menus yeah exactly and you're gonna see here it says menu sharp but the one we're using is the field so it just says menu icon yeah nice it says import menu icon from material ui icons menu um nice so you basically get to that point and basically to use it is as simple as doing the following so you can pretty much go here and you can type in menu icon and just like that and cause if we go ahead and pull up the app uh-huh let me go ahead so let's go ahead and open the app um so the localhost version uh got it okay so give me one second right here just hiding a user all right back to here nice so now you guys can see we have that burger icon right we have the burger icon which is great uh the next step i guess is we can actually go ahead and add an input filter i guess we need the we need the uh youtube logo right so what i'm going to go ahead and do is i'm going to go ahead and actually go ahead and pop the youtube in uh logo until my image boom and we need a source the source i've actually got here i've got an image of the youtube logo it's svg i'm gonna basically break it onto two lines so that you guys can see this um and then you can pause your screens and things like that you can go ahead and check it out um so let's go ahead and show that yep so on two lines guys there you go that's the entire link and then basically what you're gonna do is you're basically gonna go ahead and save that and that should actually pop up on the screen as a huge youtube logo right nice now on the right side we should see a massive youtube logo nice awesome so the next step is we're gonna give that a class name so we can style it later on so class name equals header dash under underscore underscore logo and if you're wondering guys what um header why i've done it like this is because this is the bem naming convention and what it's saying here is that the header is the component that we're inside of and the logo is what we're talking about so it's the element that we're sort of targeting right so that's how you use bem um so that's what that's the first thing and next what we're going to do is oops we're done yeah next what we're going to do is we have the image what other icons have we got we've got an input field so let's go ahead and add an input field we have a button so a button um there right there and that button just has a um oh so we don't actually have a button here we have a search icon next to the button right so if i go ahead and save this in the in the middle of the youtube header we actually have the that input field that you can see right there and then we actually have a button with like and it looks like a search icon right so i'm going to go ahead and import that so at the top of the file i'm going to say import search icon from material ui and then down here oh you're talking about this guy here exactly that yeah okay exactly that one right there yeah so we're gonna go ahead and pull that in and then once we've gone ahead and done that guys now we've actually got that little search icon next to it so that's nice i mean nothing here looks very pretty we're going to go ahead and style that soon but we're going to basically go ahead and finish bringing in the rest of the icon so one icon that we're interested in is one called the video call icon so it's on the top right of our uh of our screen that we saw previously so video icon so if oh video you know video call if i go ahead and do this video call icon and save it now you can see we should have a video icon there you go see that little video call icons popped up now the next one again was the apps icon so that was like a little grid so i'm going to go ahead and pull that in right now so apps icon go ahead here pop that in apps icon save it and i'm going to show you guys how we can basically take it from this what it looks like right now to what you saw previously and it's going to be a really nice transformation once we do that right and the notifications icon which is the final one and then we have an avatar at the end but we're gonna do the avatar at the end um so notifications icon so i'm gonna go ahead and pop that in right here so boom notifications icon there we go all right nice uh and there is one more thing actually so we remember whenever you're logged into youtube you kind of have that little profile picture icon on the right right so we're basically going to go ahead and pop that in so material ui gives you a really nice um little component called avatar so you can see i've just pulled it in so it's called avatar and basically we can go ahead and which icon is it when you're logged in oh the okay this one yeah that top right icon yeah so it gives you like a nice circular icon so what i can go ahead and do is pop that into our code as well and this is an image of me pretty much so this is just like a url that we're using as a dummy one this from github it's my github handle so i'm just going to pop this onto two lines if you do want to use that you go ahead and you can go ahead and use that um but there we go so that is my github picture and here i mean the alternative text i could just write sony sanger just for now it's fine um there we go and guys you could pass this in as a prop but for now we're just going to show like a stack version for that one for the header so you can see now there's a picture of me there's some icons there's a youtube thing but nothing looks like what we want it to look like okay um so the first step here guys is whenever you're dealing with this kind of stuff what i tend to do is i tend to put the the areas that we're interested in into their own containers right so into like kind of like draw imaginary boxes around everything so the ones i'm going to draw a box around is the so we're going to get rid of i'm a header because we don't really need that the i think of it this way you've got the top left you've got the middle and you've got the top right so cause let's go ahead and open up the uh the angry version yep so notice how everything's kind of grouped in a certain way so we have the top left which is essentially the uh the youtube icon and the burger icon so that collapsible icon then you've got the middle which is the search input and the input this is this space um is this space evenly or space between between and then the stuff on the right is the sort of third grouping but what i'm essentially saying here is you see like on the right for example we have four different children inside of that container right yeah we just need to draw those containers in at this point so the way we're going to so this is four children right here this has what two children two children and the one on the left has two children okay so let's actually just draw out visually what we're going to be building later so this has two children this has two children and these are all containers and then this has four and this will be flex that's how it's able to actually um that won't show on the screen so i'll have to draw it here so this is flexbox and then also huge value so huge value and that's also what's able to make the space between the two so here you're using space between right yep exactly okay so i'm gonna just say b e t for that so flexbox is what allows you to make it look like this guys and in a nice responsive mobile-friendly way exactly exactly that so uh treyance said react clone using react coming soon nice uh many saying it many times so i'm gonna put that on timeout uh let's go ahead and add the containers in so let's pop the um youtube app on the right and let's have a local host up on the right and then we'll have the code on the left okay yeah guys like if you do post in the chat please don't spam it otherwise you're going to get banned from the chat um yeah we want to have everyone sort of be able to have their say without spamming yes okay so let's go ahead and open the localhost version on the right right so let's go ahead and what we're going to do now is i'm going to basically go ahead and say um so i'm going to create firstly i want to style this stuff right so i go i need to create a header dot css file so i'm going to say import header dot css and i'm gonna create a file uh so i'm gonna go ahead and create a header.css file and we should jump into that right now there we go we are now inside the header.css file and i basically imported it at the top here so i've imported that file and what i'm going to do is i'm going to say this entire container so this header container i'm going to go along inside of my header.css file and say apply display flex and watch what happens when i do that guys it's gonna say all of the children by default should go into a row um and and the display flexible should be applied so you can see now it's snapped into a row so it's not showing the entire contents because it's overflowing which is fine for now um to fix this issue guys youtube should not be that big right so we went ahead and added a class name header logo here so i'm going to go ahead and do is i'm going to go ahead and target that header logo and i'm going to apply the following so i'm going to say it should be a height of let's say 25 pixels so 25 pixels and i'm gonna yeah let's go ahead and save that and see what that did so save and you can see that immediately made it a lot smaller right now you can see all of the elements right now are kind of aligned to the top so remove that remove that for a second i want to see what happens if we remove that line oh man i don't know man i kind of like it like this bro no it's kind of like a packs of punch right yeah seriously it's like powerful yeah you wouldn't win the challenge with this one no definitely not definitely not responsive guys so now you can see everything's kind of like aligned to the top right of the vertical axis so what we want to do is say align items so align item center right align item center and what this is gonna do is this is gonna go ahead and actually make life a bit easier for us and it's gonna go ahead and basically align everything in the center so you see like if i take that away um and save the file i love this honestly i'm seeing this pattern quite a bit and i want you guys to actually start picking up on it guys this is a pattern in flex box that like you'll start everything is pattern recognition you guys can get so good with pattern recognition that's why you should be coming to every single live where we build these projects and the ones who are coming here you're just like improving your skills like crazy and then there's like a bunch of crybabies who are coming in here and they're like this project doesn't have 10 million things of functionality well you know it doesn't matter we're not building this for those people but if you come in and you're willing to pick up like the positive things that we're putting down here with pattern recognition you're going to get so much better and i want to point this out with flex is you'll notice this constantly so flex will make this thing like available for actually like applying flex things to it right if you don't say flex you can't do a line item center and all that other stuff and exactly another thing you'll constantly notice is this flex center thing that pops up and as soon as you do that just uncomment uncommented real quick you'll notice how as soon as we do that boom things go and they look normal and flex is actually what puts them in that little you want to comment out flex and see what happens yep so we can go ahead and comment our flex and you'll see it'll actually break yeah so now things are not in a row anymore right they're like kind of all over the place and as soon as you put it in the flex boom it works so pattern recognition is honestly even more important sometimes then like crazy deep understanding and now you start to get the pattern exactly exactly guys like as in really you do focus on that point that cause you made like just even if you sometimes aren't following like line by line just remember like by attending these calls and seeing it you're going to notice those patterns and those sort of the same things that we carry across within different builds now um i just want to mention some point um here i forgot rohit i think mentioned it in the chat so if i was to add a line like this a width of like let's say 400 uh let's say 40 pixels right now look what happens when i do this right it stretches youtube right so i'm sure let me just let me make this a bit more drastic it's like 400 pixels oh no some reason it didn't do it so i need maybe if i did this so maybe if i made it like okay so in this case it's a svg that's why okay nevermind but basically guys if you ever find that this this icon is getting distorted there's a magic line that you basically right here you see object object fit yep if it was a png if it was a png guys it would get distorted it would get messed up the only reason this one isn't is because vector vector the whole point of it is you can blast that [ __ ] and it's still going to be like looking great so here it's an svg and but like still learn this thing object fit contain and just drop that without even thinking like like you know what i mean like i love pattern recognition so like just any anywhere you're using images and stuff just drop object fit contain it like take a note of it right now and just spam it on your project exactly yeah um dope so um now what we're gonna do is go ahead and we basically have the yeah so we need to draw containers around everything right um right so one second right so what we're gonna do now is we're basically gonna go ahead and wrap like imagine like we're gonna draw boxes around everything so the first thing we're gonna draw boxes around is this right here so the the left menu icon and the youtube icon um so here so div i'm going to write div and this one's going to have a class name of header and we're just saying we're just going to call this one left so header left right so it's referring to the the left container we're just going to pop that inside here and we're going to save right and now you're not going to see much visual difference here so there's not much of a visual difference but we're actually drawing like an imaginary box around these things right and the reason why we do this is going to make sense soon so the next one we're going to do is we're going to say div and we're going to say header and this one let's go ahead and call this one um let's go ahead and say this one's the input right so this is the input container and the reason why it's the input container is because as the input field and the search icon so we're gonna go ahead so this okay hold on so what we're about to build right now i'm gonna lower my audio a little bit because i think it's blasting it um yeah what we're about to build right now is going to be this guy uh this search bar guy with a search icon next to it right yep okay cool exactly so we basically went and added we added a container around and you saw because i added a container around it now the children are no longer display flex which means that that's why like the alignment's messed up so we're gonna have to go ahead and reapply that afterwards so now is let's go ahead and also the right side right so here i'm going to say div and i mean you could call it header right which could make sense but in this case i'm just going to say header icons because the stuff on the right is kind of referring to the icons right so i'm going to go ahead grab this i'm going to pop this into here right so now we have these three containers containing all of the stuff right and you see like that even the right stuff now hasn't got display flex because that container you need to tell it to be display flex in order for it to listen like that right so why is this useful now because now that there's three children essentially there's this is one child this container this is another child and this is the third child so now what we can go ahead and say in header.css is i want all of the children to space themselves between them so justify content space between and if i click save now guys look what happens it spaced all of those children between so you now you can imagine all of the boxes that we kind of drew around it right yeah this is the space in between that we were talking about earlier you guys right there that's your space between each of the you know things we're building here so each container exactly that yeah so that's a really important thing right there so that's why we added these divs because they allowed us to contain those children elements okay so awesome the next step is what we're going to do is we're essentially going to basically firstly add some padding so we're going to add some padding to the outside header so let's go ahead and add some padding outside this header we are going to um so you always kind of padded it out a bit so that way it's not everything's not touching the sides as it was um and then what we're going to do is we're actually going to go ahead and set the um so first what i'm going to do is i'm going to go ahead and say the header input so that middle field the one that's kind of gone out of alignment now i'm going to say go ahead and target that and set that to display flex so set that to display flex so display flex and then align item center so now as soon as i hit save notice how these two rules is basically going to say give that middle so where we have the search the input field and the search icon give that container a display type of flex and then align everything centrally right so now if i click save you'll see everything come into alignment right so it does that very nicely and then the final one to make things a bit easier is what we're going to go ahead and do is go and target those icons so we're going to go ahead and say here for those icons for those icons i'm going to say display flex display flex and then i'm going to go ahead and say align items center so as soon as i save this you'll see that it will display flex and it will align everything centrally in the in that right container and then what we're going to go ahead and say is i'm going to go ahead and actually at that point that's pretty nice that's pretty cool right so that's pretty cool and then what we're going to do now is for the yeah for the header logo i actually want that i don't want that logo to touch the side right so i'm going to give it a margin left of 20 pixels so for that header logo i'm going to give it a margin left so now it actually pushes away a little bit right so it pushed away a little bit from the side and i think that's a bit yeah that's pretty good yeah so 20 pixels is pretty good and now we can see guys we actually have a very nice sort of uh starting point for our app right so this is a very nice position to be in um what we want to do next is actually style that middle section so that header input right so for that header input now what we're going to do is we've already done this right but what i'm actually going to say here i want this one to actually take up more rooms i want it to take up to a 40 so when you said this one you're referring to the this guy right here exactly yeah as soon as i apply 40 to that let's see what happens you see it took up 40 percent of the space so it kind of it's very hard to visually see that but if i go ahead and add a border so let's say border one pixel solid black right now look what happens guys if i save that you see like that's what it's actually taking up right now yeah so i'll keep that border in there while we do this and what i'm going to do now is i'm going to add a margin left and a margin right um actually for now what we can do is let's go ahead and target the input field so inside of that field notice how the input field isn't actually taking up the all of the room right so there's some you see there's some space right there's some space with uh where it's not taken up so what we can do is we can actually go ahead and say header input and we can say target the input field which is a direct child right so inside of header we look at header input it has a direct child which is an input so we're saying go and target that give it flex 1 and get rid of that border right and what this is going to say is if you say flex 1 it's going to actually go ahead and say use as much room as you possibly have inside of your container so it's going to push that elizabeth is asking sunny if you set the margin with the set 20 pixels will it still be responsive yeah because for this case um i mean you could because it's such a small distance from the the burger icon it's fine to do that but if you wanted to make that gap shrink you could use something like a rem which is basically going to be dependent on the parent or you could actually use view width which means that as the screen gets smaller that measurement also gets smaller but we can kind of i can show that in more practice uh soon but the reason why you don't always do that guys is because you don't always want that that gap to grow if the screen gets bigger right you don't always want that gap to get smaller when the screen gets uh bigger so um i just saw a funny comment that was a blocked file but uh it's nice yeah as soon as i hit save now you can see if i go ahead and put this border back um yep this border back what we're going to see now guys is let's see see that i actually went ahead and pushed that that input field as much to give it as much room as it possibly can have so that's really nice right so that's cool now what we're going to do is we're actually going to go ahead and give the icon so let's go ahead and actually go ahead and give the icon inside of the header input field i'm just trying to figure out what we're doing next so we have the header input button right so next what we want to do is i actually really like this comment i wanted to just highlight it uh elizabeth says these videos are worth sonny's tips alone and she says but the builds are amazing watch first and code later i retain so much more this way so you guys you can actually yeah you can also just choose to watch and then code later it really totally up to you i mean the tips here are going to be really valuable so you can actually even take notes or just really pay attention that's how i do it like if i was doing it i would just be watching it and kind of really paying attention but make sure at some point you're doing these builds and you are actually like you know creating this stuff at some point that's how you'll truly be able to retain this and also sunny i forgot to tell you but i think elizabeth there's a chance she might be coming and uh doing an airbnb clone on this channel oh nice really yeah i didn't tell you that yeah yeah yeah so i'm super pumped about that she like reached out and everything on linkedin i was like okay let's talk and she has the gear and everything and she's pretty cool she's a dj and also went to coding boot camp so i think it would be really cool and let me know guys in the comments if you guys would want to see a airbnb clone uh with elizabeth and if you would be down for that that would be amazing yeah that'd be so that'll be cool my airbnb is a massive app as well and guys a little tip you guys if you didn't know the tip the tool that we use called prettier right so the one that we whenever we save it it formats the code airbnb actually have the most popular and widely used prettier rules which which so many companies use so not many people know that but damn i didn't know yeah the developer team is insane i mean think about that like elizabeth paid and then elizabeth also paid probably what 10 or 15 000 for a coding boot camp and that project that she built there she's just going to be teaching it for free you know if we were to do that on this channel so that's insane value for everybody awesome really really cool yeah nice so guys what we're going to target next is the header input button so we're talking about the uh this button right here so right now we have a search icon right here i'm going to go ahead and give this a class name of header underscore underscore input button right input button and it's a spot it's got something wrong there so input button there we go and what i'm going to do now is i'm going to go oops i'm going to go ahead and target that so input button i'm going to say dot input button and then i'm going to basically say set this width to 50 because i want that button to have a set set uh width and because that's the material ui button we have to kind of say we have to override the default width all right we have to override the default width so you can see like i actually kind of gave it a bit more spacing that button and if what i'm going to go ahead and do is give that a background color uh and the the hex code that you see here is just a very subtle gray all right so it's a very subtle grain you can see it very very slightly right i'm going to give it a border left because that's what they have inside of um inside of the youtube uh clone that's inside of youtube itself and i'm going to say the color should be gray so the color of the icon should be grey and then you can see we have a gray icon now which is nice right so it looks pretty clean everything looks pretty good uh for the input as well i initially gave it a border of one pixel solid black just wanna drop in for one second and say if you guys are enjoying this so far sunny is guys he's crushing it he puts the show on for you guys he's going at it every single day doing these bills one after another so if you guys are enjoying this so far just go ahead show your appreciation and smash that like button and let's get this video out to more and more people you guys thank you for being here smash that like button and let's get back to it we appreciate you guys we actually just hit over one thousand likes so that's something oh nice we're at we're at 500 viewers right now and we actually hit and uh d s cuber just said the best youtube channel ever and we're getting a lot of love uh the stunning italian says i just found out this channel and i'm hooked now all that's left is to learn react hooks nice work play there i like that yep so the it's going up guys we're getting more and more people here because you guys are like commenting you guys are engaging we're about to break 10 000 views on this we got 500 viewers and then we broke a thousand likes so that is amazing thank you guys for that and uh let's make this the best youtube clone out there exactly let's do it guys the light grey border in place now so you can see like that that's actually looking a lot cleaner it's looking a lot nicer um right now at that point so what i'm going to go ahead and do is actually go i've lost the app for a sec um oops uh well let me pull up the app again one second guys into a local host okay so what i'm going to do now is actually go ahead and give it a placeholder because the search right now it's very ugly and it doesn't look that good so placeholder and i think they just have search written inside of it so if we go ahead and do that we can see now it says search inside of our one which is nice and then what i'm going to go ahead and do is guys when when we actually go ahead and type inside of search we actually want to use that information so previously somebody actually mentioned that they want to learn react hooks we are going to be using reactors to do that um so we will be showing you that later on guys so stay tuned uh we will be covering that um so the next step is also so i guess it's the right side so the right side doesn't look great at the moment right everything's kind of bunched up together i want those three icons to be a bit more spaced out so what i'm going to go ahead and do is i'm going to go ahead and give those icons a class name so i'm going to say go ahead and give those a class name of header underscore icon so you see down here we have header underscore icon i added that to these three things right now what i'm going to go ahead and do is target that and say go to the header icon and i'm going to say give it a margin right all right give it a margin right of let's say 10 pixels let's see how that looks i mean it may look a bit ugly it may not but there you go okay so it's a bit dramatic so we can say 5 pixels and there we go that's pretty nice that's very subtle looks pretty clean um and it's pretty close to what we wanted right so now we can actually go ahead and maybe give it about eight so get a sweet spot awesome there we go so now you can see we've actually got that in place and everything at this point guys is responsive so like if you make the screen bigger if you make the screen smaller it's going to be responsive whoa yeah it looks it's looking gorgeous actually i'm just gonna like zoom in more so people can see it an easier way but yeah guys like look at this thing it is super responsive as i go through this yeah right that's awesome nice and guys if you focus on building with those principles in place you will never have to worry about like supporting mobile devices all that stuff because it comes right out the box which has been the beauty of flexbox and it's which is why we use it and we encourage it so much so with that said we have one more step to do um and that's actually it's going to be something that we're going to we're going to code it now and we're going to see how it's hey tommy tommy kelly just dropped he goes this is awesome stuff guys can't wait for the next competition he was the first place winner of the covet tracker challenge yesterday and he won 500 actually really yep and he even he even jumped on the live yeah oh dude nice awesome travel travel with zen says we love you sonny hey i love you too i'd love to see something like that nice um somebody said react yes and my sequel no we're going to use react.js from firebase guys yeah because 5x is a beautiful thing to use okay so uh what we're going to do now is we are going to actually go ahead and add the sticky functionality right so if we go into app.js and say i go okay so right right now okay yeah you're gonna show us right okay go go go go go that's what i want to say like this is like test for example and i'm just gonna spam this so that way we can we can pretty much go we can see a screen which is gonna you know go past the bottom of this so i have to yeah so basically once i scroll guys notice that the header is not there anymore it doesn't stick it's only there at the top but then as i scroll you guys see that you guys follow that and so basically what we're going to be doing right now is building this header making it sticky so then boom as i go down that thing is going to that's going to be right there the whole time exactly exactly we want it to stick to the top right so now oops i closed my head so let me open up again header don't yes yeah so now what we're going to do is we're going to go ahead and look at the header so we're targeting the outside container this one right here and i'm going to go ahead and say position so position is something very powerful here we're going to say position sticky right sticky and what we need to do is we need to say while it's sticky make it attach to the top so we're saying give it a top of zero now that is actually believe it or not all you're going to need but we want that header to always be on top of anything else right so if there's like some kind of icon in some cases you're going to see the header kind of appear underneath it so what i'm going to do is to do a z index of let's just say 100 so that way nothing ever z index is basically saying like how far front should it be so if we set as edit index of 100 there's nothing that's going to go underneath that that header right but we also need to give it a background color as a finishing touch so background color of white so what i'm going to show you guys is if i don't give it a background color and i don't uh and i don't give it a z index and we save it we're going to get the sticky functionality but it's going to be transparent so let's go ahead and show them that quasi yep so i'm going to show them that and at the top i just added sticky nav bar so everybody can see what we're currently working on but what do you want to see ah i see it's transparent yeah so it's transparent and also a z-index is needed to make it kind of appear at the front because right now test could be on top of it right so the first step is we add a zen index and let's just give it a 100 um some people like to use 99999 and you see loads of meme jokes about infinite but here you give it a hundred but if we give it a background color of let's just say like to exaggerate the effect right let's give it a blue right so let's just give it a blue so you can crystal clear see that right and then because if you go ahead and scroll down uh-huh so if you scroll down so yeah i see it it's sticking and it's yeah we don't want it to be blue so if i change that to y and we do that again now you can see it sticks as we want it so it sticks really nicely it sticks great we just got uh we just got a super chat from chris and he paid us in php we don't want your money no i'm kidding no thank you so much really appreciate it that's amazing wow we just got paid in php maybe next time somebody's gonna pay us in js yeah like react coin or something yeah yeah amit says this is the first time on this channel it's freaking awesome thanks for this you got it thank you for being here make sure to subscribe to the channel too yeah definitely subscribe awesome nice guys so we just pretty much finished the header pretty much so we just changed the background color to white and with that said and done we actually just got a perfectly responsive number so that's very uh not an abba ahead of which is perfect okay so awesome with that done now i guess what we can go ahead and do is actually move on to the next component so let's go ahead and remove all of these tests so we're going to get rid of these there we go and we pretty much can take go ahead and remove the header so because we pretty much wrote that right the next thing we need is a sidebar and the recommended videos right so the sidebar in this case and what imagine it would be something like this it would be sidebar and it would basically pop the sidebar on the left right now we have basically a bunch of space underneath that header now and we want to split it up in the following way so we kind of want um let's think of it this way we kind of want that sidebar to take up about i think it would be about twenty percent right twenty percent of the space so because if we go ahead and actually go and save um so let's go ahead and show them so right now we have a blank screen right let's draw a box around the uh the empty space so let's just so right now we have a container underneath that header everything is like a big container right we want the left we want 20 of the left side of the screen to be the sidebar so 20 of this guys is going to be the the sidebar right and then the uh and it will most likely will extend to the bottom but it will be to the sidebar right and then the right side of the screen is going to be the remaining 80 will be where the recommended videos are okay so how do we achieve that how do we sort of get that in place the first thing we need to do is remember and here's what it looks like guys so boom this is what it should look like 20 on the left hand side you guys see that and then on the right hand side more than 80 percent yep exactly that yeah so and now what we want to do is to get it looking like that what we want to say is go ahead and basically go to our app.js and imagine remember so if any time we have this sort of layout uh battle we basically want to create a div i want to create a div and here i'm going to say app underscore page because it's kind of resembling the page right and what we're going to do is we're going to pop the search bar and the recommend and this insider there so the search bar is just like this so we basically would have the search bar component inside um and then we have the recommended video so obviously it's freaking out right now because there is no sidebar component so if i go ahead and create a sidebar so sidebar dot js yeah cyborg yes and now i should be in that file in just a second there we go so i'm inside that file and if i do rfce and i do this now i have this sidebar so if i just do a simple h2 saying i am a sidebar right yeah we'll do a react native too at some point guys yeah but 100 by the way we're done with the sticky nav bar yeah we are done with the sticky nut bar yep all right and now we're working on what we're working on the sidebar yep the sidebar awesome so we pretty much have this this sidebar now showing so it says i am a sidebar right and then we basically want to have a recommended video section as well so let's go ahead and go and create some kind of component called recommended videos which is going to be responsible for that right hand side right so let's go ahead and do like recommended videos.js so here we go recommended videos.js and here i'm going to do rfce and wait till snippet comes up boom there we go and here i'm going to say this is where the videos will go oops i have my cursor here i'll say this is where videos go right so if i save that and i go back and i import that recommended videos so here we go and i actually use it so i go ahead and remove this and i say recommended videos and i render it so now we have a sidebar sitting next to recommended videos and now you see by default in this container things are something they they follow the rule called display block right now display block is basically going to stack things on top of each other so what we're going to do now instead to fix this is we're going to go into app.css uh which is interesting we actually don't have a the import for that so we say import app.css so app.css oh we do have it here sorry i missed it yeah css and basically what i'm going to do is i'm going to go inside that and i'm going to say dot and then i'm going to go ahead and do so let me go ahead back in here we're going to target app page and i'm going to say app page display flex and what this is going to do guys as soon as i hit save now watch how the two children go next to each other right so you see that it went from display block so sitting on one on top of the other to basically going left and right like the siblings now right inside of a row um omkar says this is so unreal a step-by-step instructions with live code for free that's what i'm showing on the screen actually right now oh dope nice yeah i love that guys um so we have display flex and now what we can do is um we basically want to set like a weight for each of these things right so the way that we're gonna set our weights and what i mean by weights guys is i want i am a sidebar to only take up twenty percent of the screen and i want the rest of the video to take up eighty percent of the screen so in order to do that what the way we do that is we go to app.js you see here's the two children inside of it so inside of sidebar what i can go ahead and do so if i open up sidebar.js i need to create a css file and firstly i'm going to stick to our bim naming i'm going to go ahead and give this sidebar and i'm going to go ahead and import sidebar dot css and watch it's going to scream because we don't have cyborg.css yet so sidebar.css now we have sidebar.css so it should be okay so there we go and now what i'm going to say guys is i'm going to say for sidebar give this so sidebar give this something flex is not 0.2 and what this is saying is it's saying inside that container only give it a weight of 20 percent right so as soon as i hit save notice how i'm a sidebar it's only taking up 20 now right so it's only taking up 20 and then what we want is we want this is where videos go you would assume that it would take up the remember so flex goes from what zero to one yes zero to one got it so this resembles um so this actually rises yeah but can't you do also like you can give certain things flex two or flex three no it's only between zero and one got it got it okay got it that makes a lot of sense on one so one is really 100 and that's why when you do flex one it that thing takes up the maximum amount of width like if you may if you wanted to make the search bar extremely long and make it go all the way across you would just give it a flex of one exactly right flex yes exactly yeah exactly that yeah so now what we're going to do guys is we gave it 20 but we do have to tell the remaining child so this one the recommended videos let's go ahead and give that a class name so we can style it we have to tell this one to go ahead and be 80 otherwise it will because flexbox will only use up the space where it needs to use up right so here what i'm going to do is i'm going to go ahead and create a recommended videos.css and it's going to acquire again because it's not it doesn't exist so recommend the videos.css and there we go so i i'm going to do is i'm recommend the target that container which had lowercase recommended and i'm going to say flex of 0.8 right and as soon as i hit save now you may not see the difference but what it's actually going to do is you see that it's actually now completely and the way i'm gonna really emphasize this is i'm gonna show you by using a border so i'm gonna say border border one pixel solid black right so here so you see that guys the sidebar is taking up 20 but i have to tell it so if as soon as i deflect 0.8 and i uncomment it out boom it knows to take up 80. nice so the sidebar is not 20 and then the other one's taking up um got it so you could do it you could have done it you could have done it two ways you could have given the sidebar a 20 or you could give the recommended one at 80 percent no no you have to get both oh i see i see so what does it do if you don't give it that so like if this is twenty percent so what happens there so if this isn't twenty percent you see it's trying to take up more yep i see that so it's taking up so that one's using up eighty percent but it's using it in a weird way right now like it's not distributing it correctly now com uncommented oh okay so like yeah now it's like taking up 80 percent the normal way okay and then this is giving the 20 okay let me actually put this down right here so guys right here you got your twenty percent and then over here on the other side you got your eighty percent and this was achieved by flex 0.8 and then this one was achieved with flex 0.2 exactly this is sidebar and this is your recommended videos component yeah and guys remember whenever you're doing weights they have to add up to one otherwise it's gonna get like you get that weird spacing that we just showed like if i did if i get rid of the 0.2 it kind of just weirdly spaces it out so you if you're ever using weights make sure you're using the correct like values to add up to one so that way it perfectly aligns everything as it needs to right yep yep yep yeah perfect so with that said now what we're going to do is we're actually going to go ahead and implement the sidebar so the sidebar has its correct weighting like way now so um what i'm going to go ahead and do is check out the sidebar so sidebar what we basically have inside of the sidebar is a bunch of rows right we have a bunch of rows so if we look at the uh ngrok version we have a bunch of rows inside of there um so because if you open up the ngrok version you see guys it's like trending subscription library history your videos home all of those are rows so this is a perfect example of where we can actually go ahead and write a component so i'm going to write all right a sidebar row component oh and then you can keep reusing it so like trending okay got it nice exactly yeah so we basically want to have it so that it will be something like this right and what i want to basically the end goal here is to basically be able to pass in an icon and pass in a title so for example home for this one cooper is like damn this guy's coding youtube how is this for free nice i love that cooper johnson yeah and that says i'm a big fan can i apply for profit javascript now yeah if the link is in the description then you can yeah definitely the link is in the description go check it out guys uh and what we can do is trending and then for this one this is this is something called props as well guys so props is basically how you reuse a component but with different properties right so props and then here we would do something like uh subscription so just to give you an example these are three at the top right and then for these ones let's just blank these out for now so we have three different sidebar rows and obviously it's going to freak out because we don't have a sidebar row at the moment okay so i'm going to go ahead and create that so sidebarrow.js and we are now in that file and i do rfce boom and then here remember this is where we accept those properties and in es6 javascript we can actually split them apart here and say go ahead and get the title right so go ahead and get the title all right so if i save that and i basically go in here and i i can now import so i can say import sidebar row from sidebar and then here now it shouldn't freak out because it actually knows what sidebar row is right and basically what i can say here is i can just say i am a row so i or even better we can actually say title okay so i can actually go ahead and say title so now what we can see on our code is we say home trending subscription right so it's nice we've got to the first point very nicely um what we want to do now is basically let's go ahead and firstly stick to our way of working so if we go to sidebar row and we basically give this one a class name because we want to be able to style this at some point last name of sidebar row so sidebar row right and what i'm going to do now is i'm going to basically say uh we also want an icon right so we want an icon next to it so there is one for the home icon so what i'm going to go ahead and do is use that one so i'm going to show you guys the one that for the home icon is this one so this one right here right home icon for material ui home and what i'm going to go ahead and do is pop this next to it so i'm going to say home icon and now what we'll see is a home icon and then the title so we'll see home and then we see site uh trending subscription etc right so i'm going to go ahead and remove i am a sidebar so it's getting confusing so now you can see sidebar home trending description right but remember guys we want them to kind of sit next to each other not like that so i'm going to basically create a css file for this so i'm going to go ahead and create a css file here so sidebar oops sidebar row sidebar row.css hey thank you another donation thank you yeah thank you so much for that donation i should really appreciate it thank you thank you so we're going to go ahead and style this and we say so vibe said just thinking without flex life would be so difficult it really would that's why we love flexbox yeah um so if i add flex this now you can see that fixes things and it makes the icon now sit next to the oh the reason why that's not coming today so i need to import it so import uh and we do this we do sidebar row so sidebar row dot css there we go and now you'll see that it should pop in so now we have you see that we have the icon and then we have the text right now to make it super accurate what we're going to go ahead and do is do align item center so our line item center and this will actually go ahead and send to them it's very subtle but it does make a difference right especially when you have big text and things like that um so we've gone ahead and done that and to make things perfect now what i want to go ahead and do is we want to basically notice how each of the ones in the final app had different icons so this is something that a lot of you guys actually haven't seen me do before but what i'm going to do is i'm going to pass in an icon prop yeah i'm going to go back to my sidebar and did you know that you can actually pass components as props so if you didn't know that let me know in the comments but if you did like or if you found something new there like smash the thumbs up button because even like um every time i do this it's really it's kind of a cool use case because it really shows like the power of react like how you everything is component based and how you can actually use that so what i'm going to do now is rather than specifying the home icon for every single one i'm going to do this i'm going to say nice yeah this icon is for example this one so i'm going to go ahead and import it in here and say pass this one a home icon for the trending one the actual icon is called something that's called watch shot strangely so that's a material ui and i've just googled these by typing in yeah stupid stranger names i've i've googled that i basically use that search tool that we spoke about earlier and this one's called whatsapp icon um and then the final one here is something called um the subscription icon so that one actually makes sense all right so this one i'm gonna go ahead and pull that in some subscription icon there we go okay so now we have three things we pass it in but how do we actually pull that into our app and use it as a prop right so here we need to make sure whenever you're passing a prop as a a component as a prop this has to be uppercase because we know that components and react actually makes sure that you do that thank you so much deepank yeah oh yeah thank you damn we're at by the way thank you guys so much we are at actually 15 dollars in the chat like super chat that is really really cool and um we have broke over 10 000 views on this video so thank you guys so much for smashing that like button and also just being on this video thank you thank you thank you so much um so now remember we used the home icon before right but if i want to use the icon that we pass in i literally just do that and now if i save this i literally just replaced it with the prop name which is capitalized remember because it's a component if you don't capitalize it it doesn't actually work guys it freaks out okay like it freaks out on it and it doesn't work so now it says okay let's go ahead and save it have i done it right let's have a look so oh yeah because guys i remember i capitalized it so it means i need to change these to capital i's right so capitalize if i save that so i change this to capital i and now once it refreshes we should see it now working so refresh and let's see let's see let's see let's see should pop up still crash okay so let's have a look so we've got the icons being poured in at the top um it's expecting a string i think for home icon or no that's what it's saying this is saying expected strength yeah so when it does this this is most likely because so home icon comes in thank you thank you by the way infos and facts for a five euro uh donation of super chat that is amazing thank you thank you thank you so much thank you dude um just double checking guys as to why that's happening it's super strange maybe because actually we created so app.js did you export your sidebar yeah export default yeah the sidebar sidebar row takes an icon as a prop uh we pass that in here home icon plus and there's a title yep sidebar row takes in here and it renders an icon yeah okay um let me go ahead and do hey right over here where it says import sidebar okay sidebar rows yes that's not that's good so that should be working but there's this is a concern oh it's working it's working it's actually working okay nice so it's probably cached it was probably cash yeah and it wasn't refreshing but you see guys like sometimes so it does work guys sometimes it worked i'm gonna play the air horn [Music] damn that thing is always so loud i'm gonna blow something so guys it did work in the end so like sometimes you will have that with react but it will it may take a little bit of time and especially because we're doing a vs live show maybe it's a bit delayed right so what we're going to do now is we are going to go ahead and apply we're going to style that a bit so it looks a bit nicer right so the first thing i'm going to do is go ahead and add the following so i'm going to add a class name to the icon so class name here and this one's going to be sidebar row oops sidebar row underscore underscore icon right and then i'm going to go ahead and give this one a title so it's going to be cyborg title okay so we have these two things and then what i'm going to say is for the styling sort of rules so now what i'm going to do is style these and say the following so sidebar row we already gave it a display flex and we aligned it centrally right i want to give it some padding so what this is going to do is it gives a padding and then this is in two different directions right so we're saying for the i think it's for the top so let me go ahead and refresh this because i can actually see on my screen that's not working but yeah what it's saying is for the top and bottom i think so if we join like changes drastically we'll see so if i save that so you see this is saying for the top and bottom 10 pixels is um yeah top and bottom 10 pixels and for the left and right 20 pixels okay so that's a short hand for doing that which works really nice um and then what we're going to go ahead and do is say for the icon guys i want to change those icons to the following so i want to say sidebar sidebar so for those icons i want to give the following rules i want to say give it a color of gray so sidebar row icon give it a color of gray so this is a hex decimal for gray and this is the remember icons are actually fonts if you didn't know that um that's that's a new thing for you guys so icons are actually fonts and because we're using material ui we have to override the font so as soon as i do that now and save it you'll see that they turn grey and they suddenly get a bit smaller right and suddenly get a bit smaller so i need to save that um so there we go so that should turn gray now so sidebar row icon sidebar row icon is that cached again hold on i hope not being a bit strange yep i just had to save it i just have to go sidebar row or something and save i saved a few files and now it works nice unplug my computer i just have to unplug my computer restart it now it works like it restarted get a new internet service provider nice so we're also going to target the um title now so for the title we're going to do the following we're going to say target the title i'm going to say give it a so the title that we're talking about is right so i want that title to take up the majority of the space so the way i do it is i say flex one so it's going to basically bully the other one into into saying like right give me as much room as possible right so as soon as we apply that rule what it's going to do is it's actually going to push it to the side so i think is it saved yeah i think it did save yeah so flex one and i'm going to say give it a margin left so it's not sticking to the side so margin left of 20 pixels there we go so margin left and then you can see it's it gets that gap away from it and then i'm going to say give it a font size of 12 pixels and a font weight of 500. so font weight of 500 will bold it a little bit but it'll also make the text a bit smaller so it looks a bit nicer right so there we go that actually automatically starts to look a lot nicer it starts to look a lot more like we sort of expected to right and what i'm going to do now is also make it so that thank you so much yashodip for that react donation awesome i love that it just says react on it that's boss amazing now we have a sidebar row hover and this is a special property guys which means when i hover over it i want it um i want it to basically say um because you're not following sunny on live share the thing is something wrong i think you are okay now i am yeah um so we have the light gray so now like as soon as i sort of save this guys notice how when kazi uh puts his mouse over the uh home or trending oh nice remove that hover i love that that is so cool if i remove that look what happens now oh my bad guys sorry um i think yeah we just didn't see the css code for a while while they were yeah a lot of people are saying that so um my bad i don't know why it must have stopped following him so this is the css code you guys can even pause the video but like so you want to just at a high level touch on just some of these you know the one you worked on probably in the last few minutes that they didn't get to see yeah sure so uh sidebar road title is this is referring to this one right here guys and what i did is i applied a flex one which basically said use up as much room as you want in that container so the title and this title means what the word says home yep and when you say or use up as much width it's pretty much using all of this width right here exactly it's just trying to use up as much room as it can and then margin left is saying uh give it says don't let it touch that the icon so twenty left of the icon and then we said font size of 12 pixels font weight of 500 which is why it's now smaller and it's like got that sort of thickness which is the youtube thickness right then we wanted it to be a bit more interactive so that because right now if i hover it doesn't do anything it just allows me to do this which is like ah exactly which is like super like an ugly sort of user experience so now i'm saying when you hover over it change the pers the cursor to a pointer and make the background color light gray so now if you hover over it you can get this out it's oh that that is looking great right but we want to go a step further we want it so that when you hover over it we want to change the color of the icon to ren so the way we do that is we say sidebar row hover and then we say go when you hover go to the icon so the sidebar icon and change the color of it to red so if i save this so as soon as i save this oh that is clean i like how you can only change the icon color the red and not the other one yeah super cool right so you're saying only the one that i hover over change the sidebar icon to rent right which is super super clean and it works really nice and then as a nice little finishing touch what if we also want to build the text of the one that we're hovering so we're saying now go to the sidebar title and bode that text so now if kazi goes and hovers over it yep let me try so oh yeah but then initially so in youtube what happens is is oh nice someone goes we see ashwin thank you so much he goes function react gods return quasi and sunny a what a function wow thank you thank you so much dude so now what we're gonna do guys is we are actually going to go and make one of those selected so by the way i just want to i just want to say if any of you guys are developers and you're on this channel you are more than welcome to actually hit me up on instagram or anywhere and you guys if you guys want to run tutorials whether it's vue.js tutorials or you want to run like tutorials on anything else we can actually talk about that i want more developers to come to this platform and clever programmer and be empowered to actually be able to share their message and what they believe in like sunny was working and using react and so we were like hey sonny just come through and just talk about react all day and so now we push that message we brought on nas and we're like hey what do you believe in he's like javascript okay just share javascript with people and so we're we're gonna have elizabeth coming on soon jacob wants to talk about python all the time so then okay go ahead so if you guys have any technology that you're interested in you have good communication skills or you're just willing to learn and be able to put these things together like dm me on instagram and tell me you're interested in this and like what value you could bring we could talk about you could be running live trainings with me directly or sunny or anybody else from the clever programmer team and just bringing value to people we're even going to have i think elizabeth you know depending on what she puts together and if she sho pulls through we might even have her next week actually teaching airbnb clone that'll be insane that'll be so cool honestly like airbnb is such a powerful app and it's worth like oh i think it has a billion dollar evaluation airbnb ages ago right like um it's worth big money guys and you guys are gonna be able to see that on a live build from somebody who was once watching the channel so if you guys are interested in jumping on and getting involved and doing a live stream with us then that's an option that's actually available for you guys so go ahead and make the most of that and the guys one thing i do really recommend is that like if you are watching this and you do really enjoy it right make sure you do pull out your phone like hit me up and hit me and kazzy up on our instagram handle so shoot a story tag us in there because it really allows us to start a conversation with you guys and we actually do really quickly sort of get to know who's watching the videos so like i actually do recognize a lot of people who are actually watching yeah like we'll see we'll see rania in the stream sometimes we will see like we see elizabeth in the stream and i talk to you guys yeah we have like bunch of people who we see in the streams and when you guys message us like steve is coming to the streams constantly so like we recognize a lot of you guys that are in this stream we're not like sitting somewhere far high up and we can't see you like we see everybody who's here and then when you guys reach out to us like yamna comes to the streams a lot then yeah we definitely will like even personalize our answers to you exactly exactly it really builds like a nice sort of relationship with all of you guys as well like it allows us to see that you guys are actually like you know like human beings on the other side of the screen as opposed to just a number because it can very easily become like that for us like yeah because right now a lot of you are just like logos like i see like common diversity devyanch canal and the crazy thing is there you guys are full human beings behind that one like logo but besides that text or logo we can't even see who it is it's just like literally a text title but if you like actually send us an instagram message or a video message we will reach out we'll actually share it and then we actually get to develop uh you know a better relationship with you guys so then when you come we can actually even provide you more value we're looking for depth not like how many total views we can get exactly guys exactly that um awesome i think like frank is on here hey let's go frank he donated 25 dollars actually last time that was huge yeah that's insane dude thank you so much you do me okay nice so now guys what we're gonna do is we actually have the on the left we pretty much have like those on the sidebar we have the highlighting functionality the hovering functionality available um so what we're gonna do now is actually go ahead and guys please don't spam the chat by the way like you will it's gonna you're just gonna get timed out if you do that so please don't do that um thank you yeah thank you so much we're gonna we're gonna basically allow it so that we can pass a prop to that sidebar roll and choose if something's selected and the reason why that's so useful is because in actual apps like youtube you should be able to go into your code and basically or like have a selected sort of prop right so this is massive they use this in a lot of production apps so basically what we're going to do is we're going to go ahead and pull that in here and what we're going to do is we're going to modify our css right we're going to modify our css we're going to say right so i'm going to make some strings so these are backticks and this allows us to have some javascript inside of here and i'm basically going to say if selected right then add the following class add the selected class right and then i'm going to save that and i'm going to go over to sidebar row and what i'm going to go ahead and do is basically add the following rules so i'm going to say if it's selected so if you select what are we before before we continue what are you actually trying to do right now functionality wise what are we adding so if you on the like on the youtube home screen and things like that so if we go to our build you see the top one the home page is by default selected when you say selected what does that mean oh oh i see okay yeah so it's yeah by default this one is already like an active state yeah and then the other ones when you hover over it kind of previews like that this is going to be the next sort of active state one right yeah so what you want to do is you basically want to allow that functionality to exist by introducing a selected prop into your components and that is how you basically achieve and solve that puzzle so what we've done is we created a selected right and then what we're saying is we're actually saying if if you have a class called side by row and notice there's no space here saying if it also has a selected class then give the background color of light gray so now if i save this you'll see the home one will now have a light gray background so if i save that we should be able to see that the um home so i think it's not saving um sidebar row yeah you might have to save sidebar row no it's already saved so selected yup and if we go into sidebar oh sidebar.js isn't saved okay there we go so now you see that the home one right now we passed in selected right by default this is a this is like selected true that's what it means so it's like saying it's selected true um i don't know why isn't that showing so we got selected sidebar row take selected we use it and we say it will be selected okay and then we go into our sidebar row.css and we've said sidebars i mean is it caching i feel like it's caching yeah i feel like it could be caching i mean i'm trying to hard refresh it as well yeah so what we're going to do at this point is also add the following two rules in which basically says if it's selected um one second let's go ahead and check one's still loading right sidebar row selected okay so yeah mine's still loading okay so in your case we've got sidebar rows selected and if i open up sidebar row and we've got here so okay i've added it on the wrong thing okay so here this is why guys this is why so right now what we should do is actually make this so we don't want to add it on here i wanted to add it to the actual container i wanted to add it to this one right so what we need to do is basically add backticks get rid of this and say the following if it's selected then we apply it here that's why it wasn't finding the correct class so save it and now you see there we go home is now red okay and we also want to say because when it's selected it should by default have those red colors and things like that so i need to add the following two lines i need to say if it's already selected so if it's already selected change the icon color to red and if it's already selected change the title to bold and if i save that check this out oh nice i see it now yeah now it's by default it's actually active yeah that's dope so now the actual um sidebar row icon selected sidebar row icon it should actually be red by default so i don't think this one's saved correctly sidebar row icon sidebar row icon okay nice it's there oh there we go now it's there yeah don't so there we go so now it's like it has that same hover effect but it's always there if it's the selected one right so there we go that with that said guys the sidebar is now done pretty much nice we can add one more thing i think yeah so what we do have on our build is we actually have like a in youtube we have a divider right so the divider is something which is as simple as this is as simple as a hr so in sidebar we have a horizontal row like this and basically it just looks like this so as soon as i click save on that we can see like a little horizontal line has been added right now what that means guys is that essentially what we just want to style that in a very simple way so in order to target that in a very simple way what i can go ahead and do is basically say for anything inside the sidebar which is a horizontal row give it a height of one pixel no border a background color this is basically a hack for targeting um horizontal lines right now as soon as i hit save watch what happens it basically gives it a little bit of space and adds a very beautiful horizontal line okay now what i'm gonna go ahead and show you is i've actually gone ahead and saved us some time so we have these icons right here but i've actually gone ahead and created the other icons with all of the appropriate um imports etc after this and that goes pretty much under here so you see we have just passed those in and then after that we're going to have a horizontal row and what i'm going to go ahead and do is actually pull in all of the icons that we use i'm just gonna paste them in here so we save a bit of time so now we've got all of the icons as soon as i hit save guys look what happens to that left side so as soon as i hit save uh it says sidebar.js sidebar row is wow that's perfect that's exactly the functionality i was looking for oh that's why i got over it one of my things there we go so now if i do this one that's not the sidebar we want guys nice clean look at that and look at the difference i'm gonna switch between this and the other version and look at that oh my god exactly the same 100 doesn't even move like an inch exactly the actual header that we built now is the correct responsive header so um it's actually perfectly responsive to this build so amazing yeah always better in the actual build yeah it always gets better in the actual live build which is funny um so now we've done that guys let's go back to app.js and we are going to go ahead and build the recommended videos right so the recommended videos now the recommended videos is interesting so if we go to app.js and go here so i recommend the videos i actually created the one where it says this is where videos go so what we're going to go ahead and do is actually start puffing this out a little bit so inside of here we're going to have something called um so we're going to have a h2 which says recommended so this one's going to say recommended so recommended and we're going to save so it's going to say recommended and then what i'm going to do is i'm going to start giving it some styling already so we've we've already pulled in a css file and what i'm going to say is we already gave it a flex of 0.8 but we are going to then add on the following so we're going to say effects 0.8 but also let's give it a background color of a slightly gray because the youtube has a slight background color uh on that page right has a slight background color i want to get rid of that border because they have no borders on their page and then you can see that that background color makes it immediately sort of look pretty decent right and then we have the following um so i'm going to say padding and remember it says the top and bottom is 40 pixels and the left and right is 20. but i don't want to give a padding underneath it after that which is why i've done padding bottom zero do that and we get this and this is all basically how the youtube um app is actually look so i've taken inspiration from how youtube has been built and we pretty much have it looking the exact same in that way next i'm gonna target the h2 so the h2 is the recommended that we added i'm going to say go inside and give it a margin left of 5 pixels in the margin bottom of 20 pixels go ahead and do that and that will actually space it out a little bit more so there we go and now what we're going to do guys is we're actually going to go in and add the next thing so imagine all of the videos that we see that we saw previously right let's go ahead and imagine that which real quick now we're done with the sidebar right yeah so now we're good drop the air horn and now we're gonna be building the recommended yep okay awesome let's keep it rocking and rolling just changed at the top the jail said how can it be so perfect fire awesome i'd love to see that so we've got div now here and what we're going to do now is we have div dot and i'm going to say here recommended videos underscore underscore videos because this is going to be a container which is basically going to have all of the videos in it so imagine i have like a video here and when i say videos i mean like all of those thumbnails and stuff that you guys were seeing before right so let's go ahead and show them the ngrok and show them what we're about to build so this thing right over here guys this recommended thing is what we're about to build right now which is like the main awesome sauce exactly so each one of those videos is a component called video so what we're going to do is we're actually going to go ahead and create a video before we create that component let's just break this component down right here so let's grab this component and let's break it down so the first thing is a video card right yep okay so is there a video yep video card or should we just call it video what do you call it just call it a video yep cool i just can't so in this case it's just an image yeah right okay no no so it's it's a video which takes a few props it takes an image it takes a title ah the component is called video yeah okay component is video cool and now what does it take it takes a tai o it takes a channel name hold up okay slow down so so one second so title is going to be got it and then what else so it takes a channel name so like in this case sunny side firebase yep okay what else so channel and then it takes a number of views a timestamp so views a timestamp and also so remember it took a picture so it took an image for the main thumbnail um but we also need to take a channel image so that little avatar that we see so image and so two images are basically going to get passed in as props okay and i'm going to say simplicity i'm just going to say image one image two and then uh what i'm gonna do here is the following so what i'll do is i'll say here is the title right the component the overall component is called video yep um okay and then we got the channel name which is right there yep and then we got how many views it got which is right there and then we got timestamp yeah and then i see a lot of comments by the way saying call it a video card so we will go ahead and call it a video card guys for simplicity yeah damn nice who's saying that video card is better it's a part of the place video information okay cool yeah makes sense yeah makes sense awesome so we'll just call it uh so this will right over here will be called video card component which is all good not that big of a deal but what's awesome about this guys is like just take a look at it that one card has all that information and that's the component that we're going to build right now the octopus component exactly and guys what's amazing here is what cars you just showed you is a look how it can take all of these props and then we just reuse it a bunch of times and then we basically get the same functionality in a very simple reasonable maintainable way which is insane right like it's really really powerful yeah um so nice awesome uh with that said and done now let's actually go and build this video card component let's do it let's go ahead and basically i'm gonna go ahead and create a file called videocard.js and we're about to snap into that in a second so videocard.js and boom i should yep i'm inside that file now rfce the little shorthand that we do there we go and inside of here what i'm now going to do is actually going to go ahead and for now i'm just going to write h1 and do something like oh h3 or anything really h4 i'll just say video right and the this thing takes the following right so the following sort of props we spoke about earlier it takes a fight it takes an image a title a channel views timestamp and a channel image right it takes those following things now we basically have the following in place so we want to have at the top so if we go ahead and actually render this now so i'm going to save this file and i'm going to go here and actually go and import this i'm going to say import video card from uh video card save now guys look what happens so if inside of our code we should see video video video video video we're gonna turn that into what we saw previously right so so now if i go inside the video card what we're going to see here is we're going to have one image we're going to kind of have an image here and this image is going to take a a url so that is going to be the image right it's going to then have we're going to have another div and the reason why i'm going to have a div is because we're going to have a container containing all the rest of this stuff so div and this one's going to be a good question for you sunny why are you using destruction i've because i've seen it pop up a few times why why are you using destructuring to pass the props instead of the props right so the good question and what he's talking about is this right here guys so you could do this props and then the like so the industry standard way of doing it now is before what people used to do is like this they used to be like props dot image right this is kind of like it's very wrong it makes your code unnecessarily longer right you could also do it in a way like this you could say const equals props so this is another way of doing it where basically i don't know if you guys can see this i'm going to drop it onto a new line basically that's another way of doing it where you basically destructure and then you can basically get outside of here but the reason why we do it guys like the way i showed it is because this is like the es6 standard now of doing this this is the es6 rather than basically if we just destructure the props at this level it's so clear to us that this is the exact props that come in super clean less code and basically we can just use the actual prop name as opposed to saying prop stock so a very simple way of doing it and also thank you usual coder for that lovely donation appreciate it oh thank you for that that's awesome yeah um awesome so now what we're gonna do is we have a video info and what i'm going to do is inside of video info i'm going to have the following so first i'm going to use an avatar here for the the um the channel image so i'm going to have an avatar so here i'm basically going to go ahead and actually go ahead and use this so the avatar is going to have a class name a video avatar uh in this case because we're using them guys let's go ahead and stick to them so video card avatar right and then the outside thing should be called class name video card like this right channel image is correct so there we go we got it like that and now i'm going to go ahead and for the text right so everything next to when for the text i'm going gonna have another div and i'm gonna say this is a div with the class name of video text and the reason why is because i'm just containerizing stuff now so inside of here i'm gonna have a h4 and this will make a lot of sense when we start to do the display that when we start to do some of the css so i'm gonna have a title in here so i'm gonna save that we'll have a title in here then i'm gonna have a p tag with the channel so the channel this is where it says like clever programmer etc and then i'm gonna have another p tag and this is how it comes up on youtube it says the views and then it has a little dot and it says timestamp okay so that's really nice and how we do it so um also i see a question what's the difference between var and that just think of it this way to make life super simple don't use var anymore at all [Laughter] that will answer your question makes life super easy for you if you're if you're interested in sort of looking it up definitely go ahead and check out but uh all you need to know is that you don't use vars anymore and there's a reason why and that's something which you can go ahead and check out um uh yeah nice so uh what we're gonna do now is actually go and pass in some dummy props right passing some dummy props so i'm gonna go ahead and check out the uh where are we actually rendering this is it's on video we render that on the recommended videos page so let's imagine i've got the following props right so this is a basically a youtube video that i made and it's actually a real youtube video so you can go check that one out if you're interested so it's got like these ones so i'm passing in some dummy props so title how to become a web developer in 20 10 minutes views you pass in some string like 2.3 million views time stamp three days ago channel image is this is a url to an image so there's a url to my image channel name so in this case it's sunny sangha and then here the image of the actual thumbnail which is just a url for an image and guys i'm not going to show you this entire url because you could use any image url yeah right and it should be completely fine to use that so i'm going to save that and now we'll see in our code there you go you see how it snapped in there and the rest of them i didn't pass props in so imagine now if i was to go ahead and just reuse this so i'm actually going to go ahead and copy a bunch of different ones in which i've actually gone ahead and saved you guys a bunch of time about time four sorry so i'm gonna go ahead and pop these in so these are just some dummy sort of components and i'm basically going to go ahead and rename these to video card so video card so video card like that and now as soon as i hit save guys these are just a bunch of components with dummy uh props inside so now you'll see we have a bunch of those materials right but you see now like the size of the images is all messed up everything's sort of like wrong and like see that cloud firestore we've got a few things going on now instead of sort of having it that way oh and i've actually repeated a few times so i'm actually going to go ahead and remove some of those so um let's move remove these ones here so we can see that easier nice okay so now what i'm going to go ahead and do is basically go and go to the recommended uh i'm going to style those video cards right so we need to create a css file for that so i'm going to say video card dot css video card dot css video card yes there we go i need to import it inside a video called js so here i'm going to say import the video card video card dot css there we go and now i'm actually going to go ahead and style this stuff so we're going to do is inside of video.css i'm actually going to go ahead and do the following so for the video card so the outside container i want to apply a fixed width of 270 pixels because this is what they have as a standard on youtube right so as soon as i do that everything is going to have 270 pixel width right but i want to actually apply a little margin bottoms because right now they're touching the bottom of each one so if i do give everything a 40 pixel button look what happens they also they were going to push each other away from each other by 40 pixels so now they're not touching right then what i'm going to do is i'm going to go ahead and target the thumbnail right now the thumbnail if i go here is referring to this image so i'm going to say class name and here i'm going to say video card thumbnail right so i'm going to go ahead and target this video card thumbnail so i'm going to go ahead and say video card thumbnail and i'm going to say basically i want to do the following i want to say give it a height of 140 pixels and a width of 250 pixels and i'm going to save that and look how everything suddenly became a thumbnail size right so everything suddenly became a thumbnail size and i'm going to give it a margin right of uh so before i give it margin right i'm actually going to go ahead and so now we actually have somewhat looking somewhat decent right but if we go ahead and make the screen slightly bigger kazi you're going to see that everything sort of stacks on top of each other in in a sort of ugly way so if we make it bigger you see that it just stacks on top of each other we don't want that right so let's go ahead and make it smaller we want it like that exactly we want everything to come up like uh in the way that we saw previously so what we need to do now is where we render that container out so let's go back to the code so recommended videos under uh underscore videos so here what we're going to do now is go over here and do the following so recommended videos i'm going to target this and i'm going to say recommend the videos i'm going to say display flex like this right what this is going to do is it's going to basically go ahead and now everything is like in this huge line and it's like going way off the screen so that's why we've got a scroll bar now so if we scroll to the right we should be able to see that like if the thing goes on forever right but flex allow us to do something useful they can say flex start uh flex wrap right so now if i wrap look what happens if it doesn't fit the next element so now cause if you go ahead and make it bigger yeah so now if you go ahead and make the look at that and as you basically shrink it so shrink it slowly smaller and look what happens as it hasn't got the space it wraps which is awesome damn that's the kind of responsive design that you want to go for guys like that kind of element of responsiveness like it's very important to kind of achieve that and get that perfect sort of visual effect going so now what we're going to do is we are going to style that text so all of that text right now you can see the avatar is sitting on top of the text so remember i actually separated everything into divs so i had the the video text and then you had a bunch of the text and then we had the avatar next to us we have this child and this child sitting inside of a video called info right so what i'm going to go ahead and do is basically do the following so i'm gonna say video card info display flex and now watch how the avatar snaps to the side of the text so if i undo that you see like it was on top nice that is clean yeah are your eyes just quick question for you are your eyes so trained that if you look at a website or you start looking at things you can kind of like start visualizing this will be flex you know what i mean like this is flex center you can paint this yeah really so talk to me about that so like how do you because i think that's very insightful for people so like how do you see when you go to a thing like this like how are you seeing that kind of mentally so when you say that yeah talk me through that yeah so really good point because this is how you actually come out with these clones in the first place is when we're building them is if you look at a layout for example the header bar right if you look we've got some spacing between it so we we can tell that they're using some kind of flex box here right but if if there was no like container around the sort of the left stuff the right stuff the middle stuff so we're talking about like if there was no container around the youtube and the button yeah yeah if there was no container there then you can imagine that everything's just going to space evenly so all of those children are getting space evenly right so imagine like if we if i didn't have any containers oh i see i see what you're saying if there was no container youtube would probably be like right there search bar would be like right there this like and then after that the image the search icon would be there and then like these would also be spaced more evenly like this ah yeah yeah yeah yeah that creates a an annoying problem right and like and basically so what you need to do is you need to containerize things but remember when you do that you also need to tell the new container that you created uh to apply like display flex etc and those things which is why all of those like sort of next containers that we created i i applied display effects to so you would see this when you come to a website like this you would see this in a container in your mind and you see this in a container you see this in a container yeah and then flex see that they probably did display flex space between to get the equal spacing you do okay and what about something like this what do you see when you see that so i see pretty much like a case of like you could do this in a number of ways in this case though using flex like 20 and then the remainder so the recommended side using 80 is a super easy way of doing it and are you using and then flex by d flex is it like do you make it flex column and then it shows it all in a column so right now what we actually have is for this we actually have it is actually display block i think and we're actually stacking the rows on top of each other and each row is just using up the correct the appropriate size but if you do apply flex to a container guys by default it goes in a row right yeah by the foot it goes in a row and then what you want to do instead is change the flex direction to a column and then what that will do is it will actually change everything from because you know that whenever we apply the uh something like display flex notice how it always snaps into a row right yeah what we want to do instead is actually show it going into a column so flex direction column is what allows you to do that yeah awesome yeah nice so now guys what we're going to do is for video card info so video card info what we're going to do now is um we're actually going to add a slight margin top to the video card info so right now you can see the the text is touching the exact sort of top of the thumbnail which is which is not nice right i'm gonna i'm gonna give first i'm gonna give a padding to the right and i'm gonna margin to the top uh padding to the right so that it doesn't sort of it doesn't fly off like it is at the moment so if we do that you can see now we've actually added some some padding to the top so it's no longer touching that thumbnail right um next what we're going to do is the thumbnail itself so i'm not sorry the um let's go ahead and check the so the thumbnail itself no no no sorry the video text yeah so the text itself now i actually want to go ahead and give that margin a left so i'm going to say margin uh video text it's a video card text margin left so now watch what happens guys right now you see where it says the channel the channel image so it's got a picture of me and it says become a web developer in 10 minutes as soon as i hit save now we've got a margin left so it should be slightly away from that side so video card text i think it hasn't saved maybe now if we do it it should snap in video card text have i added that maybe a video card text oh no i've done it here sorry video card text yeah so now we should see it so refresh and then it will have a little bit of spacing there that's perfect that looks there we go nice right now what we're going to basically see instead is that works nicely so we have that pretty much working as we need it to work and what we're going to do now is instead we're going to basically target that h4 inside of the video card text right i'm going to say target it give it a slightly smaller font size because it's huge right now and also give it a margin bottom so that way it's not touching the sort of paragraphs under it so where it says the channel name so as soon as i apply that we will now see if i go sorry i need to give it video card because we renamed some stuff so video card text now if i save that there we go that's already looking a lot cleaner and then i'm going to target the paragraph tags underneath there and i'm basically going to go ahead and say give that a color of gray and a slightly fuller slightly smaller size so if i go ahead and save that we can now see boom it should go smaller let me go ahead and check why that hasn't happened so let's save that yep save there and then we've got so we've got video okay i've done the same thing again video card text yeah save it and now you can see yep that made it smaller now it's starting to look a lot like a thumbnail the final thing guys is to make that video avatar the correct size so in our case we're going to say 30 pixels and width of davis the reason why i've done important here is because avatar is a material ui element so we have to override it css so we do that that is the final step to getting that video looking the way we want it so with that said now by the way one thing i forgot to completely mention you guys is we actually have put together an epic free one-hour training so if you want to become a javascript developer and learn how to you know what skills you actually need and how you can use that to actually make an income the link is in the description below and it's a free one hour long training so totally forgot to mention that but make sure you just open a new tab and register for it and you can come back and watch this training yeah exactly definitely go and check that out guys it's free so literally you have nothing to lose with that so definitely go ahead and check that out nice so we have the video card pretty much i think that's pretty much this page is actually done at this point um so if we go ahead and make it slightly bigger and what i'm going to do just to sort of exaggerate here and to show that i want to duplicate all of these videos here um so boom so that way we have more videos to show and let's go ahead and make it a full screen so let's go ahead and see this and let's go ahead and check it out so there we go guys so if we we can see now it's gonna if it hasn't got enough room to pop another video in it's not gonna show it there and if we make it smaller it's going to resize it appropriately and it's going to start chucking things underneath right so it gets a really nice user interface yo what this is sick check this out wow um oh damn radon just dropped uh 20 dollars thank you so much that is crazy thank you and rodon says i'm going to take your boot camp my goal is to finish it in three months i will dedicate it three uh dedicate three hours a day yeah so i just wanna kind of just say that on this point like one important thing i wanna say is i say this to everybody who you know tries to take the course profit with javascript is like if you're going to go through this course 10 hours is going to make you good 20 hours a week is going to make you great and you know if you can get to 30 hours a week or more you're gonna become a legend so if you can i mean even with three hours a day you're almost at that rate where you can literally be you know freaking legend um because i think the hours really matter when it comes to the amount of time you can put into coding really nothing um you know goes above that like that's the ultimate metric even sunny right why is he coding so well right now i mean is it because he's smart yeah that probably has to do with it is it because he spent a lot of time learning it yes but it's also just the sheer amount of hours that sunny like put into actually all right you want to speak to that real quick yeah exactly and guys i can't stress enough as to what cause he's saying right now and the reality of that is that like you need to put in the hours to basically get that sort of progression and get that speed up like if you don't put in those hours there is not a single course or anything out there which is going to help you right you have to put in the hours as a base as a starting point which means that the fact that you guys are watching this right now is putting in the hours to some degree right so well done for being here um but like yeah like we said there's no shortcuts you have to put in those hours and to get the results you want yep so super pumped to we'll be super pumped to have you in this program and yeah we're definitely going to give you the coaching calls and show you how to make an income so you're going to be in the right place um and again radon we're just we appreciate you and if anybody's curious the link is in the description other than that let's keep it moving exactly awesome guys and we'd love to see you in there and we do run the coaching calls and you guys can chat with us in those courses so it's an actual conversation now we love that because yeah because it's zoomed in so you guys can actually just jump in and ask your questions if radon has a question he can just ask it directly to sunny and you know um also one thing that i forgot to mention is like if you're in the course like you can actually hit us up we have people who like send us a text message and they can reach out to us so i think that level is very important because i think that's how you grow and learn through osmosis you know just being around and any mentor that you guys have learned from and you have significantly gotten an increase in your skill set by like massive amounts it always happens when you're just around that person for a long period of time whether it was one of your teachers or whether it was one of your friends you picked up skateboarding biking or running or you know swimming or whatever just through sheer osmosis of being around those people so if you're around people like i am around sunny who's a great react developer i literally can't [ __ ] help it but become better like i'm just becoming better and i'm like not even trying to and my skills are just like going up i'm like oh i see how this works because i come from a python in django world so when i see a crossover with react i get what's happening but i'm like oh my god it's blowing my mind so while i'm on this stream my mind is being blown by more than most of the people who are actually even watching but what's happening here it's just sheer osmosis of just being around a high level i mean sunny has you know he said in one of the live streams he has made over 200 000 with just re the technology of react.js so it helps when i'm around that and when you guys are on these live streams it helps when you're around that and for a dawn it's going to help a lot when you're on an actual zoom call and you're with the react developer or the thousand plus people in the community who are doing javascript or react so it was just cool because radon like actually kind of just had me riff on something that i think is really important but that osmosis of being that around those caliber of people i think is key yeah exactly and i just want to highlight somebody in the comments just drop now in the glow one three five just said what if you're learning a couple of coding languages how do you spend your time there guys if you're learning a couple of coding languages just just i want you to kind of put this in context right now all of the builds that we have done are all in javascript right do not spend your time jumping back and forth between different coding languages like when we say put in the hours we're talking about putting all of those hours into one exact language and get so damn good at that language that you just can you can you can that skill becomes sellable it becomes attractive it brings value to an employer or a client um thank you so much ready uh redwan uh for he just donated another 20 jesus what is happening bro it's insane i will put 20 30 hours i think you're very good to help people to reach intermediate level by the way i'm a data science lead at top five bank in us nice yo that is amazing by the way radon i did want to mention something to you uh we're getting like a pretty dope mansion for team clever programmer and we're gonna be running small like events um for most people we're gonna it's gonna be pretty expensive but like for you we're just gonna like you're invited so if you actually are ever in town we would just do a one day like in person event uh whether it's react or whatever skills and you're just invited to the vip boot camp so i just want to actually throw that out for you by the way thank you by the way seriously 100 amazing okay cool so let's keep it rolling sunny let's go dude so we just finished up on the home screen pretty much guys so that is looking really nice we have some responses what are we working on now so we're done with the recommended yeah we are done with the record hey all working and it looks crisp so i just threw the horns hey nice uh so now guys what we're gonna do is and if you guys like this point and you're still following smash the thumbs up button because it's going to help reach a lot more people and we really appreciate you still being here it's amazing to see so now guys what we're going to do is we're going to introduce a search page right so let's go ahead and show them the ngrok version uh-huh so the final version and let's go ahead and type in clever programmer and let's hit that search bar so this is the search functionality that we're gonna be building hold on they can't see anything so i'm gonna have to hide the text real quick okay hidden and um yeah so there we go and now i'm going to hit the search button boom and you guys can see this functionality that just you know took place so we're going to be building the search functionality right now right sunny yeah now what we saw there seems so elegant and seamless right like it happened so quickly as no refresh or anything but what's actually allowing that to happen is something called a react router so whoever's interested in learning react router we're gonna about to show you a live demo and and sort of teach you how to use that right now um and then we're gonna go and show you how you can have these two pages and two routes and also notice how in the url now it says forward slash search forward slash clever programmer so it actually shows what cause he typed in the search bar and actually chose that as a root which is amazing right so now oh damn right there i see that yeah yeah it actually goes and puts that in the url and then we can use that so what we're going to do now is we're going to go over to reactor or on google so let's go over to react router on google okay let's do that react router and i'm going to hit enter and then boom uh yes that one there yeah so then click on web and basically let's go ahead and do mpm install react router dom so while we go ahead and run that leroy fernandez asks can clones be used to make money think of it this way dude if you have a portfolio of amazing looking clones right and you're basically able to show and make sure that you yeah so you guys steve mccarthy answered it really good they can be used in your portfolio which in turn can land you clients and make you money so it can be used in that way just make sure that if you do use something like a clone that you can actually explain code and you can actually like break down what the uh clone represents what sort you know like the key thing about the clones is not only is it gonna make your portfolio look good but what i would recommend you do with a thing like a clone is what i would do is i would take them and then i would add in a lot of my own custom functionality of whatever type of app i'm building so for example i would take somebody's blog clone they're showing me and i would turn it into a video block clone and then i would try to take it further by adding in like stripe payment functionality then i would try to take it further by adding in like an admin dashboard functionality then i would take it further by adding analytics functionality you know what i mean like so yeah use what you're learning here like from all the different like the tinder cloned amazon clone how to make product components things like that react router and then like take it far push it and also understand how it's working so it's not just like your recruiter can look up oh this is a youtube video you watch to make this okay dude goodbye you know but they can not only see that but go okay you understand it you took it far and then you can explain it and essentially then it's just your project but i would definitely start off with the clones and then i would just push it much farther than that really really good point yeah by pushing it further guys it shows that you understand the clone that you wrote right like if you don't push it further it's very easy for them to turn around and say you just copied it right but by pushing it further and implementing yourself on top of it it shows that you understand and you take it that step further which they love they do love that stuff um faison said is all the react projects beginner friendly yes they all are beginner friendly and you can watch them all and start from um yeah nice yeah awesome so next we're gonna do so we've installed the react rear dom which is great the next step guys is we're going to go and head over to app.js so we're going to head over to app.js and we need to basically do the following so i'm going to go ahead and import a bunch of dependencies so at the top i'm going to go ahead and import the following so i need the following packages so i'm going to go ahead and drop this on the new line so you can see that oops there we go so i'm going to import browser as rooter and i'll explain what each one of these are in a second when we actually come to using them right so that's what i've just copied on that line and basically what we do here guys is i'm going to go ahead and drop get rid of this now because we know that we're using that inside of app right so inside of app we're going to just get rid of it basically you want your app.js to be a very high level overview of what's going on inside your app so what we tend to do at this point is we say router right so we actually add a router and the router is basically basically what's in charge of determining what url loads what component so for example when we're on the home page what component should we show should we show the home page component or should we show the search page component how do we figure that out we use a router right and how we determine which routes to look at we use something called a switch right so a switch right and here oh thank you so much whoa another amazing super chat thank you so much for that saren yeah thank you damn five dollars awesome thank you so much love that um so we have a switch and now we're going to basically go ahead and introduce the roots so this is the bit where the magic really tends to happen right now so what i'm going to go ahead and do is i'm actually going to go ahead and un comment out what we already had so comment out the header and everything that we had on our page and i'm going to go ahead and basically do this so let's go ahead and add a route which is basically resembling the home page right so there's a route like this so this i'm going to add here so if we're at the root so which is the home page i want to show home page right and then i'm going to add another root which is basically going to be regarding forward slash search right and i'm going to say search page all right so now if i save this this is a really important lesson on react rule guys so if i save this check this out so now it says home page right now cause if you go ahead and go to forward slash search see what happens on that yeah so if you go to forward slash search yeah yeah hey nice look at that yeah so with that said that allows hold on hold on this is this is uh let's see if we can find a is there a magnifying glass on here let's let's put our own icons here you know a nice there we go nice and um yeah so guys you can tell now that's how you actually have page rooting inside of a react app right really really important stuff pagerank inside of a react app so with that said now we can pretty much take everything that we had before cut it and put it at the home page right so we can put it back at the home page so now if we go back to uh forward slash just the forward slash so let's go ahead and go back to you actually no kazi i'm going to show you one thing before we go back to forward slash so uh before we hit enter there if i go ahead and on that search one just add the header right so that this is another cool use case guys if i add the header there look what happens guys oh that is so clean look at how easy that is yeah literally like we're just like plug and play right so now at that those two and yes you can actually go a step further here and do something really cool because we have sunny you have done you have done shopify and liquid stuff right liquid templating things like that uh i messed around with it yeah isn't it kind of like that where you can like pop in the code and then it comes up and it's reusable i think so yeah i think so i need to admit i can't remember it too well but like it seems pretty yeah yeah um all right keep going thank you oh thank you so much dude appreciate that um so we have a header here right but you see the header appears here and it appears here so what i can do now is i can actually go ahead and say that the header should appear outside the switch so it always comes out oh it's nice okay check this out so now if we save that look at that the header is always showing but depending on like what route we're at it will only render so now if we go to forward slash um just the home page the forward slash instead of four search got it check this out guys boom nice it's there and then if i hit this because we hit the home page root it rendered that out okay take out recommended videos this is so clean like comment that out recommended videos oh man that's so clean now uncommented crazy right like it's insane it's literally like plugging and playing things like that is crazy that is really cool i love that and that's it guys i want you to build your apps correctly and once you spend the time to really get this proper and sort of getting it working well then it really it does become a reasonable valuable skill to know um there we go so now we have the search page right here so what we're going to do is firstly we're going to have it so that whenever you hit that search button it's going to take you to the search page right and also what we can do right now is guys we can actually have something really cool here we can have a wild card so here i can say search term so here if i do this search term now this will match any url so if it's forward slash search forward slash abc forward slash clever programmer forward slash anything whatever it is it will actually match that route and then it will render the search bridge so with that information what we're going to do is we're going to open up header.js and we're actually going to do something cool right now i'm going to have it so that whenever we type in the input field and we hit that search button it will take us to forward slash search forward slash whatever we have in the input field which would be really cool right so now what we can do is here i'm going to basically so this is a quick lesson on state inside of react so state guys in this case what we're doing is we're trying to keep track of the input we're kind of and the input that we're talking about is the one that you see in the header right so where it says search so what i'm going to do is i'm going to create a variable in react the way we do that is we use state so here i'm going to say search input search so input basically input search is called input search and the oops what was our input search and then what i'm going to do is say set input search because that's the standard that we use whenever we we're setting up state right so and now what we are going to do is uh do this use state and then use state this is an example of a hook guys and we're going to give the default value of this hook to be empty right so i'm going to go ahead and import this so react and i'm basically going to do this so we've got the use state there right now to connect this piece of state what we need to do is go to the input field type in value and drop in input search right so this is mapping to this piece of state right now right but it's always going to be stuck on this so now because if you go ahead and try and type in the search field nothing happens right let me try oh i can't i can't even click it oh wait i can click it yeah i can't type it yep it's always empty it's whatever i type it just makes it back to like empty yeah so it's just constantly remapping it back to the empty right so we need to add something called unchange right so here what i do is i say on change and basically we're going to use an arrow function so we're going to say on change fires off an event right so e and then it says it fires off an event and basically it fires off that event and then we want to say set input search because remember guys this was actually up here so set input search we're going to say set input search and we're saying update the the sort of state value with e.target.value and that's basically whatever cause he just typed in so we're saying every time he types in update the state value and in turn that will update the state which is being used as the value for the um the input right so now if i save it now if you try and type in kazi what happens uh let me see nice yep letting me type that's cool so now what we can do is actually go ahead and if we go to our header so reactor gives us a really nice thing called a link component and it makes it so easy guys to actually go ahead and actually like handle routing inside of react apps because all we can do here is we can basically have it so that inside of that header when whatever we have inside of this input right so i'm going to make that search icon button i'm going to surround it in a link so i'm going to surround it in a link component so surround it in a link and i import it at the top and i don't know why it does this annoying thing so let's get rid of this and basically what i'm going to do is i'm going to pop the search icon inside of that link component and then this takes a prop called two right so here what i want it to do is i essentially want it to basically take me to the following page forward slash search forward slash and then remember whatever we have inside of our input such inside of inside of our state that's where the url is going to take me to so this is a really clean way of handling this right so now if we save it now kazi if you go ahead and type in something like um foo bar into the search field or something like a search term into the search field uh i want to eat bananas yeah and then hit the search button so click that search button oh check out the url so oh nice i want to eat bananas as the url awesome right so that's how that is awesome dynamically exactly that's how you dynamically um update um it's this thing doing it right here right boom right there yep exactly that really clean way of doing it and notice how like there was no refresh it just took us to the search bridge right so we're not actually going to go so far that we're going to basically dummy it now so that you we showed you how you can actually root to a page with the term that you look you want but we're going to assume that you had like say for example while we're building out the century we're going to assume that you are building it and you search for clever programmer and then we'll show you how you could reusably do it because we need a balance between what we can actually go ahead and build in this live session as well so now what we're going to do is we're actually going to while we're on the header what i'm going to do is i'm actually going to go ahead and link so i'm going to create a link i'm going to surround the the um the youtube image with a link to the home page because like when you're on the search page if you click the youtube icon it should take you to the home page so now cause if you click the youtube icon nice perfect so now i can type in test boom search page boom nice so now we have dynamic page rearing which is so awesome right now what we want to do next is go ahead and implement the search page okay so the search page is going to be inside of app.js and what we want to do here is essentially have it as as the following so i want to have it so that we have so remember guys that exact same sort of um sidebar functionality we want the same thing here right so i'm basically going to go ahead and copy this for for simplicity and paste it here so we're going to have that same sort of 20 80 split but instead of showing the recommended videos i'm going to go ahead and show a search page so look at this at very high level now we can see a very clean overview so i'm going to go ahead and build this component why he's not using an atac for the link is the link component doesn't refresh when you actually click it so that's the simplest way to think about it in react the link one will not refresh and when you click it it instantly takes you there so always use link whenever i think you're working with react yeah exactly that because guys if you're using react router you do not want to be using a hr what happens what happens if you link to an external site like you know link to facebook.com you should just use atax for that uh i think you can use react ruler but it basically would just do a normal redirect got it yeah so we'll do a normal redirect or it may actually try and no i think you can use react real yeah you can use retro for that nice so um now what we're going to do is we're going to render out the search page so i'm going to go ahead and create that so rfce and boom and now we have the search page here so i'm going to go ahead and do class name and remember guys we have to tell it so firstly i need to create a corresponding search page css file so search page dot css right we need to create that and i need to do search page dot css so search page dot css boom we are now inside that file now and basically what i need to do is the first rule is remember the sidebar had a 0.2 flex so this one has to have a 0.8 flex right because it sits next to the sidebar inside of the app page which is a is a flexbox container so now if i save this and i need to import it here so import let's go ahead and import it here so import search page like this and we save it now what we will see is um let's go over let's just go to type something in the search bar uh qazi and then type in and hit search dope yep so now we're on the search page and you see like there what i'm going to do is to emphasize that we're actually here i'm going to type in here and say h2 such right so just to emphasize this um there we go right so we're we're in the right place right now um so let's go ahead and check that so i'm in the search page so what i'm going to do now guys is go ahead and build out the search page so the first thing we have at the top is a nice little sort of filter icon in the facebook app so if we check out the app that we built so let's go ahead and check out the app that we built so we can see so if we check out our app uh it says in the ngrok version all right let me click on it reset and let's click on this oh no the red rainbow of death what was that the rainbow of death showed up on my screen on what on youtube no yeah on my computer i think my computer is about to crash or something or at least on your yeah or maybe chrome is about to crash all right all right so here yes let's see guys you see that filter icon right at the top so let's scroll up so you see filter right there right so what we're going to do now is actually go ahead and add that sort of stuff here so i want to basically do the following for the search page so i want to basically add a um i want to add that little where it has the filter icon and then the filter text so in order to do that i'm going to create a div at the top so i'm going to say div i'm going to say search page underscore underscore filter this is a ui sort of trick oh no why didn't that come in so okay and then what we're going to do is there is an icon for that and it's called tune outlined icon i mean i don't know where they get the naming from but that's the icon that we're looking for and then we're gonna pop this in here so tune there we go save it and you should see the icon should pop in now so we have the icon and then we're gonna have a h2 which just says filter next to it okay there we go and then what i'm going to do is i'm going to go ahead and style that so i'm going to say for the search page filter i'm going to add the following css rules so i'm going to say boom so i'm going to say for the search for the the search page filter i'm displaying flex i'm aligning the items in the center i'm setting the color to gray and i'm setting the font size to small i'm doing important because it's material ui and then i'm targeting the h2 which is inside of it and i'm saying margin left 20 uh 10 pixels so as soon as i hit save look what happens guys it gives you a very nice sort of look at that we straight away get that nice nice effect that we want in now for the search page i want the background to be gray so i want the background to be sort of gray i want the padding around the page so it's not touching the sidebar so i'm going to go ahead and add that and then i'm going to go ahead and um do the width to be no no that's good yeah we're all good there nice okay so next step is to add a horizontal row so i want to add a horizontal row because they have the filter and then we have like a little row dividing the next section so i'm going to go ahead and add that oops go ahead and add that here and then what i'm going to do is to style it i'm going to say inside of the search page target the horizontal row and go ahead and do the following so this is the same rule set we used earlier for styling horizontal rows it just adds a little bit of a margin above and below it and it sets the color of it so you can pretty much go ahead and copy that and you'll get that same effect and that gives us a little line a very nice little neat little line by the way guys i just sorry to interrupt for a second by the way guys if you guys are enjoying this and what sunny's putting together for you guys just let in the comments just let him know that you actually appreciate this because remember guys he is coming out here and doing these massive builds for you guys for three four hours straight so if you appreciate sunny and what we're doing here just drop it in the comments below let us know let's keep that energy pumping the positive vibes up because even us you'll notice our energy starts to go down and i see even a lot of your guys energy is going down so let's just bring that back up together and that gives us a boost and it's gonna make his coding better which is gonna make your projects your portfolio better and so let's bring it up and then let's get back into oh and smash that like button if you haven't already exactly but your energy does drive us in these builds because they can get super long guys like i said when we're building it it's exhausting to actually go ahead and build it it's exhausting yeah it really does take you out like i have the best sleep i've ever had like after these life so like your energy really does like keep us going um everyone says you're killing it so proud thank you very much i know i thought it was sunny you know somebody says sunny's tv is so cool but it's actually uh blackboard behind him i always thought that oh yeah yeah you got a backbone right there nice i see marabon jumping in i see gene paul he's like amazing work awesome guys ah thank you guys love it um awesome guys let's keep going strong so we noticed on our build we had two things right we had oh thank you very much i love these comments that are coming in nice um so we noticed that we had two things on our side so because let's go ahead and go to the ngrok yep and grock yep yep so we have two components we want to build now there's one which is the video row so that's all of the video thumbnails that you're seeing below right so let's build a youtube clone the python tutorial and those sort of ones right so all of those we're going to call that the video row component right video row component right here i see okay but we also have that sort of channel one at the top so you see where it says clever programmer give me one second i'm gonna write this down video row cool all right now what's up yep so we have video row and then we also have the um channel row i see yeah so video and channel yeah so those two things are the ones that we're going to build now so video obviously we we use multiple ones that are going to basically fly through as components and channel raw we're going to build once and show it there like and we can pretty much reuse our different pages etc but each of them are going to take certain props right so i'm going to go ahead and basically outline what we expect to have on that page so in search page now if i go back to our code and let's imagine we created a channel row so a channel row right and what this is going to be is basically itself i say component and it's basically going to take the following it's going to have an image it's going to have a channel it's going to have a verified so if it's a channel oops a channel it's going to have verified which is true or false and basically that's going to determine if they have a little tick on their account or not it's going to have subs so number of subs it's going to have number of videos so number of videos and then it's going to have a description right description so i'm going to go ahead and just give some dummy data here that i've got from before so i'm going to go ahead and pop this in right here so we're going to go ahead and replace that boom there we have some dummy data now and that's just simply an image is simply a channel name a verified this is by default true sub 659k i think we just hit 660 actually nice yeah number of videos yeah yeah number of videos 382 and then the description saying you can find some awesome awesome programming lessons oh by the way i just want to say uh rodon just actually joined profit with javascript so super pumped to have you man thanks so much for joining that's awesome i saw that sodo amazing to see that yeah i love that all right so now what we're going to do is channel row so channel row what it is i'm going to go ahead and create that component so channel row.js all right so channel row.js um and then we're going to say rfce boom we have channel row so i'm saving that going back and i'm going to import that so import channel row from channel row.css nice hidayat says the best tutorials i've ever seen on youtube really appreciate it from the bottom of our heart thank you so much thank you so much we really really appreciate that um awesome so now what we are going to do is we have got the search page.css so channel row um yep so here we have channel row nice so next i guess what we can do is we are going to have it so that we need to consume these props right so we actually need to sort of take these in at that level so if i go over to channel row these we are going to take the following props inside of channel row so channel row here so image channel subs number of views description and verified um we do need a avatar here so i'm going to go ahead and start remember we use bem so class name equals channel row and then here what i'm going to go ahead and do is basically create an avatar so i'm going to import that from material you my know dude this guy's crazy we appreciate you wow that is awesome hold on i gotta i don't know why my chat sometimes doesn't let me bring it up but this is oh geez i don't know my keeps hiding it but thank you so much frank for that donation and i'm so glad it's bringing you a lot of value and you're enjoying it that's amazing dude whoa i just brought it up on the screen yeah thank you so much frank really really appreciate that that guys this is insane to us like to us it's so much more like this 25 dollars like if i don't know why but it feels like 25 000 because it kind of is like just a vote of confidence and nobody has to actually pay at all uh but like we just it just makes us feel really appreciated and loved for what we are doing because it does take a tremendous amount of energy putting this together planning it for days in advance or weeks in advance and then just like even today i mean we're looking for homes and i'm like no i'm not gonna go look for any of the new homes and like we're just here grinding it out so like it just means a lot you know at all your guys's love and your guys support so i just want to say thank you really really does like it makes everything just seem like it's just so much more worth it like when you go when we see stuff like that and we see like just the the sort of how much value it brings to you guys we love that we really really love that awesome all right guys we're gonna keep going for you we're gonna pull through let's keep the energy up and let's keep going guys let's do it so now what we have is it says cannot resolve channel row.css rule in search page what is that um oh over down there yeah turn around nice um so if i save that so now we consume a bunch of props in here so remember let's carry on setting this up so we have our channel row.css and it's going to cry and complain because we haven't created that file so channel row.css boom we should be inside there now there we go and what we're going to do now is we're going to basically set it up so that we have the avatar first so we want to have an avatar which is basically going to represent the channel um so like where it said cover programmer we're going to have that same thing here so we're going to have uh cause let's make the the screen a little smaller for the the um let's make the screen a little bit smaller for the the preview of the app there we go nice my bad i see okay yeah there's the code guys i'm sometimes engaging with the comments i miss this no worries bro oh by the way i just want to let everybody know uh tomorrow guys we're building the tick tock clone so take top clone i think it's important because i think you guys are going to love that so i'm going to put it on the screen guys um if you're excited do let us know but here's what it's going to be rebuilding the take talk clone and that happens tomorrow exactly that's that one is going to be a banger yeah that's going to be a challenge and a half and we're gonna conquer it and we're gonna show you guys how you can do it as well uh yeah literally just how you use tiktok like we're gonna have a very like it's gonna be a similar build to that amazing stuff and um that's even even for me guys that's actually a pre i'm trying to think how are we going to build that like it'll be interesting to see how we do that yeah it'll be an interesting build or you can at least come watch us fail either or yeah depends on what kind of person you are we appreciate you here yeah yeah exactly so yeah this one is gonna be fun definitely guys come through to this build tomorrow and we're gonna have a lot of fun just marketing your calendars like right now pull out your phone and just mark it and then um show up and that would be sick yeah by the way by the way uh rodon you just joined and i sent him a text message actually on his phone and he goes thanks to whoever sent the message maybe automated if someone is reading this you're doing crazy work i like the vibe uh radon it's that's me you know gary v says skilled unscalable that's actually us nice love that yeah awesome all right let's keep going that's just funny um so now guys we have the uh people are pumped for the tick tock club becky and abby and ankur mahesh said can you make a video on spotify clown it's on the list dude we have spotify coming up as well yeah i think next week yeah next week we have spoiled fire coming awesome so channel so here we have the avatar and it's consuming the image prop right so we have the image prop and then what we're gonna do is we are going to have a div with all of the text inside of it because we want that to sit to the right of the the avatar so here i'm going to have channel row so channel row i'm just going to call text okay like that and i'm going to save and it's going to pretty fi everything there we go and basically in here i'm going to have a h4 so h4 and this is going to say the channel name so this is going to have the channel name and then here so you can see things are actually starting to pop in as we have it there so the channel name is going to come in there and then i'm going to have a um a p tag okay something's freaking out so it's gonna work found object with empty keys objects are not valid as a react child channel row channel world channel save okay let me save it now image image that should be fine i think no no turn off your wi-fi turn it back on might do the trick exactly i don't know what's going on so we got avatar avatar is important for material i call we have this so let's go ahead and just um let's go ahead and comment this one out because it was when i introduced this ah it's fixed now channel row text so channel i'm passing in here as a clever programmer obscure programmer and then i'm rendering out here as a h4 channel interesting okay where is channel row being used in search page yo what uh so that is insane uh okay i gotta bring that up that is sick so we were at 94 for this stream and priyank just donated six dollars and said let's break 100 that is sick thank you so much priyank love the love that is awesome amazing damn we broke 100 that is sick two streams two streams that did it i am so pumped hey oh we have aluna fezzo says wow i can't believe i've been here for three hours oh [ __ ] well thank you dude oh giridazzi just figured it out he just figured out the bug he said you're not destructuring your props exactly ah we weren't destructuring it in where in the channel row oh right remember you didn't put you wouldn't you didn't put the squiggly brackets around it yeah got it so thank you very much giri dazzy for that um awesome and also dude like uh thank you um was it priyank for bringing us yes to 100 donation that's insane i love that sick that is sick so nice top tens of the decade your message got deleted by nightbot so we still love you it just means like you probably have to say it and not all caps but um yeah thank you so much for loving the live show we're trying to bring it to you guys every day and then uh we're also gonna have another show which is called dev's got talent and on the next episode of dev's got talent we're gonna be announcing the winner who's gonna get first place for one thousand dollars so stay tuned for that too oh that's dope that's so sick man is it was that nazis idea no we somebody i think a monarch or somebody in the chat said dev's got talent and i'm like yo that's actually sick i mean i think it might have been me on the stream who i don't know who came up with it but it was sick oh man that's genius i love that nice so guys now we're adding the check box next to the name right so if we pass in the verified which is a boolean so it'll be true or false if we pass that in we basically want to say right if that is there so if verified then render out the verified icon now the verified icon is this one right here in material ui so we can pretty much go ahead and do this so verify so check i don't know why it's called that i really don't but like we can pretty much do this we can say as verified icon which is always nice so it has verified icon so here i don't know leave that as default oh yeah it's a default actually so we can say verified icon verified icon so now we can actually do that boom verified icon so now save that we should see a tick little checkbox come up right now what now what we're gonna do is actually go ahead and see the tick box so we got that little tick box there which is awesome and we are now going to basically go ahead and add the so two p tags so one p tag here and this one is going to say so it's going to say the following right now the reason why i've done it like this guys is because this is how they do it in um in youtube so pretty much it has it like this it has subs subscribers number of videos videos with a separated dot right so as soon as i hit save we should be able to see it so now we should see it there we go 660 subscribers uh there we go 660k subscribers and the final one is description so boom there we go so now we have everything so of all the information there on the screen we just need to style it in the right way so we've already made the channel road.css so i'm going to go ahead and create the css apply the correct css so firstly do we need to add any sort of targeting so so we've got the channel row logo we've got channel row text we've got the outside channel row nice and we should be able to target these pretty easily so now what we're going to go ahead and do i love this bit because this is where you guys get to see how css directly affects it and sort of goes uh go for it in that sense so i'm not sure if you're following me cause i think it detached oh crap did you just do a whole bunch of stuff that nobody saw no no no it was um it was it was all on that one screen so it was fun got it okay because i i constantly check just to see something is like wow i'm pumped for devs got talent a bunch of people are like dubs got talent that's actually yeah i think we're going to play like dramatic music too like this week who's going to win dev's got talent do you have what it takes it opens up with nars doing a little jams and stuff yeah that's a little intense that'll be hilarious awesome so now whoa uh by the by the way um radon who joined he texts me back and he's like um i just wrote he goes here's my pledge if i succeed i will give scholarship to 10 people oh so damn so yeah guys so basically if he succeeds in this program which he will uh he we're gonna be giving out 10 uh sponsorships under him so that would be amazing that is so nice of him that's insane man diego serrano just said if uh five dollar super chat thank you so much diego and he says you guys are making developers learn on this live tutorials more than paying web courses on a monthly basis hey hey love that thank you so much yo this is crazy 105 dollar chat revenue what this is insane oh so many coffees no we're going to give we're going to try to like give a give away in like shirts and do giveaways for you guys and like lots of big prizes yeah now goes sunny should dance he knows so many tick tock bounces she's been trying to make me do dances for so long let's do uh we'll do some tick tocks i i gotta show you i gotta show you a tick tock that frankie and i do you wanna see it right now yeah go for it let's do it um okay so this is a tick tock that we just did with whatever oh no hold on i gotta go rafikaze uh is it okay guys if i show you this it's just gonna take one second but it's pretty funny one i hope that it's published and then and then we're gonna and like we're also gonna build the tick tock clone so i think it makes sense to show it to you guys and uh i will unmute the system audio so here we go [Laughter] that's it so far i don't think were you able to hear that sunny no right i don't i i couldn't hear but maybe they did oh man if you watch it on your own end at some point you're gonna die laughing but yeah you kind of have to hear it but that that's the tick tock cool namekian said give away sonny please give away i think it means giveaway yeah yeah yeah yeah yeah uh awesome all right let's keep going bro [Laughter] you're coding for four hours yeah all right so channel row um so now we have display flex so what i'm gonna do is right so channel oh guys yeah that's an interesting one by the way so tick tock just got banned in india all right but is it it's not bad everywhere in india it's like one region right oh i don't know i thought it may be a land everywhere no that's what i heard it's just like one region of india oh damn oh i see it oh like well in that case wherever you if you're in that region that got banned go ahead and build your own tick tock tomorrow yeah oh yeah yeah yeah make the next tick tock yeah and you can release it in that region yeah this is your chance you know so now what we're going to do guys we're going to go ahead and style the channel row right so we're going to go ahead and do display flex right and as soon as i hit save now we should be able to see everything kind of goes into a row nice next we're going to align item center to bring everything central so align item center uh and then what we're going to do is width of 70 so it doesn't go too big so width of 70 nice so let's go ahead and see so there we go nice um there we go so 70 so it kind of limits it now what we're going to do is we're going to go ahead and we're going to go ahead and check so we're going to go ahead and do channel row text so channel wrote text and then it's banned country wide oh yeah that's what i heard dude no it's banned in the whole india yeah no wonder my video only got 150 000 views and not 2 million on tick tock josh josh says new subscriber hit from the philippines oh what's up dude nice yo that's crazy i did not know that at all i did not know that at all that it was banned everywhere in india let me hold on hold on when did it get banned was it before july 6th i'm gonna take a look at my analytics on my tick tock see dude it is banned in india because my number one was always india yeah i'm actually not joking the reason why my last tick tock got 146 000 is there's no people from india on here united kingdom is number one united states by the way that's kind of crazy united kingdom is number one the united states is number two so yeah that actually proves it to me that it's actually banned in india like my analytics on this say i don't know if i can actually uh just show analytics nine chinese apps were banned countrywide in india whoa look at this see no india that's insane and i'll show you i'll show you i'll show you my other one right i'll show you my other one right now so i'll go to analytics on this other one that i did and uh if you see it look at this right two million views and look how much india oh my god damn right like they got two million views total time watch is more time than our amazon [ __ ] clone watched yeah so that's crazy that is there's people are saying it's gonna be banned in u.s what is happening bro i'm going hard on tick tock before it gets banned [Music] let's create an app before i get the band right right so display flex so people are scaring me crazy well either way guys tomorrow we're going to be building another one so if it gets banned or it doesn't get banned go ahead and like extend from one and sell it in the app store and you know take it that way take it that way so carrying on guys we've got display channel row text display flex right so now we're going to do flex direction column so flex direction column like this and then what i'm going to do is i'm going to do a bunch of signing now so i'm going to go ahead and target the paragraph so i'm going to give them a gray color and a small font size then i'm going to target the logo so i'm gonna target logo i'm say a height of 120 pixels with the 120 and a margin left and right of 10 pixels up and down of 60 pixels i'm sure that's the way or it might be the other way around so if i save that so now you can see it gets that much bigger size and then the h4 i'm actually going to go ahead and do the following so for the h4 i'm going to go ahead and say display flex align item center and justify content space between so now i go ahead and apply that we see it finally gets ourselves so cozy let's go ahead and make that screen bigger what's correct what screen uh that is in the app the app the app is all right let's go ahead and make that bigger and we can see now guys there you go so it looks like the the final sort of finished one so we've got the it's got the verified tag if we pass in the verified props a little tick box comes up we've got the subscribers coming up and then we've got all of the stuff styled in the way that we wanted it to right now guys this is one example of when it gets super small you see like yeah sure it resizes and stuff but here i would actually say go ahead and like extend on this and use something called a media query to actually make the padding less i would say so you can use something like media queries to tackle that problem if you want to um so that's actually that bit done so we've done with that now what we're going to go ahead and do is add a horizontal row so let's go back to the search page after that we're going to add a horizontal row so boom and now we can see it adds little line underneath that so we should be able to see a line um some reason that's not coming up so let me save it you just spam the button yeah there we go there's a horizontal row and what i want to do now is underneath that i want to have all of the video rows so remember those video thumbnails that we saw this is the final piece of the puzzle guys um this is our final piece of the puzzle so it's gonna have pretty much um we're gonna have all of those thumbnails are pretty much going to be video row components right so video world components so here video row let's go ahead and check so nicholas marcus says this is super dope awesome love to see that thank you dude um exactly no why we're not gonna get banned is we're gonna teach you how to build this tick tock except we're gonna make sure you don't breach people's privacy and then you know exactly there you go you won't get banned exactly so now we're going to create a i think a decor yeah video row component there we go and now what i'm going to do is do rfce boom video and then we have it up here so now inside of the video row component so this is again the same situation guys it's going to take the following props right so video row is going to take the file it's going to take views it's going to take subs it's going to take a description it's going to take a timestamp it's going to take a channel so let's go ahead and save this so we get it it's going to take a channel it's going to take a title and an image sunny i actually got a great idea because of code smasher so it's actually code smashers idea is bootstrap 5 ready to be used can you and i do a live stream at some point maybe this week or next week and go talk about bootstrap 5 because i think people want to really know about what's going on with this yeah sure i haven't used bootstrap in a while but uh we can definitely go ahead and cover like what what they're talking about okay awesome let's do it if you guys would want to see that drop in the comments below but otherwise we're going to keep building clones nice yeah awesome so uh we pretty much here guys are going to accept the following right we're going to accept these inside of our video row so inside of search page again i've created a sort of a dummy component call so i've got this one instead of this i'm going to go ahead and pop this one in and this is basically got you see we've got 1.4 million views subs what description uh cozy are you oh yeah yeah and timestamp channel title and then image yeah and now we need to import it so import like this and i'm gonna go ahead and change this to video row right like that okay nice now what we're gonna do is we are basically gonna go ahead and hook everything up so let's save that and go back here give this a class name stick to our bem principles so this and then and talking of them we're going to need the css file so import video row and guys if you're still with us at this point well done let's see and we are at the last stretch now okay so there's a lot of stretch and this is like keep on going all right so let's just finish strong you guys let's finish strong keep that energy up if you need to step up right now step up like stand up sit back down just get the blood flowing in your body because even if you're not coating this we want to make sure your retention of all of this is really really high so grab water i got my perrier right next to me get fresh get your posture ready you know get ready to code we're just going to burn through the last thing guys and you know drop in the comments below if you're pumped and you're ready to go i'm hyped we're hyped guys let's do this let's finish strong exactly let's go guys and smash that like button hey exactly smash that like button let as many people know about this video as you possibly can so video row.css is what i just created we just imported at the top and then what we're gonna do is pop up so now i'm gonna go ahead and where's my video okay here so here guys so now what we're gonna do is we're gonna render so we need the following right we need an image which is basically gonna take as its source the image prop so we should start seeing it pop in now on the right hand side so you can see the image just came flying in nice and then we have a div yo what yo what oh i thought you're gonna say something oh no i said that's nice oh video underscore text there you go and then we're gonna have a title so a title uh and that's gonna go in there oh no oops that's not going to be just a title that's going to be a h3 with a title so h3 with a title there we go and then we're gonna have a p tag and this is going to be a bit of a complicated p tag okay so like i'll break this one down for you guys but the point is this p tag is going to allow us to style individual parts of the text so kazi let's go ahead and open the anger up one one more time uh-huh so notice guys if we make this full screen notice how it says clever programmer it's got a little dot and then it's got 659 subscribers 1.4 million views but notice how the formatting is done here we we basically only apply some styling to that that paragraph you see like where it says the subscribers we've got the gray outline yep we've got that gray outline and i'm going to show you guys how you do that in a single p tag all right so how you do that in a single p tag nice so what we're going to do now is that is all all of that is inside of one p tag but we're going to show you how you use span to basically span in a class a class name so at this point imagine like this is the p tag that we're talking about and basically what we have here is we have the channel right so we have the channel so here we have the channel with a dot and then we basically have the subs so we have subs so we say subs right and then we basically say sub subscribers we say that many subscribers and then we basically say the following we say subs and then we have like so it'll be like say like 660 subscribers 1.4 million views and it'll say something else here with the timestamp and then we have a description so then we have a description so the description goes here so let's get our app on the side quasi so as soon as i save it it will pop in description so let's have the localhost nice i see that it's coming together man it's coming together really nice exactly so as soon as we hit save now you can see all the text has popped in right there right oh yeah all the text has popped in but we still need to style it to look the way we want it to look so i'm going to what i'm going to do is i'll just put it kind of like here-ish yep and so then we can kind of see like what we're trying to get to yeah so um so now you can see like on the right side guys it's actually sort of we have a row right so which means that like we it's in a row format whereas right now it's sort of in a column right so the image is above it so what we're going to do to fix that is we're going to go to video row and what i'm going to do is go to video row and i'm going to say okay so video row is display flex we all know that that will basically pop it into a row for us so i'm going to go ahead and do that and you'll see the text smashes to the right but obviously look at that it's stretched the image like anything now which is not great right so we're going to fix that in a second but i'm going to basically say a margin so afterwards i will be doing that yeah so 30 pixels and i'm going to say max width of that container should be 700 pixels and i've determined that from based on how youtube has styled their stuff so we do that and then what i'm going to do is i'm going to say go and get that video image so that video row target the image and basically firstly object fit yep so object fit contain and that if we just do that by itself that will actually go ahead and do that so we'll actually go ahead and format that but we basically want to set so i found the dimensions of the width and height on youtube thumbnails and i also want to enforce them so i want to say the width and height should be a set amount right so i want it to be a set amount so that way it kind of goes sticks to the top of that that row right then what i want to say is i want the text right so the text so the text that we're talking about here is this div right here so this div go ahead and target that and give that a margin left of 14 pixels because right now it's touching the side right which is not very nice so it's not it's now it pushes away from it and then uh because i think at this point it might be better to make it a bit bigger because for the mobile responsiveness it doesn't look too great so let's make that a little bit bigger yeah there we go nice so now what we're going to do is we have um so yeah nice so then we have the video text and now we're going to say for the subs so now we'll come to the subs in the sec but for the description i want it to be a slightly gray color but smaller because right now it's very ugly how we've got it um it doesn't look too great so i'm going to do that and for that long piece of text right so the one where we see clever programmer 659 subscribers 1.4 million views i need to give that a class name so i can style it so here i'm going to say class name equals video row so video row underscore underscore um video underscore underscore headline let's call it the headline and then here if i save it go back and i say boom headline is so the headline is a font size of 12 pixels and a gray color so one size of 12 pixels and a gray color and now you see that's much smaller it's much neater um the description hasn't actually kicked in yet so we've got this so let's go ahead and see why so description did we go ahead oh we didn't give it a class name sorry so we should do that class name equals class vo row description and then save this and there we go so there we go it's much smaller nice and then what we can go ahead and do is actually go and make sure that we've got the styling for the subscriber stuff so where it says 659 subscribers we actually want to basically just target that bit now so what i'm going to do now is where i'm just going to wrap the sub count so the subs the number so this one right here i'm going to wrap it in the span tag so i'm going to wrap it like this i'm going to basically grab this chuck it here and i'm going to say give that a class name so that way we're only styling that and we're going to say that is going to be the subs number so uh video row so oops video oh no oops one sec zero subs number okay so i'm going to say go ahead and style that so go ahead and style that and i'm going to say that should be slightly bold and the color should be the blue that they have on um on youtube which is this rgb blue right so if i go and save that now we should be able to see that look the text the text of the subscriber number just changed and it became blue so it's already starting to look a bit more like youtube right then what we want to do is we want to go to span video row underscore so basically i'm going to span around the whole subscribers section so i'm going to do a span and basically i'm going to go and grab everything up until the subscribers and i'm going to place it inside of the span tag that we just created so i'm going to go ahead and delete that one pop it in here right so now i have a span surrounding all of it and i'm going to say this one is going to be called span class name this one is going to be called video row subs right and what i'm going to do for this one is i'm going to say video subs has two pixels padding and a light background color so now you'll see what we've done here when i apply this effect so video subs and boom check out what it just did now we have that nice subscribers being highlighted right so now you can actually see with that done we actually just went ahead and created a video row right so now all we need to do is actually go ahead and pop in some more dummy ones so now i'm going to go ahead and show you is if i reuse this component i've got some more dummy data here so if i go ahead and pop in another sort of let's go ahead and paste another one in here so here i'm posting in some other stuff so video row with a bunch of different props inside of it and if i save that look how it pops in on the right so boom we have that it pops in nicely let's go ahead and pop in the remainder so i have a bunch of these and i've actually sort of wrote all this out before to save us some time so these are just reusing the components in a bunch of like a bunch of times over and now if we save it check that out nice so kazi let's go ahead and make that full screen oh that is looking clean nice right so that is wow and it looks clean and like it's just amazing how like it's so easy guys when you're building it right when you're building this it can become super like it can be very like it can make you feel like you're not actually getting close to the end result but when you actually put all of it together and you start putting multiple components in place with the dummy data in place and things like that it suddenly snaps and everything kind of fits in and it's always at the end of front-end development where you sort of have that oh okay like that sort of like moment at the end where everything kind of comes together and it's all these small little tweaks that you do that give you that really nice outcome at the end um so i think actually quasi with that said we actually just finished the majority of the build i think you know what we need to do here give me three two one guys drop some love in the comments below we finished the whole thing and now what are we about to do sunny we are about to deploy that app dude we're about to deploy the app so i think we did set up a firebase project in the beginning right yeah we did yeah so we got some nice comments here gary says finally a night well spent thank you guys keep rocking three plus hours of pure knowledge sharing awesome uh code smashers is like damn dude it takes a lot of effort to copy a website's front end it's educating and fun really is nice and we're just building the best app so you know like it's going to be designed that you're going to get paid for you know if you'll learn these skills so now guys what we're going to be doing is we're actually going to be deploying the app and we're just going to be going through a few steps so at the top i'm going to change it to say uh deploy using firebase boom now it's there all right let's just get straight into it sunny so what are our steps let's do it so what we are going to do now is we go over to firebase we actually set everything up earlier so we actually did all of the stuff we needed we set up firebase hosting so all that was left now is to actually go over to the terminal uh so let's head over to the command the command line inside of vs code okay so we're going to just leave this here and then go here boom yeah and guys what we need to do now is we need to run firebase oh my bad my bad my bad we're both fighting each other but go go go go go all right so firebase in it right um what this is going to do guys is it pops up a really nice like command line to interface so it looks really simple and then basically gives you these options right you just want to use the arrow keys to go down to hosting hit the spacebar and hit the enter key right and then what you want to do is use an existing project right so at this point you would have had to have done firebase login because it would have said like you wouldn't have been logged in so you would do firebase login first log into your account it will pop up on your chrome and then you log in and it will come back to cli then you would do this then you say use an existing project and then you need to find your app so in this case we are doing oh god i've lost track of it so i think it's youtube yeah this youtube channel yeah we built so many clones now yeah nice uh and then here what do you want to use as your public direct yeah you have to do build yeah guys so it's a react step you have to write build guys take a look at this right now you don't have any files so if i go here you in your youtube clone you have nothing called build right now okay nothing but after he goes through this process you're gonna get build and build is the folder that that's gonna allow you to actually host your app online so that's really important yeah because we're using react it's also an spa single page application so don't leave this default don't sleep on it hit enter make sure we're gonna do what here sunny so yeah so here you wanna make sure that you configure it as a single page app so you have to put why i can't hear you what uh oh your airpods i think so you want to make sure you hit y at this point and y stands for yes right so as soon as i do that there we go it says firebase initialization is complete and also like cause he said no on the left side i was talking earlier yeah i could hear you but it sort of fizzled out a bit so it went a bit to your airpods quality got it okay okay okay i hope that for everybody else it's fine but right now so okay got it got it got it should be good it should be good cool let's keep so we just initialized firebase and you can see on the left now we have a build photo right why is that build folder so important because we need to run the following command next before we deploy anytime we deploy we have to do the following we have to say mpm run build right now by the way guys we're not done we have some people who are thinking we're done so we're almost done we're one step away from really deploying it online and if you follow this step this app will be live and you guys will be actually getting to use it right now so everybody on this chat will be able to go to it yeah exactly everyone will be able to check this out so this next step is really important so npm run build basically goes and takes the app that we built strips out all the sort of unnecessary heavy tools right so like all the developer tools and stuff like that makes it super product like streamlined right and then basically now you can see the build folder is no longer empty so remember if you if you change your app after this point you have to do npm rom build again to get the most up-to-date one inside of your build folder right and then once that's done it's as simple as doing firebase deploy but before we do that guys like if you guys have found this useful firstly smash the thumbs up button and let us know in the comments right now if you're ready to deploy this app like if you're ready to deploy this app let us know right now because we finally got to this point and we are super excited and guys one thing that we love it when you guys do this is like literally if you pretty much hey we got the applause going yeah yeah yeah so what what we love guys is that if you literally pull out your phones and shoot an instagram story when the moment you see the website live right shoot an instagram story and tag me and kazzy on our handles at the bottom right here so our handles are at the bottom of the screen i think are they at the bottom of the screen right now oh yeah they are yeah they are how it handles at the bottom right now so you can see it pretty much here and shoot an instagram thing an instagram story and tag me and kazi and we can pretty much see who's watching we can have a chat with you guys so yeah let us know and oh my god you guys thank you so freaking much we you guys have allowed us to hit 2000 subscribers on monday 2000 subscribers on tuesday and 2000 subscribers today we've never ever ever in the history of our channel ever seen that so thank you so much for subscribing to this channel we're at 660 000 subscribers i mean i feel like you guys are gonna help us go to a million like literally tomorrow at this rate yeah we'll get there they'll be insane dude so pumped awesome right with that said i think they're ready dude let's do it let's do firebase all right i think you guys are ready let's do this boom awesome code smashes says this is history i've never seen on any channel this is really good live coded and viewers are going to use it awesome hey so you can see the magic's happening guys and there we go wait is it going to work or is it going to break let's see uh let's go ahead and check and guys we have hit deploy now we're about to show you guys the app hopefully you guys are excited and three two one [Music] right now the link is in the description and we'll drop the link in the description yeah we'll drop the link in the chat go ahead use the app guys the app is also you can uh type it in the url and you guys can actually play around with it keep in mind this app is primarily for front end with react.js just to show you how like router works so for example you guys can actually type in clever programmer here and hit the search icon you guys can then hit youtube you will see how things change and then on the left hand side you can see how you can hover through the side bar all right guys so yeah this is what we've put together uh so you guys can actually play with this code smashers like boom hey gary davies says ready dude rock and roll lenny dennis says it's so clean we love that uh the one says integrated with the mobile app it's actually mobile friendly at the moment so we can make some tweaks and it would be completely remote friendly yeah thank you for the love you guys trump said yeah simpsons.com says bonjour from france i love to see people from around the world here that's awesome and median says uh coding should actually be an olympic sport oh yeah it should do i mean i think everyone should learn how to code i think like literally that's our goal guys we're trying to get everyone to learn how to code and get as many people if we can create like as many developers as we possibly can then we've done our job right seriously yep uh steve mccarty says another great stream guys well done lots of great content for new devs frank says so clean thank you frank thank you steve um douglas says pump for tick tock i mean that's crazy you know like yeah all these guys just have a lot of experience they're other a bunch of them are professional developers like steve and even frank has a lot of experience at developers so we're like humbled that you guys give us the light of day and you're actually here and you know maybe getting some value but i feel like you guys are actually val adding value to the stream so whenever i see you steve answering people and giving value like that's huge like it just builds such a great community exactly yeah amazing wow nice yeah guys here is the app thank you guys so much for being here and enjoying this if you guys found this to be helpful remember guys we're going live tomorrow for tick tock clone at what is it 10 15 a.m pacific los angeles time so july 30th thursday tomorrow we're building the tick tock clone so if you guys are pumped exactly make sure guys here's what i want to actually do okay pull out your phones please and in your phone schedule it or set alarms for it okay uh like literally on your phone you can go here and set up alarms at you know i'm los angeles time so what i like to do is you know i would just have my alarm set up for these times right there so set it up on your calendar and once you're done either setting up the alarms or scheduling it in your calendar just drop it in the comments below that i am booked for the training tomorrow or you know i've set up my alarm or i've scheduled for the training tomorrow and like start dropping that in the comments below with like one fire emoji and we want to see that we want to give you shout outs every single person who does it i'm going to call you out and i'm going to be pumped to see you and sunny exactly yeah we are super excited for tomorrow's building i think it's going to be one of the most challenging builds that we've done so if you're going to see if you're interested in seeing how that goes down then definitely turn up tomorrow and we will go through that together so it'd be super exciting super challenging um really really cool project to build yeah that one is going to be awesome so definitely awesome other than that sunny do you want to add anything to this before we wrap it up uh i just want to say a massive thank you to everyone who's watched we love you guys and we appreciate every single one of you and thank you guys for especially for those of you who stuck it out throughout the whole thing so i see like a few people here till the end like that's amazing like and like we said before like put in the hours and like that progression will happen itself naturally like um and you're surrounding yourself with the right people by doing this so like amazing start for you guys um so yeah thank you guys and we appreciate you guys thank you guys so much and i'm going to shout out everybody travel with zayn says i'm booked for the training tomorrow uh max seuss thanks akash says i booked for tomorrow diego huaroch says i am booked for tomorrow rami says done uh subhash says i've set my alarm nicholas says it'll be worth it even though it's 11 29 pm right now beautiful i'll see you there nicholas i'll remember all of you guys actually and sonny will too douglas says thanks for the hard work guys i'm booked for tomorrow let's go the stunning italian says i think it's i shan or whatever but i'm going to say italian there's booked alarm set beautiful uh who else do we got aloana says i'm pumped for tomorrow beautiful i'm going to see you there luanno i've seen you on few live streams right now so that's good abdullah says i'm ready these lives no matter what time it is he's he's ready um elizabeth anthony is ready subhash says alarm is set ahmed says i never regret joining prophet javascript so yeah if you guys are interested the link is in the description below love that giri said a reminder who else sonny who else is doing this we have let's go ahead and see so we have samantha's time is ticking for tick-tock hey tomorrow is a done deal nice nice logan dumb says well it's 3 a.m here and i'm pumped for the next one that's what we want he says i'm set awesome dude i know i'm booked bro nice build with abdeliah says never miss a sunny training i i love that i appreciate it thank you row fire says i was born ready this is the kind of energy we need insane yeah that is amazing frank says you know i will be there yeah frank thank you frank is what paid us frank you're making us rich man you paid us what 60 dollars so far thank you so much appreciate it massively dude elizabeth is going to be here for support tomorrow alex delgado saying booked booked in chicago hey i'm from chicago bro shy town so that's amazing oh nice i didn't know it says i was born ready oh you didn't know that no chicago no doubt build with abdullah says ready from paris hey nice denmas has already said yoshida says just set my alarm good can't fall asleep and yeah just bring your notebooks or be ready to like put it on instagram and tag us we will uh you know tag you back but yeah just come in be ready to learn be pumped and then tomorrow we're just going to over deliver and make sure that you know we just blow your mind with the value that we provide so again guys thank you so much for being here thank you we're excited to see you guys tomorrow i mean this is what we built today and we have built many amazing things throughout the last weeks and um yeah i mean i am pumped for the tick tock clone so with that said i'm done said you want to add any last words super pumped for tomorrow guys i hope i see every single one of you at tomorrow's session because it's going to be massive tomorrow guys like we're going to tackle a problem though i don't think we've tackled a problem like that on on this live yet because it's that kind of challenge um so like we're going to do it we're going to do it together so i can't wait to see you guys and thank you for watching that's going to be amazing thank you guys love you and radon says he's going to be there tomorrow and azam says he's going to be there from peru savannah says see you guys tomorrow necta says hello from ukraine this is brilliant okay so see you guys tomorrow love you very much get good night sleep and let's freaking crush it we're gonna change the world guys we are here to go down in history with what we're doing here and the community we're building and we're just not stopping we're just gonna keep on going pedal to the metal and a lot of this seriously real talk is because of all of you guys that are here pushing us so aluana frank steve all of you guys are actually part of this is what keeps us going and pushing us forward so thank you with that said i love you guys sunny loves you guys and we will see you in the next video next one peace out guys

Channel: Clever Programmer

Views: 196,786

Rating: 4.920248 out of 5

Keywords:

Id: NT299zIk2JY

Length: 223min 1sec (13381 seconds)

Published: Wed Jul 29 2020