in the previous lesson we saw how we can add chat js and also customize it to fit what we need in this lesson we are going to see how to add the layout listing or the project listing it's more like the summary section where you can just see on a glance maybe the most recent project let's see how that works so similarly to how we created the project listing it's more like what we're going to do in this very section and first to do that let's come just immediately under the project let's see let's make sure that we are using the right the right tag okay so under the secondary section just immediately below the charts now once more like lists or the recent first to display the recent project we need to have a div with the class of recent projects okay so we still need our comments they just have it say recent project let's put it to the end so this trick really about adding comment to a tag is once you envision that the tag will be a bit longer and it will take you time for you to trace the end you can mostly use it as you can see on this very short tag there's no need because i could tell almost immediately the beginning of the tag and the closing tag but for this recent project listing it's going to take like a long list and um force not to be confused at any point that we're scanning our code we can always look for the end very easy in the recent project we also need to have like a project container more like a card that is going to group each of the projects so that we can use css at some point to position them and let's just call it we can call the class listing inside this class is where we're going to have each of the projects let's take a look at what we need to do here we need to cater for this tag color category color then we have the titu also have the button now this is already telling us that at some point we need to flex or flex display all of this in our css we're going to get to that very soon okay so what we can do right now is to declare another div which is going to be class of title in this div let's have a category we can have the category let's say class of category we don't need anything here so we can say let's go for h2 and we can give it maybe layouting layout in as project i2 then the project was created by let's use p tag but she then kachuko logically spell like this then we need something else we need the button we can just use the span then let's call the class of material icon then let's use the outline then let's call on the move it see this should be outlined all right so what we need to do right now is to duplicate each of the project just under this listing we can duplicate each of them you can see that we're having multiple so let's go ahead and change the second title to like photoshop or photoshoot photoshoot is by musa ismail monsa is maya okay we can duplicate again and let's say we have branding brandon brandon is by ezekiel ezekiel arrow okay cool so we have projects by ezekiel we have um photoshoots let's see how many project listings that we have okay we have like four let's add the last one we can just say graphic design just gonna have graphic design we can have this one [Music] okay so now we have four project listing which is cool and that's how we wrap it up on this one it's now time for us to use css to make all this look so beautiful as it is right now it looks boring and not really enticing css is going to help us to achieve all of this beauty and our page will have like a flash and it's going to look awesome thank you for watching and i'll see you in the next one if you like this video subscribe to our youtube channel and follow us on all our social media undo so that you'll be notified each time we release a new tip until next time i'll see you in the next one you