1 00:00:00,650 --> 00:00:03,070 No website or app is complete without some styling. 2 00:00:03,070 --> 00:00:05,240 At the very least, you're gonna need a logo. 3 00:00:05,240 --> 00:00:08,110 But, let's not worry about images just yet. 4 00:00:08,110 --> 00:00:11,080 Flask makes static files just as easy as templates. 5 00:00:11,080 --> 00:00:13,090 Just add a directory and get busy. 6 00:00:13,090 --> 00:00:17,350 Well, so first we have to add a directory, like I mentioned. 7 00:00:17,350 --> 00:00:19,390 Templates live in this Templates directory. 8 00:00:19,390 --> 00:00:20,900 This really cool directory. 9 00:00:22,000 --> 00:00:26,640 And static files actually have their own directory as well, called static. 10 00:00:28,320 --> 00:00:31,600 Anything that we put inside here we can reference as slash static, 11 00:00:31,600 --> 00:00:33,150 which is pretty cool. 12 00:00:33,150 --> 00:00:40,240 So, we're gonna add a new file in there, which we will call styles.css. 13 00:00:40,240 --> 00:00:43,910 I'm a big fan of making something look kinda horrible and then refining it so 14 00:00:43,910 --> 00:00:44,990 it looks nicer, so 15 00:00:44,990 --> 00:00:48,610 I don't really want this style sheet to be awesome right off the bat. 16 00:00:48,610 --> 00:00:50,340 So I'm gonna put in some, some horrible stuff here. 17 00:00:50,340 --> 00:00:51,230 Let's do body. 18 00:00:52,460 --> 00:01:00,995 Background is gonna be beige, and color will be medium orchid. 19 00:01:00,995 --> 00:01:06,401 I also love all the crazy color names that CSS has. 20 00:01:06,401 --> 00:01:11,000 So we've got beige and we've got medium orchid, which is just horrid. 21 00:01:11,000 --> 00:01:12,870 So now we need to add this to our HTML. 22 00:01:12,870 --> 00:01:15,320 So we're gonna do that inside layout.html, 23 00:01:15,320 --> 00:01:17,320 because we want this applied to every page. 24 00:01:17,320 --> 00:01:19,780 So we're gonna add this to here below the title. 25 00:01:19,780 --> 00:01:23,900 We're gonna do link rel equals stylesheet. 26 00:01:23,900 --> 00:01:26,210 And then href is gonna start with /static, 27 00:01:26,210 --> 00:01:30,170 which is just a nice little thing that Flask gives us to where we can 28 00:01:30,170 --> 00:01:34,060 always refer to our static directory as slash static during development. 29 00:01:34,060 --> 00:01:39,330 And then we call the file styles.css, so that's what we're gonna reference here. 30 00:01:39,330 --> 00:01:40,500 Okay. 31 00:01:40,500 --> 00:01:43,671 Let's refresh and see if it works. 32 00:01:43,671 --> 00:01:48,008 It does! It's a wonderfully, amazing design site. 33 00:01:48,008 --> 00:01:49,877 Okay actually that's, that's kind of hideous. 34 00:01:49,877 --> 00:01:52,678 Let's, let's make it black on the beige. 35 00:01:52,678 --> 00:01:57,418 So our color, we can actually just take out that color altogether. 36 00:01:57,418 --> 00:01:58,290 And we just refresh. 37 00:01:58,290 --> 00:01:59,320 Yeah, there we go. 38 00:01:59,320 --> 00:02:01,650 Okay, that's a lot better. 39 00:02:01,650 --> 00:02:03,580 I can, I can live with that one. 40 00:02:03,580 --> 00:02:06,488 Let's add a little bit of JavaScript to the site, shall we? 41 00:02:06,488 --> 00:02:09,610 So File > New File. 42 00:02:09,610 --> 00:02:15,002 We're gonna call this scripts.js, cuz I'm very clever in naming. 43 00:02:15,002 --> 00:02:20,040 And I just want to have this do like, an alert box, nothing nothing crazy. 44 00:02:20,040 --> 00:02:25,461 So we're gonna do alert, Howdy! 45 00:02:25,461 --> 00:02:28,082 Cuz that's a cool thing to do. 46 00:02:28,082 --> 00:02:32,120 And then we're gonna go add that into our layout file. 47 00:02:32,120 --> 00:02:41,510 So down here before the end of the body, script source equals static scripts.js. 48 00:02:41,510 --> 00:02:42,740 And, we refresh. 49 00:02:44,690 --> 00:02:46,310 And hey, we've got a Howdy! 50 00:02:47,550 --> 00:02:50,037 So, that's pretty cool. 51 00:02:50,037 --> 00:02:50,556 But, you know what? I 52 00:02:50,556 --> 00:02:52,650 don't want this to happen on every single page. 53 00:02:52,650 --> 00:02:55,430 I want this to just happen on the home page. 54 00:02:55,430 --> 00:02:59,500 Because it can be really annoying if every time I want to add, it just, 55 00:02:59,500 --> 00:03:00,170 that's horrible. 56 00:03:00,170 --> 00:03:02,950 So, let's go add a new thing. 57 00:03:02,950 --> 00:03:07,200 So, what we're gonna do here is, let's do this block scripts. 58 00:03:11,660 --> 00:03:13,850 All right? And then we're going to cut this part out. 59 00:03:15,900 --> 00:03:18,030 So now we have this new block, scripts block. 60 00:03:18,030 --> 00:03:27,312 And on our index page, we're gonna add in our scripts block. 61 00:03:27,312 --> 00:03:31,610 All right. 62 00:03:31,610 --> 00:03:36,370 And then if we refresh this, on the ad page we shouldn't get anything. 63 00:03:37,860 --> 00:03:42,835 But if we come over here to the home page, it says Howdy! 64 00:03:42,835 --> 00:03:45,480 Cool, so we got exactly what we wanted there. 65 00:03:46,760 --> 00:03:48,520 Well at least I got what I wanted. 66 00:03:48,520 --> 00:03:51,300 Maybe you want it to be on every page, I don't know. 67 00:03:51,300 --> 00:03:54,120 But, this highlights a important thing of how easy it 68 00:03:54,120 --> 00:03:59,590 is to use blocks to control what pages certain styles or scripts show up on. 69 00:03:59,590 --> 00:04:01,020 So feel free to experiment with this. 70 00:04:01,020 --> 00:04:03,680 Add some more cool stuff in if you want to. 71 00:04:03,680 --> 00:04:07,220 With those design and JavaScript skills, I think I'm teaching the wrong subject. 72 00:04:07,220 --> 00:04:09,140 Okay, maybe not. 73 00:04:09,140 --> 00:04:11,920 In our next stage, we're going to use all the things we've learned to build 74 00:04:11,920 --> 00:04:13,730 a fully functional single page web app.