Video instructions and help with filling out and completing Form 2220 Admin

Instructions and Help about Form 2220 Admin

Hey guys in this video we're going to build a custom admin theme using bootstrap okay so this would be something that you'd have for CMS a content management system to manage your website pages and blog posts things like that all right now of course this is just the front end I guess it's the front end of the back end it's just the UI we're not going to have any functionality we're not going to use a back-end server side language or anything we're just creating the UI maybe somewhere down the road we can add some back-end functionality to it but for now it's just a UI video all right to help people learn bootstrap mostly beginners I just released a crash course a beginner's crash course on bootstrap and this is kind of a follow up to that so we can take those skills and create something with them all right and for you back-end developers don't worry we're going to get back to you no no js' and other back-end programming languages and step away from the UI for a little while but I do want I just wanted to get some beginner videos and some front-end developer videos out there all right so this is what we'll be building it's not the best looking dashboard you've ever seen but I think that it's a good example for for beginners to get into bootstrap so let's start at the top here we have a navbar and there's going to be four main parts to this theme we have the dashboard pages posts and users okay over here we have just a welcome message and then a log out now if I click logout it'll actually take us to a log in HTML which is a basic login page that will create alright and obviously there's no back-end functionality but when we click log in it just redirects us back to the dashboard okay so under that we have this heading area create content is a drop-down where we can go to add page add post add user which we'll get to those pages in a minute then we have a breadcrumb here then we have a we're using the grid system for a sidebar and then the main area on the sidebar we just have another a list group for the pages post users and we just have we have some icons some bootstrap glyphicon x' now when I build front ends I and I use icons I like to use font awesome but I didn't want to use any extra library so we just stuck with the bootstrap icons alright and these are also also have some badges here to tell us you know the number of users and posts and so on and then here we just have some progress bars for the the hosting the disk space used in the bandwidth used on this side we have an overview with some wells for users pages posts and visits okay so we're using icons here as well and just tells us the number of each resource and then we just have the latest users that have registered to the site in the table with the name email and joined date and then just a simple footer so pretty simple let's click on pages okay so this we just have basically have a table here tells us the title of the page whether it's published or not okay we have using an icon here edit and delete buttons and we have a filter our search bar here as well and like I said later on down the road we may add some functionality to this and be able to actually filter through and all that stuff alright posts pretty much the same thing except their posts and then users same thing okay so those are pretty similar pages let's see so create content if I go to add page we're actually using a modal for this I think that it looks pretty nice and pop up with the title notice that the body we act we're actually using an editor here WYSIWYG editor this is the CK editor and it's really easy to implement and we're just including a CDN and then just adding a little bit of JavaScript alright so we have a professional-looking editor published checkbox and then some meta tags and description boxes alright the form actually isn't going to do anything if you submit it again it's just the UI now I didn't add an add post or add user because those are very similar and I don't want this to take too long so there are I did cut some corners and you guys can add that later on if you'd like I'm same thing with the edit page if we go to pages and click Edit it'll take us to a page like this which basically has the same the same UI as the modal the same fields and stuff already filled in now it's the same for any page that click I didn't create a separate one for each one it's all there all the about page all right and if we go to posts and we click Edit that's going to go to the same page the Edit dot HTML and again you guys can add that in later if you want separate edit pages for each for each resource alright so I believe that's it yeah so let's go ahead and get started what we're going to do is create I'm just going to create a folder on my desktop and we're going to call this admin strap underscore theme okay and we're going to create our index.html which is going to be the dashboard okay and we need to grab bootstrap I'm just going to download it download the compiled files so there's a million ways you can install bootstrap but I want