Build It Live: YouTube Video Page Rebuild in Tailwind CSS

what is going on guys in this video i'm going to do a fantastic breakdown of how to rebuild the youtube video page entirely intel in css so telon css is this incredibly fast efficient platform that i've been using as well as a lot of other people to rapidly prototype and build websites it has both the functionality of like traditional uh css uh platforms like you know bootstrap and stuff like that while also allowing you to create what are called like custom utility classes so you so that you can get the best of like traditional css and a lot of these you know next-generation platforms this is really sweet kind of like multi-functional multi-purpose prototyping uh framework and it's like super popular it's now one of the most popular css frameworks of all time and i'm pretty sure it'll soon surpass bootstrap if it hasn't already so i was initially wanting to do this video as a live stream however uh turns out on youtube you need to like verify your account after 24 hours or some crap like that so i can't actually do that instead what i'm going to do is just pre-record this and then in the future i'm going to try and stick to once per week uh of this like stream tail and css build stuff because i think it's just like really good practice for me to continuously build websites and tailwind css and also for people that are watching that may have this weird i want to say like over inflated view of how web development works because all these people out there that show you guys how to like build something from scratch usually have another monitor hidden away that they're like glancing at and copying and pasting stuff through and that is not a good way to learn that's like pretty inefficient if you think that oh my god like he just seems to know everything that's going on so fluidly i'll get there one day uh you're set up for i guess failure my goal here is to be super realistic show you guys and kind of think out loud while i'm rebuilding this whole thing and i'm going to do it totally from scratch right in front of you so this is the video page that we're going to try and like build it's pretty simple i guess you have this nav bar up at the top and that nav bar has a search feature and you know there's like little uh little buttons and icons and stuff like that we're not gonna have the exact buttons and icons we're gonna go for something that's pretty similar but it looks like it's a little bit lighter than what we have in the background backgrounds a little bit darker we have this huge video div and then it looks like this is split into two columns honestly so the left column

column this could be a grid build so grid is like a way to set content up on the page tailwind css has this really simple grid class that i love using i definitely prefer to go to flexbox i'm a grid boy uh and yeah it looks like this split up into like five or so grid calls and then on the right hand side you have one column and then the left hand side you have four so this should be pretty simple to build although i always do say that before it is like not simple to build so i will go from there i'm going to use nuxt as the platform that i'm doing the build on so let me go over to here this is like the app that i'm using right now uh you don't actually need to use nux you can use whatever the hell you want i'm just using nux because i'm super familiar with it super easy the actual html css part i'm going to be doing entirely in one giant ass file so yeah it's not like you know best practices or anything like that you can imagine how you'd refactor that later into several components for uh for your own purposes but anyway if you do want to follow along with exactly everything that i've set up here all you need to do is uh create go into a new folder type npx create nux dash app that is an npx executable so it'll execute this create next app uh program essentially this command line program and it'll build an entire like next workflow for you after that go over to tailwind css. com and just follow the instructions for how to install tail and css with nux. js that is literally it that's everything that i've done and that's how i built this you know page this is just the uh the example that we have here so i'm actually going to just be really cheeky and just tab back and forth between the two some people don't like doing that they're like having a separate monitor but i want to show you guys exactly what my actual workflow is like we have this tutorial div i will actually just get rid of that and then instead i'm just going to go bg black with full h full for now and then i will just save that and we will reload it in the bottom right hand corner you can see this nux like build thing will reload it'll basically show you the progress of uh you know every reload and i think i've already made a mistake of some kind because we don't actually see anything so let me go with fall h screen and then yeah i don't actually need this export default anymore so i'm just gonna get rid of that okay cool so now we know that our tailwind classes are working this is just a sanity check awesome everything is good to go uh you notice that the background of this stuff isn't actually black it's kind of like dark gray almost so i will go in here and i don't know if our gray is going to work because it's like kind of blue but we'll just roll with it for now let me see yeah it's definitely way too blue so you know what i'm going to do i'm actually just going to look how i'm like hey we're going to use tail and css here but i think i'm going to make a new class and call it and this is not best practice either i'm going to call it bg gray and then like 1000 and then the background color of this is just going to be like super dark but not completely black let's do that let's just go that just for completeness sake so yeah there you go that is much more realistic cool so this is going to be like the background div and then i will have to use like those gray classes uh and eventually i'm probably just going to like make you know change something the tail when configs that is set up and you can see i'm using this like code completer called codex is like this artificial intelligence you know software which essentially goes through and it predicts the most likely next sequence of uh characters so it kind of helps your code out quite a bit i actually probably produce you know 30 i want to say 30 of all of my code with codex now it's a fantastic partner but for web development stuff particularly that's more creative i tend to shy away from it so yeah i'm just not going to use that this much but you are going to see these like crazy tooltip things i like to just have it around okay so the very first thing we see is up at the very top we have a full width div looks like right yeah full width div and then for now i'm just going to go like h8 and then let's just go actually to make this really simple i'll just go bg green uh 600 and then we will do this and the idea is we're going to be able to like mimic what we can see here yeah there you go that looks pretty good it's actually about like two times as thick let me just make sure this is an actual class yeah it is so we have this div at the very top now the thing about this div is this div uh looks like it's width full and there's like a little bit of padding on the left and the right side so on the left side i don't know it's probably like four right side that's probably like four maybe more maybe like five or six so what i already know right off the bat is this is just gonna need a little bit

of padding so i'm gonna go into the element here and just do like a px5 and we'll worry about mobile optimization stuff like that later so what this means now is everything is like pushed in a little bit uh from the left and the right side px standing for like padding on the x-axis so now that everything is pushed in a little bit i'm going to start creating the divs and then i'm just going to outline them so that they're going to be in like these crazy simple colors and then after i've outlined them and kind of like scaffolded the page i will actually start creating these specific elements so it looks like this is flex aligned this is justified between so everything is as spread out as humanly possible and there are three like top level divs the first pushes everything to the left then you have this one in the center and then you have another one on the right so first thing i know right off the bat is i'm going to add a flex class to this then i'm going to go justify between and then i'm also going to and i just i always do this basically all modern design almost all the time will have like an items center class as well and so the flexes can flex everything just by between is going to push everything out as far away as possible each other the item center is going to center it vertically so then i'm going to create three divs the first div i'm going to do i don't know let's just add some explicit width parameters here to make it really simple let's do a width one third and i'm going to make this bg blue 500 and then let's just copy that twice good so now we have a bunch of blues and then i'm just going to change this to red and then i'm orange so the class yeah orange is actually class now uh oh and i think one thing that i should add as well is h full so i just want this to like stretch vertically as much as seemingly possible okay great so now we have these three different containers basically and you know they're not perfectly aligned and that's okay we'll fix that later uh you see how this padding is almost perfect but it looks like it needs a little bit more so just right off the bat i'm going to change that to like a px8 for example i'm going to go back yeah there you go that looks better let's say that's much closer to what it actually is like okay and now i'm going to remove the explicit width properties and then focus on one individual div at a time so on the left div here you have what looks like an svg i'm not going to do like the functionality or anything like that you're just going to get the svg here and it looks like it's just a hamburger menu then you have the youtube logo which is just an a tag so that's like a clickable link you can tell it's a clickable link because when you hover your mouse over it you see like a clickable thing in the bottom left-hand corner and uh yeah we can actually source uh i think the hamburger icon uh really simply and then this youtube logo can just be sourced i believe from youtube yeah i'll just google it so let us dive into this here i'm going to create uh and it looks like these are by the way just stacked side by side so this would be flex as well and we can just add a space class to add a little bit of space between the two i don't know how much there is maybe like space x4 it's probably good you'll notice there's a lot of back and forth this kind of stuff like i will do it then i'm like oh it doesn't really look like i want it to look then i'll go back and i'll do it again and so on and so forth and because i'm adding a flex class i'll also go item center just like i always said do so the first thing is i'll have an svg let me just add a little placeholder here and then i'll have an a tag and it looks like my auto linting or not linting uh auto completion thing isn't working right because normally these tags all just close by themselves but stuff like that's a massive productivity increase especially when you're doing a bunch of this front-end heavy stuff first thing i'm gonna do is i'll go to heroicons they are this is actually made by the people that made tail and css i believe steve shroger i think is his name and he is a really cool guy we'll just type hamburger yeah and then we have a menu here so i'm just going to copy the svg paste this svg right here and i'm also like reformatting every couple seconds it looks like this is white so i'm going to go into the class i'll go text white and then fill current although i don't actually think i need that fill current right now i'm going to remove the blue class and then yeah that should be the svg we'll screw around the size later and then the a tag i'm going to go image and then i'm going to just accept an explicit link to the youtube logo so it should be here and we want it to be so this youtube logo is white so we see is this a black background this is and we can't use that uh youtube logo white transparent let's see if we can just get something really simple and then if we go back here like what does this actually look like um music no yeah it's kind of annoying ah yeah it really sucks i don't actually know if we can just get that i mean this is you know what this is probably an svg if it's on youtube so maybe we can just like select it explicitly give my uh computer a bit of time it is doing like 8 trillion things right now so let's see if we can just you know explicitly just click on this thing and then go in and then yeah it turns out it's an svg so i'm just going to copy this svg and then put this in the a tag instead of an image then i'm going to save this and then close these two to hide my shame and then uh and see what happens there so never mind it actually looks like there's some issue with the youtube logo and it doesn't want to show up so why is that it's probably because of all these custom classes actually ugh that's so annoying let me just see if we can make this work by setting explicit width properties so let's do with uh 32 then height uh i don't know i'm like eight or something i don't know what the aspect ratio that would be and then if it does work great if it doesn't that's okay too okay yeah it does look like that works uh oh no we gotta make the text white so let me go text white and see if this works yeah probably not because it sets explicit uh with properties let me see if i can invert svg with tailwind i believe this only applies on images maybe not if it doesn't then this will be great we will do invert and then we'll see if this is going to work if soto and does a godsend oh my goodness wow that actually yeah that worked so what we're going to do is we're going to try and invert not the youtube icon we're gonna try and invert the text where it says youtube so i'm pretty sure this is the second g here so let me uninvert the first thing try invert the second thing and then i'll save this and reload cross your fingers boom okay great it worked awesome so what i can do now too is i can remove this green background here i don't actually need it because i'm pretty sure we yeah we got probably 70 of that done oh crap it looks like i deleted the youtube page so let me open that back up drag that over here and then pause this video thank you mark okay great so yeah this is what uh ours looks like this is what theirs looks like so it looks like theirs is a little bit smaller so we're going to go to that svg for the youtube logo where the heck is that suv youtube logo let me fix this right here and then we're going to make the width like 20 i don't know let's see what values we have available 20 8. let's try that okay so i got a little bit smaller so it needs to be smaller now let's go 24. then we'll also see that this uh this is a little bit like this is much thicker than what we have on the left so i'm going to just make the text a little bit uh gray rather than pure white and i think that'll help fix so we're going to say text gray let's do like 100. so actually we can just go text white and then we can go opacity like 90 instead that way it'll take on some of the color of the background instead yeah there you go that's like a little bit less uh noticeable and then the spacex will pump up to six instead of four so there you go that looks a lot better awesome so that is like the first little section here done oh the last thing i want to do actually is i just want to do href and then i'll add a little hashtag there that's going to make this thing hoverable it's going to change the thing when i uh hover over it okay apparently not um let's just see if maybe it is the fact that it is a link to nowhere or maybe it's the fact that this is uh like hidden underneath something let me see if that might be it yeah there you go that's it was actually hidden underneath so yeah you know now we get like hover we get a little thing to click we don't actually going over the hamburger icon i'm not sure if we do on youtube yeah so let me do that on here as well really easy way to just add something on top of it you just go to emit wrap with abbreviation if you're using vs code then you can just type an a and then yeah it's automatic so i'm also going to add another class z10 is just for z and x so if things are on top of each other this just brings it to the front level z10 uh will bring will be higher than z zero z20 z10 below z30 will be higher than z20 and below and so on and so forth so yeah okay now we have something that like resembles our youtube thing pretty well except for that ca thing but that's canada so screw canada uh next up we're going to build this little input field looks like

we have this search based off the top of my head i believe it is a yeah this is just two divs that's all you have an input div here and then input div stretches all the way at the end and then you have a little button and that button is as you see when you mouse over it you get that kind of like you know cursor pointer thing this would be pretty easy to do the inside of the input would just be a little bit darker and then this would be wider and then there'd be this svg inside so let's do that cool now that we're done with that left div i'm going to go all the way down to my bg red 500 right over here and then i'm going to remove the background i'll also remove the width i'll keep the h follow and then i'm going to build an input and i'm just going to go type text let's just see what that looks like i uh yeah so it's all the way up here cool so i'm going to flex justify center item center so i want to justify to the center whatever this div is and i also want it to like be kind of in the middle here rather than all over the place so if i refresh this sometimes my uh rebuild thing looks kind of weird but yeah there you go that looks uh pretty small but still pretty good okay a couple things that we see right off the bat there's a little outline on it so if i click on this that weird little black white outline thing comes we can remove that by going focus outline none also the background color is white right and we don't want white we want this color we want like darker so i am going to cheat again and just make a background 900 class and then go here and just make it a little bit lighter let's do that that's cool and then if we go over here we can go background gray 900. yeah that's going to lighten up this little top bar just a tad oops sorry i actually use that on the wrong thing we want to use it on the uh the main bar here so bg gray 900 and then down here we don't actually want anything on there it's on the input that we want the bg uh gray i don't know i'll go bg white opacity 20 for now i think let's see if that works just to get a visual understanding of what the page would look like yeah no it's actually darker so my bad this is going to be bg gray a thousand there we go this is actually going to be the same color as uh what's down there it's annoying i have to refresh us but is what it is cool now we got to deal with the height so this is h full but the uh child container isn't so we'll add some padding let's do three so let me see what that looks like with three on and it's a little bit too big so we'll stick with two and then let's go hmm i have a feeling this has an explicit width property set might just be a third of whatever the container is no it doesn't look like it looks like it's just an explicit width property set let's try for a width 128 just for now and let's see how wide that is let me give this bad boy a little refresh so let me just try for with full too and see if that changes anything also kind of annoying i still have an outline here even though i went focus oh geez i did it on the apparent div that's why okay might just be that there is no with 128th class yeah there you go that was y so there's actually no width 128 class you can add that in if you want uh this looks yeah it's pretty big let me see what the biggest width class is here so there is no width 128 so instead what we're going to do is we're going to go with max width let's do like 2xl here i think that'll probably be wider oh maybe you know maybe like 4xl and then with fall so we're going to push up against the max width limit and then let's just go with full as well so this takes over as much as humanly possible refresh that uh yeah that looks pretty good we're gonna go down to like three though okay never mind we're gonna go to excel so it turns out the issue is that uh initially i just didn't set up the width right okay cool that looks pretty close now that we have this we can add our button and the background is going to be much lighter let's do bg gray like i don't know 800. good god i'm destroying so many coding conventions here all right i swear if i have to do this one more time then that's it man we're just adding these to tailwind straight up and i'm eating my words it's funny because that is literally what happens every single time you work on a project you're like what would the cost be time wise or just like adding this in uh you know like the proper way and then you're like ah i would take too long screw it and then you don't do it and then later on you're like man i just spent like 10 hours having to deal with the fallout of that crappy decision like good lord so yeah it's just a little bit of my life uh okay so what did we call that bg gray 800 let's do px4 py i want to do the same size as this we'll do two and then inside uh i'm just going to make it like another flex box because i like using flexbox and tiny divs like that we're gonna go search there you go there's the svg paste that in there format it we'll go text white and i think that size is probably okay for now yep yeah that's pretty good so you know obviously we're a little bit ways away there's some more stuff that we need to do you'll also notice how this is being pushed over to the left more and that's just because of the size of this div so when we fix the size of that div this will be centered more or less perfectly so a couple of things that i see a little border that border is just a little bit lighter than everything else it's also slightly rounded so i'm going to go back to my input here i'm going to go rounded we'll do sm and we'll go border yeah border 2 i think that might be a little bit too wide and then we'll go um let's go border grade 200 border opacity 50. that might look decent let's see here oh yeah way too thick so instead of 200 we're gonna go like 400 and then we're gonna go border opacity uh 40 and then we're just gonna go border and that should be much closer yeah we can even drop that down further like 20. yeah there you go okay and then there's a placeholder here that says search and it looks like there's also some padding if you see when i click uh my little cursor is bumping up right against the right hand side so we're gonna add a little bit of a padding here as well let's go px4 and then right here we're gonna go placeholder and then we're going to say and that should resemble what we have here yeah there you go it's just about the same length issue being the placeholder color was different so you're gonna place folder current and we'll go text white and oh that's actually too bright so instead we're gonna go text white and then text opacity let's do like 70. so about three quarters is opaque let's do 50 screw it a little bit on the wild side cool yeah it looks pretty close i mean the font is different of course and uh you know i like to fix that but i think that's decent for now okay great let's work on this button so this button looks like it's a little bit wider than what i have over here so i'm going to widen this a little bit a little px5 uh is there a stroke width yeah there's a stroke width on the svg so i'm actually going to reduce the width of the svg make that a little thinner and by me making a little bit thinner and increasing the width of that yeah we should be basically one for one so that's pretty good okay cool so this div here is a thing but it looks like there's another div that is right beside it and that other div that's right beside it is where this microphone is so we actually need to create another div nest this div we'll go flex and then we'll just go space x2 and then item center maybe spacex 3 item center and then because we've item centered it and because we've done all that stuff if i were to add another div here so sorry i just want to make sure this has all the same classes with full you know what we can just copy this and then here this would be uh justify center nope we would need that we go spacex or yeah three yeah it should be good okay so i also gratuitously use these h classes just because i set a uh a strict height property manually so you some people really dislike doing that i also don't really like doing that but just for show i decided that i would and later on i'm going to show you how to convert that into uh into a non-explicit height property okay so now it looks like we have a dark background that's a circle so inside of this div i'm going to go class flex justify center item center bg gray let's go to the main background color then i'm going to go rounded full this is going to be a little like rounded circle thing basically i'm going to go with let's do 12 h12 and then inside i'm going to go uh an svg and the s3g is a microphone so if we go back to heroicons we can just go mike or a phone yeah they're a little bit different but i don't really think we're ever going to get the exact same so i'm just going to copy their little cutout mic paste that in there and then let's just bump this up to like h8 with eight and then let's save it reload the page and see what did we do that is what we did okay so it looks pretty good all things considered maybe it needs to be a little bit smaller uh so let me just quickly change the width of that i also forgot to add on a text white class to that to like make it white and then there was an issue where it just like pushed all the way to the end so instead we're just going to justify center try and smack everything as close together as possible which should hopefully make it a little bit better no it's still stretched out as much possible now why would that be probably because of this with full class yeah let me remove the width full and then i bring it in which is okay but then we run into an issue where the search bar is kind of pushed up and then while this is good we also run into another issue where it's a little bit too tall so maybe we can make this even smaller into h10 let me see if that fixes things and i think there's also stroke width we can probably change to one that just seems to be the going theme for this stuff stroke width of one rather than a stroke width of two now still looks like we have this issue i wonder if we were to set the div to be a little bit wider than it is tall if we could just automatically correct for that and make a circle oh wow yeah i think we literally can that's cool okay cool so yeah in terms of size that's basically that the only thing we got to do is we got to change the width of the parent container for this place here and that parent container is which one is that let me just set it to be the same as what the input was although this might push out that right button a little bit nevermind it just does nothing yeah welcome to my life uh let's go mat max with 2xl on the parent and see if we can use that to fix the width that is a no we will set a max width on that parent okay yeah so it does stretch it out this looks like it's a little bit too wide though so i'm going to turn the space x3 to like space x2 instead also i love how tailwind has a class called spacex where every single time i say spacex i'm thinking about like spacex and elon musk it's kind of funny okay next up we're going to go to our bg orange remove that and also remove the explicit width property actually let's set this to like a fifth which is what i think it like actually is and then let's see if this is more centered yeah we can even go more like a sixth remove this bg orange class yeah so like the smaller that this thing gets the more this is pushed in so eventually this will make it perfectly to where i wanted to go okay anyway now we have another div on the right hand side and inside of the div we have four like little uh icons so this is gonna be probably the easiest thing we've done so far so i'm just going to keep the height at full and then i'll go flex space x let's do three and then item center and now we're just going to have like four svgs so it looks like there's this like video icon thing so i'm just going to yeah i'm just going to use this one because i can't and then we're going to yeah it's going to look decent the youtube thing continues getting big every now and then but uh i think that's just an artifact from reloading so a couple things we gotta do here we gotta add text white class to that let's make this a little bit bigger and then let's move on to the other ones while i'm doing it so uh we have this little grid looks like so let me see if there's grid yeah it looks like there's a grid it's four instead of uh nine but that should be okay we also have this height width uh height sixth width sixth thing which i'll fix in a second and then we also have another one here which is a bell so let me see if they have a bell do yeah they have a bell of course they have a bell how could i even ask what a silly question and then we just have a circle with like somebody's face in there and that's really just your profile pic so um for that we could just make a div set it to the same height and width and then set the bg to white i would say it's probably the most realistic and notice that i didn't update the height and width properties here that's because i'm just going to show you a vs code trick where if you just hold ctrl d oh hold on i wanted to make them all happen at the same time but i screwed that up okay cool if you just uh highlight something and press ctrl d it'll select the second instance of it do it again it'll select the third and so on and so forth so we actually want this to be h7 with seven and then we want the text to be white so we can actually do that all the same time by uh just breaking that basically so yeah if we refresh that we will see our icons will become a little bit bigger uh and oh man they look nowhere near as cool as the youtube ones that really bothers me uh and it looks like i also didn't round the container rounded full let's do that um yeah i really don't like the stroke with the two so i'm just going to go through select them all as i've done before and then just change that to a one that should help hopefully i didn't automatically select yeah it looks like i selected the hamburger menu so let me go all the way back up to this hamburger menu and then where i set the opacity of the hamburger menu i'm going to remove that opacity change so hopefully that would look a little more similar and then this is spaced out more obviously so i'm going to go to where i did spacex 2 nope spacex 3 i'm going to spacex 5 instead now let's see that honestly could be even more yeah it's not really anymore looks like the just because they have this scroll bar thing which is a separate div uh it pushes our navigation a little bit more so yeah when we get the page big enough such that we will have that happen then you know we can worry about it then um okay cool so yeah there are a couple little differences you know the width the padding actually looks like i went a little too egregiously strong on the padding so i'm going to pump the padding down from px8 to px7 uh you'll notice that this is a fixed container and there's actually a little bit of opacity behind it so you can actually see like if you zoom in gary vaynerchuk's face his beautiful bearded face so what we're going to do for that is i don't know what are we going to do for that we are going to make it fixed i'll go fixed then i'll go top zero then i will have this be relative and then oh i gotta go yeah actually no i think that's it this should now be fixed excellent yeah this is now fixed uh we can also go bg opacity 90. and then we can remove that gray 900 class we can go 1000 class and then that's probably why it was lighter let me see oh no it's not it's because the background's light so sorry we're gonna go back to 900 here it's actually gonna get darker now refresh this yeah i'd say that's probably about as close as you could get without uh just copying their icons oh another thing we could do is we could wrap all these svgs in a tags because those svgs like if you go back to the youtube thing they're clickable right so that your mouse changes when you have over them so i could just take advantage of uh this wrap thing that i've done before so you just highlight i do ctrl shift p this wrap with abbreviation pops up excuse me click enter and then i press now have like links so if i select that and then refresh to get rid of the artifact um and then oh yeah another thing we got to do is we got to add the uh z10 on that to make it bump out and i think i did this on the button but i have to do this on the individual elements don't i yeah i do so let's try that so now when i hover over it still does not do the thing let me try that okay i think i have officially broke the internet uh cool instead of that i'm just going to go cursor pointer and actually why don't i just go cursor pointer on this instead of that okay never mind um oh jesus oh good lord it's i've been on the wrong button this entire time yeah boom there you go that'll do it okay let me try going z10 on there and then wrapping this in an a tag and then doing that and let me see if that will actually fix things yeah that will fix things good lord i feel silly however that does not uh detract from the fact that we actually did need that button and we also need to do that there on the microphone so i'm gonna assume that the microphone is just a button because uh most microphones are like if you have a microphone functionality you're probably not navigating to a different page or something you're probably actually changing that uh like you know it's some script that runs when you click it like you know opens the microphone feature or whatever so i'm going to do that and let me just remember where i am yeah that looks good let's just change this from a div into a button and then reformat and then yeah there you go cool the artifacts of the reload are unfortunately very annoying and then i'm going to do the same thing i did back there with the a tag it's just i'm going to do that on all the svgs so there's a little bit of housekeeping and if i go back then all of these should work awesome except for my div here which doesn't that's because i just did not i can just make this into an a tag actually there you go cool awesome so yeah i mean that was a fair amount of time where we at now like 40 minutes or something 35 minutes uh to create this title tag or title tag this nav bar you can imagine how the rest of the build is gonna be significantly faster just because we've established a couple of fundamentals like the colors and you know the way that things are laid out looks like they're using flex not instead of grid stuff like that once you've built a design system once you've found resources like places to get you know your buttons and crap like that it's usually a lot easier to uh to build out you know like a system and that's more or less we've done here so in the next video i'm going to cut this one here build out the rest of this youtube landing video page thing and it's going to be a lot faster than you think i'm going to use a screenshot for this and uh i'm not going to have like these little play button stuff i'm just going to use an image there but you can imagine how if you were an actual designer at a big company with a design i'm sorry an actual developer at a big company with like a design and you were handed this lovely landing page as long as you have sufficient knowledge to tell in css you could probably rebuild that in a few hours right it does not have to take that long this isn't like the design days of old where before you even get started you have to completely flesh out like a complete design system from start to finish you can actually just get started prototype something yeah it's not going to be the most efficient but you are gonna get like ninety percent of the way there and then you can send that off to somebody else for that extra ten percent or you can worry about that after you've launched your mvp or something like that so i'd say it's probably one of town's biggest strengths you don't have to worry about like making everything perfect uh the reason why the spacing and stuff like that isn't just like super lined up is because they don't care they say well dude like does it really matter if it's like px 1. 5 versus px2 only if you have like crazy ocd about this stuff otherwise you should just get it out launch it get that mvp out the door and uh you know worry about iterating and refining and stuff like that after awesome that was it for this video i will see you guys in the next where i will build out the rest of this wonderful landing page video thing see you there