Easiest Way to Create Web Dashboard With HTML, CSS and Javascript Part 4

hello in the previous lesson we created the search section and also the project title which is what we have here in this lesson we'll be working on the project listing section where we'll have all the projects on our dashboard let's see how that works moving to our html what we need to do right now is to declare a div container for all the listing and for us to do that we can have a nested div inside the main container or the main section let's see how that works i'm just going to have the project list as a class so inside this project list is where we are going to have all the projects and for us to have a very clean project segmentation we need to also still wrap the project in a div and let's see how we can do that we're just going to call project class so this is where each of the projects are going to leave but for us to still understand what we're doing let's leave a comment so i'm just going to call it project list let's copy to the end it's just gonna say end okay so with this no matter how long the mock-up inside is nested we can tell the beginning and the closing tag if we look at our mock-up or look at our prototype what we have first is the name or the name of the project but one thing we need to kit for as well is this very tag well it can be color tag it can be name tag however it is but what we have in this very design is just color so let's leave a div or a span it can be a div it can be a span but i think let's go for the d we're just going to use the class of category category spelt wrongly just put the e there so this is what we are going to use to style the color the next is we want to declare the header which is going to be h2 then if you look at what we have in the h2 is going to be graphic design after the h2 we need to check the project last visit so we can add that in a p tag just right under the h1 so we can just say active recently if we check our code you can see that is gaining shape gradually the next thing we want to cater for is this listing for us to do that let's go for the ul so we're just going to say uh then li this should be like so let's give a ul class of activity then we can give let's see what is written coming soon banner we have comments on banner then we also have book cover you can see that we have it's updated after we have the listing what we need to cater for again are the images and also this very button what we can do is to declare another div still inside the project container so we can give that like metadata inside this is where we're going to have all the images and we're going to also have the button let's try to group the images and let's just say contributors all these grouping are going to become very handy when we get to css in this first one we have like three images i already populated my asset folder with like eight images so we're just gonna make use of it so let's call out the image so let's call on the image tag i'm just going to say assets let's pick the first one let's see if we can reduce it a bit okay cool so i'm just going to duplicate this into three places and just update the images now we need to reference the button and first do that let's just use spam then let's copy the class from this we're using the google icon we're just going to paste the class here then we want to choose more verts icon which is this so this is the tree dot that we have here so if you look at what we have right now we have a project it's looking this way because we are here to style it but look at all the structure with keta for almost everything we have the header then we have the last visit then we have list of activities followed by the images and finally we have the button the next thing for us to do right now is to duplicate this very project so that we can have multiple projects and to do this we can just highlight the project segment now to i like the project segment i think to be ideal for us to still leave comments on this project so that it's easy to identify so we can just call this project project one let's try to end it just say project one and okay this look cool so once i have it like this i can then start duplicating so we can just add to this one project two and project two so what we need to be looking for right now are the data changes the next one is going to have magazine so let's change the title to magazine magazine then he visited one hour ago let's look at the test so we have editorial page content editorial page content so it seems to only have one line for this one and how many images do we have we just have two so let's delete one and let's just update this one to four and five just have different images moving forward let's duplicate this as well so that we can have a third project we're just going to update this one to be thought project this is well taught project let's check what the title look like this is layouting layout and let's see how we can update that i'm just going to call it layout and let's see when it was visited one day ago we're just going to have one day you go the test that we have is fixed layout on the page ads so let's just update that we're going to have fix layouts page oh is that what is there fixed layout on page ad fixed layout on page add so let's just have ads that's cool if we check the images we only have one image so let's remove one we're just going to make this one five if we check it ah thus is giving us five let's make this one six just have different image which is cool the next thing we want to do is to kita for the fourth project fourth project is branding and we have brace domain shape and it was visited three days ago we're just going to duplicate this let's update this to four four as well we can just say branding which was visited three days ago then let's see what we can do then let's have brain stoma ships we need area let's change the image to miss six let's see if that works let's change it to seven okay let's gita for our projects five we're gonna have five here and five at the end let's see what we have on the project five we have guidelines that was visited five days ago so we're just going to have guidelines he's missing here visited five days ago then we're going to have make brand guideline for marked cosmetics let's see if we can change the image to number eight in fact let's see how many images we have we have two images so let's duplicate this one and maybe let's give it number one or two again just so we have two images cool so let's get up for our number six image let's change this to six we have photoshoots let's change this to photoshoot and let's see the day it was visited one week ago one week ago then for the message we have get the photo ready for magazine the photo ready for magazine let's look at the number of images we have three images let's just duplicate this one to make it three images but this number around let's have five let's have six let's have one you can see that we have three images and we have six project in total and that's how we wrapped up for this one in the next lesson we're going to look at how to create this section where we are going to embed our map and also cater for these two subsections 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

Channel: InstinctHub

Views: 7,002

Keywords: javascript, javascript for beginners, javascript tutorial, html, web development, interactive web, web design, color generator, markup, html and css tutorial for beginners, beginner coding lessons, 100 days of code, software engineering, software developer, software engineering tutorials, css, javascript tutorial for beginners, coding, design thinking, learn technology skills, intincthub, 40 days with web, learn to code, responsive navbar, responsive menu, responsive menu bar

Id: 5TxPN_pw_Ac

Length: 14min 49sec (889 seconds)

Published: Fri May 21 2021