How To Design A YouTube Clone With HTML/CSS

by far the best way to learn is to create projects but you don't always have cool project ideas to create so the next best thing to do is to clone existing projects and to create those designs so in this video i'm going to show you how to use html and css to completely clone the youtube site and if you're interested in taking your css skills to the next level make sure you check out my full css course full of different projects linked down in the description below [Music] welcome back to web dev simplified my name's kyle and my job is to simplify the web for you so you can start building your dream project sooner so if that sounds interesting make sure you subscribe to the channel for more videos just like this now to get started you can see i have the actual youtube.com open on the right if i go over to the next tab you can see we have our version of youtube.com and they're very similar they're not 100 you know pixel perfect but i think when you're just learning to code and programming making things pixel perfect really doesn't matter pixel perfect is much more important when you're actually doing design and learning design but in our case we're learning code and programming so as long as you get 99 or 95 percent of it done that's all that really matters so here's our version of it as you can see on the left i have a folder open and i have a few different icons in it these are the icons we're going to use in our application and if you want to get all these icons you can just go to material.io i'll leave a link in the description and this has all the google icons that you need so for example the bell icon right here and you can get all the other icons just search for them and you'll be able to find them so now with all that said let's actually get started and create our youtube clone the very first section i want to work on is this main section with all the videos i think this is the most interesting and the most you know defining part of youtube so i think it's the best place to start so let's create a new index.html file and inside of here if we just hit exclamation point and tab that'll give us our boilerplate emmet code here and then what we can do is actually start styling out the html for this middle section so let's create a div in this div we're just going to give a class here of videos this is going to be for our videos section and inside of here let's just create a section this section is going to be for like a grouping of videos so as you can see here we have a few videos if we scroll down we have this nice line here with some more videos another line and then some more videos below that so this section is essentially everything above a line or in between lines as you can think about it so we're going to give this a class of video section inside of this video section is we're going to put each individual video card which we're just going to make an article and give it a class of video container and that is essentially everything associated with one individual video inside of the ui that's at least the easiest way for me to think about all this so now inside of our video container we have everything we need to essentially start styling out these individual cards so the first thing we need is to have some way to click on the thumbnail so we're going to need an anchor tag we're going to give it a class of thumbnail just like that oops thumbnail and for the href of this we're just going to use the pound symbol because we're not actually linking to anything this isn't actually a functional site with actual videos and actual you know youtube videos we're just going to be doing the design so we're just going to have you know an anchor tag here which says it doesn't link to anything which is fine for our cases next inside of here we actually want to put the image itself so this image oops if i make sure i close that off properly is going to have a class of thumbnail image so we can style this in our css and for the source we're just going to use unsplash for this so we can say http colon slash unsplash dot it slash and then we need to specify the size of our thumbnail we're going to do 250 by 150 so 250 slash 150 and then we're going to make sure this is centered so we'll say gravity equals center that's just going to center the image for us if it's you know larger than 250 by 150 and if we save and we come over to our actual version which we'll open up using live server let this load up and we should see yep one 250 by 150 image for refresh it'll give us a brand new image so that's exactly what we want we have our thumbnail complete with that done we can move on to styling this bottom section so let's just create a div for that we can say video bottom section and inside here we're going to have essentially two columns we're going to have our left column with the channel icon and the right column with everything else so we can just say in here we have for example an anchor tag with an href of nothing that's going to be for our channel icon so we can just close that off and inside of here we're going to have an image tag with a class that just says channel icon and then we want to make sure we give this a source and we're going to use that same unsplash trick so we're going to copy this all down but instead of 250 by 250 we're going to use 36 by 36 that's the size that youtube uses for these individual you know channel icons here then we just got to make sure that we closed that off we have our anchor tag closed off and if we save come back over here you can now see we have our channel icon showing up down below which is exactly what we want obviously no styles are being applied but we're going to get to all of that in a bit just you know we got to finish out this html first so with that done we have you know our section on the left hand column so now we need to work on our right hand column which we're just going to give a class here of video details this is essentially all the metadata for our video so we're going to need a new anchor tag for the title because all of these individual sections are clickable inside of youtube so we need to make sure that they're clickable so we'll say video title and we want this to go nowhere as always and then we're going to put the title as video title just generic text we're going to do a very similar thing for our video channel name so we'll say video channel name close this off href going nowhere and the name is just going to say channel name now the final section we need to work on is the views and the time that it was posted so we can just create a div with a class of video metadata close that off and inside of here we're gonna have two different spans one for the amount of views we'll say 12k views and then we're going to need this dot symbol here we can kind of just copy this dot symbol whoops didn't mean to click on that to copy that we actually just right click to inspect this element if i just drag this over real quick make sure that we inspect the dot that we want so we just click this icon click on the dot and then what we can do is just copy that from here so we can see the content is this dot let's just copy that and we'll paste that into our page and then we'll do another span that is going to say when it was posted say for example one week ago so let's look at our version you can see we have here our video title channel name how many views it has the dot and then how long ago was posted this is very similar to what youtube looks like but obviously really really ugly so let's get on to styling each one of our video containers so let's create a style sheet we'll just call it styles.css and up here let's make sure we link that so we'll say link styles.css and another thing we're going to need to use is the actual font that google uses on all of their pages they use the roboto font so i'm going to copy in a link here which goes to google fonts if you just type in google fonts for a bottle you'll be able to find this link get the font that you want this is essentially going to allow us to use the roboto font so if we save that come into our styles we can then style everything to use that specific font so i just like to say star star before and star after this is going to select all of the elements as well as pseudo elements i want to change the box sizing to border box and i want to change the font family to be that roboto fox we'll say roboto we'll also use a fullback of ariel vedica and then very lastly a sans serif fallback so this is just hopefully we'll use roboto but if not we'll fall back to one of these other options if we save you can see we now have the roboto font showing up next thing i want to do is take our body remove all of the margin just get everything pushed up to the sides like that that's perfect and now we can work on styling out our video container so if you remember right we have this video container class and that's essentially wrapping every single one of our elements so we're going to change here the display to flex and the flex direction to column this shouldn't really change anything because we're just you know using flexbox but we're making sure everything is top to bottom which is essentially how it defaults to normally now with that done we can move on to the thumbnail and for the thumbnail what we want to do is you notice in youtube how it has this time in the bottom right hand corner of all the different thumbnails we want to be able to actually have that there as well so we're going to set this position to relative so we can absolutely position the time stamp in the bottom right and we're also going to set the display to flex so we can you know properly size everything like we want so in order to get that time stamp showing up what we can do is just scroll all the way down here to where we have that thumbnail class and we can set a data duration property you can name this whatever you want i just went with data duration we'll pass it in our timestamp in our case let's just say that we have a timestamp of 12 you know 24. video is 12 minutes 24 seconds now instead of our styles here we can say thumbnail before and what we want to do is set the content equal to this attr function data duration now if we save come over here you can see that that text is showing up that we got from this data duration property that we set here we pulled it into this before element and are putting it as our content if you want more information on this attr function i have an entire blog article on it i'll link it down in the description below so now let's get styling this you know before attribute section for our thumbnail first thing i want to do is position it absolutely so say abso whoops absolute there we go that's as you can see positioned up here next thing that i want to do is get the background color and we're going to use a slightly opaque color so we'll see rgba is going to be 0 0 0 to give us black and then we'll say 0.85 so it's mostly black but it's a little bit see-through as you can see you can slightly see through that black color next we're going to set the color of our text to white so it's easy to see that actual text we're going to place it in the bottom right hand corner 5 pixels away from the bottom and the right and as you can see it's way over here that's fine for now the reason for this is just our thumbnail is taking up this full width section that's perfectly okay for now we're going to be changing that when we actually get you know our grid set up for all of our videos but for now that's okay next thing i want to do is add some padding to it so we'll say padding 0.1 em and 0.3 em there we go just makes it a little bit easier to read set border radius to be 0.3 em and then lastly i'm just going to decrease the font size a little bit so we'll say 0.9 rem just so it's not you know overbearingly large there we go you have that nice time stamp down here in the bottom right and again we'll get it to be over top the thumbnail in just a little bit so in order to do that let's just come up here we'll say video section that's the sections we talked about where we have like a grouping of videos before these gray lines so what we can do with that video section is essentially say we want this to be display of grid just like that and we want to set up our grid template columns and we essentially want these to grow or shrink and fit as many items on the row as we can so we're going to say repeat with auto fill that's going to essentially say fit as many of these elements on the page as we can and we're going to give them a minimum and a maximum so the minimum value they can be is 250 pixels wide we never want these to be narrower than 250 pixels and the largest they can be is one fr which means they can grow essentially to all be the same width then what we can do is set up some gap between our elements we'll say three oops three ram and one rem that just gives us some space between our different video elements we're gonna set a little bit of padding of three rem and zero again just to space out each section from one another and then lastly we'll do some margin of zero and 1.5 rem for some more spacing and then finally a border on the top of four pixels solid ccc and that's going to give us this nice gray line that you see over on youtube these gray lines but we don't want this gray line to appear on the very first video element so for our video section what we can say is for the first child what we essentially want to do is we want to set the border on the top to none so now we have a grid system built in a little bit so if i copy this video container and create another video inside of our grid just paste that down here and save you now see that we have two videos showing up again this you know icon for our duration is still not quite in the right position but that is something that we're working on the way we're going to fix this is inside of our styles let's just scroll down to the bottom here we're going to select our thumbnail image and what we're going to do is just set the width to be 100 and the height to be 100 now if i save you can see this thumbnail is filled all of the available space that it's been given which is exactly what we want i also want to set the min width to 250 pixels oops 150 pixels and the min height to 250 pixels that way we don't accidentally overflow our content i'm sorry not min height this should be 150 pixels because that's how wide our images or how tall it is there we go that way we just don't accidentally make our images too small now lastly something i want to add in which is going to seem a little weird is a background color and i want this background color to be aaa and the reason for this is when we refresh our page you see how we kind of get that gray box showing up behind our image as it's loading this is something that youtube does on its own it has kind of like a skeleton loading state and we're just emulating that loading state so when we you know load a page image not there we just get this gray box and then the images are going to pop in next up that i want to work on is this channel icon section as well as the video you know details on the bottom so let's do channel icon first let's come in here we're going to add a little bit of margin on the right hand side of that 0.75 rem just space it out from all of our content right now the content's not on the side yet but when we get the content on the side it'll give us a nice little spacing also i want to make sure our border radius is 50 to give us that circle appearance which looks really good we want to set our set width and height to 36 pixels and the height is 36 pixels and then lastly that same background color i want to do the same trick we're going to do that aaa color and this is again to give us that nice loading state so we'll refresh we get a nice little you know loading circle saying hey this is where the icon is going to be but we don't have it yet so kind of a cool trick so now in order to get this bottom section lined up properly let's just create a video bottom section selector this is essentially all of our content in here we want to change this to display of flex and we're going to align all of our items in the start so we'll just say flex start here save that and as you can see we now have everything showing up at the top aligned like we want it to be we're just going to space this out from our actual thumbnail by one rem just to give us a little bit of space and that looks really good the next step that we have is this details section over here so let's select that video details and to get everything lining up top to bottom we can just change our display here to the flex and the flex direction is going to be column just like that now everything is vertically stacked which is what we want we can move on to styling each one of our sections so we have our title which is going to be that video title and we can say that we want our font on this to be slightly larger we use 1.1 rem looks a little bit bigger also we'll make our font weight bold so it stands out a little bit more that looks much better it really is emphasized over the channel name and we'll space it out a little bit so we'll say margin on the bottom is 0.5 rem text decoration is none because we don't want that link styling and then lastly color is black just again so we don't have that blue link style and there we go we have a nice bold video title the next thing we want is our video channel name that's just this text down below and we're going to do similar things we're going to put a little margin on the bottom 0.1 rem give it a little space from our view section and we're going to remove that text declaration so we'll say text decoration of none also we're going to change the color here to be that 555 color just like that it's going to kind of give us a little bit of an off-grade color which looks really good and when we hover this we want to make it slightly darker we go over here we hover one of these we notice that the text gets slightly darker so let's just make sure that we do that over here we can say video channel name cover and we want the color to change to a slightly darker color we'll use one one one and we're also going to do a nice little transition for that so we'll try a transition color over let's say 150 milliseconds so now when we hover you can see that has changed color slightly and it does a nice little transition to it very subtle but something that's nice now the final section that we have is our video metadata that's everything on the bottom of our screen and all we need to do is change our color to b555 we just wanted to match our channel name and to do that instead of having the color defined twice let's just take our channel name selector and concatenate it with this video metadata for our color that way they both share the same color variable and we can update it here in one place and it'll propagate to both of them which is exactly what we want so now let's fill in a few videos let's just come up here we have a few of these articles we'll just copy them down and of course all the spacing here we need to make sure it's all fixed just collapse both of these and we'll do you know two more just to make it kind of nice and even copy that down collapse both of them and there we go we have a nice video section here with these videos looks very similar over here now let's create this special section in the middle so we'll just copy down the entire video section paste it and this is going to be all of these new six videos so let's just collapse them all again make it a little bit easier to work with there we go and if we save come back over here we now have two video sections and we have a nice divider between them so let's do one more copy just to give us a bottom section as well so we'll paste that down and we'll just collapse that entire section we don't need to worry about the stuff inside of it just like that so we can collapse this top section too so now we have our top section our bottom section and our middle section and if we save and we you know come over here you can see we have middle section bottom section and top section they all share the same image just because of the fake images we're using but that's fine now for our section we want to have that special section you can see where it has that you know close button just like you know with youtube here we have kova 19 news with the nice close button nice little special you know like pop out section so we need to incorporate what we're going to do for that this is actually going to be fairly straightforward at the top of our section i just want to create an h2 which is just going to say special section you know you can put whatever text you want inside of there we're going to have a class here of video section title and then also inside of here instead of just having the text special selection we also need to have a close button so we'll say button and this is going to have the at times in here that's going to give us a nice x button and we're going to give it a class here of video section title close that's like the not interested button on youtube so now if we save you can see we get special section and that close button but clearly it's not styled properly so let's work on our styles let's just come down here we can say video section title and inside of here all i want to do is make it span the entirety of our grid so we can say grid column we want to go from one all the way to negative one and if i save this you can see it now takes up the entirety of our row no matter how wide our screen gets or how narrow our screen gets it's always going to take up one full row which is exactly what we want next thing i want to work on is removing some of the spacing we have a bunch of spacing so we're going to say our margin here is going to be negative 0.5 rem this is going to get rid of some of that grid row spacing and now we can actually lay everything out so we'll just say display flex and justify our content space between that's going to push our button all the way to the far right and our text over here is on the far left also i want to make sure that we don't have our margin on the left and right so i'm going to set our margin to 0 on the left and right just so we don't go past the edge of our videos just like that that looks much better now the last thing that we can do is we can line our items in the center this is just going to essentially line up the button and the actual text we can also put a little bit of padding here of 0 on the top bottom and 0.5 rem on the left and right that's just going to kind of indent these a little bit which i think looks really good now for the close button we essentially need to remove a lot of the styles so we'll say video section title close we need to get rid of the border so we'll say border none background none just kind of get rid of those default styles padding it's going to be equal to none i'm sorry that should be zero there we go if we save you can immediately see pretty much all those styles are removed we should have a really small x button over here so i'm going to drastically increase the font size to rem it's going to give us a much larger much easier to click on button i'm going to reduce that color to 555 and lastly we want a pointer cursor so we know we can click on it and there we go if we look over on youtube you can see that this section title looks very similar to our section title over here so we know that we're essentially matching them one to one or at least close enough now we have the most iconic part of youtube done the video section the next section i want to work on is this section up here which has all these different categories that we can click on which is again separated by more of these you know lines also one thing we haven't done yet is you'll notice that the background here has a slightly darker color than all of the rest of the site so let's make sure we incorporate that slightly darker color all we need to do is select that big wrapper that goes around all of our videos and we can set the background color to be oops f9f9f9 that's just going to give us a really light color if we come over here you can see it slightly changed our color if we remove this it's white we put it back it's going to give us a slightly gray color so now back in our index.html we can close off this whole video section we're essentially done with that for the rest of this tutorial we can move on to our next section which is going to be for categories and each one of this categories section here if i close that off again we're going to have a section which is going to have a class of oops category section and we can close that off and inside of this category section we want buttons for all of our categories so we can say we want a button we're going to have a class of category and here we're going to have text and the text is going to say category and we'll just put dollar sign here that's going to give us a number and we want to say that we want to do this essentially you know ten times if i make sure i spell category correctly and we run this you'll see that we got categories from one to ten and i'm just using emmett for that and if you're interested in learning more about emmett i'll have a video linked in the cards and description down below for you and let's make our first category here our active category just like that and actually instead of doing that what i'm going to do is i'm going to take this category 10 and i'm going to move it all the way up to the top and change the text to all because in youtube we have this all category here we're going to make that our active category so we have all and then category one two three four five six seven eight nine now with that done let's move into our style sheets if we come over here you'll see we have all of our categories at the top of our page but obviously we want them to look like this and not like a random row of buttons so the first thing i want to do is select our categories section and this is going to allow us to give our top and our bottom border and some nice little padding so we can say padding is going to be one rem to rem and if we just save that come over here you can see it's immediately giving us some space which looks good we're also going to set a border on the top of one pixel solid 999 and i'm just going to copy that and do the exact same thing for the bottom now if i save you can see we have borders on the bottom in the top which look really good now if i were to zoom in our page a little bit you'll notice that these categories are just wrapping right now we kind of want them just expand off the page that's the way that they work on youtube they just expand off and we have this next button you kind of see here in order to make that work like we want it to do let's select our category oops category section change the display here to flex that's just going to make them all line up like that and then to hide all the ones that flow over we just say overflow hidden now you can see we're just cutting off all these ones on the end now the next step is going to be doing all of our styles to make these categories go from big blocky buttons to looking like nice pill icons over here so to get started we'll just say category each one of our categories have this category oops category class scroll that down and the very first thing we can do is we can space them out because right now they are cramped so we'll say margin right of one rem immediately that already looks better next thing i can do is make sure that text doesn't actually wrap onto a new line that doesn't look very good so we can say word wrap is going to be equal to none and white space no wrap that's going to get rid of all the wrapping so everything stays on one line next step is going to be working on getting the pill shape with the nice border outline so we can say border is going to be one pixel solid we're going to use ccc as the color there we go we have a nice ccc border and we can also say our border radius is going to just be 900 pixels you can choose any large number you want it'll just give us a pill shape as long as you choose your number really large it'll always give you a pill shape now in order to get the background color proper we can just say here our background color is going to be equal to e 7 whoops e7 e7 e7 is going to kind of give us this dark gray color and the next thing that we can do is set some padding to give it us some space to breathe because right now it is cramped so 0.5 and 1 ram and it's going to give us these nice big pills i can zoom this back out to a more normal zoom so we can kind of compare what it looks like to youtube over here lastly i just want to make sure i set the font size to inherit the reason i'm doing this is because by default buttons have slightly smaller fonts so we're going to make sure that's inherited down to the actual normal font size cursor is going to be pointer and we're going to set up a transition you know preemptively because we know we're going to change our background color on hover since that's what youtube does so we'll say background color changes over the course of 150 milliseconds because as we hover you can see our background color gets slightly darker back over here all we need to do is set up a hover so i'll say category hover and i want to change that background color to be dddd now when i hover over it you can see that our background color has gotten slightly darker next thing i want to do is set up our active category so i'll say category dot active all i want to do is set the background color i want this to be 606060 it's going to give us a nice dark gray and i'll set the color to white and our border color is going to need to be a different color so we're just going to use ee now if we save you can see we get this nice darker outline which is just like what we have over on youtube here now we have all of those complete last thing i want to do just for safety measures is take our last category child i just want to remove the margin on the right because we don't need any margin on the right for our very last element in this case it doesn't matter because it expands over the edge but in other cases it may and that right there is everything you need to do to create this category section of youtube last thing we have is this header section up here which has the logo for youtube there's a search bar as well as all these different icons and your channel of course so to do this let's go into our index html close off this categories section and here we're going to need a header so we'll say header we'll give it a class of header as well so we can select it in our css and now inside of this header is where we're going to put all of these styles so the first thing is this youtube button we'll use an anchor with an href that goes nowhere and inside of this we're going to put our image for our youtube icon so we'll say image with a source this is equal to logo.png you can just get this by searching youtube logo you can get it from you know youtube's official site and we'll make sure we put an alt tag on here for youtube youtube logo just so that people that are using screen readers can read that and of course a class so that we can style this and we'll just call it youtube logo let's close that off and our anchor tag is closed off so that's essentially our youtube logo done come over here and if we scroll up you can see we have a massive youtube logo we'll make it smaller in a little bit don't worry about it next thing we're going to work on is our form so we'll say form and i have a class of search bar the only thing in our form is this single search element here and this form is going to have an input which is going to have a class of search input a type of search a placeholder value which is equal to search just because that's what youtube uses as their placeholder value as you can see up here and then lastly we want to make sure we have an area labeled by or sorry just label we'll set that to search again for screen reader purposes close that off and we can get our submit button in here so we'll say button for the type of submit and we're going to give this nothing inside of it for actual text but we are going to put an image in here so we'll say image make sure we self-close that tag this is going to have a source here which goes to our magnify.svg again you can get those from this material.io website and then lastly we want to make sure we have a class on our button to style it so we'll say class is equal to oops class is equal to search button just like that that's pretty much all those styles we're going to need come over here you can see we have everything kind of just you know cobbled together on the page it clearly doesn't look like we want it to so let's start working on some styles for this section the last thing we have left to add though is these menu icons so might as well do that right now so let's come down here with a div for the class we'll call menu oops icons inside of here we're just going to essentially have a bunch of different a tags with ahrefs that go nowhere so we'll say href of nothing and inside of here we're going to have an image with a source the very first one is for video plus svg and the alt is going to say upload video make sure that closes off and what we can do is just copy this down oops this whole a tag which want to copy down a couple times fix the indentation here so this second one is going to say apps.svg that's going to give us this dot symbol and here instead of upload video we want this to say apps here for our bell icon we're gonna have build.svg and this is just gonna here say notifications and then finally we want to have a slightly different thing here where we're going to have the source be our you know channel icon so that's just going to be http colon backslash backslash unsplash.it this is going to be 36 by 36 just like we used before and we want to set it to gravity equals center just so it centers the image that we're given and the alt here instead of saying upload video we'll say your channel and we want to have a class on this uh image here so you can say class is equal to menu channel icon again just so we can actually select this icon because it's going to have some differences to it than these other icons here so now with that done we can save over here you can now see we have our menu icon showing up and we also have our channel icon showing up and of course the youtube logo and the search bar so now it's time to style all of that the first thing i'm going to do is just select that header this wraps everything and i want to give this a display of flex and i want to just justify the content space between that'll spread everything out from each other and i want to align whoops align the items i can spell it properly in the center so they're all center aligned vertically and then finally i want to just add a little bit of padding of one rem just to kind of space everything out so it's not right up against the edges and there you go we can see we have a little bit of spacing and everything is now on one line and centered the next thing to do obviously is to shrink down the youtube logo so we'll say youtube logo the height is going to be just 20 pixels drastically shorter than it was before there we go we're going to have a nice little small youtube logo a bunch of space our search section and a bunch more space before our menu icons now the next step is going to be that actual search bar and this wraps both our search input and our search button so what we can do with this is change this to be a flux grow of one immediately it's going to make it filled the entire space that's why it's pushed up all the way over here and if we selected our search input oops input and we set the width to be 100 you'll see that our input is essentially taking up all of this width here which is what we want if we change this to be a display of flex you'll now see that our button over here is on the same line as our search input but right now there's no space between anything it's way too cramped together so to fix that we're going to set up some margin we'll use 0 2 rem 0 and 4 rem it's going to give us extra space between the youtube logo and our search bar and a little bit less space between our icons and our search bar now with that done we can move on to our search input or again we're going to make sure our font size is inherited just because we want to make sure it matches all the rest of our application we'll set some padding to 0.4 em just to give a little bit of space between our actual text and the edges of our text box we're going to set the border to one pixel solid 777 which is a nice gray color and then we're going to set a little bit of a radius say border top right radius is going to be zero and that's because this is what lines up with our button over here we don't want any radius over there or on the bottom right we want this to be a perfectly you know squared off corner so it'll line up with our button speaking of our button we can actually style that next so we can say search button what we want to do for this is we're going to of course use display flex because it makes lining everything up so much easier and again we can just align our items in the center and that'll center our item in the dead center here which is nice so if our search input is really tall for example it'll line everything up exactly like we want we can also set up some padding of 0 and 1.25 rem that's going to make this button wider just like over here on youtube the search button is pretty wide so this gives us a wide search button as well and then we can set up a border one pixel solid and seven seven seven we want our border of this to be the exact same as the border for our input here and then we're just gonna use a custom background color this background color is gonna be f eight f 8 f 8. save that we get that nice light color and then we can go a step further remove the border on the left completely so we'll just say none and we're going to get rid of all rounding on the top left so we'll say zero and we're gonna do the exact same thing but this is gonna be for the bottom left just to make sure those line up perfectly and now as you can see we just have one border between them instead of two so it looks like it's all one cohesive unit the final thing for this is just to make our cursor pointer so when we hover over this we get that nice cursor pointer but we can take that a step further even take our search button when we hover over it we can change our background oops color we can set that to f 0 f 0 f 0. now it's going to just slightly darken when we hover over that just like it does over here on youtube it gets slightly darker now the final section we have is these menu icons over here so we can just say menu icons this is going to be a display of grid and the reason i'm doing that is to make spacing everything out really easily because we can use the gap property of 1.5 rem that's going to give us some spacing but in order to make these all on one line we're going to change our grid template columns and we're going to make it repeat four times and we want them just to be auto sized since we have four elements over here as you can see that's lined them up then to make them all center we can just say align items in the center that's going to center all of our different icons the last thing to do is this channel icon over here we gave that a class of menu channel oops icon and this is going to be very similar to our other channel icon we're going to have a border radius of 50 to give us a circle a width of 36 pixels a height of 36 pixels oops not 26 36 pixels and lastly that pre-loading background color of aaa now if i were to refresh we get that nice preloading color behind it before all of our images load in and as you can see we have a youtube clone that looks very similar to what youtube does over here again it's not one to one but it is very close and gives you a lot of knowledge into how youtube actually built out their site if you enjoyed this video and want to take your css skills to the next level make sure to check out my full css course which i'll leave in the description down below thank you very much for watching and have a good day

Channel: Web Dev Simplified

Views: 67,663

Keywords: webdevsimplified, youtube clone, youtube, youtube html css design, html/css project, css project, css clone, css clone project, html and css project, html clone, html and css clone, html/css clone, youtube html css, youtube design clone, youtube design tutorial, css design clone, design clone css, html design clone, html clone design, html and css, html/css, html project, html project for beginners, css project for beginners, css tutorial, css, html, html tutorial, emmet, js, wds

Id: rhPSo4_Tgi0

Length: 36min 11sec (2171 seconds)

Published: Sat Oct 03 2020