**Tips and Tricks for Building a Stylish App**

One important thing to note when building an app is to make sure that we don't want anything inside of our app, but rather use external styling. To achieve this, we can add a simple rule to our CSS file which sets the margin to 0. This will get rid of any default margins that browsers may apply, and ensure that our styling is accurate.

When it comes to styling our components, it's essential to separate our actual styles from any unnecessary or invisible elements that might be added by default. In this case, we can leave out some fun CSS rules in our index.css file, as they won't affect the functionality of our app. However, if you do want to change the fonts, I would recommend making those changes.

**Creating a Custom Row Component**

Now that we have our app looking nice and tidy, let's move on to creating a custom row component. We want to use the same component for both large rows and spoiler rows, but with slight variations. To achieve this, we can pass in an additional prop called `isLargeRow` to our component.

By default, this prop will be set to `false`, but we can override it by passing in a `true` value. When we do this, our component will use the larger row styles and layouts. We can also add some conditional logic to our component to determine which style to use based on the input prop.

For example, if we're using a large row, we want to display the poster image instead of the backdrop image. To achieve this, we can use a simple string concatenation technique to apply different class names based on the input prop.

**Styling our Row Component**

To style our row component, we need to add some CSS rules that take into account the `isLargeRow` prop. We can do this by applying different styles to rows that have the larger row class applied.

For instance, we can set a max height of 250 pixels for large rows and slightly increase their size compared to regular rows. We can also add hover effects to make our components more engaging. By using these techniques, we can create a stylish and responsive user interface without having to rewrite our entire component from scratch.

**Conclusion**

In this article, we've explored some essential tips and tricks for building a stylish app using CSS. From setting margins to styling our components, we've covered it all. We've also seen how to use the same component in different ways by passing in props and applying conditional logic. By following these techniques, you can create beautiful and responsive user interfaces that engage your users.

"WEBVTTKind: captionsLanguage: enwow it's really sick right you get a really nice user interface and you get bigger posters at the top and guys this is all using the same component so i really want to stress that what i'm going to do now is i'm going to create a row.css file so i think i might be able to say row.css nice yep so we create a row.css and if i go to the top and i import that file so this is a benefit of using components because now we can only we can have all of our uh row css inside of uh its own file which is neat so let's go ahead and actually style that so let me just check something so row right so what we need to do here is basically i'm going to actually so all of these posters right i want to just style them a little bit so i'm going to go here i'm basically going to say all of the row posters i want to do a neat little trick so i want to say the width is going to be a hundred percent right so it's only going to use up 100 of the screen um rather than what doing what it's doing now so you see now it's corrected and it's sort of fitting within the screen right oh i'm also going to add another rule so i'm going to say object fit so this is a really trick object fit contain will keep the aspect ratio so regardless of how i move it and shape it and size it it's going to keep that looking really really nice thing i want to do okay yep is is it is it working your object contain thing yeah so the reason why it's not changing anymore is because remember the width is 100 so it's good so it's using up 100 but aspect ratio is still correct but where that comes into play is when i actually say a set of max height so here if i say max height of 100 pixels and i save this now check this out oh nice okay so we have a quite a nice looking thing there yeah what we're trying to get it to just so we can all visually see it is like we're trying to get it to look like this you know but right now we have right now we have a giant column but essentially we need to turn it into a row like that yeah so the way we do that now is if we go to remember we actually surrounded all everything inside of a container called row posters right so i'm gonna go ahead this thing is in a container called row posters and so basically what we're gonna do is maybe drop in flexbox and then make it like all column based so flexbox will allow us to just do it with like literally two lines and then boom we'll go from column to a row yeah so if we i'll comment it out and then i'll uncomment it and show what it does so let's have the app running so the locals yeah so without flexbox it does this if as soon as i add flexbox into the container look what happens boom so there we go remove that flexbox let's see that in action again that is sick so flexbox is so nice you guys it makes your life so damn easy do that again exactly so as soon as i uncomment that look boom it's gonna just change everything so now we actually have a really nice starting point everything's looking good um i guess what we should do next is i like to add a little sort of transition effect to the poster so that way if it ever changes size it will do it in a really slow way so that's basically just saying if we ever change the size for any reason add a little transition so it basically just takes four i think that's four and a half so 450 so it's like just under half a second i think um and they'll basically just nicely sort of change size um and then what i'm going to do is i'm going to add a margin right to everything so right now you see all the pictures are touching each other right yeah everything's touching each other but we kind of want to have this oh remove that again so do it a few times whenever you do these changes do it a few times like repeat it a few times so you can visually see it yeah nice okay love that you see that it's a really nice sort of effect right and then it sort of then it stops everything from touching um nice and what we're gonna do next is we're also gonna add a hover effect so i'm going to go over here and i'm going to say row poster oops and i'm going to say when you hover over it yeah i want to do the following so i want it to kind of grow a little bit right so i want to say here when you say grow what do you mean by that you mean like so when you say row row you literally mean this thing right when i hover over this boom does that nice little so basically now what we're trying to do is build that experience in our app because ours doesn't have that when i hover over it just kind of very static sits there but we want ours to grow exactly that and right now what we want to do is remember we added that transition so it means if we ever change the size it's going to actually so anytime we use the transform effect so i'm going to use that here so i'm going to say transform and scale to 1.08 of your size which is just like a sweet spot yeah it's a very light light light amount so i just tested this out before so it's a very light light sweet spot here and then we're going to say opacity one um so that i can actually get rid of i don't need that right now um yeah so what we're going to do now is if we go over it because i've combined this with transition so i'm saying apply a very small delay so don't just pop up and be bigger so we'll show that effect in action so if you just hover over oh look at that that is really nice remove that trash if i get rid of the transition look what happens it'll snap so that oh that looks clunky yeah it looks horrible right but if you had a slight delay this transition then look how silky smooth it looks oh that is silky smooth but with so little like that and that thing right there that is nice it's crazy right that is beautiful so on hover you guys that's what's happening that's cool and the actual app the header and everything stays there and just this thing moves um and also just that row moves actually i just realized nothing else moves just that road that's really cool so here this entire app moves rather than the row yeah so we want to keep it we want to kind of keep that straight forward there so the way we do that is we go over to our container uh which is row posters and we add this rule here we say overflow y should be hidden so that's we're saying the vertical axes if there's any sort of room to for for a little scroll bar but we want to hide that and then we're going to say the x axis should now be a scroll right so now look what happens yeah it threw in a scroll bar nice that is so clean all right that a padding of 20 pixels so that when it grows it's gonna grow and you can see the growth so that now if you hover over it and now it doesn't crop you see that it's not cropping the tops off yeah right but if i get rid of that padding look what happens yeah it's going to crop it zooms in and it crops out yeah i see i see what you're saying yeah you have to like if you're going to do a transform you're going to have to pad your container yeah so that's the first thing but if you notice in netflix like in our clone we didn't have that little scroll bar because to be honest it looks a little bit ugly right yeah that's why yeah yeah so what you need to do is you need to basically do this special rule you need to say row posters uh so row posters and then you say colon codon and you say webkit so it's webkit so i think it's dash webkit and then it's dash scroll bar and then here you basically are saying your bait this is basically a rule to say tell all of the browsers so whether it be in edge chrome firefox whatever you're using display none so this is saying don't ever display your scroll bars but keep the functionality of it nice that is clean no more scroll bars so that way it looks really nice right yeah so that's that's really cool so then we get that working and everything sort of nice in that front now what we're going to do and this is going to blow your mind a little bit so we've basically just set up the row right we've set up a row it seems to be all good everything seems to be nice um what we're going to do is we're actually going to do a little optimization here so in react whenever we render a big list so in this case i know it doesn't sound like a lot but when you've got 20 items in a row and then you've got a bunch of those rows we should be rendering it in the most efficient way and react has something called a key right and here if you pass you just need to pass some unique information here which is unique to that specific in our case each of those pictures we need to give it like an identity right so that way if anything changes in that row react doesn't simply re-render the entire row it just re-renders what it needs to re-render right so and what we can do here is we can say movie dot id because each of those movies that came back actually had their own id yeah so we can go ahead and do that and that will fix it for us so if i do this and save it now what you can see is it you wouldn't know it's much but it's actually a slightly bit faster than what it was before nice right so it's a small optimization step that you do so we're going to have a little bit of magic here where we're basically we've just built a bunch of components and we built in such a way that it's going to be really impressive to show you something now so if i go ahead and i just paste these components out so inside of the app the really nice thing now is we have a bunch of different categories so we've got trending now we have top rated so top braided just to be clear i'm gonna say here so they can see it so we have top rated which is going to be this category right here what's the next i think it's action movies action movies right there there's comedy movies yep then it's horror movies there we go and here what we're going to do is we are going to add in the appropriate requests so this is another example of if you build something right it's actually going to be very easy and it's going to make your life super easy when it comes to doing it i just need to get the request to my screen because i don't get the auto complete uh some reason um so let me go ahead and open up requests so now let's go ahead and pop these in so we've got fetch top rated so this one's top rated fetch and guys you can start from the bottom and i'll start from the top uh you can start popping them in if you want follow us i'll stop following you oh yeah so fetch action movies comedy and horror movies there we go so that one's documentaries and that one's because this is how you guys are going to see it so romance that one is yep and then the final one is horror movies so i think let's swap this one out so this one is dot uh fetch horror movies awesome uh now if i just click save the whole app the whole half is literally gonna do his magic oh that's so cool that just worked just clean it just works look at that hover over it so nice yeah so now what we're gonna do is let's go over to app.css so when you actually start off guys i want you to get rid of this stuff so go ahead and clear out after css it will change the look and feel of your app but we don't want to have anything inside of our app what i would recommend is you go inside here and you add this one rule which does this we say margin 0. so because by default the browsers give you this weird margin so if you notice on the right where cause he's got the preview open as soon as i add this wrong i save look at the imaginary margins are going to disappear right see that it gets rid of all those imaginary margins right and we just don't want those to start with because we don't want to deal with them um so that's something just a side note you want to get i love that just get rid of that stuff and then that way all of your styling is going to be all of your actual styling it's not going to be getting rid of things index.css you can leave this stuff this is just going to be some fun stuff so unless you change the fonts i'll just keep this um css i would change okay so now with that said we've got a nice looking app but uh if you know it's the app that we saw earlier uh so we had the the netflix originals were bigger than the trending now top braided so we had larger tiles so notice how the those you see the tiles here are bigger right so let's go down so notice how the tiles are bigger and also if you look a bit further down you'll see on trending now we don't actually have uh the posters we have these other thumbnails right yeah yeah so we need to fix this and but we want to use the same component but we just want to have a slight variation what i'm going to do now is i'll show you how we can actually do that so for that bigger one what we're going to do is we're going to pass in a is large row so is large row right and by default what this means is it means true but you don't actually have to write that um so we're going to pass this in so if we go over to row i'm going to go and pull in that prop so we're pulling that in and now i'm basically going to render the styles based on this so the first difference i want to have is rather than having a poster i want to have it so that if the if we're using a large row don't use the poster part but use the back is something called the backdrop part so what i'm going to do is i'm going to say if you're using a large row then use the poster path otherwise use the movie dot backdrop path and this will make sense in a sec when we save it so as soon as i save this notice on the right now all of the trending now top rated and everything look what happens you see that looking nice yeah but the sizing is is the opposite way now so we want those to be smaller and the other one to be a bit bigger right yeah so the way we fix that is we go over to our row.css and i just need to do a few different rules now so firstly i need to apply a class name based on which one was actually coming in so what i'm going to do here is i'm going to do some string concatenation so i'm going to do this so i'm just going to do a little change a tweak here i'm going to say everything gets a row poster class everything gets the original roll poster but if it's a large row so if it's a large row then i'm going to give it an additional sort of class called roll poster and what this is going to do is we're going to style it basically and say you get the bigger styles if you are a larger row right so if we go into row.css now i'm going to say is that the larger rows are going to get a max height of 250 pixels but they're going to get slightly bigger so if you see the normal rows got 100 pixels but the bigger one is going to get a 250 pixel limit so this is going to be the netflix original one yeah so now you see that right yep they're a bit bigger and then we go over here and we say row and then i'm going to add another hover rule so just like we done here but instead i'm going to say this one gets a slightly bigger hover so it's not naught point it's one it's not point zero eight it's point zero nine instead right oh and this one so now check this out look at that so now if you do that it's really thick right you get a really nice user interface and you get bigger posters at the top and guys this is all using the same component so i really want to stress that so now we have a oh just by passing in one prop we can differentiate if if that row is a large row or if it's a spoiler youwow it's really sick right you get a really nice user interface and you get bigger posters at the top and guys this is all using the same component so i really want to stress that what i'm going to do now is i'm going to create a row.css file so i think i might be able to say row.css nice yep so we create a row.css and if i go to the top and i import that file so this is a benefit of using components because now we can only we can have all of our uh row css inside of uh its own file which is neat so let's go ahead and actually style that so let me just check something so row right so what we need to do here is basically i'm going to actually so all of these posters right i want to just style them a little bit so i'm going to go here i'm basically going to say all of the row posters i want to do a neat little trick so i want to say the width is going to be a hundred percent right so it's only going to use up 100 of the screen um rather than what doing what it's doing now so you see now it's corrected and it's sort of fitting within the screen right oh i'm also going to add another rule so i'm going to say object fit so this is a really trick object fit contain will keep the aspect ratio so regardless of how i move it and shape it and size it it's going to keep that looking really really nice thing i want to do okay yep is is it is it working your object contain thing yeah so the reason why it's not changing anymore is because remember the width is 100 so it's good so it's using up 100 but aspect ratio is still correct but where that comes into play is when i actually say a set of max height so here if i say max height of 100 pixels and i save this now check this out oh nice okay so we have a quite a nice looking thing there yeah what we're trying to get it to just so we can all visually see it is like we're trying to get it to look like this you know but right now we have right now we have a giant column but essentially we need to turn it into a row like that yeah so the way we do that now is if we go to remember we actually surrounded all everything inside of a container called row posters right so i'm gonna go ahead this thing is in a container called row posters and so basically what we're gonna do is maybe drop in flexbox and then make it like all column based so flexbox will allow us to just do it with like literally two lines and then boom we'll go from column to a row yeah so if we i'll comment it out and then i'll uncomment it and show what it does so let's have the app running so the locals yeah so without flexbox it does this if as soon as i add flexbox into the container look what happens boom so there we go remove that flexbox let's see that in action again that is sick so flexbox is so nice you guys it makes your life so damn easy do that again exactly so as soon as i uncomment that look boom it's gonna just change everything so now we actually have a really nice starting point everything's looking good um i guess what we should do next is i like to add a little sort of transition effect to the poster so that way if it ever changes size it will do it in a really slow way so that's basically just saying if we ever change the size for any reason add a little transition so it basically just takes four i think that's four and a half so 450 so it's like just under half a second i think um and they'll basically just nicely sort of change size um and then what i'm going to do is i'm going to add a margin right to everything so right now you see all the pictures are touching each other right yeah everything's touching each other but we kind of want to have this oh remove that again so do it a few times whenever you do these changes do it a few times like repeat it a few times so you can visually see it yeah nice okay love that you see that it's a really nice sort of effect right and then it sort of then it stops everything from touching um nice and what we're gonna do next is we're also gonna add a hover effect so i'm going to go over here and i'm going to say row poster oops and i'm going to say when you hover over it yeah i want to do the following so i want it to kind of grow a little bit right so i want to say here when you say grow what do you mean by that you mean like so when you say row row you literally mean this thing right when i hover over this boom does that nice little so basically now what we're trying to do is build that experience in our app because ours doesn't have that when i hover over it just kind of very static sits there but we want ours to grow exactly that and right now what we want to do is remember we added that transition so it means if we ever change the size it's going to actually so anytime we use the transform effect so i'm going to use that here so i'm going to say transform and scale to 1.08 of your size which is just like a sweet spot yeah it's a very light light light amount so i just tested this out before so it's a very light light sweet spot here and then we're going to say opacity one um so that i can actually get rid of i don't need that right now um yeah so what we're going to do now is if we go over it because i've combined this with transition so i'm saying apply a very small delay so don't just pop up and be bigger so we'll show that effect in action so if you just hover over oh look at that that is really nice remove that trash if i get rid of the transition look what happens it'll snap so that oh that looks clunky yeah it looks horrible right but if you had a slight delay this transition then look how silky smooth it looks oh that is silky smooth but with so little like that and that thing right there that is nice it's crazy right that is beautiful so on hover you guys that's what's happening that's cool and the actual app the header and everything stays there and just this thing moves um and also just that row moves actually i just realized nothing else moves just that road that's really cool so here this entire app moves rather than the row yeah so we want to keep it we want to kind of keep that straight forward there so the way we do that is we go over to our container uh which is row posters and we add this rule here we say overflow y should be hidden so that's we're saying the vertical axes if there's any sort of room to for for a little scroll bar but we want to hide that and then we're going to say the x axis should now be a scroll right so now look what happens yeah it threw in a scroll bar nice that is so clean all right that a padding of 20 pixels so that when it grows it's gonna grow and you can see the growth so that now if you hover over it and now it doesn't crop you see that it's not cropping the tops off yeah right but if i get rid of that padding look what happens yeah it's going to crop it zooms in and it crops out yeah i see i see what you're saying yeah you have to like if you're going to do a transform you're going to have to pad your container yeah so that's the first thing but if you notice in netflix like in our clone we didn't have that little scroll bar because to be honest it looks a little bit ugly right yeah that's why yeah yeah so what you need to do is you need to basically do this special rule you need to say row posters uh so row posters and then you say colon codon and you say webkit so it's webkit so i think it's dash webkit and then it's dash scroll bar and then here you basically are saying your bait this is basically a rule to say tell all of the browsers so whether it be in edge chrome firefox whatever you're using display none so this is saying don't ever display your scroll bars but keep the functionality of it nice that is clean no more scroll bars so that way it looks really nice right yeah so that's that's really cool so then we get that working and everything sort of nice in that front now what we're going to do and this is going to blow your mind a little bit so we've basically just set up the row right we've set up a row it seems to be all good everything seems to be nice um what we're going to do is we're actually going to do a little optimization here so in react whenever we render a big list so in this case i know it doesn't sound like a lot but when you've got 20 items in a row and then you've got a bunch of those rows we should be rendering it in the most efficient way and react has something called a key right and here if you pass you just need to pass some unique information here which is unique to that specific in our case each of those pictures we need to give it like an identity right so that way if anything changes in that row react doesn't simply re-render the entire row it just re-renders what it needs to re-render right so and what we can do here is we can say movie dot id because each of those movies that came back actually had their own id yeah so we can go ahead and do that and that will fix it for us so if i do this and save it now what you can see is it you wouldn't know it's much but it's actually a slightly bit faster than what it was before nice right so it's a small optimization step that you do so we're going to have a little bit of magic here where we're basically we've just built a bunch of components and we built in such a way that it's going to be really impressive to show you something now so if i go ahead and i just paste these components out so inside of the app the really nice thing now is we have a bunch of different categories so we've got trending now we have top rated so top braided just to be clear i'm gonna say here so they can see it so we have top rated which is going to be this category right here what's the next i think it's action movies action movies right there there's comedy movies yep then it's horror movies there we go and here what we're going to do is we are going to add in the appropriate requests so this is another example of if you build something right it's actually going to be very easy and it's going to make your life super easy when it comes to doing it i just need to get the request to my screen because i don't get the auto complete uh some reason um so let me go ahead and open up requests so now let's go ahead and pop these in so we've got fetch top rated so this one's top rated fetch and guys you can start from the bottom and i'll start from the top uh you can start popping them in if you want follow us i'll stop following you oh yeah so fetch action movies comedy and horror movies there we go so that one's documentaries and that one's because this is how you guys are going to see it so romance that one is yep and then the final one is horror movies so i think let's swap this one out so this one is dot uh fetch horror movies awesome uh now if i just click save the whole app the whole half is literally gonna do his magic oh that's so cool that just worked just clean it just works look at that hover over it so nice yeah so now what we're gonna do is let's go over to app.css so when you actually start off guys i want you to get rid of this stuff so go ahead and clear out after css it will change the look and feel of your app but we don't want to have anything inside of our app what i would recommend is you go inside here and you add this one rule which does this we say margin 0. so because by default the browsers give you this weird margin so if you notice on the right where cause he's got the preview open as soon as i add this wrong i save look at the imaginary margins are going to disappear right see that it gets rid of all those imaginary margins right and we just don't want those to start with because we don't want to deal with them um so that's something just a side note you want to get i love that just get rid of that stuff and then that way all of your styling is going to be all of your actual styling it's not going to be getting rid of things index.css you can leave this stuff this is just going to be some fun stuff so unless you change the fonts i'll just keep this um css i would change okay so now with that said we've got a nice looking app but uh if you know it's the app that we saw earlier uh so we had the the netflix originals were bigger than the trending now top braided so we had larger tiles so notice how the those you see the tiles here are bigger right so let's go down so notice how the tiles are bigger and also if you look a bit further down you'll see on trending now we don't actually have uh the posters we have these other thumbnails right yeah yeah so we need to fix this and but we want to use the same component but we just want to have a slight variation what i'm going to do now is i'll show you how we can actually do that so for that bigger one what we're going to do is we're going to pass in a is large row so is large row right and by default what this means is it means true but you don't actually have to write that um so we're going to pass this in so if we go over to row i'm going to go and pull in that prop so we're pulling that in and now i'm basically going to render the styles based on this so the first difference i want to have is rather than having a poster i want to have it so that if the if we're using a large row don't use the poster part but use the back is something called the backdrop part so what i'm going to do is i'm going to say if you're using a large row then use the poster path otherwise use the movie dot backdrop path and this will make sense in a sec when we save it so as soon as i save this notice on the right now all of the trending now top rated and everything look what happens you see that looking nice yeah but the sizing is is the opposite way now so we want those to be smaller and the other one to be a bit bigger right yeah so the way we fix that is we go over to our row.css and i just need to do a few different rules now so firstly i need to apply a class name based on which one was actually coming in so what i'm going to do here is i'm going to do some string concatenation so i'm going to do this so i'm just going to do a little change a tweak here i'm going to say everything gets a row poster class everything gets the original roll poster but if it's a large row so if it's a large row then i'm going to give it an additional sort of class called roll poster and what this is going to do is we're going to style it basically and say you get the bigger styles if you are a larger row right so if we go into row.css now i'm going to say is that the larger rows are going to get a max height of 250 pixels but they're going to get slightly bigger so if you see the normal rows got 100 pixels but the bigger one is going to get a 250 pixel limit so this is going to be the netflix original one yeah so now you see that right yep they're a bit bigger and then we go over here and we say row and then i'm going to add another hover rule so just like we done here but instead i'm going to say this one gets a slightly bigger hover so it's not naught point it's one it's not point zero eight it's point zero nine instead right oh and this one so now check this out look at that so now if you do that it's really thick right you get a really nice user interface and you get bigger posters at the top and guys this is all using the same component so i really want to stress that so now we have a oh just by passing in one prop we can differentiate if if that row is a large row or if it's a spoiler you\n"