Building a Responsive YouTube Clone - Mastering CSS Grid | Daryl Duckmanton | Skillshare

Building a Responsive YouTube Clone - Mastering CSS Grid

Daryl Duckmanton, Experience is our biggest asset

Building a Responsive YouTube Clone - Mastering CSS Grid

Daryl Duckmanton, Experience is our biggest asset

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
21 Lessons (2h 45m)
    • 1. Introduction

    • 2. Following along with the class

    • 3. Building the top bar

    • 4. Building the mobile first layout

    • 5. Building the thumbnail

    • 6. Building the video title and views

    • 7. Building the social interaction section

    • 8. Building the channel details section

    • 9. Building the related videos autoplay section

    • 10. Building out the related videos

    • 11. Building the comments heading section

    • 12. Building the add comment form

    • 13. Building out a list of comments

    • 14. Building out the see response button

    • 15. Adding the responses

    • 16. Building related videos in landscape mode for mobile

    • 17. Swapping comments and related videos

    • 18. Building related videos in portrait mode for tablet

    • 19. Building related videos in landscape mode for tablet

    • 20. Building related videos on large devices

    • 21. Adding the finishing touches

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

In this class we build out a Responsive YouTube clone user interface. This class is basically an entire project of its own, with assistance from myself in the videos if needed.

The format is simple. Listen to the objective in each video, pause it, try to do it on your own, and then restart the video and see my solution to verify your work.

Meet Your Teacher

Teacher Profile Image

Daryl Duckmanton

Experience is our biggest asset


I am a full stack web developer, who has been developing websites for 12 years, both from a back and front end. I have been working in the areas of HTML5, CSS3, Javascript, Typescript, .NET, Windows Azure, AWS and Angular 2-7 in recent years, and also have approximately 12 years in ASP.NET.

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


1. Introduction: Hello, everyone, and welcome to your fourth class for the cause. Mastering says says Grip. So who is this class full? Well, it's for anyone that's looking to apply the knowledge and CSS grade and responsive Web design to an app that is off a realistic size that you'll see out there in the real world. For the purpose of this class, that will be a responsive version off the YouTube. It's also for people who have previously taken my CCS group classes. You don't skill share and specifically part one and two. If you've done part three, then you kind of going through this process before. This one will be a lot bigger than what's in part three, and this is the last part in what I consider a four part course. Lastly, if you're just looking for a challenge and you want to see if you can do this, then this class is also for you. So with all this said, let's take a look at what we're actually building. Okay, so this is what we're going to be building in this class. It's essentially one actual screen off the YouTube app. It's basically the main video screen so respect. So what you see on your screen right now is the portrait mode off the application in mobile . Okay, so we have the main title, the top here with a logo, the name of the application which I've just called live digital and then some little icons here in the top right corner. Following that, we have a thumb. Now that's meant to represent with me. I would gun. Okay. I don't have a little apply thing in the center. It's just an image at this point. Cool. Then we had basically the title off the video directly underneath it with number of views that are available for that video. And then we have our colder action buttons. Or as I call in this class, basically social media. I can't. All right, They tall that just like that. Underneath that, we have some general information. So we have an image of what the channel is the title, the channel, the number of subscribe is and then kind of like a subscribe button over here, which I've just called connect. Following that, we have the reliability eyes that rely into this pretty I. And on top of that, we haven't what I play. A little icon here doesn't actually do anything. It just is for presentation purposes. And then below that, we have a single list, off age related video with the image on the left, followed by the rest of the details here on the right, which is title the name of the channel and the number of views that this video hats and it's basically a least walks up at the very bottom. We have a comments section where if I click on this little area here and then I scroll down , we can say a little form here with the person that's currently locked in or supposedly loved in is next to a form field, which doesn't really do anything, but it's just a text era. Okay, then, below that, you can see this list of comments right from different people. We've got one from the actual channel itself or by an image followed by the actual comment . And then we've got lips with God. Other comments from other people, one being Kim and so on so forth. And then on top of that, for some of the comments we have this same responses button. If I click on this, we can see the responses of Shine, which is very similar to the comments. Okay, so we got that layout and then if I click down here, we can also say multiple of them and they lie out like this. Well, once again, we have kind of like the time a thumbs up or thumbs there, which is the same. It's the comments appear. So that is what it looks like on portrait mode for mobile, if we rotated over is just a slight change. So if I come down, we can say that the comments are now displayed before the related videos. So if I just met him on that, we then have to relieve us directly after it now. But it's their two columns, and the image is on top of all the details this time, rather than to the left of it. So basically the images dominating the space here and then we have a grade, which is basically two columns and then as many rise needed to fill in all those videos, just like so, and that's it. Okay, that's outlooks on a mobile device in landscape money. If I come to tablet. We have a portrait mode version of the iPad, so to speak looks very similar to what we're vory scene. But once again, we have the comments above the relate very eyes. So if I had been that up, you can see that all looks very similar. But this time the real a video isn't now three colds. Okay, They look the same as they did on the landscape mode for my ball. But we got three columns there instead of two on that. Pretty much decided, however, when we rotate the iPad over the landscape married the rely videos of the arm move completely, and they've also going back to a single file. Okay, so we have a common still, then here. If I open that up, you can say that takes the whole section here on the left, and then we've got the real ivy eyes Old hit on the right, which you can also see is when I scroll on the left hand side, the video stained play. If I scroll the video eyes, you can see that the left hand side stays in play. So it had that squalling ability as well. Lastly, we'll go something a little bit bigger up, such as the iPad Pro and from a portrait perspective, it looks exactly the same. There's nothing really different here. How about when I once again moving into Let's get murdered? We do get those reliable years want to get on the right hand side. But now I've got two calls, all right, so it's getting a little bit bigger. The Ryan side that we have to calls for each of the videos now, and once again we can scroll up and then it's side, just like so go. So that is what we're gonna be building in this class now. Where we starting from? Well, we started with off white screen, like I said, literally nothing whatsoever now in terms of how that looks with the card if I pull it up now. So if I click on this and I expand this at, we don't have much to basically stopped leave. We have a style shape that refers to a video dot CSS file, which is in this success fold up, and it's sort of that again, just some really basic rules around, setting up some different sizes and marching some padding and things like that. You got in the images directory. We do have a whole bunch of icons again, and they all represent the different icons that you see in this application. Okay, I'm going to go through the mall, will go through them as we use them. Go Other than that, if I come back to the current one, small. If I get up correctly, we can look at the heist email. And once again, there's not much in here. Okay? It's just a empty body attack. So that is the situation. We're gonna go from a single white screen like this, building something really cool across multiple device sizes. So say we get back to portrait here on my bar when a guy from this grain, which is where we'll doing most of the work in this class and then eventually will make some changes so that we get to this point. Go. So that's all I want to say for this. Very I. So I have to see in the next one 2. Following along with the class: how everyone in this V I was just going to quickly cover some of the things that you need to know in order to follow along in this class. Okay, So before we move into the first video and had it build YouTube Klein, I just want to quickly mention how you follow along in his class. Now, basically, for the my spot, you activity, I calling following a little bit. Also, I want you to try and do things yourself, but it's part of the video just to bring them down a little bit in length. I've taken the action off, including snippets. Okay, Now, what that means is is that you need access to these snippets You don't follow along. Okay, so there are two ways of accessing these snippets. One is to come Teoh registry code and install the extension. Cold masterpieces says grid dash course snippets. Okay, so for come over to the extensions here, and I talk in just that Austrian sees this grid, but that you'll get cool snippets and basically you'll see this kind of screen OK, which will mirror what you see over here. At this point, you can install it now already have it installed. That's why it's asking me if I want to disable or not the view it should say install or something of that nature. So that's one way that you can get this defense. The other way is that I've included it as a sit file in the project section. OK, so it's called Snippets Thought Zip, and when you unzip it, you'll get something that looks like the following. So I have a folder that represents HPD A in this class, the number in front in the kite's what order the videos in. So, for example, the 30 I is three and basically a description of what that is about. You happen that out, you can say, I've got to step. It falls if I say says Falls. So if you click on one, this will be the first snippet that's added to the video, and this will be the second step. It that's added to the Via at this point in Just copy and paste built in here, and everything should be the sign as what I do in the video. Okay, so I just want to quickly mention that, and then I have we can get started 3. Building the top bar: Hello, everyone. In this video, we're going to working on building the top. So let's get to it. Okay, so in this video, we're going to focus on building this top are okay, And basically including this site. Log on the very far left, having the text immediately after it, then a whole bunch of spice. Then I'm going to have a search blogger, so to speak, and then kind of like a saying slugger. Okay, whatever you want to call that menu, I think I've mixed it up with menu in settings. Are you confused with this button here and always have, but I feel gonna call it safe. So the other thing that I want to mention quickly, before we write anything is that regardless of what the devices, it's going to pre myself the same. Okay, so we're not going to be changing it, you know, because the devices wide are is like that. It's going to look the same in all devices. Okay, don't bring it back to the menu. I'm just gonna quickly show you what the size of everything is. So the main told by high it is 48 pixels. Okay? And that's a fixed value we're going to use to do that. A site logo is exactly 32 pixels by 32 pixels. Okay, the text will address with some Stallings. I know issue there. The little logo I have here is 28 by 24. But I do have a little bit of padding their off four pixels toe left, and we'll understand why I'm doing that in a minute. And then the cities are falling is a sign 28 24. OK, now it seems a spicy everything spaced at by 12 pixels in between the site longer the text . Hey, search le guy and the settings longer. There's 12 pixels off grid gap again, I guess you could say. And there isn't one that pains down there is because I want just a little bit of extra space in between. These two are cons. And between this icon and the text here. Okay, but I want to preserve 12 pixels between these two. Now, that sort of that we've got some patty, only the side as well. Okay, so let's get started. And the festival going to do is I'm going to basically build up the icing off this. Okay, so come over tomorrow, Body element. And the first in the attitude is built out. This look I with and in contact. So first I'm gonna put everything it sort of hit up. Do you have an ankle tag with hatred, if off that. So just a hash. So it just stays on the same page. Then start this. I'm going to add an image. So and I'm going decides images. And we're going to your site like a doctor's VJ And the out for this will be a large digital. Okay, No issue there. Now I want to address the main total here, so that's pretty straightforward on these. I hate one tag to do that and just put large digital cool. They are for the search longer here. That's just an image sort of image. Source equals images, icons, searchlights, VJ and I call that he said videos too easy and then another image or that Settings wire, which is images Icahn's. And I've called it many daughters Fiji here, and we'll give that an old off with side menu as well. Cool. Now I want to target these images in sort of s success. Suddenly I d and said this to search three years like on and not only for this one I'm going to set to What's God? Sittings are home, all right, so let's save this. If I come over to what we originally have well, you know for so much. OK, it's a bit of a mess at the moment because we have issues with. That's the first facing image that we have, right? So there's some sizing problems. You can see how headings and then we've got more icons. That's to be okay, but the first they're going to do is add the basic styling. Okay, so come over to my video, don't see it says and then add a step it and I'll be the first Lippett for this application . LG G. C. Yep. Why Tisei for YouTube, Top by styles tab and what we get here is ah, hate one selector, which changes the font size and the weight a little bit. So this becomes a little bit smaller and also is not bald. Then I am saying the body, Hannah said the main header that we just added for the entire toolbar, right? I'm saying that to a background color, bluish color, and then the what? Okay, I have 88 pixels, a petting on the other side. Cool for the actual later where we've leaked the main slight Logan. Right? For that day, I'm adding a width and height of the two pixels just to keep that icon proportioned. And then at the very bottom of tided, those two images and I'm saying to with of 28 pixels, but with just a little bit of back. Okay, if I save this well, we get a big Paula miss. Okay, So what's happened here is this silo go is very, very huge, right? And also things that lined out. What? We want them to bay. Okay, now I gotta fix all this using CSS grid. So before I do that, I encourage you again to positively I try this yourself and get back to me in a moment. Were you able to work it out? It's a fantastic if not while we'll go through it together right now. So the first thing I want to do is I want to get this Hedda to be exactly 48 pixels high, because at the moment it's whatever it needs to bay the feeling this huge I call. All right, I'm going to do that by using says that's grid. And so I'm going to create a grid on the body element that has to rosen in, and I'm gonna do it like this. So your body and then display grid and they don't use the grid property to set to rose One column. So for the first Roman to be 48 pixels, which is what we want for that hit up and then for anything else that we include After this , I'm gonna said to one if I okay, and then basically, I'm gonna have one column of one if our as well, right and save. And that creates this heady bring 48 people's hearts. They're just to be completely. Yeah, I am gonna add a main tag and sort of here just like that. I'm not gonna do that because that's when you use your future body up. But I wanted to do that so it matches up with the one in five life. Yeah. Okay. So now we have a grid for the body with to rise one calm, cool. The next thing is to target the issue off having this massive site lager. I'm gonna do this by also converting this head out to agree on display. And then we're your grid block side, and then all of a sudden, because we committed to a grid, everything tries to shrink down to fill inside that grid. That's a nice little thing that you get for free. But obviously we don't have it in the format that we walk. So the next thing we need to do it is to find out grid. Now, I said that I want to have this be 32 by 32. Right? So we already have the anchor element being 32 by 30 turn. So we should have to worry about the hot, But for the grid, I'm gonna say one in five for basically the entire heart off that hitter for the rise. And now for each column have 32 pixels for that logo. They know that the heading so they have one if I for that cause I want that to grow based on the other three elements that we have inside this grid. And then for the last two going to use 28 pixels and 28 pixels. Why? Well, we've got a wit that here, anyway, of 28 pixels. So the monster you said for the greatest wall. Okay, so when I do this, we get this result. Okay, So we nearly where we want to obey, we do have to deal with the gaps. So let's do that now. And we can easily handle that. I just got a grid column gap and say that to 12 pixels. All right, because I said that the gap between here was 12. I believe previously, So if I don't say this, they got that gap. Okay, Now, this is all great. We've got everything kind of where we want it distributed along the horizontal. We just need to censor everything. And we can easily do that. This guy along items center finger, all right. And that is exactly the same as we have over here. Okay. And also find out changed the dimensions to another device. We get the same result as well. Okay. And that is how we create the top toolbar. And that's a little in a mention in this video. So? So you won't in the next one 4. Building the mobile first layout: Hello, everyone. In this video, we're going to be working on building the mobile first layout. So let's get to it. Okay, so in this video, we're going to focus on Mobile first, Okay? And we'll be doing that over the next several years. We're just going to be focusing on delivering the content we have here in mobile view and portrait mode. OK, so all of this that you can see on your screen right now. However, for this video, I all I'm gonna be doing is breaking this app down into sections. So the four sections I'm thinking off is the sum now, right? This spiffy up the basic video details. So the title, the views to social or the call to action, so to speak, and the channel information all this would be a section of its I. Then we've got ever live videos, which is this entire section with all their videos and then the comments, right? So I'm breaking the stand into four different areas and basically, what we'll be doing, It's just adding a little bit, takes the representative sections, OK, The thing is, I want to do it in a why Where later on. Well, we have to do is read to find out grid and everything can kind of move with it. So I I'm going to be using grid areas to do this. Okay? So if I switch it to sigh ipad and then let's get mode, then we can do this easily. Okay, So to do that, we have to use green areas. So firstly, before we get to that guy, let's define these sections, you know, html. So then come over. And in my main element, I'm just going to add a bunch of dudes here. Right? So we're gonna just add four lock site, give each one in our day. Yeah, I d And this one. I'm gonna call video some now, and we'll just copy and paste this on the right. If people are wondering, why don't you like, you know, you just generate this by using those that Zen car deliver. It is it's because I like to do it slow and so that people can follow along. So then video details and related videos. And also we'll have video comments Cool. And inside of each one of these, I'm just gonna put the text that we have here? Which is this is where the thumb nail. Well, God, next one. This is where the video details will go in the next line. This is where the related videos will go. Lastly, this is where the comments will guy cool. So if I come back over to my original one here, which is what we have from the previous video and save, we've got the same result here in terms of how it appears. So it looks like with done. But we're not okay. Once again, we're going to define grid areas for these four dibs. Okay, so with that said what? I want to stay using this for everything on the first section here for this one. So it's goods section and in fact, for related years on what changes tone aside because it's kind of like an aside. And they made it for the last one. Also, add a section. So the only one that will be a div is the thumb. Now I think that's better. OK, so suddenly change anything at the moment. But this is just more semantically correct in my mind. Cool. So now I'm going to ask you guys to set up a bunch of good areas to represent each of these individual elements inside that made element, and then just may be tested around by shuffling a few things around. Okay, So go ahead, force a video, trying it yourself and come back to me in a moment. So we have the weight that at, if so, fan Testy. If not, we'll go through it together right now. So what I'm gonna do is come up to my video. I don't say assess. And basically, under all that hair, this stuff here, I'm gonna add a selective for mine. Okay? And then I'm gonna set this to a grid lock site. And when I do this, we have this situation where everything's kind of spending to fill the entire space that main takes. So I'm gonna fix this by ensuring that once again, everything is a small that needs to bay just like it is here. Okay, Everything's squeezed up together. So I do this. I'm gonna do the following. I'm going to use grid, and then they get to a new line and they start talking at some good areas. Tonto video, Some now and this will represent the thumb now in our design. So this yet and I'm going to set a max content size on that. All right, so Max content will ensure that it's only ever gonna be as big as the content that's inside of it. Okay, They get to the next line, I'm gonna put in video details, and once again, I'm gonna make that Mexico intent. Then the next line, I'm gonna put related video eyes Max content on. And then finally, video comments and max content and then on the last line was gonna put one in five for every one call. Good. Now, if I've done this so correctly, everything squeezes back up again, okay? And that's what we want. We want everything to be close to each other. Now. The next thing I need to do is to find areas for each of these sections, right? So come down. I'm gonna grab my selective for my first section of Arabia, which is video some now and already selected for that. And I'm going to give that agreed area off video. Some now go just like that. And then I'm going to the same thing for the other three But this is just like that and they use video details. I believe that's the same name yet relying video is this society, I think. Yes. And your comments? Did I get the same night for that? I did. Sigh. I'll grab the video comments one first and what times that day, you know, uh, okay, so also here, and then we'll grab a lot of videos. We'll do that one next. Well, then video details and Shane stays. If I save this right now. Well, nothing stretched. However, if I decide to maybe move one of these around to say I wanna put related videos before with your details. Oh, just test is that? And now we can see every here. The Relais video is has gone above the video details. OK, so it is actually working. Someone put that back was try putting comments, moving that above the real ideas and save. And that works, too. And then maybe we'll also take the same one and put it at the very top and Saif and that works as well. Okay, so it looks like everything is working. The why we expected toe, and that's all I'm gonna do for this video. So see, you won't in the next one 5. Building the thumbnail: how everyone in this video we're going to be working on building the thumb now, So let's get to it. Okay, So in this video, we're going to work with their very first section, and that is the thumb. Now, Okay, I'm gonna be eyeing this image in replace off where it says this is where the thumbnail will go, OK? There are just too believe a disclosure. The image I'm using for the thumb now is exactly 1920 but to 90. Okay, so I'm just gonna be re sizing it based on the size of the device. But normally what you would do is create multiple different versions of the same image off different sizes to cite band with. Okay, that's not women be doing here, because that's not the focal point off this course. Okay, so just know, I'm just gonna be using the one image and reciting it. Okay, so let's do that. Okay. Firstly, we have to get the image into the HTML. So I go to my HTML and I had that image in, So I want to come back to my first him first, and we'll delete this year and we'll add an image tag goes source images video is and I'm going to use main video dot p and J and I'm gonna give this an old off. I would say how to fill your course, and that's it in sight. And what you going to say is a very, very large image. And that's because, as I said, it's 1920 by 2 90 Okay, so I'm gonna resource this with a very simple snippet. So come down to where I have my video thumb now. And just under that only used to snippet L D g c ap. Why TC some nail stalls and tap and all this is doing is saying okay, whatever the width of the window is said the words of the image to be that okay and in the heart, Well, I said in that 100% is gonna keep someone of an aspect ratio. OK, so I say this. Now we get that okay, And that is basically the final result that we want. This is a pixel to I still have this one said the galaxy. What is it that the people too? Now we have the same result. Okay. And that's a little wanna cover in this video. So say you all in the next one 6. Building the video title and views: Hello, everyone. In this video, we're going to be working on building the video total and views. So let's get to it. Okay, So in this video, we're going to focus on the video details section, starting off with the title and the view cat. Okay, so I'm just gonna jump straight into it and start any nights to know. So because I'm dealing with a title and a view care, I think this should go on ahead up to site. So and I'm going to use a page to Element to represent the total. So I'm just gonna put here out to film. You're on course, just like we have there. Okay? And then directly under that, I'm just gonna edit Deve and put in, eh? Geez. Okay. I give this diva in our day, and I said it to video views. Count just like that. Okay. Ever come back over to my original and save Well, we've got this. Okay, But ultimately, we want to get to this point. So all I need to do here is at a little bit of styling, and I'm going to use a snippet to do this. So coming down to where my via details is right here. I'm gonna ask Tippett called l d g c ap. Why TC video title styles, Ted. And what we get here is we get a haste to element. We've changed the font size of trains the line high a little bit. I've its margin. So we have been spicing between that and the view can't and I've reduced the front white to be normal. Then for the video details hitting or hit, I should say I've got paying lifting pain. Right. So that's joint to apply That overall hitter we have here, I don't say that. 12 pixels. Then for the video views cat, all I'm doing is increasing the phone side just a little bit and changing the color toe, have some capacity, okay? And be kind of black. All right, well, there do before I run. This there is I'm gonna take this. Hates to I'm just gonna move it up under the h one. Just so I got my head is all together. Okay. Now, if I say this, we nearly that we've got the head obeying the sauce that we want the view camp con obeying the way we want it. I think the anything that we're missing is the top. Petty. All right, that's pretty easy to do it. All I have to do is come down and for video details, I'm just gonna add of petty topia of 12 pieces, excited and safe. And big guy, we've got what we want. If I compare, the two did the same. Okay? And that's all I'm going to cover in this video. So So you will in the next one. 7. Building the social interaction section: Hello, everyone. In this video, we're gonna be working on building the social interaction section. So let's get to it. Okay, so in this video, what we're gonna do is start adding these social media icons or call the actions where if you want to call him, all right, we're gonna add them directly underneath that title and a few camp, As you can see, right now, we have five individual icons with some text directly underneath them, and they seem to be evenly distributed. Okay, so let's have a look at what we've got here. When we hover over the main grid, we can save about five equally saw cells, right? And then fate cell. We seem to have another little grid where we have to cells in there, and we got the save and things of that nature. Okay, so let's get started with how we're going to mark this up. So I'm gonna write the following. So underneath my head up, I'm gonna have just I div right. And in a given an i d off social container. So I'm considering them social media icons. So that will be the Cairo container we have for all the are constantly want lined up side by side. Then for each individual item here, we kind of have to this the Children. So we have Dave, and I'm going to say class equals social. I don't like so. And for this one, I'm gonna put a class of active as well, because they don't blossom stalls when it's active. And then inside of this, I'm going to have the image and the text. Okay, So nice one. I'm just going to add my image source equals images, uh, icons and we're gonna go with for the 1st 1 thumbs up balloon. You thought that Okay, that's just because it's blue. And then basically, I'm gonna add an old and just talk thumbs up like that and directly under that, I've got a paragraph. I give this a class off social. Well, special item tryingto. And here I'm just gonna put the number nine. Uh, so I'm just going quickly say that looks in our current version and save and wow. Okay, so we do have an issue here and that. Is that the social media icons really big right now, but we gotta fix that when we do some start Okay, So I'm gonna add the rest yah for the next four. So did absolutely copy and Paste. And they removed the active value here in table over. And then I'll copy this three more times, prized eyes and priced. And then I'll fix all the tabby issues we have right here, like so and initially, one more and this one here be set in. Cool. So if I run this right now, we're gonna yet a whole bunch of thumbs up. All right, so we'll just change. The image is a little bit here, so we want Hey, sums down. Probably for this, I have a thumbs down blue or some stand default. Yep. Some stand a foul and changed the text two thumbs down, likes I and then we'll leave it. Now, in fact, will make this number zero to match what's over here. And then for the next one, I'm going to try and steal the logo today, uh, share default and the old well said to share. And then the text here will put share. And then for the next one, I'm going to add the save default. That and fancy old to save. And then the text here to save so And lastly, we've got a report. I want the phone report and report, and that should be everything. So if I come out and take a look, well, we've got a fair few issues here, obviously, and that is now images are really, really huge. Okay, so that's quickly gone. Fix that snippet. So directly underneath the video of you Count that we had in the previous for the I I'm going to go l D g c ap. Why TC social like on star and 10. And then we get all this stuff where for the main container, right? That encapsulates everything. So this thing right here, I'm adding padding off 12 pixels on both sides. Then for each social media I item, which is basically all the Children for the social container. It's one of those. I am basically saying the fault text to lie Blackie's conta color. So basically the colleagues here, that gray looking color and then if it's active, I'm sitting that text to the bluey color. So that's in the kind that's blue here and then forced the images. I would say all the images to be 24 by 24. Okay, so that should reduce the height of and width of these. And then for each bit of text that goes underneath it. It's text here. I'm just increasing that a little bit to 1.2 r e m says 12 pixels and that is it. Okay. Now, if I save this well, we get a little bit closer, OK? At least we've got everything. Kind of where we want it now. The petting should have worked. I'm not sure what I didn't work. So social container. That's the idea. Social container. And so should contain a petting 12 pixels. Wait a minute. I think that's top and bottom. Sorry. Yes. That's topping bar on my back. We are going to address the party off the grid. SRE the them collection of autumns here in a different way. Okay, so with that said, I want you to now try and save you got from this to this. Okay, Now, just to give you an idea of how set it up, I basically have five columns and one row, right for each individual social icon and its associated text. And then for each item, I now have agreed as well Where we have the first rare e including the image and the second round. Including that text. Okay. And then I'm pretty much positioning them into the middle. Yeah, horizontally. And I many a grid gap there, I believe off. Let's take a quick look. Seven pixels. Okay, so now you have all that knowledge. I want you to go and try and get it from this to this on your right. Okay. Supports a video. Give it a guard and come back to me in a moment. Sad Ugo, we're able to work that out. It's a great if not well, we'll go through it together right now. So basically, what I want do first is I want to be out to get the social media icons and their text. So I saw OK, at the moment we can see that they're all kind of score stuck together and under each other . All right, so the first thing I'm going to do is make sure my social container that I specified for everything is a great that so do that. I regret this container, and just above it, I'm just going todo display grid and only show him on the right tibia. Make sure I don't have everything highlighted we got. Now, if I save this well, nothing much train just yet because it's just sigh. OK, I'm going to have as many rises native as may. As many columns is needed as well, Which, in this case, some 31 column and as many roses there. Autumns. Okay, so we need to adjust this. I'm going to use the grid property and sigh of what? One ride and then I want five poems. That's pan evenly. And I'm going to use a repeat function to do that. I want to do this now. We definitely see They're all side by side. Okay, now, obviously, we can see that the thumb and that is a white over in the left hand corner, and that's fine. We can fix that in a minute. Okay. Now, what I wanted to is I wanted creates the grid that's internal here and at that grid gap. Okay, So do that. I'm going to target each social item because that is a direct child off social container. And I'm gonna convert that into a great So he's got a display grid and save, and nothing changes yet. But that's fine because now we're going to add rogue AP. Okay, Now, I don't have to add any other template here because we are just after one column and then as many roses needed. So I don't need to add a template for this. So all I need to do is go greed row gap and set this to that seven pixels. And when I say this now we can see that we have a little bit spice in between these items. If I hover over and check, we can say with about that spice right now, we just need to fix the alarm in a little bit because you can say they sell everything is along the left hand side. Well, we usually deal with that, but just going into each social autumn and sitting justify autumns and so I I want them to be in the center. I want to do this Well, we've got exactly what we want. Let's compare to what we have exactly a sign cool, and that's all we needed to do. So that is the end off this video. So say you all in the next one 8. Building the channel details section: Hello, everyone. In this video, we're going to be working on building the channel Details section. So let's get to it. Okay, so in this video, we're going to focus on building out the child detail section. Right. So what we've got here is we've got the channel, Logan, we've got the channel name. We've got the number of subscribers is text here and it on the fire. Right. We have a button. That kind of actual subscription button. Okay, now, how I see this being set up is that I want all this information here to be in Sybil Hyperlink, all right? And I should be at a click anyway, he up. And I thought that linked to the child front as opposed to this, which is just a button that I just want to have. Okay, so there's the anchor element, and that's the button. Okay. Yeah, I saw the anchor element. I'm using I grid as well to just add some spicy in between the image we have there and the actual content. Okay. And then I have a role. I have a grid. Well, I have spacing in between that hot belief on the button now the spacing between the hobbling on the button at the moment is eight pixels and the spacing between the image and the rest of that channel. Information it's off. The hot blink is 12 pixels. Okay, so we need to take a lead into consideration when we designed this out. Okay, so it started. And the fist in moving to Dio is right The haste enough. This. Okay, so I'm gonna have our link attack first. In fact, I should put in service Div. I have already sent these two channels details inside that have that anchor element that I just mentioned. Hey, Treff and Financial said so that black side and then inside of this we're gonna take out image that we have there, which is that question mark and source equals images, uh, profiles how to anything. And then he had given out for that and just say how to anything. All right, so if I come over to my original page that we had it from the previous via and I don't have that highlighted even saved us right now. Well oh, I chose the wrong person. I wanted that have to anything. How to anything now if I do it now, it's correct. Okay. Cool. All right. So without the image there, and what we need to do now is include the rest of the information that we have, right? So I have He had to anything and the two k subscribe is But I want a group that stuff together. So with that said, I'm going to create another Dave, Give it a class, and we'll pull it now. I shall give it all day. No coolant channel. That metadata especially. That's what it is. Do that. And then inside of healing at a heady So he's hates three. And I'm just going to sit this to how to anything and then strike. After that, I'm going to add a Steve, give this in our day off. General. Subscribe. Can't. And we'll set this to was it too? Okay, some scrubs. Sure, if you check this out. Doesn't look that great right now. Okay? It doesn't look like this. That's fine. We'll fix that shortly. So next. What I'm going to is I'm going to add that connect button, right? So we want that connect button to be I want sought the anchor element. Come back out here ago, button. All right. And saw this button I've got include an image source and said these two images are cons on . We'll go site logo burned or spj the old. And I put a lot of digital for that. And then directly after that, that had a span element. And just put the word connect, right. If I save this right now and come back to my original Ted, we get this. Okay? So it doesn't look great right now, but I think I'm pretty happy with the hates, you know we have. So now we're just going to start this up a little bit, So gonna come over to my via dot sits thus far and basically down below the social autumn Bahia I'm just gonna use it out. Step it L D G c ap Why TC shuttle detail style untapped. And this is gonna give us a little stuff. So the first thing it's gonna give this is basically some rules for their junk details here , where I marry a top and bottom padding of 12 pixels. Right? And there are many of border topping born and disgrace color. So that represents these two. Lawrence. Yep. Then for the image that we have here. I'm just sitting a width and height on it because the moment, even though it looks like it's pretty 34 by 34 male may not bay. And this guy's that happens to bait. But I've just forced it to make sure it is steady, full by 34 and then for the subscriber chance. I've had a color off a slightly grey so similar to the one up here, right and just increase the phone size a little bit. And then for the button, I've had to do a little bit of work. Now you'll notice that this button has a lot of space between the image and the connect Yah , right? So I try to do this using Census Grid, but says this group does not work with buttons. OK, so I had to use a bit of flex box to get this to work. That's that's why I've got display flex, justify content, like to end all right, and then a lot on him sent up. That's to basically create this year, right? Another a whole bunch of other stuff to do it. Patty outline removing the border visited more wine, see a transparent background. So there's no background but on this and your phone size to it. Made the connect text look a little bit bigger up. Add the color. Made sure it was all uppercase and remove the outlaw. Okay. And so that I just made sure the height of the button. Here. Sorry. Hot off the image within the button. It's 16 pixels high. Which means that the SPG made 16 pixels want to. Okay, so I haven't actually saved this shit. That's what we currently have. So if I save this, we've got this, Okay? Where We've got everything being the stall, we want it just not aligned the way we want it. Uh, now that I think I'm just gonna quickly fix here is we need to add some petty on each side of this. We don't have that at the moment. So do that. Where do is come up to where I defined the where is it? Via details? Dash it up and I'm going to put another rule just under this like site. That's right. Hit out two, def. And when I say this, well, we got that indentation, But we're also happened. Is regarded indentation here on these social icons. All right, so if we look at the social icons, we'll see that was a little bit of padding now on the side of these two. All right, so it just makes both of these consistent And then without paying left and right on everything. Go. Now, that's the styling. What we need to do now is right. Cem six this card to get this working from here. Teoh here. Okay, so once again, I'm going to recommend you guys pulls the video, try this yourself and then come back to me in a moment. Sad you get, we have a what? That at if Sorry, fantastic. If not, well, we'll do it together right now. So the first young won a tackle. Is the child details overall, Devia kind of the thing that I have highlighted. So what I want to do with this is I wanna make this a grid and are then wanna justify things so that we have the anchor element and we have the button with a little bit spice between them. Okay, So do that come down to where everything is But first it actually, before I do that, I'm going to remove this page three anchor element. And I don't put that up here the way. Now, I just want to have my headings all together like this and my ankle element after top. That's just a global thing that I I I feel comfortable doing. Okay, so now don't that come back down. So for the channel details element. Okay, I'm gonna commit this to a grid. So this flight grid Spela, right and save. And right now, no huge amount. Stuff's going on that, OK, now, actually, I want to do is I want to be able to have things stand side by side, because right now it's basically to rise. But I also have two columns. Okay, So do that. I'm gonna do the fun way. I'm going to go grid one. If I for the Rose because I only want one road, and then I'm going to use one if I for the first column, and then I'm gonna sigh roughly about 114 pixels for the second call to fill that connect button here. Okay, So if I run this and save now, we get this. OK, so I was somewhat there, but I still want to add a little bit spacing in between these things. So I'm gonna take of Age of Grid column, Got to do that box sign, and I'm gonna sit this too. I pixels all right. And when I say this, we're card almost there. OK, we've got the spacing that we want, but we still have to address their very first thank attack. Okay, But before I do that, I'm also just gonna sit here a lot of autumns and sit at the center just to make sure everything is in the centre vertically. Okay, it is looking these right now, but that may change when we change the egg element around. So with that said, let's focus on this anchor element this thing, right? Yeah. Okay. We need to create that is a grid and break that at into two columns as well. So straight onto that, I'm going to add a selector. Yeah, has shuttle details, and we'll go. I just like that. And then all I'm gonna do here is gonna display grid and we'll go grid and I'll set one if our again and then for the first column, I wanted to be as wide as the image. So we know that study for put 34 pixels here 34 24 outside and for the 2nd 1 was gonna want to file, okay. And the other added grid column gap here and said that to 12 pixels, cause that's what I mentioned earlier. It would bay and also throwing a long autumns and said that the sent up So everything is scented vertically there as well. If I've done this right, Bingo, that is what we want. Let's compare. So I jump between the two. We can. They'll see they're exactly the sign. Okay? And that's all I want to cover in this area, so So you won't in the next one. 9. Building the related videos autoplay section: Hello, everyone. In this video, we're going to working on building the related videos or I apply section. So let's get to it. Okay, so in this video, what we're gonna work on now is the order. Apply options. Four related videos. Okay, So basically going to start working in the Reliant video section? So what do we got here? We've got an up next pizza text full of by a little spice, followed by the ticks. What I play and then we've got this slider feature widget thing right now. I'll explain how I'm gonna build that at the moment. This are pretty much copied it from YouTube directly. Okay, so when you get into the html for this first, and so when you come out up and the first thing we do is that a hit up? And that's ahead of that? I want to rappel this inside off because I can just consider this the hitting for the rely videos aside, right? So I would That said, I'm they have an ad div with the text up next in it, then at another Dave with the text. What? I play like that and they have a button that's this button will represent that whole slaughter thing here and saw this button. I'm gonna have to span elements like side Okay, Just like that. And the class I want to sit on this fist span is what I fly flawed out. And the second span, I wanted to have a class off. What a place flawed at total button go. There's not gonna be any contents of the spares. And that's because we're gonna use some styling to get into the sauce is that we have here . Okay, so that's how I used to know. All right, So I'm gonna jump goes up to be I don't see assess, and I'm gonna tell us not to slip it underneath this related video, Shia. Oh, yeah, L d d c ap Why TC Auto play style and tab. And we get a whole bunch of success here. Okay, So the first thing we have is a selective for that header that we just added any and pay top petting bottom and a font size right, saying that default font size the 1.4 or am I falling pixels? Then we're tidying that button that we used to at this total thing around, and I see a width and a height on that, removing the border, removing the outline, making the trend of the background transparent and saying position of relative. I understand why we have this in a minute. Then for that first band, which I gave inside the button a class of order play slaughter. I'm saying that the block I've seen the width and height of that to be the same as the button. And then I'm marrying this border, which creates this blue border thing that you see right here. All right. It's a bit of a trick that you can do to create, like a slaughter, right? So easy that trick and they all say, aboard a raise of seven pixels. So it's rounded, okay? And if the last one I'm just creating a button. So this circular button here, which is 2120 is absolutely positioned right, so it's absolutely positioned to the button and is positioned at the moment to the top left . But then I shuffle it up just a little bit, said the boy race to 100%. So it's round and it better and color of what And then I had some books. Said I think of that shadow effect. OK, so if I come over to what we have at the moment and save, we can say we get exactly what we want in terms of the styles. Okay, Now we want to be out of go from this to this where we have this text on the fire left, then a whole bunch of spice full of bond. What? I play here, followed by Gap and then Fuller Boy, this slaughter. OK, so once again, I'm gonna ask you guys to try this yourself. Supports a video, give it a guy and come back to me in a moment. Said you go. We haven't worked that out. It's a fantastic if not well, we'll go through it together right now. So the first thing I want to do is when I add the petting on the left and right here is every little with God, we can say at the moment we don't have that. So coming out to my success, I'm going to move up to where Ah, I made the padding for video details. Where is it? Rocky up. I'm just gonna add related videos. Just is another selected there. I want to do that. Now we get this result. Okay, But we have the situation with the petty on the left is exactly the times only have this above it. Okay, so the next thing I need to do is our needs be data set the head up where all this is wrapped around. So if I look at the high html this area here, I'm gonna might disagree. Okay. Coming from a CSS on scroll down and I'm gonna form that hit up, and I'm gonna set a display on this. The grin. All right. And when I do this, nothing much happens at the moment. But that's because we need to provide some columns. So here I say, we have about three elements, so I saw it. Therefore, I want three columns. All right, so I'm gonna come Teoh here and go grid, and I want one road. That's one fraction, and then I want basically a one fraction for the first item. So I want this up next, girls, because it can. Then for the next two, I kind of want them to go as big as I need to to fill in the content some of these air Appiah and go to times max content inside. And when I do that, well, we're nearly there. Okay? I just want to add some spicy in between the order play and the slaughter, and I'm just going to achieve that. Why? Using grid column Gap. Okay. And I'm gonna sit this to eight pixels and save, and I think that's pretty good. If I look at it, it's almost correct. I do say a slight little difference in the little trouble there. You can say it's a little bit lower on the final product that's pulling because I need to use a long items and said that the center if I say that and now we talk between, that's it. They're exactly the sign, and that was all I'm going to do for this video. So So you won't in the next one 10. Building out the related videos: Hello, everyone. In this video, we're going to be working on duty at the Reliant Videos. So let's get to it. Okay, So in this video, we're going to focus on putting this list overloaded videos. And what we'll do is we'll stuff designing one of them, and then we'll just run a sniff it to get the rest. OK, so with that said, let's get started on what I'm gonna do first is the html. So directly under the hitter for reliably aside, I'm going to add a new ordered list because really, this is a list. Yeah. Okay, let's That's how I see it. All right, so then for you. Well, I'm gonna have an ally like so and then inside this ally, I'm going to have an ankle tag that wraps his whole thing, right? And it's just so if say, it was a real application, we could click on anything and would actually go to that video. Okay, so at a ankle tag, Kia, give it a drift. Now off. That's and a bit toddle on it. And the thought of obey What the total is right here. Okay, so in this guy, something to put why I laugh at most c ose except and close it off. Now what? I say this list on him actually being there is that radical. That's it Been an article. Because if I was to take it out of its kind of location, we can still understand the gist of what's going on here. Okay, so therefore, we interrupt this with the article. What site? And this cycle will be? What? We probably will defies a grid. Okay, it's up to you. You have entered this yourself first, but that's essentially what I think is gonna happen, you know? So the article and then if I look at the information, we haven't thought that Eichel we have an image. So at the image tag for that for this on the source images and we'll go videos and I'm gay to choose. Try not to laugh like so. Remember the old off? Why? I laugh most see us just like that, Okay? And then I don't look a little bit further and go. Okay. Now I want to actually have a title for this. Somebody hates four element and have why I love at most C e O's like so And then really, what we've got is two paragraphs, one which has the name of the channel and then one that has the number of use. It was at two paragraphs for this, and the 1st 1 was gonna put its may without The apostrophe should really have an apostrophe because that's not perfect English otherwise and the 2nd 1 will have the 2 to 1 views, and that is pretty much the height. Steam l don't want to sit up for each list are all OK? So if I come over to what I originally have right now and save well, things get messy and they get missing pretty quickly. So you can say that if I try to scroll, it's a little bit tricky things that caught of over flying the width of the mo ball and so on, so forth. So we need to clean this up a little bit and I do this. We must snippet so directly under the water place. Lot of total bottom that were used in the previous video. I'm going to add this snippet l d g c ap. What do you see? Related media list styles and Ted Okay. And we get a whole bunch of stuff you. So the first thing we get is for the overall relying videos, the whole section itself, Which is this here, Right? I'm just the moment. Hang some padding bottom at the bottom of everything and a border bottom. Okay, so that will basically get this little space down here and that line. Okay, then, for each list autumn, right? I'm saying, imagine bottom with 12 pixels and the style of nine so we don't have a little duck point. So that's basically gives that little bit of spicy here between the autumns lives between H autumn like side. Okay, then for the last one, we're just turning off that bottom margin because the last one, we don't want to have that. And that's fine. Then, for the Eichel that we embedded inside the list. Autumn, I'm actually saying a min heart and a Max Hafia Tinordi pixels. And that's because this could potentially grow our ah lot if say, we have a lot of text. You all right? Well, the images itself was really, really huge. Then it will continue to grow it just as it has here. Right? So you can see, right now, it's very, very big because the ladder bay, but I'm restricting that now. It's nine pixels, so this should come back down to a reasonable sauce. In theory, that's what I think is gonna happen here. They're not basically saying the image to Under said the with 100% the heart. So you understand MAWR how that works when we're starting for many out grid and then for the Page four element which we have here, this thing here or better over here. What I'm doing here is arm allowing it to wrap but early, allowing to wrap this fire as three individual lines of text. Okay, that's where this Web kid Long Clan comes from, and this would kid box variant vertical and this display Web kid box thing comes from right . It's a bit of a hack, but it works. And then I'm also seeing Maxwell here, and that makes it work on makes it work on non chrome brasses such as Firefox and things like that. It basically restricts the hot off what this conveyed A and then, if you have more text than conf ill, it'll just disappear. Okay, I'll disappear because we're using Overflow hidden. And then if we are over flying Oh, Addie ellipsis. Uh, not really important for sees this grid, but it works. Okay, then. Fage paragraph that's inside that article. We basically saying the phone size to 12 pixels at one point r e m and city did great, right? And that's it. So far. So finally, I come over to this step here and save we get this So the image is still dominating at the moment. That's because this is a very large image. So it appears that everything else has disappeared has disappeared because we set a max heart here off. What was it? No, any pixels. Okay, so what we need to do now is we need to basically create a grid that would put this image on the left. But this here, right? And then put the rest of the content on the right, as we can see here. Okay. And a little bit spacing between those two things. Right? So before I do that, though, I'm just gonna make one more change up the top for my heights full tag. And I want that to use the same font size line high. Imagine bottom as any high street we have. Good. And that's it, Really, At this point. So what I want you to do now is I want you to think about how you can get from this to this using CSS grid. Okay, so again, I encourage e plausibly I try this yourself and come back to me in a moment. So will you have a weight that at, if so fantastic if not well, we'll go through it together on now. So I previously mentioned that I want to make the article the grid. Well, that's exactly what Mother here is going to come out to. Where the selectors for my article, and I guess it display the grid and save and look at that. So what we have now is a grid that is 90 pixels high because we made the max quiet 90 pixels, right, and then everything squeezing in to fill in that 90 pixels. Now what it's done is it's actually shrunk the heart of the image to do that. But we can fix that in a minute. Okay, so they're step is to take a look at what we need to do and that is the quantity. Two columns here. Alright, But in a column that fills in this image, and then we need another column that fills in the rest of the information here. Okay, so let's do that. So then come over. And I'm going to add a grid property. And for the number of rows, just for the moment, lucid toe one if I but but I'll change that in a minute. And for the columns, I'm gonna sit the first column to 160 pixels. All right, that's just a number that seemed to be comfortable for me. Teoh give good dimensions because I'm thinking of that 16 9 aspect, Rocha. Okay, we know the height is known in pixels, so if I'm going 16 by nine, then the which should be 160. Okay, that's where I got that number from. And then for the rest of it, I'm just going one if I Okay, so if I now save this and come back to the right. Ted, we can you be closer, okay? We're almost there. We do have some text in the wrong spot, but we'll fix that in a moment. Okay? So The next thing I want to do is I want to add that column gap. Right. So let's do that. And the column gap I'm gonna give here is eight pixels. So I got grid Coolum Gap, eight pixels and Saif. And as you can say, we've got to get now. All right, so we're looking pretty good, right? Anything you need to do now is deal with this information on here. So what I'm thinking is, instead of having just one road, right, we have all this information. We might as well have three roads. Okay. Where the 1st 2 rows are small, they can be I either hopefully be max content. And the third ride will bay fill in the remaining spice. A case would be one if I and then once I do that, I'm gonna make this image span all three of those rights. Okay, So basically, what I need to do is I need to come back over here Where? With one If I I'm now going to add a repeat by two off max content and then one if I just like that And when I say this and again, come to the right tab. Well, we can say things are still off a little bit, but now we have multiple columns at multiple rise. Now we die. That the driver, he yet because of the fact that we haven't accounted for this image to span their story rise. So we need to do that. So directly underneath that I have my image and I can just put here grid, right, Spend three inside. And there it is. I think that's exactly what we want. Let's take a look. Sorry. We'll bring them both back to the very top. So he compared Looks pretty good to May. Okay, I'm pretty sure that's correct. Now, I'm just gonna add the rest of these list artoms in by just using a snippet. So once again, I'm gonna come over to my email and directly under that we started. Um, I'm just gonna get ah l d g c ap. Why TC remaining video. I remember the name of this is just give me one second, uh, remaining related. This is related video html and tab. And we get all this heist email if I have done all this right and I save gonna come back to the right tab. Uh, it took a bit so light, but finally it did lied. And now we can see that. You fucking scroll. There are all the autumns. Okay, so we did it with a All right, so that's a long one showing this video and I'll see you all in the next one. 11. Building the comments heading section: Hello, everyone. In this video, we're going to be working on building the comments heading sanction. So let's get to it. Okay, So in this video, we're just gonna be focusing on these comments header down here that we will use too hard and show the comments. Okay, so basically, what we have is a heady and then next to that isn't up and dinner guy and women cook on them. It changes, Okay? And also, when we click on the Donora, it's going to show the container that will have ALS The comments, right? The comment list itself. So that's essentially what we're gonna be building here. So let's get started. And firstly, I'm gonna write the hedge to know for this, so I should really expand it out so we can see everything. And for this, I'm going to add a hit of first to represent that top area. Here is comments three and the heirs. Okay, then directly under that, I'm gonna have a div. I'm gonna give it an RD off comment list container. Okay, inside that. I'm just gonna talk. This is where the comment form and comment list will gut. Okay, Never deal. Now back to the hitting. Katia. We need a heading for comments 0.3. Somebody's I hate to do that comments, and then I use this at me dot That's the add little dot in between comments and three and then the number three. OK, then I'm going to an image which I'm gonna given Audie off comments downtick. Okay. And a source off images, icons downtick dot spj an old off. So comments. Because when this is visible, this common identify is visible. Well, the comments will be hidden, So when we cook it, we won't show the comments, okay? And then because we need another image for the upper right, I'm just gonna copy in pace and then just change a few things. So uptick tick And what from it? Cool. That's relatively straightforward. So find out. Come over to what we have at the moment and save Well, when I scroll down, we're going to get this right. We have our hitting up utopia. But then we have these massive arrows, right? And then we finally get our comment list here. The very bottom. So I'm gonna fix some of this with just some styling so they come out. It's my video, Don't say says and directly on the video comments. I'm going to use a step it. And Steven, I'm going to use his L D. She see at why TC Koeman's heading Style and Attack and all this gives us is a fault. White for the heading, right? And then we're also Harding that up arrow and this list in tiny down here by default So funny. I say this. Now we can say we only have that Dan. All right, that's visible right. We still have the issue of the bane too big, but it's available now. I just want to quickly fix impending here. So I'm gonna add some top and bottom padding to the video comments. Just eo padding tough 12 pixels. And we got padding, boredom, 12 diesels as well, and that will basically bring it down a little bit. And then we need to fix the left and right. It's gonna come back up to we have to funded, appear left and right right here and then just guy video comments and save. And then you could say it's gonna attempt where we want it. All right, if we look but where it is here. You can say the spaces rough with site. Now to deal with this, Dan are Well, I'm going to set up a grid to make sure that not only is it the right size, but everything is placed What? We want it. So we've got the arrows being on the far right here and the hitting being on the fire left . All right, so I want you to try it yourself, supports the video, give it a guy and come back to me in a moment. So we able to work that out. If so, fantastic. If not, well, we'll go through it together right now. So basically, how I see this happening is that we really just need to set the header that I created then here to be a grid that has two calls. All right. One will be as was. It can be a and the other one will just be be enough to fill in that little our there. Okay, so, basically, if I scroll back down and i g o under, uh, video comments here, that's guy hash video comets. And I'm going to target the Hedda. I'm going to go display grid like science. If I come back out to the right, Tapia and save Well, nothing shines yet, but they're not just gonna go grid like side one if I Because I only want one right. And then one in 54 that heading section here. And then I'm going to use 24 pixels to ensure that this is the only 24 pixels wide. Okay? And when I do this, there you go. Okay. With a little data are in the wrong hands. Sawed and hitting is on the left. Okay, Now, we can't total yet because we haven't added the job script to do that. So all I'm going to do now is come over to my index dot html, come to the very bottom of the file, undermined mein and add yet another slip it okay. And the step it I'm going to use is L D V c ap. Why? TC comment heading script. Okay. And when I tab, we gotta get a whole bunch of job script, Okay? Now all this really does, is it finds a bunch of elements by date, and that's why I have these are days here in the first place. And when we hear the click the down era or the up arrow, it's going to change the behavior off each of those arrows with heart and show. And also it's going to change whether the comment list I and I can show because that's the wrong one. This here is hidden or not. Okay, I'm not going to spend much more time than that. Explain what this is if you want to eat it yourself is pretty straightforward. Okay, if I come back over now, I save and scroll back down when it saw as it wants to let me now, if I click it, we can say it's working, likely the upper era. The list disappears down. Our it shows up, okay? And that's all I want to cover in this video. So say you all in the next one 12. Building the add comment form: Hello, everyone. In this video, we're going to be working on building the ad comment form. So let's get to it. Okay, So in this video, I'm just going to focus on Bruny This comments form section here. Well, we have the person who's locked in making the comment, and we got the image that and then we've got a text. Their representative, will you talk to come in and separated with the spy CIA? This will save space below it and a border. And there's a little bit space above it to the left of it into the rod. Okay, then directly under that form, I have, like, a placeholder area, the way the comments will eventually go. OK, so firstly, what's marketplace to know for this? So they come out of my national file and I'm going to write the following. I'm going toe, have a div. Nobody off. Basically comment form bashful. And then I'm gonna have another day of directly under it with a day off comment list. Okay. And then basically, inside the coming form, we've got out image. So in a target, images profiles Kim and they're given old off Kim here, just like so and there have been a text area. Okay, We're gonna have a place hold out, Was it? Add a public coming on. That is it. All right. So what also do is just quickly at the text year. So, yeah, this is where the comments will go, and that is pretty much the hasty now. Okay, so I saved this right now and come back over to in my original tap, swelled in and over there. Now we've got this. Okay, so we've got big image to the left. We've got out ugly looking text area at the moment. There's no spacing, no paddy, no border. And obviously, we have out Diva the bottom here That just says this is where the comments will God, Uh, so we need to start this up a little bit, come to my video. Don't say it says and under everything, I'm just gonna run a snippet and step inside. Iran is L D g c. And why TC home and four styles content. Now, what this gives me is all the petty and margins and borders and basic lots and winter things that I want. So for the comet form, I'm any imagine top here said, Imagine off this comes down a little bit and I'm also a survivor, all patty around the entire foam, which if we look at what we have here, we've got Patty all around that form. So then we go that border bottom. So that's that one that then, for the image I'm sitting into 48 by 48. So if we haven't to get a profile, it's a given that it will be restricted. The 48 48. I'm also making a rounded I was able to raise on sent and then for the text area. I'm anything but a penny and sort of it. I'm removing the outline. I am changing the color a little bit, making the phone sauce bigger, making sure that you cannot resize in a vertical direction. So if might be a little hard to do here. But if you grab that bottom, Brian sawed, you can resource. It might not work as well when I mean mobile view here, but that's what that's therefore. And then I'm adding a bit of border at the bottom as well, kind of Smith to give more of a shady look, which really isn't overly obvious here, Eva. Anyone then for the placeholder. I'm giving a different text color again. Okay, let's give that fated. Great. Look. Cool. So if I now come back over to what I have here and save Well, we're a little bit closer. I and everything seems to be spaced at the way that we want in terms of Patty imagines, and we're gonna have bored out and things of that nature. But the one thing we don't have is the spacing here, and we don't have the text area going all the way across the screen. OK, so that is where we're gonna use a says grid. So I want you guys to try this for yourself. Possibly I give it a guard and come back to me in a moment. So we have to wait that at. It's so fantastic. If not, well, we'll go through it together right now. So basically, all we need to do is change this form this comment form to be agreed. Okay, so I've got a comment form selected here, and I'm just going to go display grid save. And that creates a grid that's now one column and two rows. Well, that's not what we want you to create. Two columns, something agreed. We have one road which would just go sit toe one if I and then for the first column. I wanted to be 48 pixels and that matches the width of the image here and then one if I for the text area. If I say this, well, we're nearly there. I kind of got that image there and with a text area. But we just need that spice in between. Well, that's he's a day. We just got grid column gap and set the date diesels on site. And now we have exactly what we want. If I talking between the two tabs, you can see that the sign and that's all I want to cover in this video. So so you won't in the next one 13. Building out a list of comments: Hello, everyone. In this video, we're going to be working on Billy A A list of comments. So let's get to it. Okay, so in this video, what we're gonna be doing is building at the comment list section and also the format for each comment. So what I have right now are three comments where the first comment is based on the person who actually owns a video. So I had to Anything owns this video, and we indicate that with that blue background around the channel nine and having a text set, it's what? Okay, they want it. Art earning the video. It just blew right with no background at all. We have their profile here on the left. We have the comment here under these the channel name. And then we have, when it was posted, the number of likes and then a thumbs up and a thumbs down. Okay, so this is what we're gonna be building. So let's start out for the hasty Mel. So come on up. And I'm going to create a did for the first comment and have a class here off comment right there, because it's my comment i e. It's the channel that runs the videos. Comment. I'm going to add a class of more comment as well. The other two below. It won't have that cost because I want to style this blue bitch. Yeah, I'm going to add it for now. It's sort of this, Dave. I'm now going to at the image for the profile, so I m g source equals, uh, images. Profiles had to anything. And then they specify old here off how to anything. All right. And that's it for the image. Then directly under that, we're going tohave the anchor right for the channel Name on a point this to nothing right now. But also give it a title off. No to anything. Who and saw this ankle. I'm just gonna have to spend right, And that's for stalling purposes. And put the child, DiNozzo, it. So I feel you with me so far. Yeah, I saw the ankle tag underneath it. I'm going to add that comment. Right. So at a paragraph for that, And they don't just talk. The comment, which is Do not has the tight to let me know what you think off my video. Thank you. The police should put this on a different line, but I'm just gonna leave. It is one long for now because I'm not overly worried about it. Then I've got all off these, uh, things here. We've got the time. The number of, uh, people who liked it and the social media. Well, this thumbs up, thumbs down logo, and I'm thinking this is probably gonna be a one grid. Okay, so one of the dude is I'm gonna rappel that with a div. And you the class off comment that statistics. Okay, the inside this, Dave, I'm going to rot always out. So for the 1st 1 is gonna be a paragraph, and we're gonna put one week ago in there forward by the next one, which is also a paragraph and was like class. And I'm gonna give that a comet status. Ah, separator. And that's just a fancy class. They don't want to give to this little daughter on better Pia, if a So we're gonna style this dot So it's warm in in class CIA, and then directly under that, I have another paragraph which is going to have the number of lots which is three at one in This guy's all right. Oh, that I'm gonna have to Two images, image source, An American to guy images. Ah, my cones! And we're guy thumbs up defaults like site and given cult off thumbs up, All right. And then I'm just gonna basically copy that alongside and paste it and change a few things . So thumbs down and thumbs, then because that's the comment structure, the learning to use for this first comment and pretty much wait for the others as well, other than we'll remove this class. My comment. Okay, so when you come out to my original tap here and then I open up my comments and I'm going to save this heist email and see what we get if we scroll down and open it up. Well, we get a very big set off, thumbs up and thumbs down, okay? And that's because we haven't sized anything. Now we will address this using sisters grid, but firstly, let's it clean up the rest of the startling issues we have here. Okay, So do that by using a slip, it come over to my video dot sys. That's far. And under it, the last thing that we right? I'm gonna ask Tippett. LG G c ap. Why? TC comment, Styles and tab. And then we get a whole list of stalls here. Ah, whole bunch of it, actually. So we have my main comment when we had the class comment, Right. So to see up, that has a penny of 12 pixels all the way around. We're seeing the font size to 1.1 RM, which is 11 pixels. We're changing the color to a grayish color, and we're adding a border bottom. Okay, So if I come over and check what we've got here in this one, you'll say we're adding that little bored a bit here as well. Okay. As you can tell, most of stuff is great color, right? That's what all this does for the last comment were just removing that that border there. Okay, so the moment we only have one right over here. So we're not going to say that bottom border until we add another one. Okay, that's what that's doing. Then we have our comment a right. So that's the ANC attack that we wrote around the channel. So this thing here and basically by default was sitting into blue and a fun size of foreign pixels. Right. However I did at a class of my comment on it, so that's going to change the color to want. But it's also gonna said that background color that I just mentioned a blue right. It was gonna Adebola Reyes for those ran edges. A little bit of party, right? So you can say this is just a little bit of pain around the text and Sin City long block. All right, then, if you come down for each child paragraph that we have inside off the comment, which happens to just be this text here, all right, they'll be right for the comment. We're going to change the color of it. So it's now black. All right? We're gonna increase the phone size just a little bit. So it's different to the rest of the text. Yeah, and we'll add a little bit of margin on top and bottom, Okay? Just to spice things out a little bit. Then we have this points that separate up and that basically represent that dot right? And so I just did increase the phone size of that a little bit and tries the long heart. And that was a sorry that the dot looks like it's more in the middle. Okay, it was a little bit to lower, so I just buffet it up a little bit. And then, lastly for the image the statistics area, which is these two little thumbs, right? I'm seeing the width and heart of those 2 11 and 10 pixels, respectively. And saying I'm option left of ID pixels. Okay, so if I come over to my original again and save this, we're almost there. OK, so now we just need to shuffle things around. Okay? So if we look at what we've got with God the profound if I left and then everything else is kinda lined up to the right directly under each other. Ok, now there is some spicy that's different between these things. So basically, if I remember right, this has 12 pixels of space in between the each of these things. So if you look at the html, we've got paragraph for the one with only. All right, then we have a paragraph for the dog, that paragraph for the number and then an image of the name and try So these all have equal spaces, I think off 12 pixels. 08 pixels, something like that. And then basically, these images have a little bit more buffalo on them. Okay, So with that said, I want to say, if you guys can try and do this and get into this position supportively, give it a guy and come back to me in a moment. So were you able weight that at, if so, fantastic. If not, we'll go through it together right now. So the first thing we really need to do is deformed where grade's gonna bay. So I think the eye roll comment will be a grid, and the profile will be a one column followed by everything else in the other. Okay, now, how many rows will have I think will be based on this anchor. So this anchor here, then the comment, which is the paragraph and then the statistics. Right? So all this stuff? Yeah. All right. And then, basically, just gonna have the image span. All three rise. Okay, I said that creates this situation, and then, basically, we're gonna have another grid for the statistics here. All right. Well, spice, a few things out a bit. All right, So get a jump over to my video. Don't say says far, and I'm gonna come up to where my comment is, and I'm gonna say a display of great. Yeah, and that's the first step. So they come over and quickly get back toward I've got here and save. And now we can say everything is under the each other, and that's because we have a one column grid by as many roses needed. So then we need to set out grid template. So I'm going to sit that as, uh, we're going to have three lots of max content. Okay, so we have three rice, and then basically, we're gonna have to calls for the first column is 48 pixels and that will be because I want to make this image 48 pixels wide. And then what if I good, if I save this Well, things still are exactly where they are, but that's fun. I want to get this spicy Roswell. So I'm gonna add agreed Gap yah. Great column Get and said that eight pixels and save. And as we can see right now, there's a much bigger gap here. Then what? There is here. And that's because the image is not the sauce we needed to bay. So it's something I've got to do before. So if I come up to have a comment form image, I'm going to add another selected here and die. Dots. Ah, comments. He means like that and save. And now we've got the image being the size we want. Okay, so if we compare the two, we can call to say that the sign and therefore the gap is the same Cool. Now, for the rest of it, we just have to manipulate a few things. So first, then they get the image to spend all three rows. So it goes on the right tab first, and we'll do that. So just under human ago dot comment, it means, and I'm gonna go Ro span. Sorry. Yeah. Roast Ben. No. Sorry. Grid right, span three. I was wondering why it wasn't working. That is why. And now if I save this well, we have every everything, almost where we want it. Kind of got the profile image where we want it. We've got the channel name when we want it. We've got to come in where we want it. And now we just have to statistics stuff which we have to fix you. Okay, so let's go about doing that. So if we look at heights to mail again, we've got this comment, statistics thing. I'm gonna convert that to agreed. Okay. So I don't believe I've gotta selected just for that. So we're going to add one, and I'm going to add it. That's just under this, Pia. You guys don't come in that statistics like so. And that's it. Displayed grid, which isn't really gonna change much. Guy, it looks the site. Now I'm gonna have just a grid here of one in five, but I'm gonna have five lots of max content. Okay, So that means each of these autumns will be his biggest. I need to bay, and that's it. If I save this well, we're nearly there. Okay? Now, we don't have much spacing between these things, except for between the thumbs up from Stan, where we added a margin off eight pixels, I believe, and they said to be 12 pixels of pot. These lot here, and he had a spacing of four pixels, so we need to do here. This guy agreed column? Yep. And set this to full pixels and Saif And then we are. I think that's exactly the same is what we have over here. So if I quickly just check it? Yep. Looks pretty rot to may. Now, we don't have that bottom border because really have one item. Okay? But I'm about to fix that. I'm gonna do that with yet another snippet. All right, so the step it I'm going to use this time when I get to the right location here is L D g c ap. Why TC remaining ComEd's? Hey, did you know? And 10. And they have got that other comment. OK, The old, the other two comments I should say so for now, if I say this and I check when it loads and open it out, hopefully we've got exactly what we want if we check between the two. So if I open this one out and check between the two, you can see they're exactly the side cool. And that's all I want to cover in this video. So say you all in the next one 14. Building out the see response button: Hello, everyone. In this video, we're going to be working on building at the sea response button. So let's get to it. Okay, So in this video, what we going to do is we're going to build this, see responses button, and basically, when we click it, it's going to disappear, and a Dave is going to take its place. And this div will be where the responses will go later. Okay? At the moment, we're not building that out. We're just building the button. All right, so let's get started. So I'm gonna jump over to the HTML and I'm gonna write that first. So under the comments, statistics, Right? For the second comment. So this comment here, I'm going toe additive like, so I'm going to give that a class off. See response container. Okay. And inside of this, I'm going to add a button. And so the button, I'm going to add a span and give that that piece of text that says responses. Okay, then below that, I'm going to have another div. We'll give it a class our response list. And this is where that text will go. So goes. This is where their responses will done OK. And that is pretty much the hate smelt that I want. So if I come over to my original tab and I opened up that area here and I save if I wait for it the load and scroll down and run again, we can say that the same responses is not what we want it. Okay, it's in the born in right hand corner. Okay, that's the first problem. The second problem is it's not very pretty. Okay, if we check out this one, we can say its upper case. It's blue and scented. Okay, It's officially, Let's deal with this stalling stuff, this blue and cap stuff and things of that nature. I'm gonna come over to my video dot CSS and I'm gonna add a snippet here, Okay? And this snippet I'm going to use is L D g c ap. Why? TC response button styles. Okay, if I tap this, we're going to get to new rules. All right? So if they I see response container, which is tidying button. If we remember, we've got the button here, right on the sea response container. And what this is doing is it's removing the background from the button, right? It's also adding no border. It's making sure that text inside the button this upper case of all times it's removing any ugly outlines that you might see. Okay, and then it's increasing the fun size. It's changing that color to that blue color that we see here. And it's a crystal point out. So your little hand symbol over the top of it and we're also adding some patty. Okay, now for the other thing that we have here, which is the response list, right? You can see it's not showing there, but it is shown here. This is where the responses will guy. All right, we're just wanting that, but they fall. So if I save this right now, at least now we have the text the way we want it. We just don't have it in the position we want it. So that's what we're gonna be using. Six. That's grateful. So, once again, I want you to try and do that yourself. Why? Getting this from here to here, OK, supposedly, I give it a guard and come back to me in a moment. So we able with that at if so fantastic. If not well, we'll go through it together right now. So basically, how I see this working is well, you can do it a number of ways. But what I'm going to do is I'm going to move the see response container and the response list. That's inside of our overall comment grid into the second call. OK, do that. Using a grid column. So with that said directly underneath the, uh, comment statistics this bit here, I'm going to add a rule for C response container and response list just like that. And I'm gonna go agreed Holum to Okay. And when I do this now, we can say that the sea responses button is in that second column. Now we can't say the response list yet because it's hidden. But when I set up the job script for this, we can then see whether that's in the right place to Okay, Now they say, I just want to do it center this text because at the moment you can see it's not scented. So all I need to do after that is to come down and go. Don't see response container. Tired of the button. I know the button will just do that. And we'll set this to the supply of grid, All right? And then I'm gonna justify the content to be center. Okay, Now, if I save this there, you can see that's in the middle. Okay? It's in the middle off the second column. All right. Not the middle of the entire thing. Just the middle off the second call, right? That's kind of what we had of here. Now, the last thing we just need to dio is that the job script? All right, so then a jump over to my index lights, you know, I'm going to scroll down to the very bottom here and just under everything else, I'm going to use another snippet on the step, and I'm going to use is L D D c ap. What do you see? Response. But in script and tap. And basically, we get this and all this is really doing is attaching of in Khandala to each of these response buttons right here edges hearts and shows the overall uh, where's it? Uh, so when you click it, it hides this see response container and shows the response list. All right? That's all this does. All right, then I lost. You wanna do is just move. Is Const Teoh up the top just to be consistent? Iced. Now if I said this again, come down, Open up the common Syria and the half a click. See responses. You can say that. We have that Dave never represents where the responses will go. And that's the same is what we have over here. Okay? So far, you haven't been this up and click. We get the same result. Good. And that's all I want to cover in this video. Some say you won't in the next one. 15. Adding the responses: Hello, everyone. In this video, we're going to be working on and in the responses. So let's get to it. Okay, So in this video, all we're going to be doing now is adding some responses to our comments. Okay, Essentially, a response is exactly the same format as a comment. So I'm gonna be re use Eolas, Majesty, military here, okay? And then I'm just gonna make some sisters changes. Okay, so let's get started. So basically, we're gonna do is imitate this first comment fight by Kim here. Right. So this one here and I'm going to copy and paste it and replace it to be staying Georgia. So basically, we're going to go, Dave, right? And I'm gonna copy this whole thing and then in the response list here, I'm just gonna priced it. Okay, Looks that and I'm going to remove the second see response container and responsible is because I don't want that. And then I'm gonna have this. Okay, now, the idea I'm going to add here is a classical response, and that's just so I could manipulate the stuff inside of you. Okay, so if I say this right now, when I come back over to the right. Tad and I come down and open things up when I click this see responses. But now, well, we can see that it's almost a already. Okay, so now I just need to replace the text to be what I want to bay. Which, if I end up again down here, I'm gonna replace it to be this. So basically, the image will be Stan Dodge, a pig that the name will be Was it staying George George and then staying George here and in the title of the length of that? I make that stand, George too cool. And then I'm going to at this response and said it as I'm glad you found it. Interesting. We'll stop. I didn't I understand anything because Stand George looks like he's an older guy. So, yeah, maybe it's not so good with tech. And then what's under? That says six hours ago. So we'll put in six hours a guy and we'll keep the mid docked there and he didn't have any , like, so that now becomes a zero. And now that should be everything we need. So if I come back over and just quickly check here and click. See responses. Well, we kinda there. All right, so if we compare the two So if I come down a bit here, the to we can say that the image is a little bit smaller, but I think that's pretty much it. I think it's just the image that we need to fix you up. Okay, so I do have a snippet for this. Gonna come over to my video dot CSS and I'm going to use the snippet. L D g c ap. Why? TC responses. Just response. Sorry. Styles and kept. And what this gives us is basically a little bit of margin for for each response. So when we have multiple responses, you will say there's a bit spicy between them. That's what that's therefore this will love each one. And then for the image I'm shrinking that Is that the moments 48 by 48. I want that today I'll be 26.26 okay. And basically, what I'm also gonna add is a ah top margin to the entire response list. Imagine top. I should say I imagine talk. I had 15 pixels. Okay, I'm gonna save this Well, we're really there, so we just need to make one change. And that is to basically shrink this first column in these response. Okay, that's where I want you guys to go and try it yourself and basically fix this and come back to me in a moment. So were you able to wait that at, if so fantastic? If not, well, we'll go through it together right now. So all we really need to do is change the template columns for this grid here. So under dot response. Oh, I'm going to do is go grid template columns. And I'm going to change that first column to be 26 pixels. That's simply because the width of the images 26 pixels and then I'm just gonna put one on file. Good. When I say this now we get the result we want. Okay. If we look at the one we have every here, we can see that they're roughly the sign. Right now, all I want to do is add the remain responses here. Now it's time to see it says I don't have to do anything else. So all I need to do is come over to my HD now and I sniff it for this. So then under the comment statistics DIV for Devils. Joe Henderson. I'm going to add a new step it off l v g c ap. Why? TC responses, as you know, in town. And what did that not work? L d g c up responses that should have weights. I'm not sure why didn't work then. Oh, I didn't choose to step it. That's my bad. Now, West, there was two options, That's why. And then when I say this and I come over and look at my original and I've been up and I click on everything we can say, we've got everything as we expect. If I compare it to what we've got here, why expanding? But today's then we got So let's compare it. And they're exactly the sign. Congratulations. You have successfully built this YouTube client application in mobile portrait man. Okay, so going on, we're not gonna be adding any more hedges email. But what we're gonna be just focusing on is the layout off this application based on the with off different devices, OK, but we're gonna do a Latin the very next video. So see, then 16. Building related videos in landscape mode for mobile: Hello, everyone. In this video, we're going to be working on booting related videos in landscape mode for my ball. So let's get to it. Okay, So in this video, we're now going to focus on the related videos and have the displayed when we flip out my ball fun over into landscape minor. They are entirely in the people to hear, but this Supreme Network for Mobil's. So if I put this over right now, this is what we're going to be changing the layout. All the related videos to Okay, so at the moment, we've got basically a list where each videos under each other. Now, what we're gonna do is we're going to have two columns and the text that used to be on the right hand side of age video is they're gonna fill underneath of each video. Okay, now, it might be a little bit small, but that's just out YouTube. But I looked at made it looks I I just replicated that, but Israelis Okay, basically, that's what we're gonna be building. Is this right here? Okay, so I'm going to jump over to my original and flip that over and take a little what we've got right now, and it looks OK, but obviously it's not doing what We're asking food here. Okay, so the first thing I'm going to do is I'm going to add a snippet. Okay? Now, step is nothing to worry about. Since they're screwed so much, it's gonna be all the other stuff that we need to do. So app. Why TC and then related videos? Mobile landscape style tab. And that should have worked. What, did that not work? L d j c ap you related spelt for the eyes. Room videos live. All win scape styles and tab. And now there it is. So I've included immediate quarry for men with 5 50 Okay, so basically, what we're going to apply here for the moment is going to be for devices where the witch is bigger than 5 50 So that pixel two is actually 7 31 in my brasilia. But if you want to go and test is that for Riel? You can minimize this life site. And you can say once the riches 5 50 it goes into two combs. All right, I will go back to my people, turn and have it like this. Okay, so basically, what we've got here is well, is with added some patty to the unloaded list that we have an average to melt, so you can say it's coming in a little bit here, so I'm just applying that right then I've basically reduced the mean height, Max. Right to be whatever it was before we applied it up here. So for the article, if I come above the comments. So for the article we originally had the men heart and Maxwell Center Nani because we want to make sure that these were always gonna be 90 pixels high and not any bigger than that. Okay, so I'm taking that away, and basically, now I'm letting it be as high as it can be and restricting the heart of the image instead. So if I come down and take a look at the next select up, that's what I'm doing here. So I have a minute high of 1 41 and, um, expletive. Try to kind of kind of pre calculated this ahead. It's on, and I'm adjusting the heart of that image based on the width of the device. So if I come over and say Go responsive again. As I reduce the width of the device, you'll see that the height of the image also shrinks. Okay. And it grows and grows and grise infinitely until we get to a point where it's bigger. Oh, would be bigger than 202 pixels, and then it would stop there. Okay, so that's what this stuff he is doing. And then I'm just adding a petting top four pixels, and that's to represent that spicy. That's between the image and the title here. Okay, so if I come over the morning right now and I saved with what we've got right now well, it doesn't look that good, OK? And it doesn't look that good, because we haven't made any decisions. Grid changes we need to make to go from this to this. Okay, so that will be your challenge. Okay, so I want you to go. Why now? Try it yourself. Supports the video, give it a guy and come back to me in a moment. So were you able to awaken at if so fantastic? If not, well, we'll go through it together right now. So the poem I see here is that the article is actually a grid with two columns. And on top of that out. I don't list is not a great at all. It's just a list. So we need to change by those behaviors. Okay, so the first baby I'm going to change is the article. Okay? I want the article to now appear as if it's block. All right? Basically, I want everything to florid down. All right? We don't need anything. So if I saw it anymore, this is actually a pretty easy change. We just come over center display from grid the block. All right. If I save this well, we're gonna get this result, okay? And that's because we have every item taking up the full width of the screen, right? That's because the image is wide enough to go across the entire screen. What we want now, they is to create a two column grid and then be able to find as many roads possible. Great. Okay. So we need to make basically change you, Elvia to a grid, and this is how I'm going to do it. So, in a set display of this to grid, you will come out into the appropriate Ted and save. And we'll know much trying this. And that's because we haven't specified any Rosell column jet now for the rise. We don't know hit, Tom, Have any rise we're going to need, All right. But I want to be out of size them in a certain way. So what I can do is use the grid property, and I'm going to use what I fly, All right? And I'm going to sit the size of those implicit rows. Right? So it never got explicitly set around. This is indicating that we're going to size the implicit rows, and I want to size them to max content. Okay. And then I'm going to the find. Two columns, two columns is gonna be pretty straightforward by leading to of equal sauce. And when I do this, well, we're nearly there. Okay? Obviously, we do have some issues, and that is we don't have a gap in between the two columns. All right, so we can see here. We have a gap here, and we kind of also have a gap here of equal size. All right, so no, I need to do is come over and defined that grid gap grid gap. And I'm going to set it to see thing pixels and save. And I think if I look at this, if I make this one back to a peaceful too, and I assess maybe just bring this one down a little bit So almost looks the same as the other screen I had to really know. It is a bit of spicy that we still need to deal with. I think that's because we actually had a bottom margin on our list audience. All right, so if I hover over a list auto, maybe here, let's just pick one of days and I will choose the list on associated with this article. Maybe not. I thought there was a Sorry. This is the finished product. I need to do it for our current one. But I believe this, um, bottom margin that we need to remain, and there it is right there. Okay, so then all we need to do is just remove that. So he Roppongi grab the selected here, Uh, and then just before it. All right, that in and Ah, Margin, bottom zero pixels. And Saif. And hopefully now I've done this right. Well, there is a slight shift off this one being further. Dan, let's just move it up a little bit. Appreciate. Let's assign. Okay. And I'm happy with that. And that's all I want to cover in this video. So say you all in the next one. 17. Swapping comments and related videos: Hello, everyone. In this video, we're going to be working on swapping comments and relied videos. So let's get to it. Okay, So in this video, or we're gonna be doing is moving this comments section, which shows at the very bottom off the application went in mobile portrait mode. We're going to move it to be above the relied videos, and that's going to be for any device with That's wider than that 5 50 that we specified here. Okay, so basically inside this media query, we're gonna add some rules to move this comments section for it is now two above the rely videos. Okay, that's the challenge. Now I want you guys to try it yourself. Supports the V A, give it a guard and come back to me in a moment. So we able to work that out if so, fantastic. If not, well, we'll go through it together right now. So if we remember a long time back early in the second video in this app, we defined up the very top here. A matrix four am a All right. We have video thumb now, and that represents I'm gonna jump into the right. Tapia represents that thumb now. Then we had the video details. That's that bit there. So all of this, Then we had our related videos, which is all this here. All right. And then her comments. Okay. And we never changed it, even if I changed the vice dimensions. Now, that changed at this point. OK, so that's what we're gonna do it. We're going to redefine this areas, my drinks, all right? And we're gonna swap video comments with related videos so that that never comes up to here . All right. Says what? We owned it. It's gonna come back down to the very bottom. Mommy Query is, And at the top of it, I'm going to add a maid slipped up, and I'm going to go. Agreed, Tim plight areas and under here, I'm just gonna put video some now because I want that still stays the first option forward by video details. All that is still cited to second. But now I'm gonna have video comments. What? That and then because of that rely videos has lost. Uh, Now, if I say this, we can say that the video comments disappeared, right? If I scroll up there, it is right there. Okay, so it's actually now in the position. Position what? We want it now. It's just a couple of things we need to fix here. On one of them is that this now leads a boring border when it's being moved up there. And also, the border that is at the very bottom of related videos needs to be removed. Okay. So removed the border at the bottom of this first. So directly under this, I'm gonna go hash related video is And I bought our born, um zero I if I save, that's gone. Okay? They want to scroll back up. I wanted that deal with the porter bottom off. This So I'm just gonna quickly fund where I gave that rule for related videos and just copy that. So this year, I'm gonna copy this. They're gonna come dance the very bottom off my media query section here. A select up for the video comments, video comets. What? That and price set in. If I say this now, there's the lawn. Okay, if we check between the two, so we'll try and get him on dup somewhat. This one's the galaxy s five. So that wants a pixel, too. So let's get this to a pixel to as well. So let's have a That looks pretty, even the main right. And I'm pretty happy with that, All right? If I put him out, you can say that everything is still there and everything. Still working like I said. So if we had to go and tragedy markup, all I did was move the my up, all right. And that's it. And you can see that also works you to it, which I never really showed before. But it does cool. So that is all I want to cover in this video, so I'll see you all in the next one. 18. Building related videos in portrait mode for tablet: Hello, everyone. In this video, we're going to be working on building related videos in portrait mode for tablet. So it's good to it. Okay, so in this video, what we going to do is move onto portrait mode in tablet, all right? And we're going to deal with the relying videos once again. And this time we're gonna go from the too calm. So we have right now. 23 Okay, so it's a few things going on here. It's not just a matter of convenient to three columns. We also have the fact that this image is much bigger here. That it is. Yeah. All right. So we need to also take that in the consideration. Okay, So, firstly, I'm just gonna jump straight in, and I'm gonna blow to, say, Says to deal with this image file. Okay? So under everything, basically outside off the media query we had in the previous video, I'm going to add another snippet. Okay. That snippet is called L D G C. At one TC related video tablets, portrait styles, intent, and basically, we just get this. OK, so all I'm doing here is on tidying every single image over here and I'm seeing the heart by default to 17.5 percent of the width of the window. OK, and then I'm setting a minimum of 131. So the image never get to the small up 131 pixels, and then I'm taking away that Maxwell. Okay, So previously we had a Maxwell up to it, too. I'm taking that away by saying it just inherit from the parent, okay? And what this will do, it is allow the image to continue grain at that hot right off 17.5 VW forever. Okay, so if I save this right now and come to the right tab, we get this result like I Sorry, the image has shrunk a little bit to match the heart of this. I'd be here. Okay, if I go into responsive MyDD as we increase the width of the window. All right. I just need to do that on their increased with the window. You say that the image continues to grow forever. Okay, Now it looks pretty ugly here because, you know, we're currently it's 1700 pixels wide, and this is actually designed only for you know, my ball, part devices I tablets and my balls and not for desktop. So it is gonna look ugly after wall. Okay? A y going back to the iPad views that we have here and bring it back down. I want you to now think about how we can easily go from two columns here. 23 Okay, so that is the challenge. So once again, I want you to go. I haven't think about how you gonna do that. Pulls a video, give it a guy and come back to me in a moment. So we have a link that out if so, fantastic. If not, well, we'll go through it together right now. So this is actually really, really simple. All we need to do is basically change the template columns for our own ordered list. To go from two lots of one. Fraction 23 loss of one fraction. I'm gonna quickly do that. So, my sis Ischia, I had a role ful ash related videos, target the u L. And then just got a grid template homes and said this to her pain of three times. One if I and done. And there you can see if we compare the two. If I bring it back to the top, we could say that the sign and that's all I want to cover up in this video, so I'll see you all in the next one. 19. Building related videos in landscape mode for tablet: how everyone in this video we're going to be working on building related videos in landscape mode for tablet. So let's get to it. Okay, so we've done everything we portrait mode in this application. Now we're going to deal with the blend skate mod stuff. So the moment I have the iPad selected and I'm in landscape mode, right, It looks like what it is in portrait mind. So if I flipped back the portrait, you can see we get this right, get back to landscape for a second like that. And then basically, what I want to be able to do is get it from what we have here on now to this. OK, so basically, the related videos have been moved away from the bottom here, and they'll be pushed over to the right hand side of the lie at, and it's now one single column, okay, and it continues to go down the screen. So that's what I want to get at is for you. So let's get started now. Basically gonna get into the ball of my seats this fall again and I'm gonna add yet another Step it on. I use L D G c AP. Why TC related videos, tablet landscape stalls and Ted. When I do that, we get all this stuff. So the moon with that I'm specifying for tablet and landscape murders 800 pixels. All right, that may not be 100% accurate, but when I was playing around with this, I felt I mean with of 800 was a good number, right? Because anything kind of a lot of that was kind of considered mobile in landscape mode. And I also ensure that landscape motor set Okay, i e The height of the device is smaller than its with. Okay, Now I've done for this success is have a little bit of left and right patty to the related videos to cater for this bit of patting him, right? I've then also turned off the petting for the an ordered list cause it wasn't eight pixels . It was a little bit more than that. So I've gotten rid of that. And basically, all I've done for the image is a given it a fixed heart now, right? So I've taken away that Min and Max height. I just explicitly said it 2135. Ok, That's all I got here at the moment. So if I come back to what we currently have here and save, well, we get this result. Like I say, you probably noticed that we lost a little bit of padding there. And we also have the images shrink a little bit. Okay? And that's because I've shrunk it. Here's 1 35 All right, so now all we need to do is get this three grid system back into one, like this year, and then we need to restructure our main layout that we have to find here so that the reliability eyes will appear on this right hand side. It will actually spend all the roads to find out here. Okay, that's the challenge. I want you to go. I try this yourself and come back to me in a moment. So we I believe with that out. It's so fantastic. If not well, we'll go through it together right now. So the first sale when a tackle is I want to get this three grid system PacTel one okay, before we move it. So all I'm going to do is coming over to my rely video as you Well, and this guy agreed tinplate columns and said to one, if I and that is it, All right, so that will make it wanted. Fully sized column. Never come to my original tab here and save well, the images old stretched. But that's fun. Okay, Because what I'm gonna end up doing is I'm going to set a size for the rely, a video section that will basically bring this image back to a reasonable with. Okay, so I'm happy with that right now. Okay, So the next step is to redefine layout completely. Okay, So basically, what I'm gonna be doing is redefining this main greed template areas matrix. But I had a little bit more than that because I'm really going to resource a few things as well. Okay, don't come there. And at the start of my last media query here, I'm gonna have a main selector. And this time I'm gente is a good property, okay? And for the good property, I'm going to set the video some now. All right, like this, which was sent before. But this time I'm gonna add directly next to it the related videos. So that's in the kind that I want to rely videos to be in a second column in the Fish rock . Then for the first row, I'm going to set this toe a size off max content. Okay, For the next row, I'm going to set that to video details and then once again, relied videos. And the size of this will also be max content. All right, the third, right. You've probably guessed it. We have video comments and related videos, and then for now, I'm gonna use max content. But I'm gonna change this in a second, okay? And I'm happy with that for the rise. Now, I just need to define the two columns I want. So I'm gonna have what if I've for this first column here and the second column, I'm going to restrict it to a certain with and the wit that I chose and you may have chose something differently. It started 56 pixels. Okay, Now, if I save this and go to my happy right now, well, it's not exactly the way I would like it. Okay? So you can see that the thumb now is massively stretched and everything else is called about Kai and then the comments. It's not Where is it? It's although I do in the bottom, right? So things aren't really working the way I would like them to it. Now, this is because I didn't really specify any of these individual sections Video thumb now, but here, details over the comments to span at one. If I okay. And basically what happened is that this relate videos is so so long, right? That is pushing the content down. So the while I chose to fix this was to say, OK, I don't care if the video comments is very, very long, right? I'm totally happy with that being long as long as it's at the very stopped. Okay, So all I have to do here, you say I want that loss right to span as far as it needs to go. Okay. If I save this and what happened there, the comments did not go back up to the top, and they should have. So what have I done here, uh, of my spelling mistake. All right. So be careful of this to it. If you don't set things right, it's still gonna blow up. Okay, If I say that now. Hopefully, the video comments it back at the top. Cool. That was more when I was expecting, or I was expecting this to be somewhat in the middle. So if I said this back to Max, content and save things have gotta stretch again. And the video comments. There it is. It's in the middle off that last section. Okay, I thought a few things were a little bit off there, but now we can fix it by saying one of these rises going to stretch. And so the thumb. Now we'll go back to its minimum size, and so is everything else, and only the comments will grow. And that's fine, because the comments could be very large anyway. Okay, that's fantastic. Um, the other thing that I want to quickly address here is I think at the very bottom of got a rule there. All right, so I just want to quickly fix that up. So all I have to do is come over and for was comment, video comments. I'm going to set a border bottom 20 and safe and the out that border is gone. If I compare it to what we have over here. It looks pretty good. Looks very close to May. In fact, that's I. It's even the site. Just check. If he's a few things now, we should make this a little bit bigger so you can see it. But then it kind of goes out of scope. So maybe 75 is a better way of looking at it. So I bring this 1 to 74% as well. Well, we could just make the screen a little bit water that might be even more helpful and make it 100% and say for this one Now we can check me out, and everything seems to be how I lock it. Cool. So that is how we can basically redefine that layout to have the Relais videos on the very side. If you use the YouTube at before, you've probably seen this. Okay, so that's all I'm going to cover in this fear. So I'll see you won't in the next one 20. Building related videos on large devices: Hello, everyone. In this fee, I were going to be working on building related videos on large devices. So let's get to it. Okay, so in this video, what we're going to do is improve this landscape application a little bit more for the iPad pro OK or anything larger. At the moment, we have reliably eyes with one column. But when we do this on my iPad pro or big up in landscape mode, everything starts to look a little big over here. So what we want to do is we want to convert this one column related videos list 22 Okay, So basically, we will shrink the rest of this content over again and add a little bit more with toe. Have two columns here. All right. I'm not gonna be changing the heart of any of the images or anything like that. It's literally just adding two columns and then ensuring that the width off this area here is what, enough to fill them both. And then the rest of this will shrink along with it. Okay, so with that said, I'm just gonna quickly run a quick snippet here just to get the media query that I want. So it's L d g c ap want T see related videos, lodge landscape styles and tab. And I say we get immediate query. Well, once again, we're after the our intention of Lance guy. And the minimum with is 12. I d. Ok, as you could save Europe had prior is 13 66. Okay, so with that said, I'm going to save this and come back to my original tab. And obviously nothing changes. But now what I want you to do is think about the changes you'll need to make to go from heavy one Conway out like this. 22 Okay. Suppose the video, give it a guard and come back to me in a moment. So we able went that out if, sir. Fantastic. If not, well, we'll get through it together right now. So the first thing I want to do is I want to get this one column to be two columns. Okay. We'll worry about the with problem in the SEC will just do the first problem. So when you come out of up and an attacking my ul So, uh, hash related videos, right? And you l You know. I'm gonna go Agreed template columns. And I repeat off to Tom's wife, and that's it. If I save this and I go to the right Tampere, well, everything squats, but that's OK. We've got at two columns, all right? And now all I need to do is redefine the with of the second column. All right, so we'll have to do for that is target the main grid tinplate columns again. Keeping in mind that just up here? I defined it as one by 2 56 Well, I'm gonna change this to one, and I'm going to use the number 500 okay? And size. And now we can see that everything looks pretty good. Okay, So if I compare it to what we have here, it's the side, okay? And that's all I want to cover in this video. So see you. Whoa. In the next one 21. Adding the finishing touches: Hello, everyone. In this video, we're going to be adding the finishing touches. So let's get to it. Okay, so, basically, in this V I this is not really a lie up video. It's more round, easier experience and just making the app with a little bit bad for the person who's using it. And what I'm gonna add is essentially the ability to scroll either the side by or the main section. Okay, The penny on what? You want to do it. Okay, so if I scroll this snow swirled through this, I don't necessarily want this to come down. All right. I want this to kind of stay where it is, so I can still watch the video. I scroll this all right? Oh, I'm on o care about this. Mom, I only want to scroll this pot, Okay? At the moment, we don't have that right. We scroll and everything goes down and we end up having this really long line here and all this white space for nothing. Okay, Even if I open this up, we have that problem. Okay, so if you're only here for the purpose of seats, that's great. And you don't really care about this? That's fine. Just move onto the next video, guys. Maybe deal. But for those who want toe complete his application, you know, and make it user friendly, then stay with me and we'll go through the process of making this thing scrap. Okay, So basically, winning the dough is my style for the iPad in landscape mode. OK, so just to keep in mind, this is only when we have decide by thing here. If I got the portrait made Well, obviously the reliable years with the bottom here. Okay, so we're only gonna be dealing with iPad in landscape. And I've had pro and above in landscape as well. Okay, so going to come back to bed and I'm gonna eat style, Elise. So the first thing I notice is that no matter what, I scroll that heading stays at the top. And actually, what I'm doing there is I'm sitting in a fixed position on that top hitting section. OK, so how I do this is I'm going to come to the top off my media query fall been with it under pixels on landscape, and I'm going to target to him. All right. About this. And then all the other do is take it, Adam. Document flow by sitting in a position on it to fixed, sitting as that index. So it stays on top, All right? And I said to 7000 and then I think I left zero right zero and give it a high off the heart that I've said for that particular head out, which is at the top here, so believe is 48 pixels. Okay, so I said and come down here and put 48 pixels is the heart. So never say this. Well, what you played that notices? Yes, it does, actually. Now, I'm sorry. That's the wrong one. If I come in there, the order playthings hot disappeared. All right, so the order plays actually popped up on duh the actual head idea. So we need to bring both the rely videos and this main section down about 48 pixels. Okay, so that's the next step. So basically, all I'm gonna do is in my main here, right? Which is the thing that wraps all of this layout. I'm just gonna add a margin top for 48 pixels. That would take care of that problem so that everything is kind of, you know, for what we want. But the thing is, when I scrolled the moment, well, it's all scrolling. That guy said the only benefit we've got is that that heading stays at the top of the device. Cool. So they actually I want to do is I wanna swell them individually, right? So how do we go about doing that? Well, why? I thought to do it was to basically also take this related videos. Yeah, at a definite fly. All right. So I can come down to wear related videos just to find here for this media query, and I'm gonna like that and also position that that's fixed. All right, give that a width off 256 for the moment because we just have the one sort by here, and then on, I'm gonna guy top off 48 pixels, and that's because I want to talk to start here, Okay. And then I'm going to set right of zero and bottom off zero so that that will ensure that it only is ever as big as the heart of the device. Okay, So that will give that schooling effect at sort of that, and then also sit and overflow. So if we ever fly, I'm gonna sit that to scroll. And that should pretty much do it. Okay, so far. Now, save this and check. You can see now it's being to scroll, all right? And what we get for free as a result of that, because we took it out of document flow is this main section also scrolls. Uh, but the problem is that it's actually going behind the state. Right? So it seems as if stuffs been cut off. All right? In fact, no, it hasn't. I lie on. The reason why I lie is because I allocated my grid 256 pixels to cater for that of a little space anyway. All right, so if I didn't have appeared 256 allocated that second column So I had I don't I 100 like side then that we blade in behind it, all right? But because we don't have that, I can now sit back. And we're actually basically fixing this. Yeah, to take up that amount spice and never bleed into this cyber. Okay, so I believe That's all I need to do for the landscape mode on my iPad. Now, if I put by that Teoh iPad pro Well, we got this problem right where the relay videos. At the moment, we have said it to 256 pixels wide, but that's for you. Basically. IPad in landscape. So we just need to adjust that wit when we down in this media query to ensure that its form under pixels wide, it'll fill that empty space we have you got. So I'm gonna quickly do that. So basically, I'm gonna go hash related videos and with 500 pixels and safe, and now you can see it works. You too. Fantastic. So now we've got a user friendly application That's basically a clone off the YouTube app. Okay, It's not a clone off the YouTube site because this doesn't look right when we use it on so a regular device. So if I go, if I go added this completely and Silas span this really, really huge and it still looks like kind of. But after a while, you can say it becomes quite ugly, right? Because you've got so much space between all this staff. The thumb now is massive. And you know, all this space is allocated for a comment. It only takes up that much space and so on, so forth. Right? And then these were fun out here for now. But as we got bigger, yeah, it would have investigated a little bit. Waas. All right, so I basically with built this successfully for a mobile application. OK, so, congratulations. You now have successfully built a responsive vision off the YouTube Web app and thank you for taking my class. And I hope to see you in the future one.