Bootstrap HTML CSS - Django Web Development with Python 4

Key Takeaways

what is going on everybody welcome to another D Jango tutorial video in this video what we're going to be talking about is styling so we can break websites down into a lot of aspects but generally you've got more of the backend which sometimes is confused with like server backend but really what we mean by backend is something that isn't presented to the user and then you've got front end this is the actual user interface so the uiux so user interface user experience uh and so generally there's quite the dichotomy here and people that are good at the backend or the website logic let's call it are not generally very good at the user interface so this can be kind of a challenge if you're a programmer who wants to get into web development but you are not a designer you don't know much about HTML CSS and all that so luckily uh there is um bootstrap so bootstrap is um it's hard to explain it right out of the gate but basically it provides you with mainly a CSS stylesheet or a CSS so cascading stylesheet and some JavaScript includes that you can use to on your website and then it also gives you HTML Snippets that you can you can make use of on your website and basically what it does for you is it allows you to have a nice responsive decent look website very fast so some examples of my websites that are bootstrap would be like centex.com this is all bootstrap I didn't really write any I mean I wrote some of the HTML but all the CSS is it's just bootstrap okay so like all that stuff is bootstrap then we've got um pythonprogramming.net the actual web you know tutorials website it's all bootstrap okay so once you start to learn bootstrap you'll begin to see that like a lot of websites are using bootstrap you'll start seeing it everywhere um so uh with that let's go ahead and uh get started so what you're going to do with bootstrap you can go to get bootstrap.css first go to get bootstrap.css we sites load quicker so initially you may not think that 100 milliseconds here 100 milliseconds there really matters but it does it makes a big difference and a lot of times your users don't even realize that it makes a difference to them but the faster your website there's been plenty of studies shown it makes the user experience way better if you can if you can make it instant that's the most ideal thing right so um this is the CDN you can use that if you want and it it will basically will just allow your um the a CDN basically has like servers like let's say in a bunch of locations and the server that is closest or quickest for your user to access that's the server that will send the data for um for let's say in this case is the CSS sheet uh or the CSS and um and there's other stuff too like this is for the JavaScript and stuff like that so uh you can use a CDN in this tutorial I'm actually going to show us uh running the code locally because it'll allow me to actually show you guys how to handle static files which I mean like all your files you're not going to be able to have a CDN unless you make the CDN and if you're watching this tutorial chances are you have no idea how to do that anyway so the first thing we're going to do is talk about static files and where to store them so anyways with CDN in mind we're going to actually download uh bootstrap instead so you come here and just download bootstrap you don't want the source code you don't want SAS you want bootstrap once you have boot strap downloaded you should be able to come here and um you you've you know got the zip or whatever so go ahead and extract it and then open up this distribution and you got CSS fonts and and JS so JavaScript so let me move this aside we're done with the downloads let me move this over and now I'm in my site now you can have a static directory just like templates a static directory per app so as you can imagine there may be some images that are specific to that app also your website's main app is also probably going to be where you reference all of your CSS okay but you could reference or at least your main CSS page let's say you might have custom CSS per app but your main app CSS probably in your main your main website so every app is probably not going to have separate CSS um if it's all with the same website anyways so we're going to go into personal and then we're going to make a new directory and we're going to call it static now with the stuff that we just downloaded I'm going to highlight it and move it into static so now within static we've got CSS and we've got all these CSS uh keep wan to say CSS sheets but right they're cascading style sheets so CSS sheets would be cascading style sheet sheets anyway um the main one that we're interested in is right here bootstrap.min.css that's the one we're actually going to reference uh the other ones you can have here it's not going to make a big difference because we're not referencing them anyways also within here we got fonts this is mainly for glyph icons which we'll talk about here in probably a moment and then the JavaScript these are just some JavaScript stuff so various like popovers and um maybe like notification kind of dialogues and modals stuff like this are going to be using JavaScript also like drop- down menus stuff like that so if you want to reference that you have to you know reference these but we'll talk about how to do that here in a moment when you have a static directory um templates requires it static requires is it if you're old school uh D Jango you may have actually had to hardcode where to find static um if you're using a later version you probably don't but just to make sure you are referencing the static directory you go back to my site and then the mysite uh the main kind of my site directory here so my sitey site settings.py go ahead and edit that with idle and make sure that you have a settings directory it's probably at the very bottom right here static URL equals static you can also visit this for some some information but you should be you'll get it from me anyway so just like templates when you reference a static file it's going to automatically assume it's in SL static and just like templates you can have a SL static directory for all of your installed apps jeno is just going to mesh them all together so for the same reason you may want to lead them off with a uh personal directory now um that's basically all we need now we've got that in now how might we actually reference those files so first of all let me talk real briefly about bootstrap generally what I recommend people do uh the first time you come to see bootstrap and then also every time you start a project I usually go to get bootstrap.css components JavaScript right click these three tabs you can also go to customize if you want because you can customize bootstrap um in various ways down here um but mainly we're interested in these tabs and then in these tabs you can see okay you got these are like basically your um I can't think uh table of contents I suppose and um actually quite a good table of contents I really like this I'm actually I'd like to steal the code from that um the basically I usually come to these webs or these pages and just kind of like scroll through looking for stuff that looks interesting like oh I might want to make use of this grid system so noted and then you can kind of keep scrolling down and then you got components these are the glyph icons so a lot of times you want to use an icon uh these are a bunch of free icons that you can use in your website um but then there's all kinds of stuff so then you got drop downs and but button groups and buttons you've got nav bars so here's an example of a nav bar that they you know build the code and basically all this stuff like shows you what it would look like how you would interact with it and then this is actually the code that you can just copy and paste to your website and then kind of modify it a little bit to be exactly what you want um anyway you can keep scrolling down there and then JavaScript is another good one that you want to scroll down because they add they do add stuff over time so you're going to find that you've got new you know uh new additions as time goes on which is why it's always a good idea to revisit it um plus some stuff that you've never used before may be something you might want to use now so like for example here's a modal uh so this is why it's a JavaScript you click this and then you get this like popup kind of stuff so anyway that's what this is and to get it you would copy and paste this code modify to your liking and so on there just bunch of information there so we're going to I'm going to leave this aside for now and we're going to go into um our website and talk about how we can at least include uh include our um static files in our CSS page so the first thing we're going to do is we're going to go into personal templates personal and the header file so again the header file is what's going to encase basically all of our other HTML files for the most part uh so in here this this is where we want to load in our CSS so generally your CSS is going to be loaded in in in the head of your header let's say so to do that what we're going to do is we're going to first what we need to do is we need to load the static files so the templates didn't really require this but within here we we do need to load in all available possible static files so first we use a little bit of Ginger logic here and we say load static files what this does is it tells Django hey get ready I'm about to reference a static file and I want to be able to reference the static file so gather up your whole list of static files so you know what I'm talking about when I reference it so you only need to call this once and especially if you're calling it in your header file that means it's being called on all your other files anyways so you just need to call it one time you shouldn't have to like call it every time you want to reference a static file so now what we're going to say is link the relation here um is it's a stylesheet and the basically the reference for this stylesheet is and then here's where like normally you would give the path like let's say like on flask for example our stylesheets were stored in slash static of website so you would say SL static CSS and then maybe bootstrap bootstrap uh bootstrap.min.css okay that might be a way to reference it and if you were familiar with FL actually you could use um you could make this a variable and make it very Dynamic same thing is true in Jango just slightly different so instead of hardcoding it we can do this so the reference will be the static directory and then from that static directory it was located in CSS actually uh let's go back I don't think I did that uh let's go templates let's see personal static okay I did do it um for the same reasons that we did this before you probably actually don't want it to be in uh just straightup static it could go either way here because generally at least this information um this is the CSS that we're going to use on the whole website very rarely does like a website have custom CSS where that custom CSS completely replaces the other CSS so sometimes on some pages you're going to load a local stylesheet so something that kind of appends the existing stylesheet so you still actually will reference the main stylesheet so in this case in the case of CSS fonts and JavaScript I don't think you have to have like a personal static personal CSS fonts JavaScript you can do whatever you want if you want to add it go for it one thing that I would recommend like later on when we have like an images directory I really would suggest you do personal images and then go in or even images SLP personal SL whatever the um thing is but for the CSS fonts in JavaScript this is something that's going to apply to all pages and you probably could be you'll be just fine this way so anyway CSS bootstrap.min.css okay easy enough then we finally add our type equals text/css close off that tag and we're done so now we've referenced the stylesheet before I save this however let's go uh to here and let's run the site real quick um I don't think I have it up anywhere so yeah let's pull it up it's not running so then so now you're going to do a manage.py run server so python manage.py run server server's running let me pull it up so here's our current website you it's everything's very basic so then what I'll do is we'll come back to this header tab let me close these out or the header. HTML file save that we're including the stylesheet now come back here refresh and a couple of things you'll notice the the text is different it's also not pure black it's like a very dark gray also the edges are kind of gone there that's okay um anyway but bottom line we see that indeed we have apparently loaded up a style sheet uh we can view the source real quick and we can indeed see that for the stylesheet again it's not you're not we're not seeing the ginger logic here it's the actual HTML So in theory the user uh can take the static link click it and sure enough that's our HTML or well our style sheet so um so anything you have in static just keep in mind that's all publicly available okay so you wouldn't put anything that needs to be secret in uh your static directories so let's close this out um I'll zoom out again and so now we have just some simple stuff so like let's let's kind of improve our homepage a bit so uh kind of like before I don't see much point in us like hand coding our um our HTML here uh so what I'm going to go ahead and do is I'm going to copy and paste HTML from the uh the tutorial so go to the link in the description to get the code otherwise we'd spend about 30 minutes writing out this HTML and I don't want to do that to you find individuals so I'm going to literally copy and paste it over here again go to the description to get the code and now I will um explain it uh here in a second so let's I'm going to save that and I'm going to come back to the website and refresh make sure everything worked and let me come back here did I okay yeah so in the code in the in the sample code I did have this uh personal again it really doesn't matter if you get this though it's a good chance I or good time for me to reference it also I have a face that I I don't have here so anytime you get this right um obviously our CSS is not here what the heck happened we can view the source we can see okay this is where it's trying to reference let's check it out it's not there it doesn't exist so we know that's a problem and then here we can see image source static Personal Image profile.jpg that also doesn't exist so what the heck so we can come back to our code and let's say we do want to do the whole personal thing so what we could say is new folder personal CSS fonts JavaScript drag that into personal uh click that cool uh we obviously don't have that image yet but then let's come back over to our website let's refresh and sure enough we've got pretty much everything we need we're just missing this face.jpg so let me pause here and let me grab a face real quick okay uh I've grabbed this profile picture here I'm going to come over here and it's actually profile.jpg so Personal Image profile.jpg so we're in personal we'll make an image directory here IMG move the profile picture into there and finally our website should work let's pull it up 127 there we go all right so obviously we're not winning any uh any uh um awards for this website but it at least looks okay so let's explain the code real quick so coming over here let me zoom out or scroll out a bit so again this is the head the head basically um it it just gives the the browser some information okay so um so here this is just the title of the tab you can look at your tab and see yep sure enough um this gives the character set utf8 then we load the static files we load up the CSS page that's simple uh this is a metat tag basically this is for bootstrap okay so the idea of bootstrap is to be very um uh mobile friendly okay so so with bootstrap we've put in some pretty basic HTML here but you can see so like this is like a computer screen but if we squish up the screen you'll see that everything works it just it it'll just work out in your favor okay in most cases anyway so so you could view this on a phone or a website or a phone or a website a phone or like a computer and it looks okay okay so then we Bop into uh the body here and we start to see okay it's a div class container fluid that's a bootstrap specific container basically it's going to be a nice mobile friendly container um and we're giving this a minimum height of 95% uh the reason why we're getting away with this is because of this little style addition that we're making so again with like you might have like style sheets just like this where it kind of appends on top of this stylesheet uh but you're still always going to reference this one first um anyway this just says the page is 100% tall so the reason why we're doing that is for this footer this isn't the best way to do this by the way uh it's just the easiest way uh so this footer as you can see it kind of comes up or down as you move the page around So eventually it but it won't it won't roll over this these other divs so basically this is as good as it gets once you start in conflicting with this other div it's not going to let you do that but anyway that's just our way of making the page always like a full page right no matter kind of where you put it so that's kind of neat anyway uh that's why we're doing that then you get to these rows well the rows um are the bootstrap grids let me pull these over so this is an example of the grids so that's um here so the these stacked grids this just tells you basically a grid has rows and then you can say column sizes the maximum width is 12 so you can have a bunch of ones that add up to 12 you might have an eight and a four or four four four a six and a six and so on and that's your way of styling them as usual these are also Dynamic and and mobile friendly so if the page was squished up a bunch uh no problem it handles for that so those are that's just like one example of of what we're using in our case we're doing a two and then a 10 the two is containing um basically to start our little profile image and our banner and stuff like that we get down here we start a new row uh and then this one contains these nav pills so again we can look at this and the well so these would be like our navs um so this is in components you come to navs there's tabs there's pills and all this stuff refresh here there we go so this is the beginning of that navs also we've got our nav bar bar that's contained within a well there's the code it's just a special div with kind of a dark out background you can customize that background however you like though uh in our case we sure enough have customized that background because actually we made the background white and then the background of our website our entire website is actually a darker color so we did that here um so we' got the nav pills and container I think we're all set now actually yeah so everything else is done we have Footers and a footer tags with HTML 5 um we got some extra tab or tags like nav and footer and body and header and stuff like this header and footer just can correspond to your websites header and footer maybe the body content header and footer stuff like that you don't actually have to contain them in tags that are header and footer and stuff it's just a good idea so like something like Google as they're crawling your website just makes it really easy for Google understand what's going on and what the information is and means and stuff so um that's really the basics of the website broken down into to what we've got going on if you have any more questions about how I'm doing something here feel free to ask another thing that I just thought I would show you um is like this this div with the sidebar fixed so this line can replace this line let me Zoom it in now that we're not talking about macro stuff so what I can do is comment it out and if you're not familiar to comment stuff it would be like it's a opening sign I don't know what to call that uh exclamation mark dash dash blanking on the word someone's going to make fun of me and then you close off the the comment like that so uh let's uh open this one up just to show you guys so we can AIX that sidebar so um although we don't have enough content but I'll add some content refresh and it looks identical and what we could do just to show is let's go into uh personal templat personal home whoops shouldn't have done that I want to edit it with notepad and then like I'm just going to copy this paste paste paste and then copy paste paste paste P okay so it's a nice long homepage and we can refresh and now as we scroll our little nav bar stays in place so that's pretty cool but what ends up happening is the following so when we're up here everything's kind of rolling over it right because this is a Navar that moves like with the stuff so obviously that's messy you want something that's going to be um totally responsive so that would be an example of a mistake so uh as you're developing it's always a good idea to to check various sizes and and uh try to mimic screens if you are in Chrome one thing that's pretty cool you can press F12 and go into I believe it'll be sources no let's see element maybe this one there we go so this little screen up here you can toggle device mode we'll just make it full screen here and you can mimic what your website will look like on various devices so we can see on whatever this device happens to be let's try an Apple iPad okay that looks pretty cool let's try Blackberry okay that looks pretty cool I'm trying to find show me like a phone man uh iPhone 5 that still looks pretty good uh it's not bad I I suppose but we should be getting that overlay I'm not sure why we're not getting it cuz we still do have that uh problem with the uh div here but let me uh comment that one out because I'm not going to actually use it um and then open this one back up but you can you can come here and look at what it looks like on various devices the other thing that you can do is and then also like obviously this is like your finger so like you can mimic clicking things with your finger and doing this and that and the other thing anyway um so there you go yeah so for some reason now it's actually loading as it as you might expect it's really that's weird uh before it was like really zoomed out not that's just not the way it would be but you can also like use your phone right and and visit it uh with your phone and and make sure everything works also you can test the the speed on your phone and stuff like that so um obviously as long as you're developing locally though like if you try to visit this uh locally that's not going to work but once you actually have like something that you can either host locally on like an actual like IP like your local IP or even your website every time you push an update or something like that you should periodically check it on your phone to make sure things are working as you might expect um I'm going to close out of this now and I guess I'll just move this over so anyways uh that's all for this tutorial if you have questions comments concerns whatever uh feel free to leave them Below in the next tutorial we're going to start actually building out our website um let me zoom out here and um so as you can see we've got a a homepage blog and a contact page so all that stuff is something that we actually want to build here so that's what we're going to be doing as we progress through the tutorials so anyways as always thanks for watching thanks for all the support and subscriptions and until next time