Up next in 10
How To Design A YouTube Clone With HTML_CSS
273 views
Feb 7, 2024
The video titled "How To Design A YouTube Clone With HTML_CSS" provides a step-by-step tutorial on creating a basic replica of the YouTube interface using HTML and CSS. It walks viewers through the process of structuring the layout, styling elements, and incorporating key features such as video thumbnails, navigation bars, and user interfaces. By following along with the tutorial, viewers can gain valuable insights into front-end web development techniques while honing their skills in HTML and CSS. Whether you're a beginner looking to expand your knowledge or an experienced developer seeking inspiration, this video offers practical guidance and hands-on experience in designing a familiar and visually appealing website.
View Video Transcript
0:00
By far, the best way to learn is to create projects, but you don't always have cool project ideas to create
0:06
So the next best thing to do is to clone existing projects and to create those designs
0:11
So in this video, I'm going to show you how to use HTML and CSS to completely clone the YouTube site
0:16
And if you're interested in taking your CSS skills to the next level, make sure I check out my full CSS course, full of different projects, linked down in the description below
0:28
Welcome back to WebDev, Simplifficion. My name's Kyle, and my job is to simplify the web for you, so you can start building your dream project sooner
0:36
So if that sounds interesting, make sure you subscribe to the channel for more videos just like this
0:40
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
0:49
They're not 100% pixel perfect, but I think when you're just learning to code and programming
0:55
making things pixel perfect really doesn't matter. pixel perfect is much more important when you're actually doing design and learning design
1:02
But in our case, we're learning code and programming. So as long as you get 99% or 95% of it done, that's all that really matters
1:09
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
1:14
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
1:20
I'll leave a link in the description. And this has all the Google icons that you need
1:23
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
1:29
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
1:36
I think this is the most interesting and the most defining part of YouTube, so I think it's the best place to start
1:41
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 Emmett code here
1:49
And then what we can do is actually start styling out the HTML for this middle section
1:52
So let's create a div. We're just going to give a class here of videos
1:57
This is going to be for our videos section. And inside of here, let's just create a section
2:01
This section is going to be for like a grouping of videos. So as you can see here, we have a few videos
2:05
And if we scroll down, we have this nice line here with some more videos, another line
2:10
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
2:16
So we're going to give this a class of video section. And inside of this video section is where we're going to put each
2:22
individual video card, which we're just going to make an article and give it a class of video container
2:28
And that is essentially everything associated with one individual video inside of the UI
2:32
That's at least the easiest way for me to think about all of this. So now inside of our video container, we have everything we need to essentially start styling out
2:39
these individual cards. So the first thing we need is to have some way to click on the thumbnail
2:44
So we're going to need an anchor tag. We're going to give it a class of thumbnail. Just like that
2:49
Whoops. Thumbnail. And for the H-RF of this, we're just going to use the pound symbol because we're not actually
2:55
linking to anything. This isn't actually a functional site with actual videos and actual YouTube videos
3:00
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
3:05
which is fine for our cases. Next, inside of here, we actually want to put the image itself
3:10
So this image, oops, if I make sure I close that off properly, is going to have a class of
3:15
thumbnail image so we can style this in our CSS. And for the source, we're just going to use unsplash for this
3:21
So we can say htp colon slash slash unsplash dot it slash and then we need to specify the size of our thumbnail
3:30
We're going to do 250 by 150 so 250 slash 150. And then we're going to make sure this is centered
3:36
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
3:42
And if we save and we come over to our actual version, which will open up using live server
3:48
Let this load up. And we should see, yep, one, 250 by 150 by 150. For refresh, it'll give us a brand new image
3:53
So that's exactly what we want. We have our thumbnail complete. With that done, we can move on to styling this bottom section
3:59
So let's just create a div for that. We can save video bottom section
4:05
Inside of 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
4:11
So we can just say in here we have, for example, an anchor tag with an H-ref of nothing
4:16
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
4:26
And then we want to make sure we give this a source. And we're going to use that same unsplashed trick
4:30
So we're just going to copy this all down. But instead of 250 by 250, we're going to use 36 by 36
4:35
That's the size that YouTube uses for these individual channel icons here
4:40
Then we just have to make sure that we close that off. We have our anchor tag closed off. And if we save, come back over here
4:45
You can now see we have our channel icons showing up down below, which is exactly what we want
4:49
Obviously, no styles are being applied, but we're going to get to all of that in a bit. Just, you know, we've got to finish out this HTML first
4:55
So with that done, we have, you know, our section on the left-hand column
4:59
So now we need to work on our right-hand column, which we're just going to give a class here of video details
5:04
This is essentially all the metadata for our video. So we're going to need a new anchor tag for the title
5:10
Because all of these individual sections are clickable inside of YouTube, so we need to make sure that they're clickable
5:15
So we'll save video title. And we want this to go nowhere as always
5:19
and then we're going to put the title as video title just generic text we're going to do a
5:23
very similar thing for our video channel name so we'll say video channel name close this off
5:29
href going nowhere and the name is just going to say channel name now the final section we need to
5:35
work on is the views and the time that it was posted so we can just create a div with a class of
5:40
video metadata close that off and inside of here we're just going to have two different spans
5:46
one for the amount of views we'll say 12k views and then we're going to need this dot symbol here
5:52
we can kind of just copy this dot symbol whoops didn't mean to click on that to copy that we can
5:57
actually just right click to inspect this element if i just drag this over real quick make sure that
6:03
we inspect the dot that we want so we just click this icon click on the dot and then what we can do is
6:09
just copy that from here so we can see the content is this dot let's just copy that and we'll paste that
6:13
into our page and then we'll do another span that is going to say when it was posted say for example
6:19
one week ago so let's look at our version you can see we have here our video title channel name
6:24
how many views it has the dot and then how long ago was posted this is very similar to what
6:28
youtube looks like but obviously really really ugly so let's get onto styling each one of our video
6:33
containers so let's create a style sheet we'll just call it styles. csss and up here let's make
6:40
sure we link that so we'll say link styles And another thing we're going to need to use is the actual font that Google uses on all of their pages
6:48
They use the Roboto font. So I'm just going to copy in a link here, which goes to Google fonts
6:53
If you just type in Google Fonts Roboto, you'll be able to find this link, get the font that you want
6:57
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
7:05
So I just like to say star, star before, and star after
7:11
This is going to select all of the elements as well as pseudo elements. I want to change the box sizing to border box
7:18
And I want to change the font family to be that Roboto fonts
7:22
We'll say Roboto. We'll also use a fallback of Ariel, Ovvetica, and then very lastly, a sands-serif fallback
7:31
So this is just hopefully we'll use Roboto, but if not, we'll fall back to one of these other options
7:35
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
7:41
Just get everything pushed up to the sides like that. That's perfect. And now we can work on styling out our video container
7:48
So if you remember, right, we have this video container class, and that's essentially wrapping every single one of our elements
7:54
So we're going to change here the display to flex and the flex direction to column
7:59
This shouldn't really change anything because we're just, you know, using Flexbox
8:02
but we're making sure everything is top to bottom, which is essentially how it defaults to normally
8:07
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
8:16
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 timestamp in the bottom right
8:24
And we're also going to set the display to flex so we can, you know, properly size everything like we want
8:29
So in order to get that timestamp showing up, what we can do is just scroll all the way down here to where we have that thumbnail class
8:35
And we can set a data duration property. You can name this whatever you want. I just went with data duration
8:40
We'll pass it in our timestamp. In our case, let's just say that we have a timestamp of 12, you know, 24
8:45
Videos 12 minutes, 24 seconds. Now instead of our styles here, we can say thumbnail before
8:52
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 in to this before element and are putting it as our content
9:09
If you want more information on this ATTR function, I have an entire blog article on it
9:13
I'll link down in the description below. So now let's get styling this before attribute section for our thumbnail
9:20
First thing I want to do is position it absolutely. So I'll say absolute, absolute
9:25
There we go. That's as you can see it positioned up here. The next thing that I want to do is get the background color
9:31
And we're going to use a slightly opaque color. So we'll say RGBA. It's going to be 0-0 to give us black
9:37
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
9:44
Next, we're going to set the color of our text to white, so it's easy to see that actual text
9:48
We're going to place it in the bottom right-hand corner, five pixels away from the bottom and the right
9:54
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
10:01
That's perfectly okay for now. We're going to be changing that when we actually get our grid set up for all of our videos
10:05
but for now, that's okay. Next thing I want to do is add some padding to it, so we'll say padding to it
10:09
So we'll say padding to point 1 em and 0.3m. There we go
10:13
Just makes it a little bit easier to read. We'll set border radius to be 0.3 EM
10:19
And then lastly, I'm just going to decrease the font size a little bit, so we'll say 0.9R.m
10:23
Just so it's not, you know, overbearingly large. There we go. You have that nice timestamp down
10:26
here in the bottom right and again we'll get it to be over top the thumbnail in just a little bit
10:30
so in order to do that let's just come up here we'll say video section that's the uh
10:36
sections we talked about where we have like a grouping of videos before these gray lines so what
10:41
we can do with that video section is essentially say we want this to be display of grid just like
10:47
that and we want to set up our grid template columns and we essentially want these to grow or shrink
10:51
and fit as many items on the row as we can so we're going to say repeat with auto fill that's
10:56
going to essentially say fit as many of these elements on the page as we can, and we're going to give
11:00
them a minimum and a maximum. So the minimum value they can be is 250 pixels wide. We never want
11:06
these to be narrower than 250 pixels. And the largest they can be is one fr, which means they
11:10
can grow essentially to all be the same width. Then what we can do is set up some gap between our
11:15
elements. We'll say three, oops, 3RAM and 1RAM that just gives us some space between our different
11:21
video elements. We're going to set a little bit of padding of 3RAM and 0
11:26
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
11:34
And then finally, a border on the top of four pixels, solid CCC
11:39
And that's going to give us this nice gray line that you see over on YouTube, these gray lines
11:43
But we don't want this gray line to appear on the very first video element
11:47
So for our video section, what we can say is for the first child
11:53
what we essentially want to do is we want to set the border on the top. to none
11:57
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
12:06
down here and save. You can now see that we have two videos showing up. Again, this icon for our duration is still not quite in the right position, but that is something
12:13
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
12:18
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%
12:25
and the height to be 100%. Now if I could save, you can see this thumbnails filled
12:30
all of the available space that it's been given, which is exactly what we want
12:33
I also want to set the min width to 250 pixels, whoops, 150 pixels
12:38
and the min height to 250 pixels. That way we don't accidentally overflow our content
12:44
I'm sorry, not min height. This should be 150 pixels, because that's how wide our images or how tall it is
12:48
There we go. That way we just don't accidentally make our images too small. Now lastly, something I want to add in
12:52
which is going to seem a little weird, is a background color. And I want this background color to be AAA
12:57
And the reason for this is when we refresh our page, you see how we kind of get that gray box
13:01
showing up behind our image as it's loading. This is something that YouTube does on its own
13:05
It has kind of like a skeleton loading state. And we're just emulating that loading state
13:09
So when we load a page image not there, we just get this gray box, and then the images
13:13
are going to pop in. Next step that I want to work on is this channel icon section as well as the video details
13:18
on the bottom. So let's do channel icon first. What's come in here
13:23
We're going to add a little bit of margin on the right hand side. of that.75, REM, just space it out from all of our content
13:29
Right now the content's not on the side yet, but when we get the content on the side, it will give us a nice little spacing
13:34
Also I want to make sure our border radius is 50% to give us that circle appearance, which looks really good
13:39
We want to set our set width and height to 36 pixels, and the height is 36 pixels
13:45
And then lastly, that same background color, I want to do the same trick
13:49
We're going to do that AAA color. And this is again, to give us that nice loading state, some refresh, we get a nice little, you know
13:55
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
14:00
So now, in order to get this bottom section lined up properly, let's just create a video
14:04
bottom section selector. This is essentially all of our content in here
14:09
We want to change this to display of Flex, and we're going to align all of our items in the start
14:14
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
14:20
We're just going to space this out from our actual thumbnail by 1REM, just to give us a little bit of space
14:25
and that looks really good. The next step that we have is this detail detail section over here
14:30
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
14:38
and the flex direction is going to be column. Just like that, now everything is vertically stacked, which is what we want
14:45
We can move on to styling each one of our sections. So we have our title, which is going to be that video title
14:50
and we can say that we want our font on this to be slightly larger. We use 1.1 ram
14:54
Looks a little bit bigger. Also we'll make our font weight bold so it stands out a little bit more
14:59
That looks much better. It really is emphasized over the channel name
15:02
And we'll space it out a little bit. So we'll say margin on the bottom is 0.5 REM
15:07
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
15:15
And there we go. We have a nice bold video title. The next thing we want is our video channel name
15:21
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
15:26
1REM, give it a little space from our view section. And we're going to remove that text decoration
15:32
So we'll say text decoration of none. Also we're going to change the color here to be that 555 color
15:39
Just like that. It's going to come to give us a little bit of an off gray color which looks really good
15:44
And when we hover this, we want to make it slightly darker. If we go over here, we hover one of these, we notice that the text gets slightly darker
15:50
So let's just make sure that we do that over here. We can say video, channel name, hover, and we want the color to change to a slightly darker color
15:58
We use 1-1-1, and we're also going to do a nice little transition for that
16:02
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
16:11
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
16:18
And all we need to do is change our color to be 555. We just want it to match our channel name
16:23
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
16:31
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
16:38
So now let's fill in a few videos. We'll just come up here. We have a few of these articles
16:42
We'll just copy them down. And, of course, all the spacing here
16:47
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
16:55
Copy that down, collapse both of them. And there we go. We have a nice video section here with these videos
17:02
Looks very similar to over here. Now let's create this special section in the middle. So we'll just copy down the entire video section, paste it
17:10
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
17:17
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
17:23
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
17:30
We don't need to worry about the stuff inside of it, just like that
17:34
We can collapse this top section too. So now we have our top section, our bottom section, and our middle section
17:39
And if we save and we come over here, you can see we have middle section, bottom section
17:43
and top section. They all share the same image just because of the fake images we're using, but that's fine
17:48
Now for our section, we want to have that special section. You can see where it has that close button, just like with YouTube
17:54
Here we have COVID-19 news with the nice close button, nice little special, you know, like
17:58
pop-out section. So we need to incorporate what we 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 put whatever text you want inside of there And we going to have a class here of video section
18:14
title. And then also inside of here, instead of just having the text special selection
18:19
we also need to have a close button. So we'll say button, and this is going to have the at
18:24
times in here. That's going to give us a nice X button. And we're going to give it a class
18:30
here a video section title close that's like the not interested button on YouTube
18:36
so now if we save you can see we get special section and that close button but
18:40
clearly it's not styled properly so let's work on our styles let's just come
18:43
down here we can save video section title and inside of here all I want to do is
18:51
make it span the entirety of our grid so we can say grid column we want to go from
18:56
one all the way to negative one and if I save this you can see it now takes up
19:00
the entirety of our row, no matter how wide our screen gets, or how narrow our screen gets
19:05
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
19:11
We have a bunch of spacing, so we're going to say our margin here is going to be negative. 5 ram
19:18
That's just going to get rid of some of that grid row spacing. And now we can actually lay everything out
19:23
So let's 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
19:30
the far left. Also, I want to make sure that we don't have our margin on the left and right
19:34
So I'm going to set our margin to zero 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
19:42
line our items in the center. This is just going to essentially line up the button and the actual text
19:47
We can also put a little bit of padding here of zero on the top bottom and 0.5 REM on the left
19:52
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
19:58
So we'll say video section, title, close. We need to get rid of the border
20:04
So we'll say border, none, background, none. Just kind of get rid of those default styles
20:09
Padding. It's going to be equal to none. I'm sorry, that should be zero
20:15
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
20:20
So I'm going to drastically increase the font size to 2RM. It's going to give us a much large
20:25
much easier to click on button, and we want to reduce that color to 555
20:29
And lastly, we want a pointer cursor so we know we can click on it
20:33
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
20:39
so we know that we're essentially matching them one to one, or at least close enough. So now we have the most iconic part of YouTube done, the video section
20:46
The next section I want to work on is this section up here which has all these different categories that we can click on
20:51
which is again separated by more of these lines. Also, one thing we haven't done yet is you'll notice that the background here has a slightly
20:58
darker color than all of the rest of the site, so let's make sure we incorporate that slightly
21:02
darker color. All we need to do is select that big wrapper that goes around all of our videos, and we can
21:07
set the background color to be... Whoops, F9, F9, F9, that's just going to give us a really light color
21:15
If we come over here, you can see it's slightly changed our color. If we remove this, it's white, we put it back, it's going to give us that slightly gray color
21:22
So now back in our index. We can close off this whole video section. We're essentially done with that for the rest of this tutorial
21:27
We can move on to our next section, which is going to be for categories
21:31
And each one of this category section here, if I close that off again, we're going to have
21:35
a section, which is going to have a class of category section
21:42
And we can close that off. And inside of this category section, we want buttons for all of our categories
21:49
So we can say we want a button, we're going to have a class of category
21:53
And in here we're going to have text, and the text is going to say category. And we'll just put dollar sign here
21:59
That's going to give us a number. And we want to say that we want to do this essentially, you know, 10 times
22:03
If I make sure I spell category correctly, and we run this, you'll see that we got categories from 1 to 10
22:10
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
22:17
And let's make our first category here, our active category. just like that
22:24
And actually, instead of doing that, what I'm going to do is I'm going to take this category 10
22:28
and I'm going to move it all the way up to the top and change the text to all
22:32
Because in YouTube, we have this all category here. We're going to make that our active category
22:37
So we have all, and then category 1, 2, 4, 5, 6, 7, 8, 9. Now with that done, let's move into our style sheets
22:42
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
22:48
So the first thing I want to do is select our categories section
22:53
And this is going to allow us to give our top and our bottom border and some nice little padding
22:57
So we can say padding is going to be one RAM, two REM. And if we just save that, come over here, you can see it's immediately given us some space, which looks good
23:06
We're also going to set a border on the top of one pixel solid 999
23:13
And I'm just going to copy that and do the exact same thing for the bottom
23:16
Now if I save you can see we have borders on the bottom in the top which look really good
23:20
Now if I were to zoom in our page a little bit, you notice that these categories are just wrapping
23:24
right now. We kind of want them just expand off the page. That's the way that they work on YouTube
23:28
They just expand off and we have this next button you can kind of see here. But in order to make that work like we want it to do, let's select our category
23:35
Whoops, category section. Change the display here to flex. That's just going to make them all line up like that
23:43
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 of these ones on the end
23:49
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
23:55
So to get started, we'll just say category. Each one of our categories have this category, oops, category class
24:03
Scroll that down and the very first thing we can do is we can space them out because right now they are cramped
24:07
So we'll say margin right of 1RM. Immediately that already looks better
24:11
Next thing I can do is make sure the text doesn't actually wrap onto a new line. wrap onto a new line. That doesn't look very good. So we can say word wrap is going to be equal to
24:19
none and white space no wrap. It's going to get rid of all the wrapping so everything stays on
24:24
one line. Next step is going to be working on getting the pill shape with the nice border outline
24:29
So we can say border is going to be one pixel solid. We're going to use CCC as the color
24:36
There we go. We have a nice CCC border. And we can also say our border radius is going to just be
24:40
900 pixels. You can choose any large number you want. It'll just give us a pill shape. As long as
24:44
you choose a number really large it'll always give you a pill shape now in order to get the
24:49
background color proper we can just say here our background color is going to be equal to e7
24:54
oops e7 e7 e7 it's going to kind of give us this dark gray color and the next thing that we can do
25:00
is set some padding to give it us some space to breathe because right now it is cramp so 0.5 and 1 rm
25:07
and it's going to give us these nice big pills i can zoom this back out to a more normal zoom
25:10
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
25:17
The reason I'm doing this is because by default, buttons have slightly smaller font, so we're going to make sure that's inherited down to the actual normal font size
25:24
First is going to be pointer, and we're going to set up a transition preemptively
25:28
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
25:36
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 we'll say category, hover, and I want to change that background color to be DDD
25:51
Now when I hover over it, you can see that our background color has gotten slightly darker
25:56
Next thing I want to do is set up our active category, so I'll say category. Dot active
26:03
And all I want to do is set the background color, and I want this to be 6.5
26:09
It's going to give us a nice dark gray and I'll set the color to white and our border
26:15
color is going to be a different color so we're just going to use EEE
26:18
Now if we save, you can see we get this nice darker outline which is just like what we have
26:22
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
26:31
I just want to remove the margin on the right because we don't need any margin on the right
26:35
for our very last element. In this case it doesn't matter because it expands over the edge, but in other cases
26:39
as it may. And that right there is everything you need to do to create this category section of YouTube
26:45
Last thing we have is this header section up here, which has the logo for YouTube, this
26:48
search bar as well as all these different icons and your channel, of course
26:52
So to do this, let's go into our index HTML, close off this category section, and here we're
26:57
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
27:03
And now inside of this header is where we going to put all of these styles So the first thing is this YouTube button We use an anchor with an H that goes nowhere And inside of this we going to put our image for our YouTube icon So I say image with a source
27:16
This is equal to logo.p.g. You can just get this by searching YouTube logo. You can get it
27:20
from YouTube's official site. And we'll make sure we put an alt tag on here for YouTube
27:27
YouTube logo, just so that people that are using screen readers can read that. And of course
27:31
a class so that we can style this and we'll just call it YouTube logo
27:36
Let's close that off. And our anchor tag is closed off. So that's essentially our YouTube logo done
27:41
Come over here. And if we scroll up, you can see we have a massive YouTube logo
27:46
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
27:50
So we'll say form. We're going to have a class of search bar. The only thing in our form is this single search element here
27:58
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
28:07
which is equal to search, just because that's what YouTube uses as their placeholder value
28:12
as you can see up here. And then lastly, we want to make sure we have an area labeled by, or I'm sorry, just label
28:18
and we'll set that to search. Again, for screen reader purposes. Close that off, and we can get our submit button in here
28:25
So we'll say a button with a type of submit, and we're going to give this nothing
28:29
inside of it for actual text. But we are going to put an image in here. So we'll say image
28:34
Make sure we self-close that tag. This is going to have a source here, which goes to our magnify.svg
28:39
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
28:47
So we'll say class is equal to, oops, class is equal to search button, just like that
28:53
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
28:58
clearly doesn't look like we want it to so let's start working on some styles for this section
29:02
the last thing we have left to add though is these menu icons so might as well do that right now
29:07
so let's come down here with a div with a class we'll call menu whoops icons
29:14
inside of here we're just going to essentially have a bunch of different a tags with
29:18
h refs that go nowhere so we'll say href of nothing and inside of here we're going to have an
29:23
image for this source the very first one is for video plus SVG and
29:28
And the alt is going to say upload video. Make sure that closes off
29:35
And what we can do is just copy this down. Whoops, this whole A tag, which want to copy down a couple times
29:41
Fix the indentation here. So this second one is going to say apps
29:48
That's going to give us this dot symbol. And here, instead of upload video, we want this to say apps
29:55
Here for our bell icon, we're going to have bell. SVG, and this is just going to here, say notifications
30:00
And then finally, we want to have a slightly different thing here, where we're going to have the source be our, you know, do-do-do-do channel icon
30:08
So that's just going to be HTTP, colon, backslash, blackslash, unsplash.it. This is going to be 36 by 36, just like we used before
30:17
And we want to set it to gravity equals center, just so it centers the image that we're given
30:22
And the alt here, instead of saying upload video, will say, your channel and we want to have a class on this image here so like you say class is equal to
30:33
menu channel icon again just so we can actually select this icon because it's going to have some
30:40
differences to it than these other icons here so now with that done we can save over here you can
30:45
now see we have our menu icon showing up and we also have our channel icon showing up and of course
30:50
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
30:54
just select that header. This wraps everything, and I want to give this a display of flex
31:00
and I want to just justify the content space between. That will spread everything out from each other
31:05
And I want to align the items, if I can spell it properly, in the center. So they're all center-aligned
31:12
vertically. And then finally, I want to just add a little bit of padding of one REM just to kind
31:16
of space everything out so it's not right up against the edges. And there you go. We can see we have
31:20
a little bit of spacing, and everything is now on one line and centered. The next thing to do
31:24
is to shrink down the YouTube logo. So we'll say YouTube logo, the height is going to be just 20 pixels
31:30
drastically shorter than it was before. There we go. We have a nice little small YouTube logo
31:34
a bunch of space, our search section, and a bunch more space before our menu icons
31:38
Now the next step is going to be that actual search bar, and this wraps both our search input and our search button
31:44
So what we can do with this is change this to be a flux grow of one. Immediately it's going to make it fill the entire space. That's why it's pushed up all the way over here
31:52
here and if we selected our search input, oops input and we set the width to be 100%
31:59
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
32:08
same line as our search input. But right now there's no space between anything. It's way too cramped together
32:13
So to fix that, we're going to set up some margin. We use zero, two REM, zero, and four REM
32:19
It's going to give us extra space between the YouTube logo and our search bar, and that's a little bit less space between our icons and our search bar
32:25
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
32:33
of our application. We'll set some padding to 0.4 EM, just to give a little bit of space between our actual text
32:39
and the edges of our text box. We're going to set the border to 1 pixel solid 777, which is a nice gray color
32:47
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
32:55
our button over here we don't want any radius over there or on the bottom right we want this to
33:00
be perfectly you know squared off corner so it'll line up with our button speaking of our button we
33:05
can actually style that next so we can say search button and we want to do it for this is we're
33:11
going to of course use display flex because it makes lining everything up so much easier and again we
33:15
can just align our items in the center and that'll center our
33:19
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
33:27
of 0 and 1.25 ram that's going to make this button wider just like over here on
33:32
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 777 we want our border
33:42
of this to be the exact same as the border for our input here and then we're just
33:46
going to use a custom background color this background color is a background color is
33:49
is going to be F8, F8, F8. Save that. We get that nice light color
33:55
And then we can go a step further. Remove the border on the left completely
33:59
So we'll just say none. And we're going to get rid of all-rounding on the top left
34:05
So we'll say zero. And we're going to do the exact same thing. But this is going to be for the bottom left
34:10
Just to make sure those line up perfectly. And now, as you can see, we just have one border between them instead of two
34:15
So it looks like it's all one cohesive unit. The final thing for this is just to make our cursor point
34:19
So when we hover over this, we get that nice cursor pointer. But we can take that a step further even
34:24
Take our search button. When we hover over it, we can change our background
34:28
Oops, color. We can set that to F0, F0, F0. Now it's going to just slightly darken when we hover over that
34:37
Just like it does over here on YouTube, it gets slightly darker. Now the final section we have is these menu icons over here
34:43
So we can just say menu icons. This is going to be a display of the screen
34:48
This is going to be a display of grid, and the reason I'm doing that is to make spacing everything out really easily
34:53
because we can use the gap property of 1.5 REM, and that's going to give us some spacing
34:58
But in order to make these all on one line, we're going to change our grid template columns
35:03
and we're going to make it repeat four times, and we want them just to be auto-sized
35:07
Since we have four elements over here, as you can see, that's lining them up, and then to make them all center, we could just say align items in the center
35:15
That's going to center all of our different icons. The last thing to do is this channel icon over here
35:20
We gave that a class of menu, channel icon. And this is going to be very similar to our other channel icon
35:28
We're going to have a border radius of 50% to give us a circle
35:32
A width of 36 pixels. A height of 36 pixels. Oops, not 26, 36 pixels
35:40
And lastly, that preloading 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
35:51
And as you can see, we have a YouTube clone that looks very similar to what YouTube does over here
35:55
Again, it's not one to one, but it is very close and it gives you a lot of knowledge into how YouTube actually built out their site
36:01
If you enjoyed this video, I 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
36:08
Thank you very much for watching, and have a good day
#Online Media
#Online Video
#Programming
#Video Sharing