1 1 00:00:00,840 --> 00:00:02,060 Hi and welcome back. 2 2 00:00:02,060 --> 00:00:04,490 In this video we're going to look at creating 3 3 00:00:04,490 --> 00:00:05,803 a landing page. 4 4 00:00:06,690 --> 00:00:09,260 Whenever you go to your application at the moment 5 5 00:00:09,260 --> 00:00:11,430 you're gonna get something that looks like this. 6 6 00:00:11,430 --> 00:00:13,680 Which is not very nice. 7 7 00:00:13,680 --> 00:00:17,690 That's because just typing in your application's address, 8 8 00:00:17,690 --> 00:00:21,223 in this case it's 127.0.0.1:5000, 9 9 00:00:22,360 --> 00:00:24,400 it just gives you something that's not found. 10 10 00:00:24,400 --> 00:00:26,400 Because we don't have an endpoint 11 11 00:00:26,400 --> 00:00:30,363 for the route, or the home, of our application. 12 12 00:00:31,810 --> 00:00:33,020 In this video we'll change that 13 13 00:00:33,020 --> 00:00:34,840 so that when users arrive at our page 14 14 00:00:34,840 --> 00:00:36,330 we can show them a little bit of information 15 15 00:00:36,330 --> 00:00:37,700 about what this is about, 16 16 00:00:37,700 --> 00:00:38,760 what they can do, 17 17 00:00:38,760 --> 00:00:39,870 so that they will sign up 18 18 00:00:39,870 --> 00:00:41,393 and start using the app. 19 19 00:00:42,460 --> 00:00:45,200 Let's begin by going over to our templates 20 20 00:00:45,200 --> 00:00:47,290 and creating a new file, 21 21 00:00:47,290 --> 00:00:50,410 and I'm gonna call this home.html. 22 22 00:00:50,410 --> 00:00:51,970 This is gonna be our homepage. 23 23 00:00:51,970 --> 00:00:56,850 And as usual, we're going to extend from base.html 24 24 00:00:58,600 --> 00:01:01,093 and we're gonna modify the content block. 25 25 00:01:03,560 --> 00:01:07,510 And in here we're gonna add a very simple template. 26 26 00:01:07,510 --> 00:01:10,550 It's gonna be simple because we just wanna show 27 27 00:01:10,550 --> 00:01:14,200 the navigation bar, which is included in base.html 28 28 00:01:14,200 --> 00:01:15,790 and a little bit of information 29 29 00:01:15,790 --> 00:01:18,850 that prompts the user to sign up for our application. 30 30 00:01:18,850 --> 00:01:22,120 For this we're gonna use one of Bootstrap's components 31 31 00:01:22,120 --> 00:01:24,030 called the Jumbotron. 32 32 00:01:24,030 --> 00:01:27,880 So we'll create div and give it a class of Jumbotron. 33 33 00:01:27,880 --> 00:01:29,840 And a Jumbotron is one of these components 34 34 00:01:29,840 --> 00:01:32,650 that is used for like main pieces of content 35 35 00:01:32,650 --> 00:01:33,970 and landing pages. 36 36 00:01:33,970 --> 00:01:36,750 You'll see exactly what it looks like in just a moment. 37 37 00:01:36,750 --> 00:01:39,530 Inside it we're gonna add a header one tag 38 38 00:01:39,530 --> 00:01:42,720 which is the biggest title in our page, 39 39 00:01:42,720 --> 00:01:44,940 and we're gonna give it a class of display-4. 40 40 00:01:44,940 --> 00:01:46,860 And this is just some styling from Bootstrap, 41 41 00:01:46,860 --> 00:01:49,440 you'll see what it looks like in a second. 42 42 00:01:49,440 --> 00:01:51,360 It makes the text a little bit bigger 43 43 00:01:51,360 --> 00:01:53,440 and also a little bit thinner, 44 44 00:01:53,440 --> 00:01:55,143 so it looks nice. 45 45 00:01:55,980 --> 00:01:57,960 Then we're gonna do a paragraph tag 46 46 00:01:57,960 --> 00:02:00,670 and give it the class of Lead. 47 47 00:02:00,670 --> 00:02:04,460 This class makes this paragraph slightly larger 48 48 00:02:04,460 --> 00:02:05,610 than other paragraphs 49 49 00:02:05,610 --> 00:02:07,280 and the the purpose of it is 50 50 00:02:07,280 --> 00:02:09,500 for it to be a leading paragraph 51 51 00:02:09,500 --> 00:02:12,460 in an important section of the page. 52 52 00:02:12,460 --> 00:02:15,040 Here, because we're gonna talk about our application 53 53 00:02:15,040 --> 00:02:17,030 inside this Jumbotron, 54 54 00:02:17,030 --> 00:02:18,780 we want to include a leading paragraph 55 55 00:02:18,780 --> 00:02:20,800 that very briefly tells the user 56 56 00:02:20,800 --> 00:02:22,503 what's important about our app. 57 57 00:02:23,900 --> 00:02:26,340 So we're gonna say we scan online store websites 58 58 00:02:26,340 --> 00:02:28,410 to alert you of price drops in items 59 59 00:02:28,410 --> 00:02:29,463 that interest you. 60 60 00:02:31,120 --> 00:02:34,793 Then we're gonna add a horizontal rule. 61 61 00:02:35,730 --> 00:02:38,913 A horizontal rule is just a line in html. 62 62 00:02:39,950 --> 00:02:44,950 And the class is gonna be my-4 for the margin, 63 63 00:02:45,050 --> 00:02:49,480 and the Y stands for all the classes 64 64 00:02:49,480 --> 00:02:51,670 that could affect the margin top and bottom 65 65 00:02:51,670 --> 00:02:55,383 it's gonna be set to this four space. 66 66 00:02:57,330 --> 00:02:59,880 And then we're gonna have a couple more paragraphs. 67 67 00:03:02,457 --> 00:03:04,540 (typing) 68 68 00:03:09,623 --> 00:03:10,760 This is what we've added, 69 69 00:03:10,760 --> 00:03:13,020 just sign up and get started by adding the URL 70 70 00:03:13,020 --> 00:03:14,980 of an item that you which to track, 71 71 00:03:14,980 --> 00:03:16,200 we'll do the rest. 72 72 00:03:16,200 --> 00:03:19,000 And then a button which is a primary button, 73 73 00:03:19,000 --> 00:03:20,130 which is that blue, 74 74 00:03:20,130 --> 00:03:23,453 and also a btn-lg, which makes it larger, 75 75 00:03:24,490 --> 00:03:27,300 and then we also linked it to our 76 76 00:03:27,300 --> 00:03:29,693 users.register_user endpoint. 77 77 00:03:31,020 --> 00:03:32,890 Alright, let's go back to our site, 78 78 00:03:32,890 --> 00:03:34,053 and refresh. 79 79 00:03:35,950 --> 00:03:40,160 And of course, notice that you still get this not found. 80 80 00:03:40,160 --> 00:03:42,520 We do have to render the template. 81 81 00:03:42,520 --> 00:03:44,870 So let's go over to app.py 82 82 00:03:44,870 --> 00:03:47,590 and down here, we're gonna say @app.route 83 83 00:03:49,030 --> 00:03:51,483 and we'll create a home endpoint here. 84 84 00:03:54,250 --> 00:03:57,133 Remember to import render template as well. 85 85 00:03:59,970 --> 00:04:02,010 There we go, we can save this. 86 86 00:04:02,010 --> 00:04:03,410 Flask will restart your app 87 87 00:04:03,410 --> 00:04:06,280 but if it doesn't do restart it manually. 88 88 00:04:06,280 --> 00:04:08,890 And now we can try again. 89 89 00:04:08,890 --> 00:04:09,880 And there you have it, 90 90 00:04:09,880 --> 00:04:12,470 we've got our website. 91 91 00:04:12,470 --> 00:04:13,630 This is the landing page, 92 92 00:04:13,630 --> 00:04:15,910 it's got the navigation bar, 93 93 00:04:15,910 --> 00:04:18,110 because that comes in base.html 94 94 00:04:18,110 --> 00:04:20,440 and then we've got our Jumbotron. 95 95 00:04:20,440 --> 00:04:21,870 This is this style of text 96 96 00:04:21,870 --> 00:04:24,280 that is slightly larger and thinner, 97 97 00:04:24,280 --> 00:04:26,000 this is the leading paragraph, 98 98 00:04:26,000 --> 00:04:27,450 then we've got our horizontal rule 99 99 00:04:27,450 --> 00:04:29,950 with some margin at the top and the bottom, 100 100 00:04:29,950 --> 00:04:31,257 we have our normal paragraph, 101 101 00:04:31,257 --> 00:04:32,700 and then we have our button, 102 102 00:04:32,700 --> 00:04:33,680 and when you click it 103 103 00:04:33,680 --> 00:04:36,310 it goes over to the register page. 104 104 00:04:36,310 --> 00:04:38,140 When you click on Pricing Service at the top 105 105 00:04:38,140 --> 00:04:41,120 which is our navigation bar brand, 106 106 00:04:41,120 --> 00:04:42,560 as Bootstrap calls it, 107 107 00:04:42,560 --> 00:04:44,400 it goes back to the home page. 108 108 00:04:44,400 --> 00:04:46,020 I hope you've learned something in this video 109 109 00:04:46,020 --> 00:04:47,480 about how easy it can be 110 110 00:04:47,480 --> 00:04:49,880 to add new pages to your application. 111 111 00:04:49,880 --> 00:04:51,870 What you have to do is add a template, 112 112 00:04:51,870 --> 00:04:54,410 and add a route in your application, 113 113 00:04:54,410 --> 00:04:55,260 and there you have it, 114 114 00:04:55,260 --> 00:04:57,910 you can add more pages. 115 115 00:04:57,910 --> 00:04:59,800 If you want those pages to display some data 116 116 00:04:59,800 --> 00:05:02,010 coming from your database or your models, 117 117 00:05:02,010 --> 00:05:03,630 then just pass it in to them, 118 118 00:05:03,630 --> 00:05:06,910 as we've done in our alerts for example. 119 119 00:05:06,910 --> 00:05:09,600 And if you want those pages to send you back some data 120 120 00:05:09,600 --> 00:05:10,990 you'll need to include a form 121 121 00:05:10,990 --> 00:05:14,113 and then interact with that data using resquest.form. 122 122 00:05:14,960 --> 00:05:16,710 But I think with the information you've learned 123 123 00:05:16,710 --> 00:05:18,210 throughout this entire section 124 124 00:05:18,210 --> 00:05:20,760 you're ready to add more stuff to this application 125 125 00:05:20,760 --> 00:05:23,280 or indeed to go and create your own. 126 126 00:05:23,280 --> 00:05:25,580 Do remember, that as you create apps, 127 127 00:05:25,580 --> 00:05:27,720 as you create your projects that interest you, 128 128 00:05:27,720 --> 00:05:30,700 you're gonna encounter things that you don't know about. 129 129 00:05:30,700 --> 00:05:32,620 And that's the time to look for 130 130 00:05:32,620 --> 00:05:34,770 the documentation of libraries. 131 131 00:05:34,770 --> 00:05:35,700 I've spend a lot of time 132 132 00:05:35,700 --> 00:05:37,640 looking through Flask documentation, 133 133 00:05:37,640 --> 00:05:39,250 Ginger2 documentation, 134 134 00:05:39,250 --> 00:05:42,140 Bootstrap, learning JavaScript and CSS, 135 135 00:05:42,140 --> 00:05:44,200 but all of that is part of the job. 136 136 00:05:44,200 --> 00:05:46,000 Don't feel like you have to learn everything 137 137 00:05:46,000 --> 00:05:47,760 before you start making something 138 138 00:05:47,760 --> 00:05:49,130 that interests you. 139 139 00:05:49,130 --> 00:05:50,320 Start doing it, 140 140 00:05:50,320 --> 00:05:53,113 and as you go you'll learn much more. 141 141 00:05:54,260 --> 00:05:55,800 Thanks for joining me in this video, 142 142 00:05:55,800 --> 00:05:57,130 again I hope you learned something. 143 143 00:05:57,130 --> 00:05:58,633 I'll see you on the next one.