Building a Chat User Interface - Mastering CSS Grid | Daryl Duckmanton | Skillshare

Building a Chat User Interface - Mastering CSS Grid

Daryl Duckmanton, Experience is our biggest asset

Building a Chat User Interface - Mastering CSS Grid

Daryl Duckmanton, Experience is our biggest asset

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

    • 2. Following along with the class

    • 3. Setting up the basic shell

    • 4. Building the search conversation section

    • 5. Building the add conversation section

    • 6. Building the chat title section

    • 7. Building the chat form section

    • 8. Building an individual conversation item

    • 9. Fixing conversation item sizing issues

    • 10. Adding more conversation items

    • 11. Creating some initial chat messages

    • 12. Sizing and aligning chat messages

    • 13. Adding chat profile pictures

    • 14. 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 Chat Application 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: how everyone and welcome to your third class for the course, mastering cysts as grid. So is this glassful. Well, it's ready, one that's looking to apply that knowledge in, say, says, grid to something that's reasonably sized. So the purpose of this class is going to be a chat application you want. It's also for the people that have previously taken my sister's agreed classes here on skill share, and that's part one into. This is part three off four. So as I said, there's gonna be four parts. This is part three part for will be a responsive Web design version of something similar to this class. Okay, but that will come out in the future if it's not already. And lastly, it's for anyone this looking to take a challenge, and that's the whole point of this class. It's going to be a challenge, So you already have the knowledge, and I'm going to take you through building something out, maybe giving you some sample code just to get the presentation right. But the end of the day the layout will be done by you, and in the videos, I'm going to be challenging you. The pause the video, try it yourself and then resumed the video and say, Hey, you did against what I do. OK, so the whole class is essentially a project by a challenge at the same time. So with that said, let's say what we're actually building. Okay, so on my screen right now is that application that will be building in this class. So I broke it up into two areas. Yeah, The first area is basically the conversation section that I have here on the left hand side , which basically is a side by which has a list of conversations in it. At the very top, we have our search area, you know where it goes, crystal screen. And then also we can see as we hover over each autumn. The basically the harvest eight Chinese. But we can also do in this area is weaken. Scroll up and down. So if I actually click on this properly here, you'll see there, that section inscrutable, right. And I'm scroll up in debt at the very bottom. Here we have a button for any conversations as well. Now on the Ryan side, I have What's referred to is the chat area all right, so it starts off at the very top here with what I refer to is the chat title that contains your name or the name of the person you're talking to, followed by a little been symbol that operate on the right to indicate you can delay the conversation. Following that is what I refer to is the chat message or the chat screen. Right the bit we actually do the chats. Now you can say that is two different tops of conversation, Tia. And you can say that it'll says Scrolls up and down now for the messages here on the Ryan side. There the messages pertained to what you taught and the ones on the left here at what the other person taught. They also have the image here on the left hand, sought as well. And lastly, we come down to the chat form section where we have attachment there and then an import that's meant to represent where you talk in your message. And that's all there really is to it for this application. Now you might be asking, Well, where do we stop with this? Well, we start with an empty canvas, literally we have nothing whatsoever. Curd wise, there isn't much either. So this is all included. And so you're standing app dot zip file. But the first ball will take a look at is the I smell fall. And when I opened up, this window will be water. You can see there's no much in here just pretty much for the main point, a reference to a star shape. I also have a title and somebody element right? That's it. Then we have the images where we have three folders. This icons father contains two images of SPJ, which really represents the attachment logo and the trash logo's that we see here in this chap location. Okay, then we have the profiles folder which contains all the images of all the people that we see over here in the conversations. This section, and you can say is we total three on the different images. Then we have the search foldout which contains in another svg fall. And we can see if we check that at its over here in this little input, and that's all there is to it. And then finally, of essays. This file which the moment doesn't contain much just stalling for the background and some for many of heights and margins and paying some things like that cool today, you know what we ability, let's get started. 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. So just because I forgot to mention this in the previous video, this class makes a little use off course snippets. Okay, so I actually haven't extension. That's a viable using visual studio card. The l as you to basically dan, like, ah, whole set of stiff it's that will be needed for this class. Okay, Now, the snippets themselves don't really do anything. Say says grid wise. They just other say says things and high smell things that are really yeah, just to make the application look a little bit pretty up. Okay, So in order to get it, you can come to the market place here in visual Shia, and look for mustering since that's grid course snippets. Or you can come over to the extensions area here in visual studio tied and just talk being the same thing. Mastering says says grid dash, close snippets. And when you do that, it should be the first autumn at the top here. This is like a ride, so that should help you out there. If you click on it, you'll see my little warrior here and you'll haven't installed. But once you do that, you'll have access, told the snippets that I use in this class. Now, if you don't want to use visual studio card, therefore you're not going to use these snippets. I still have them available as part of a zip fall that's extended in the results of section called Snippet Start Zip and how it looks is for each lesson. I've given it a number for a folder here and then I've got the name off the lesson or a description of the lesson and then sort of it. I've numbered the sniff. It's individually here. If you look inside them, you can say without the say says it's a viable Okay, So any time that I make reference to snippets, then you know now where to find them. So that's it. I'll see you all in the next video 3. Setting up the basic shell: Hello. Everyone in this video we're gonna do working on City up the basic shell. So it's going to it. Okay, so in this video, we're going to focus on building the basic shell that we want for our church application. So that will be basically going from what we've got here with a blank canvas to this. What? We have the container in the center of the screen, and then we have all these sections set up, and I just put a bunch of texting it to indicate what they are at the moment. Okay, this is what we're gonna be building in this for you. So coming back over to my empty canvas, I'm gonna create this first shelf. Yeah, this overall shell. So do that. No, the find it did given rd off chat container like so who? And that's what I'm gonna do. For now, they're not going to come over to my success, and I'm gonna use my first snippet. Now, keep in mind, all snippets are basically attached to every video, so you can just grab them from there. So the slipping I'm going to use is l d g c ap shat container styles and Ted. And when I do this, we now get a select out for the check and turned that we just added. And I've added a minimum width of 800 pixels. So will never be any water. Oh, sorry. Won't be any small up the 900 pixels, but it won't be any water than 1000 pixels. The heart will be at Max 800 pixels. However, if we get less than 100 pixels high the chat window say about 95%. But with the heart of the window. OK, I've given a winter of 100% just to ensure that the window will continue to grow. Even if it's more than 100 it'll try and grow until it reaches 1000 and then we'll stop right there. Okay, I will see you in the background of what? And a blur. Raise off Tim pixels. So when I say this, we're gonna get this like I say, pretty straightforward. It's to Deve Mr Around Borders. That's why and is offset in dimensions. They're the first challenges is to get this into the center of this crime. So this is where I'm gonna ask you guys to stop the video, trust yourself and then come back and I'll show you how we do it in a moment. So we have a little like that out if certain fantastic. If not, well, we'll do it together right now. So the first thing I would do is that's okay. This container is inside of what? And I'd look at and say, OK, we're part of the body element. So the body element in Marseille says has a maximum of 100% so it's already spaying the heart of the screen. We know it's going together full with the screen. So all we really need to do is make the body element agreed itself, so we can get a body. All right. Uh, display grid. In fact, I might move this underneath the hasty mail here just cause I like to have vaginal, then body. So you made that a grid. And then when we do this, we know that we've got a one column track, one road track grid that spans 100% that with the window and 100% the harder window. So we don't have to really do much else than that just specified to grid. And then all we need to do is understand that we just want to take that container we have there and place it into the middle of the screen. I mean, if you remember, we can use place items to do this. We're basically centering that grid autumn into the center, off the cell. Somebody go center, center and save. And there you go. Right. And that will stay in the center. The men, What happens to the window? Okay. It's always gonna be in the center that's vertically and horizontally. We contract this as well, and you can say it's still there until we reach 800 there will collapse. They want. So that's that. Okay, so we've done that. Now, the next step is to basically put in all these sections and put him where we want them. Okay, But firstly, I need to define the heist email I'm going to use to specify each of these sections. So they come out to my Chattahoochee Mel, and I'm gonna treat every single thing here as a direct child off this check container. Right. So one of you to do is have six child developments here. So the first ones Div I d and we call it search container, Alright. And here I'm just gonna pull it. This is the conversation, such right? They have another div. You have this one in our day off conversation list, and I wouldn't hear this is the conversation list pretty straightforward so far. And Dave Body and I'm going to have a new message. Uh, container and then in here I'm just gonna put this is the new message section. And then I'm gonna basically copy and paste these three here and just change a few things, Wasting time talking at three more times. I only get the picture on there, so it's time to savor. And it sends this one to bay where we call it, um, shut total shut message list. And lastly, give this one a day of chat form. No, I was gonna bait the text so this one will sigh. This is the title or that on this one Will say this is the chat message list. And then, lastly, this is the form section. Now I got over to what we have at the moment. We just have a bunch of dips in the top of tank or okay, but first we forget to the CSS and fix this up. I just want to quickly explain why I chose the order of that child's so noticed that amusing search conversationalist and new message directly after each other, as we know with auto placement by default, it would go left then right then left, then right then left and right. Okay. So what would normally happen is that I should have the chat title as a second. Even this list. Uh, but the reason why I have chosen to do it this way and I'm going to have to change the Florida off the placement is because I want to keep all the conversation autumns together. Okay, so I'm gonna be are in terms of the dibs that we have written here wannabe, I would say this is all part of conversation, and then this his old pot off the check. Okay. That's why I made the choice of night. It's more I Hey, etymological decision in terms off. If I ever had to separate these things out into components, it would be much easier to separate out. The three gives into a separate component. And then these three days in separate compartments. Ryan having six individual components that I have to shuffle around. Nine. There's there's pros and cons to doing it. Either way, I've just chosen to do it this way. It's up to you how you want to do it. Okay, but this is the wild chosen for this figure. Now I wanna handsome presentation, obviously, like it looks pretty ugly at the moment, So I'm gonna do that right now. I don't come over to my check that say says, And I'm going to use my second snippet, which is L. D G c AP chat sections, styles when it's had you got to get a whole bunch of successive written here, right? So basically, I made that search container conversationalist and new message container made them blue right for the search container. I've added a border radius on it so that it has a curvature on the top of 10 side. That's a box set. And is that index Brazilian Dixie's Collymore, You could I understand how that works like now, but I just needed it so that it would be a little bit higher than the conversation list for the purpose off, uh, scrolling things like that. Then I've got the new message container and that has a border top and about a race set to it. The border raises on the bottom left hand corner, you know, and that type is for this thing down here. Then we have checked, are aware of you and end the chat forms. Sorry. Give them both. A background color of hash eesah. A slightly gray color, which is a little bit different to the checklist that message lists. And then a chattel where have said the phone Qala giving it a bold and all that stuff that represents this over here and then a bit of books, shadow and bull races. Well, for that Kelowna and the same. The check for about a boat race in the bottom, right corner and a bullet tongue. Okay. Pretty straightforward. Would have covered here. Now, if I save this and we go over and look at what we've got, obviously it doesn't look very pretty rundown, and that's because we haven't placed anything inside of the grid, right? In fact, we have been defined that this container is yet a grid, so we probably need to do that first. I don't let you try this yourself. So try and think about how you would get each of the autumns that we've just added into their appropriate positions. Now, in terms off specifying the heart here of the first road. I believe I've said that to 71 pixels high. Let me just double check my notes here. Ah, yes, it's 71 pixels hard for the first round. Then the middle rye grows as much as possible. And then the slash row is 78 pixels high. And then for this column, it's 275 pixels wide. Okay, So little that knowledge. I want you to pause the video. Now, give this a try drawn, set up the grid, and then try and place everything in its appropriate position. Okay, suppose video. Now give that a garden and come back to me when you've done that. So how did you get? Were you able to work that if so fantastic? If not, well, we'll go through it together right now. Okay? So basically, the first thing I would do is I would want to define the thing is a grid okay, that specify how many columns and rows we want. Right, So that's what we do first. And I'm going to use a matrix for this, a responsive matri's. Even though this is not responsive, I'm still gonna do it anyway. So up here, firstly, I'm gonna set the chap container to be a grid look set. Now that creates this This scenario here they like. Okay, well, we need to define the rows and columns, right. So let's do that. But I'm gonna use the grid property to do this. And the first thing I'm gonna do is to find my Matrix. So I'm gonna have my search container. I like to say in the first column they're gonna have my chat title in the second column. And then I'll just say that this Robert 71 people hard. All right? You know, my second road and this Eric, I want my conversation list like so and then my chat message list, and I'm gonna give these I want if I right, cause I want to be as high as it needs debate. And for the next round, I'm going to say new message in Taita well, side shuffle that And this is 78 pixels hard. Okay, then I'm gonna specify my columns that I mentioned the first column was exactly 275 pixels wide. So I'm just gonna add that. And then what if I go? And when I do this when they at least have the appropriate dimensions. Okay. The thing is, we don't yet have everything that we want where we want it. Okay? Something's that kind off target. So the conversation list at the moment is taking advantage of that order placement and being over there. But that's because we haven't specified the grid area ship. So let's go ahead and do that. I'm gonna come down and I grab my search container, which is disliked here, give disagreed area and said to search content right when I say that nothing really changes because it was the first option in the haste email. Anybody fun, the next seem to do is create a select that for my check message list a sorry conversationalist. And do this, I'm going to put a grid area on this ongoing conversation list. I'm gonna say that now you can see that the conversation list is actually in the first column in that second run. Now we need to get the new message section down to the very bottom here. At the moment we have the chat message list in there. So it's so that at so the next one day, our new message container grid area. Pretty sure I called it Message Container. If I save this now, we've got everything for the conversations where they should be in this left column that happens to obey that everything else is in its appropriate order. But I want to be complaint here and basically put all the rest in a grid area. Good shot, toddle Menschel. It's the works and does. Then we'll do the chat form crude area chat form and then a lattice elect that fool shat message list and we'll make sure that the grid area for this is shot message list. Saif. Now everything is where we want it. If we look, this is almost a sign. OK, I think I put that is the title instead of this is the title. So just quickly fix that up, uh, this instead and save. And now everything should be this time go write him. Then the Boerma put to tease the right. This is the form section again. And everything appears to be the sign. Cool. So that is the first part of the application. And that's all I'm gonna show in this sphere. So I'll see you will in the next one. 4. Building the search conversation section: how everyone in this video we're going through working on building the search conversation section. So let's get to it. Okay, so we've got the basic shell designed here. What I'm gonna do in this area is just focus on these very top left section here, which is the conversation search. Okay, so basically, what we're gonna do is get from this to that. Okay? So it's not as big as the previous failure. We don't do it much smaller. I found the previously I just went a little too long. So let's get started. They're the first thing I'm gonna do is at the Hasty Mel. So this is pretty straightforward. All minute dues and import. Okay, so in port on the entire vehicles site text and we'll have a placeholder else. I says Good. No home. Too easy. All right, let me get this ugly looking thing in the top left hand corner of that section. OK, so that is going at the success to make this old Norse and pretty. So I have a snippet for that, and I'm gonna put that under the search containers like that. That's different. I'm going to use his l. D G c have shat search container styles. What's that? There you go. Year all this stuff. Okay, So, basically, I'm changing the color of the input to be a certain color. I am removing the crime. The outline I'm making the front bold. I made some border radius are making it a little bit bigger just for you know, the fact that I've got a foot size it's a little bigger. I give, you know, border outlaw whatsoever. I'm anything some petty from left and right. And I'm Eddie. A little image that's a little search are common. You say the second and then some background positioning. Just a position that Sir Jack on and criticized as well just to make sure that such Maikon looks great. Okay, on top of this, I've got a little selected for place. Hold out and I'm just chasing. Changing the placeholder takes a little bit. And you re a bald that's ongoing. And that comes in like this. Okay, so it looks all right. Yeah, but now we just need to move it. How we need to position it. The other thing I wanted to quickly here is I want to add some padding to the search entitled, So we don't really need to do this, But I felt like I want to do this anyway, so I don't know, do. It's got to my search container and I'm just going to play some petty under here off say, zero and 20 pixels. This is the brain was a little bit. We're not initially that that because we're gonna be centrally, centrally positioning it anyway. But it's always know stand now. The target is to get this import into the middle off the search section. So hopefully you know how to do this because it was pretty easy last time. So once you just pull to be, I give this a guy and come back to me when you've tried it. So how did you get we able to work it out? It's a great if not well. We'll do it together right now, So I mentioned the petting on the fact that I just want to add it because I thought would be cool. But that's not really the reason I called Allied a little bit, and that's because if I remove it right, so coming it at and then make disagreed which is what you probably would have done Display grid marks. Oh, and save well, the input stretches to fill the entire entitle. Okay? And that's not what I wanted. So that's why I want to add this extra bit of Patty, right? So we didn't have the input Spanaway across and we get this right, so we got it back to where we were now just a long into the middle is pretty straightforward. There's a number of ways we can do it, but the way I did it was just a guy alive items and said that the center and there it is without such box exactly where we want it. And that's all I want to show in this video. So I pretty straightforward, so I'll see you all in the next one. 5. Building the add conversation section: how we run and this video we're going to You working on building the ad conversation section. So let's get to it. Okay, so in this video, we're going to focus on this new message section down here and go from what is right now to this. So having an action button doesn't really do anything, but it looks like it does, but this is just a hyperlink with a plus it in OK, And we started up to be white, and then we've turned this section into a grid and a lawn did, appropriately, within the grid. Okay, so that's what we're gonna be focusing on. So the first thing is, I'm going to a taste, you know? So with little this and go, a ref equals hash and they're not possible. Never come back to my original and save. You Can't say anything right now, but there's actually a little blue make element run up in the top left hand corner off this section. Uh, you say it when you do it Now, I'm obviously gonna apply some stalls for this so we can actually say it better, So let's do that now. And basically under new message container for three. After here, I've had another step. It L D g c ap shots contained up. That's our new conversation Stop in 10 and then all you basically get is a selector for the anchor element that we just added in that section of your background color of e A of giving a border race fund sense on circular I've given a color of blue, so that's the same blue is the background Texas Tech Stick to decoration none. And in a phone sauce. Okay. And that creates this. An ugly looking several What? This. But at least now we can see it, right? So what we need to do is we now need to get it not only where it is right now into the position we want, but we need to also make sure that's off appropriate dimensions. Right? So it says once purely circular, and this one is not this one's over fact. So I was thinking about how you might do that, using nothing but CSS credit such plausibly I give it a guy and come back to me after you've tried that sad, you go. We have the waking at, if not well we'll go through it together, run down. So the first thing I want to do is I'm gonna take this button here and just indented it a bit, right? We can see here has been indented in a little bit. Let's take care of that first. So I'm going to achieve that. We're coming up to my new message container and just a handsome Patty. Okay, zero and 15 pixels. And now I'll save this, and now we can say its in the middle. Okay, now, that's the only do is actually turned this whole thing into a grit. All right, so do that. Why do during the following display grid and so Whoa. Okay, that is not what we wanted. Okay? We did not want a big button like that. We wanted to have some kind of dimension. Yeah, it's a 40 by 40 will say on then have little possible sort of it. So I'm gonna tackle this by actually decreasing the size of a grid. Okay. I'm going to reduce it to have a one column track that's only 40 pixels wide and one road track that's set to 40% high dues budgets using the grid property. Go 40 for the rose and then 40 for the comb. When I say this now we're back to a circular Look at secular autumn. Right. So we have a cell here inside of a grid that's 40 by 40. Now, we just need to Alana inside off this elements. We can do that. But this guy alone content and goes center. And now we can say that that grid that we just created is a lot into the center off this element. OK, so I'm happy with that. But now we just need to get that plus into the middle off the But now we have here. So do that. I'm going to convert that ankle tag into a good as well. So just go display grid. Uh, so that hasn't changed anything yet. And that's fun, because all we need to do now is go place, content, center, center. That's gonna take that little plus symbol that's gonna move into the milk. Okay, If we compare the tune that we have, we can now see, we've got the same result. This is just one way of doing it. There's a number of ways you could have done this. All right. Say, you might have successfully done this, but it may have done it a different way. There's no right or wrong answer, so to speak. So it doesn't really matter all that much, but this is just a why I chose to do it anyway. I'm gonna fuse the video there, and I'll see you all in the next one. 6. Building the chat title section: Hello, everyone. In this video, I was going to be working on building the chattel section. So let's get to it. Okay, So in this video, we're going to basically fix the chattel section here from looking how it looks right now to this Where we just specifying name in here. And then we have this little been icon in the right hand side. We provide some spacing between the two, so to speak. And then we're also Alani it into the middle off the chattel from a very perspective. Okay. Said before I do any of that, though, we need to actually update html somebody that run here. And I'm just gonna do the following I'm gonna spend I'm just gonna put my name in here. You could put whatever name you like. That's up to you then at an image sources image is just going to be images. Okay, bones and trust logo. And this is just an SPG fall and then given adult of let's say, the leaks conversation. Pretty straightforward. Pretty simple. Save now at the moment, the trash can is very, very big, and that's because I didn't really adjust the width or height inside of the SPG file. And I kind of did that purposely because I want to use CSS grid to ensure that the size of this thing is always going toe work. Regardless, what I specified inside, that s which you fall. Okay, Hopefully that makes sense. So firstly, wanted to is I'm just gonna quickly at a stupid guy. A very simple one. So l d g c ap shat title styles. No, this is gonna add Is a point out or as a cruiser over that svg fall? Uh, nothing major there. Okay, The other thing. I'm going to do it quickly. It's just at some padding to the chattel. So when a guy 0 20 pixels insight and that will bring the text in a bit. Now, I want you to think about how you could fix this problem here. That's why I was aligning the text and things of that nature using CSS cred. Okay, so I suggest you go pause the video, tries yourself and come back in a moment. So how'd you got we able to work that out? If Sorry. Fantastic. If not, well, we'll go through it together right now. So this is how I thought about doing it. I want to be able to get this average smaller right now. We could just set a with the heart on this. But then, if I change my mind on the height off this chapter oral area, then I have to come and change the heart of this as well. Right? So I thought I'd do instead is I would create a smaller grid size for this area. Now we haven't defined the chat toll has agreed yet, says the first thing I will do it. So come over and guy display. Great. It doesn't really change anything yet because we haven't specified any columns or rows. So at the moment with God, one color track, one road track. If it's as big as I need to fit to fiddle this information, which means it makes that been very big stuff. So one way to fix it is to provide some template rows and columns. And what I'm gonna do is I'm going to restrict the heart of my grid 2 36 pixels. Now you could have tries in some other value. That's totally fine. But that's what I'm gonna do. You and then for the second value, which is the columns. I want to contracts for this. With the 1st 1 being that spent element which I want to conduct growing. So I'm gonna put it is one. If I and then I'm gonna match the heart of the grid for the second calm at 36. And when I do this now, at least it's a bit smaller. Okay, so the SPG is detected. It's inside of a smaller grid because we restricted the high of the grid. It goes, Okay, I'm gonna have to shrink as well. Okay. And that means that the heart of that image will always be as big as the heart of the grid . Okay, this is how I chose to tackle this problem. Now, from here onwards, all we need to do is deal with the alignment. Okay, So first I want to align the great cause. I bet the great smaller right says they six pixels high, but you can see here the chat titles as she beget than 36 pixels. So I'm gonna deal with that. We're just going online content and saying that to sent up. Thank. And now that I do that. The grids in the center, you can see the bin is in the center. But what you can't see is or what you can notice. Sorry is that the title is not in the center, but that's each of the fix. Okay, Because we could just say a line items feta. And when we do this now, everything His position very clear in the center. The greatest position. Very clean. The center and the arms were in that grade, also positioned vertically scented. And that's a little wanna cover in this video. So? So you won't in the next one. 7. Building the chat form section: Hello, everyone in this video we're going to be working on during the chat form section. So let's get to it. Okay, so in this video, we're going to build out the form section down here in the bottom, right hand corner of a chat window. OK, that's gonna go from what we're seeing right now to this. Okay, well, we have the attachment that's going to sit space away from the corner here. Then we have a very long text field here. That's off a certain height, and obviously it spends all the way across. And then there's a little bit of gap in between the attachment and the text field. Okay, that's what we're gonna be doing in this fear. So let's get started. And let's start off with the highest email for this. So they come to my chat form and let this won't do anathema. Jump back to my original tab and I'm gonna add that image. First. Image source equals images are cons, and I grab the attachment logo. This talk and the old for this one is I'm just gonna say I and attachment God, uh, about that. Oh, God. Capital. I'm being pedantic. But it is What is? So we've got that If I say this, we got a big booming attachment thing just the same as before. That's totally fine. Now it's at an important. So I input. Well, that type equals text. And we got a placeholder, Uh, and for this will say type a message, go pretty easy. If I save this. There is a text box with all the way down here right now. Okay, that's totally fun. We can fix at the moment. They're also gonna add a quick snippet here just to pretty up that textbooks gonna go L D g c ap at chat form styles and Ted. And basically, I just have a bit of stalling for that input that removes the atl on. Add some padding at some border as a different color is a little bit of radius on it, and it just the phone size a little bit. So when I saved this, we get a little bit pretty looking and text field right? Don't spending all the way across and things like that will do that in a moment. Now, I also want to add some party to the chat form right. So to do that, I'm gonna have, let's say, Paddy lift off, let's say 42 pixels. So go, patty ing left boy, two pixels on God Petting Rada's well, and we'll give that 20 pixels and save. And you can't really tell at this point. But there is somebody new. Go. Yeah, Just the last thing I want to do is I wanna add the curse to the same attachment we have here, So I'm gonna add a new selected here. It's got chat form, and it means what? That and that should typically at the cosa to this as well. And it does, uh, so we're in the position now when we can start using sisters grid to try and clean this up a little bit, right? So once again, once you gotta try this yourself suppose the video, give the guard and come back to me in a moment. Said you got we able to work this out If Sorry, fantastic. If not Well, let's do it together right now. So what I thought to do it was exactly the same as we did in the previous video. I want to shrink the grid, so I can deal with high off this attachment. Right? So the first thing I want to do is make out chat, form a grid. All right, so we got display grid and then once again, I'm going to use the grid property to set the heart on this. This time I'm going to use 51 pixels. This this is the number I chose because I wanted to bay pretty much the same height as this import is right now. Okay, So affected in that. And I found it to be about 51 people's high. Okay, so 51 for the heart. And then I kind of want the attachment to be 32 pixels high. Now, the good thing is about SVG is that it does stay uniform. So I knew that the height and the width off this svg files the same. So all I need to do is just specify with which I want to be see two pixels for that attachment, and then I just want to set the import to take up the remain spice like so right. If I run this, we now get this situation. What we've got the attachment is there are 32 pixels wide were the input Spain the rest of the space. Right. And we've got the patty on each side of these two things. The problem is, we need a little bit of spice in between the attachment and the input. And we also need to along things so officially would still with the spice in between. So to do this, I'm going to take advantage off grid gap. Thank I agreed. Gap and Greed Gap. No, grab. I'm just gonna set 15 pixels on this, all right? Now, because I only have one ride. It doesn't really matter whether I used Greek column gap or great Gap. It's gonna change the same thing. So when I do this now, now we have that spice okay that we wanted. Now I just traced 15 pixels on and you can check. Choose whatever you want. I just traced 15 because that is to be what we've got. Yeah. Okay. Go now easily to along everything. So I officially let's along the grid, which we did in the previous video. Me, I had to do this, and I'm gonna do this part, this guy, a line content center and save Now everything is in the middle. And then we just need Teoh vertically sent up the autumns, which we also saw how to do that. A lot of items sent off inside. And there it is. We have now got out chat form the way we want it. If I tell between the two, you can see that the sign. So that's all wanna cover in this video. So see you all in the next one. 8. Building an individual conversation item: how everyone in this video, we're going to be working on building an individual conversation on him. So let's get to it. Okay, so in this video, we're gonna take a much bigger step, and we're going to add our very first conversation on him in this conversation list. Basically, with a go from having nothing so heavy. One item that kind of looks like this. OK, so you can see there's a lot going on here. We have our autumn that's inside the list. And inside that autumn, we have an image on the file left that's kinda spanning what looks to be to rise. Then we have our name and the next the name. We have a date. So these two things are probably together between columns or something. And then we've got a message that's wrapping. So it's possible that this is a three column layout or to hold my out. Well, well, foreign answered. Enough how to do this. Okay, but that's exactly what we're gonna be building. So let's start for the Hasty Mill. All right? So we got nothing right now. Let's come over and we'll clear at this conversation text, and I'm going to add a diff er that represents the entire concessional. Just gonna give the class of conversation. That's all of that at the image. So that image represents this image. Yep. Okay. And I'm going to go images, profiles. Then they choose May. Okay? And then for my name. And you can put whoever you like in there. It doesn't really matter. Okay, if I said this right now, it's just gonna put my head in the top left hand corner day. Okay? Not hating magic yet. Now, the next thing we've got that I think that I might add is will grab the well. We'll say it's the title. Text in this case happens to the name of the person. But maybe if you had multiple conversations, yeah, you would have more than one name, so I'm gonna call it total text. Alright. So with that said, I'm gonna come back over. We're credit enough days. It's on the same line you did. Class equals bottle text. And so if he, uh, I'm gonna put my name and then and I want to explain this right now, I'm just gonna put a whole bunch of letters. The F G h i j k will, he said. You understand what? I'm doing this a little bit lower so you can see it comes out. Doesn't look that north at the moment. But that's OK. It's there. The next thing that we want is to add the date. So I'm thinking left to right here. So when I grab that date so I'm just gonna crack another did for this give class equals God created that there's this conversation was created on setting date or the last message was created on a certain day. So that's why I'm thinking here. And he answered, Put April 16 All right, so that represents this year. And then we just need the message. So the message. I'm gonna put it another day, begin this directly in the same blood like so and good conversation message. Like since and here. Up with the message off. Scott, this is a message, you know, Right? A bunch of God. The group after it d hates J. J. L in O p. Q r. This tea. You think that'll do that's safe. All right, now, over here, it doesn't look like nothing at the moment. What we've got all the elements that we want, And so their conversation on. Okay, now I'm just gonna pretty it up a little bit, so I'm not gonna actually arrange anything. I'm just gonna make it look a little pretty up. So they come over to my check dot CSS and just under the concession list, I'm going to use another snippet here that is L. D G c. Ap shed conversation styles in 10. Now there's a lot being imported via, So I've added a default color for the entire conversation of White. I've increased the phone, so I was a little bit from the average fun size the entire page about the border bottom off , a slightly darker blue color. I've had some petty right that's to represent the Patty. It's kind of around all of this at the moment. Go and then I've got the harvest state in the active state. So that's when I hover over. It creates that Dr Blue color. That's totally fine. I'm giving it a point out, says you can see when I hover ever it. It has a point state, but nothing is no. This stuff is overly important. The conversation item I'm giving it just the height of 40 pixels here I called police who had done this regret. But for some reason, I just decided to at the height there. And I'm also giving a border radius 100%. So don't make it a perfect circle. The politics have said is not what y bits and e Qala and folded. So you can see we look at this, it's bolted and it's not quite white that plus and then for the creative diet of giving us slightly less watches color. And I've also said at this point that we're not gonna wrap and we have a fun size off. Exactly the the fault. Fun size off the Web Goffman. Okay. And that will create that. Okay, so nothing is lined up appropriately. But you can see that at least all the colleges and stylings well, like on staff around board is are all taken care off. Okay, so you have to think about that now. The challenge is is to get what we've got here to be the same. Is this over here? Okay, so I challenge you guys to once again pours the video. Give this a go yourself and come back to me in a moment. Sad Ugo, we have a let that out. It's very fantastic. If not well, we'll go through it together right now. So how I would do this is I would look at how I want things light out. So basically, what I'm thinking is that we have two rows, so this would be considered the top row, this image the total bit and then the diet, that would be the top, right? And then basically, we have a bottom right where The middle column. We contained the text in it, so this cell would be empty and we could say that this cell is also empty. But I have a feeling that maybe this image might want to bleed into this second Russia. Right. So I think we have image kind of spin over two rows, like so right. And then we leave the date, as is in the one top cell. We have this title bit always in that top middle cell and then the text in the bottom middle cell. Okay, so on what I'm thinking is basically three columns to rise now in terms of the sizes of these things. I'm thinking the image here is 40 pixels wide. So the first column track the size of that police should match. That guy said 40 pixels. What, then? I'm thinking this middle bit where we have the title text and the message that Camp Remus spin is Why's it can? Right? And then basically, for the last one over here, this date, Connor only needs to bay as big as the content, right? So unfair Legal used Max content for that. All right, so tell I'm mapping it out there in terms of the road heights. I'm probably just gonna let them go and be what they are. I'm just thinking, potentially. We were even write any rozenhal. We might just let things flow through so we won't have any. Road definitions will just use your the automatic road creations. So we'll just have three columns that will specify with template agreed. Template columns. So 40 pixels. One If I and max content, that's wrong. So let's give it a try. So you come over to my conversation that selected here, I'm gonna sit to a grid display grid. And when they come back over to my original design and save, and we can say a little bit. Space was lost. Their about that old sign. Now I'm gonna go Greed, Tim plight columns. And I said, I want 40 pixels for the first column, then as big as it can in the second column And then for the last one, the same Max content. I'm gonna do this now. We somewhat get to where we want. All right? We still have some issues with some spacing here, and we still need to fix this bottom one. Right? So I'm gonna deal with the fact that I want this. I can't spend both rise, so let's deal with that first. So they come the end of my conversation, uh, media, and just here, I'm gonna go Grid Road spend too. All right. That's a limited It is that will span suit rides. And now, well, a situation where the conversation message is no longer able to fit in that top row there. All right, that's sorry in that first column and therefore it stays in this second call, right? And start stared. We still have lots of issues here with spacing and stuff, but we can fix that pretty easily. But just using grid gaps. That's what I'm gonna do. You so pretty straightforward and come up and underneath the tip like column definitions, guard, greed get. And I said everything. That 10 pixels, it's been safe. And hopefully if I've done this correctly, that should be the same is what we have. Here it is. All right. So it looked a lot hotter then what you think it is? Do you think about how you gonna model these things out? And what size is Everything is going to need to bay thing. Once you do that, you just have to focus on spacing in. Spacing can be made by using grid gaps. Cool. So that's what I'm gonna do for this video. So say you all in the next one. 9. Fixing conversation item sizing issues: how I ruin in this video. We're going to be working on fixing conversation item sizing issues. So let's get to it. Okay? So if you're not overly concerned about the small little details off this conversation on him, you can skip this video. Maybe until next one. Okay. However, I do feel that I want to fix a few things here such as this total tex going to the next line and wrapping down as well as the conversation message also wrapping down. Okay, On top of that, I want this conversation message to actually go into this next column. In the previous video, I like I said, I would skip in the middle column, but now that I think about it, I wanted to go into this next cell over here. All right, I also don't want to wrap, so if it can't wrap and we're airspace, I also don't want this side bar to grow right really big. Offer it to bleed into this window area. So what I'm thinking is that if we don't have enough space, I want to truncate the text and add some Lipsky's Okay, now it's not. This is not really a success grid video. There is only one change that we're going to do with since that's great. It's probably more about, you know, taking care of things like overflow and and doing things like concern yourselves with white space and things of that nature. Okay, Anyway, let's get started. So the first thing I want to tackle is this message. I wanna actually have it spanned into this cell idea the firstly so it doesn't wrap. I'm going to decrease the number of characters we have here and safe. So now it fits inside the individual cell. But I'm gonna just a few more because I wanted to write just a little bit. And then we go, OK, so hopefully when we spend this, uh, great on in there into the second cell that takes there should appear on this line. Okay, so let's deal with that and come over to my check Nazi SS, and we'll put it random bads. I would say here I'm going to add a select their for conversation message. Like so And in here, I'm just gonna guy greed kind of. And I wanted to span two columns. That's what I'm gonna talk and Now we can say that least now. The message is spaying by those columns. Go. If I had just a few more pieces of text here just to make sure that it gets to the end and save, it's still gonna go into the next line. But that's OK. I just want to add a couple more characters. And there it is. So we can say its slowly heading towards the end off the conversation here. Just want to quickly check that now the next day on a tackle is any little bit of extra space here on this side, all right? And I can't change the grade gap because if I changed a great gap, that's gonna affect the Greek up over here between the date and the title text. So what I want to do instead is come up to first all ad patting here on the message. Put Petty left. I'm just gonna say five pixels because we've got 10 pixels of Greg Gap. I want to be really 15 pixels wide, So if I had a pain left too far, pixels, that should fix that. OK, you can say it shipped out just a little bit I want to exactly the same thing up here for the title text. So basically, directly underneath that I was in a place that in and now we just have a little bit more space between the image on the texture. Now, the next challenge is to not have this text rapid all so it achieves that I'm just gonna found and say whitespace and say no rat. All right, when we do that with the title text, they're gonna say that's along with Lord, But it's bleeding into the chat area here, which is not what we want. So then we have to deal with overflowed so coming ago, Overflow X Okay, hidden right. So once it can't span any further driver, it's gonna cut off. Right? So now we've got that 10 pixels of space between that total text and the date we have the 15 on this side. And then when the text bleeds here, it's basically disappearing. Right? But we wanna have ellipses for this. Well, we usually do that, but just got a text overfly just going ellipsis. And now we get the ellipsis. Uh, so that looks a lot better. I just want to do the same thing for the message text. And here we want to put it on one line. We want to hide it and added elicits a swell, so it should be just a copy. Paste rope. Right. So if I come down and paste and save now, the message does exactly the same. That looks a little better. All right, that looks more like what I would say if I was using a chat site. Which application? Right. And that's essentially all of the cover in this sphere. Then I'm just gonna come over the hasty Mel. I'm now just gonna remove all this godly Good. Just so it was a little pretty, uh, so wants to do that. Am I happy with this result? I think that's pretty good. Cool. That's what I want to cover in this video. So see, you won't in the next one 10. Adding more conversation items: how everyone in this video, we're going to be working on any more conversation autumns. So let's get to it. Okay, So in this video I'm gonna be doing is saying the rest of the conversation autumns, okay? And then basically doing with a squalling issue. So we'll be going from what we have right now to that where we have multiple items inside of a conversation list and we could scroll up and down. All right, So it's not really any census grid work that we need to do here. This is more just adding content and then maybe fixing a couple of issues. So if you're not really interested in this, you can move on to the next video now, But for the rest of us. Well, let's get going. Okay. So the first time in a day is I'm gonna at the new hedged email full as New Orleans. So I have a snippet for this, and it's got L d g c ap shut remaining conversations face, you know, and 10. And there we have all this hasty now that represents each of the conversations right now, if I say this, we get this situation right where we have all the items and everything for the most part, looks OK. There's a couple issues are conceived with this. The 1st 1 is some of these images actually bleeding outside of that column and taking up that grid space, which is not what we want. And on top of that, there's no swelling at the moment. Okay, so I will deal with the scrolling problem fast, cause that's probably pretty straightforward. Has already have a snippet for this. So the very bottom of the sixth, as far I'm just gonna go l D G c ap chat Web kits scroll Uh, fix and tab. And basically all I'm doing is adding a Web Kids scroll bus selected here. It takes the squirrel by things says display none. So that's that. That doesn't really fix the scrolling problem yet, but they're gonna come up to the conversation list selector where it is. There it is. I'm gonna put here overflow. Why is scroll and Saif And now we've been scroll up and down. Okay? Now I just want to quickly fix these images so I can do that by coming down to where the images and I said the heart to 40. So I'm just going to the same for the with. I have 40 pixels inside, and now everything seems to be the Why did I want it? Okay, it looks exactly the sign is this year. And that's all I want to do in this video so casual in the next one. 11. Creating some initial chat messages: Hello, everyone. In this video, we're going to working on creating some initial chap messages. So let's get to it. Okay, So in this video, I'm now going to focus on these chat message lists section, and we're gonna create two messages, right? It basically what? We're gonna create this This So we have a blue message which will represent what we're saying and a great message which will represent what the person I'm talking to are saying, Okay, at the moment I've got them going for with I'm not going to be addressing that issue in this video, we're just gonna be doing exactly what's here. Okay, So with that said, there's actually no since that's grid stuff that we're gonna be doing in this video, I But we need to set this stuff up so that we can manipulate it light up using CSS. Great. Okay. So I'm gonna get started on the fist in going to do is write the hedge to melt these, as you usually would. So I'm looking at this and I can see that we basically have a parent element with two child elements in it. So I would say we have a message Rome. And then we have the message text which currently spends all the way across. And then we have the message taught, right? And that's quantify a second run. So in terms of hasty Mel, this is how I see it being set up. So we got div class and I'm gonna use the class, Missy drug like set. And the inside of this is gonna have another Dave. And I'm gonna give this a class off. What's a message? Text? And it's sort of this report the text. So in the case of this, I'm actually going to put the first message representing this one. Okay, I'll explain a little bit light of what I'm doing that. So I go. OK, then, right. And then that another Dave go class. We'll go message time off that. And here offer that a PR 16. Yeah. Therefore come over to my original and then save this. And there it is. We can say its very ugly at the very top. Yah. So it is a couple of issues with this one. It's at the very top we wanted actually, at the very bottom. So I click here, you can say to the very bottom, and we want to go in reverse, right? So if I add, say, a 2nd 1 So I'll do that right now. Oh, at a second message on fix this up, intent that over and let me change the text to say, Was it? Yeah, I think is best we do that good that, uh and then I'll use the same time whenever on this. Well, you can see that the second message actually sits under or is if we look at this, it's actually sitting on top. OK, then you might say, OK, just reverse them. But if we think about how chat application would work you and generally probably retrieve a list of messages where the most recent message is on top, right, So we kind of need to cut it for that, you know, is on. So that's what we're gonna do it. Okay. That's why I've got this one first and then this one second when visually, they're different. Cool. So now we've got the hasty Mel set up. I'm gonna grab the basic success that we're going to need for this. So I'm gonna come down to after the where is it Conversation in a conversation chat message list. Where is it? There is so in here. I'm gonna use enough snippet L d g c, and and I'm going to look for what I call a message. That chat message list that message styles. That's why I pulled it And tap. Yeah, we're gonna get a whole bunch of stuff. Yeah, right. The first thing is for the Roy that I just added. All right, so this thing here with, we're adding some margin on top of it, okay? And that's all Sorry at the bottom. And this is to separate the Rosa pot. Okay, then we have message time, and I've got that basically increasing its phone size and changing its color to be a different color there. Then I got the message text where it has a bit of padding around it, right. I'm increasing the fun size a little bit, and I'm also a little bit about margin, and that's the kind of for the distance between the speech bubble and that takes there. Okay, we might remove this lineup a little bit lighter and use gaps to achieve that. Good. Now we go down, and I have this selective for you. Message. Don't message text that I don't actually have a class for this year or this one either. All right, so we need to do that. So for you message there is basically the first message I had here. So all I need to do is come over and just type your message outside. And what was the other one that I had there of the message? Okay, So providing different, say says for those two different types of speech bubbles. Now, it doesn't really change anything yet because I haven't updated the success. But now we look at what we got here so we could see the blue for my message. The color of the text has changed. The board has changed, and we've got some radius, all right. And the race is based on the fact that we kind of won that edge on the bottom, right inside to be square, but the rest to be rounded, okay, and the opposite for the other message, because that's kind of what that's doing here versus what's doing here. And then for the other message. We're just changing the background. The border color in the text as well. So if I save this now and I come back over to what I originally have, we could say we're pretty much there. Okay, There's a couple of things that we need to fix. Well, obviously need to add some padding for our, uh, check message list. And we need Teoh basically reorder these items at the moment. The blue eyes still on top. Where is in this one? It's on the bottom. Okay, so let's deal with that now. So I'm gonna come up to my chat message list, and we'll do a few things here, right? So what I'm gonna do first isn't actually going to use a display and not said the grid and then sit deflects. All right, now this is gonna break it. That's fun. So what's happening here is flex boxes saying, while you've desired to put this in, Ryan All right, What? We wanted to basically go from the bottom and go up, not go from left to right. So we can quickly fix that flex box by just going flex direction. Column reverse. All right. And when I saved this now things are gonna be on the bottom. Okay? So this is a flex box thing. Not a good thing, but it's very handy to use this when you want things to start at the very bottom and move their way out. You cannot do this using sets. That's great. And they are just gonna add some patty in here. Okay, So the party I'm gonna give IHS, let's say 20 pixels on left and right. So we got petty 0 20 diesels and safe. And now I'm pretty sure that's exactly what we want. Yep. If I in total between the two, that's what we get. Okay, so no grid stuff there, unfortunately, But we need to do this so we could start taking the consideration. Other problems they were going to see in the next year and beyond. So with that said in this video here, and I'll catch Jewel in the next one 12. Sizing and aligning chat messages: Hello, everyone. In this video, we're going to be working on Sozzi and aligning chat messages. So let's get to it. Okay, So in this video, I want to deal with some sizing and alarming issues that I currently have with My message is down here. So as we can see right now, the speech bubbles are going all the way across the screen, even if the text is all the way back here. All right, So what are really want to achieve is the following. So come out to this tab. You can say for the other messages. I have it going all the way across to about 70% the width off this chat window and then it brings the text down to the next lot. Right On top of that, we have my message, then here, which is very small. And the actual speech bubble states a small as the contents inside of it. Also note that my message there's a lot of the right hand side. OK, so these are the things that I want to kind it to in this video. Now, before I show you the solution of this, I want you guys to plus a V. I try this yourself and then come back to me in a moment, so we able to wait that at, if so fantastic. If not, well, we'll go through it together right now. So the first day I want to tackle is this 70% restriction, right? So make sure that when we have a certain speech bubble of a certain with its only ever going to bay 70% maximum. All right, So when it comes over to my message ride in the first set this to a grid which we hadn't done before. And if I come over to my original tab, you'll say nothing strange. Next thing to do is I'm actually going to add a grip template columns and set one column at 70%. All right. And this will create the situation off restricting the column track that this autumn is in to 70%. Okay, so we're never gonna have a column track that goes all the way across the screen. It's gonna Max, stop right here. Now we still have this problem off this space, right? We don't want this space. The good I'm is basically by default, spending all the way across the screen to fill in that column track. So is a clever way around this that I found. And it's basically this. So if I can't and sigh dot uh, other message will start with other message, all right? And I say justify autumns to stop, like side that's now going to push that grid autumn toe only ever be as big as it needs to bay. However, if I come over and then all of a sudden say I'm not types a moment more content there. So if I scroll down and I find where it is right now and so I want to replace this with Did I? What's guy with what context? A woman right here. Yeah, I think it in fact. Well, let's go to the next one. Yeah, I think it's best we do that. Otherwise, things words uh, crept. Damn, Adi don't open that. Things weren't work well at all. I'm adding more test here to test the sizing off the speech bubble and wrapping off to that should be enough. Now, if I save this now, we can say that the speech bubble doesn't tend get to 70% and the text will wrap. That's the first problem dealt with. Okay? And we did that by just simply dying. Justify autumns to stop. Now we still have my personal bubble that can we use justify autumns to achieve that? No. And we can't. Because if we do that, I I select up and I my message. Sorry. You message. Sorry and save it looks so good. Everything. But if I have now aligned this off to the right to say I want a gay uh, you message, like sign and say justify content and move that to the end, which is really what I want to do it it doesn't work, all right? It doesn't work because now we've got justify items with start. But what we really want to do it is having on the fire, right? So then all we need to do here, he's got okay. We're not gonna have that here. I was gonna cut that out. Instead, I'm gonna use justify autumns to India. I'm gonna dual this. Now we get the result that we want. As you can see, it's not caving for everything. We've got my message over on the right hand side using justify items and justified content of end. We've restricted everything. The 70% said both the speech bubbles are only growing its biggest 70%. If you want to say that, you can. I'm just gonna grab this. Copy that and put it into where this one is. Right and paste and you'll see you get the same here. Okay? Yeah, I was gonna prevent that Can save it. So about where we are. So that's being cared for. The alarm is being cared for and the wrappings been came for. And that's what we want to cover in this video. So say you all in the next one. 13. Adding chat profile pictures: Hello, everyone. In this video, we're going to be working on adding chat profile pictures. So let's get to it. Okay, So in this video we're going to do is at an image to the left hand side of this speech bubble. When's the other person talking? In other words, when I got from what we have now to this where we have that image kind of flying to the left Spain the two rows here. And then there's a bit of gap twin it. Okay, so I'm gonna write the heads to know for this now, free, straight, full and jump back to my original and i to my other message here, image source equals images, profiles me, and then I don't is equal to May. All right, so and that's it. Right? So what is gonna dio is going create an image of the moment that's above the speech, Bible and the time. And that's because we easy one column here, that 7%. What? Okay, now the FBI I'm gonna do is quickly just stall up this image. So I'm gonna use this snippet to do this. So you go l d g c ap shot message some now styles and said, and all these dyes is give us a selector or a tired said image. Thank. Is it a border raise off 100% which makes the circle. Okay. And that's what I'm doing for now. Now what? I want you guys to try yourselves is work out how we can get this image into this left hand side. Add that spicy in between. But then also, keep in mind that this whole thing needs to be 70% watt. Okay, so it's not 70% for just a speech bubble, and then plus extra, it's 70% my role. Okay, so why don't you try that yourself? Pause a video, give it a guard and come back to me in a moment. So how did you go? Were you able to wait that at if so fantastic? If not well, we'll go through it together on now. This is actually really challenging. All right. At least at first when I tried this, because I guarantee most people would have done this to start off with this will get to the right 10. They would have going You know, what if the whole thing is going to be 70%. I'm not gonna use columns here. I'm just gonna sit with 7%. You have done this right? What happens when we do this die is that the whole thing is 70%. But then this element here, all this speech bubble is no longer aligned to the right hand side off his message list. Right? We want it all the way up here. We don't want to hear. We want it there so we can't reduce the width of 7% because we lose the alignment. And that is why I had it in Greek. Tim Black. Kahlo's in the fist place so that the with off the message right would still remain 100%. But the column would only get 70% cool, so we'll put that back. So the way I'm gonna choose to solve this used to add just a little bit more hedge to know . And I mean it basically at a rap out around everything inside the message. Right? So I added, if here, give it a class of message content like site and I put everything else in sort of that right, that why am I doing this? Well, one on one. Doing this is so that that message content could be 100% off that 70%. That's the phone for message. Right? Okay. And then the message content can become a Greek in time for its own that we can manipulate the columns in. Okay, that's why I'm doing this. So I'm gonna add another doofy up lips when I can hit the right thing on my keyboard. DIV class message content. Then I grabbed everything here once again and put it inside off message content here. All right. Now, from a visual point of view, if I say this, we're not gonna get any change right enough that you change because message contents expanding to fill in all the spice off message. Right? And everything else is called acting like bluff level. Right? So now I'm gonna make the message content a grid, and I'm gonna do that by going on the message road, your dark message content and saying display great on this. All right? Nothing special. They're no big deal. Okay, We do have an issue here with alignment, but we can fix that pretty easily by just coming into well we've got justify audience here . That's their very on the U message. We just got your message, and then we're targeting the message content, you know, just filers end, and that will put the date back. OK, not a problem. Maybe deal. Now we still want to get this image over here there for the other person. So we can do that by just coming down to on the other message. Like, say, entirely message content. All right. And then got in grade 10 play columns and setting this to, but we want 48 pixels for the image. So we have set 48 pixels wide and they wanted five. All right, when we do this, well, we're really there. We've got the image on the left. We do have an issue with the date here, but that's because we just created a to hollow grid. So we need to make sure this image spans both rose. All right, so this right now, push under athe speech bubble again. Now we're almost right first. Before I do that, don't add a grid column gap to deal with the spicing that we have in this example That there and I didn't do this. We're just sitting that to 15 pixels. So there's a gap. And then finally, all we need to do is say that this image is gonna span to rise. So just under other message don't message content. Whoever got message right on image Because the image really occurs under other message, I'm gonna put in here a greed road. Oh, span to. And there it is. Now, if we compare the turn, you can see they're exactly the same. And that's all I'm gonna cover in this video. So? So you won't in the next one. 14. Adding the finishing touches: how we run in this video. We're just going to be adding the finishing touches. So let's get to it. Okay. So simple video here, all we're gonna do is Atmore chat messages and fix the scrawling issue. Okay, so fiercely, the chat messages. I'm going to use this snippet l d g c ap chat. Remaining messages? Yes, you know, and tap. And there's a lot of messages. If I save, take it, get a line, But you conceal the message is there? But we have some issues with overfly, so we can fix that easily. Just coming to our chat message list and going overflow. Why would I spell it right? This girl inside And there it is. We've got our messages and sort of our chat message list and we can scroll up and down. So congratulations. You have successfully build a chat application. You I so thank you for taking my class. And I had to see you will in the future one