WEBVTT 0 00:00.450 --> 00:07.350 All right guys. In the last few modules we've covered a lot of stuff and it's really really important 1 00:07.350 --> 00:07.950 stuff. 2 00:08.220 --> 00:14.100 So it's time to challenge yourself and see if you've understood the concepts that were presented in 3 00:14.100 --> 00:15.640 the last few modules. 4 00:15.690 --> 00:24.840 So this module is the EJS challenge although it also relies on your knowledge and skills from the Express 5 00:24.840 --> 00:28.920 module as well as everything that we've learned about Node. 6 00:28.980 --> 00:34.980 Now this challenge is slightly different from previous challenges because we're now at a point where 7 00:34.980 --> 00:38.740 you can create fully fledged Node.js backed websites. 8 00:38.850 --> 00:42.010 We're going to take you to the next level. 9 00:42.090 --> 00:50.310 So by the end of this module we would have made a beautiful personal blog or personal diary website 10 00:50.610 --> 00:52.320 that would look like this. 11 00:52.320 --> 00:59.970 So it's very minimalistic and it's got a header up here with a nav bar and your brand 12 00:59.970 --> 01:02.290 and then at the bottom it's got a sticky footer 13 01:02.520 --> 01:04.700 and you can put in your footer text. 14 01:04.800 --> 01:06.810 And here we've only got three pages: 15 01:06.840 --> 01:14.730 the home page, the about us page and also a contact us page. And all of this is going to be generated using 16 01:14.790 --> 01:16.170 EJS partials, 17 01:16.200 --> 01:19.820 so using those layouts that we learned about in the last module. 18 01:20.130 --> 01:26.220 Now when you head over to the home page, this is going to have all of your blog posts on here listed 19 01:26.250 --> 01:33.630 in chronological order but the actual blog content will be truncated to only 100 characters. 20 01:33.630 --> 01:40.860 Now when you click on read more, it will take you to an individual page of each of your blog posts and 21 01:40.860 --> 01:45.330 you can read them independently on a single page. 22 01:45.330 --> 01:50.670 Now there's also a hidden page which will allow you to compose your diary. 23 01:50.670 --> 01:53.030 So if we create a new post here 24 01:53.220 --> 01:59.310 and let's just copy and paste some Loren Ipsum into the post and hit publish. 25 01:59.430 --> 02:04.760 Then you can see it gets put right on the home page and a brand new page has been created just for that 26 02:04.770 --> 02:08.470 new post. And now right in the URL 27 02:08.490 --> 02:14.870 we can change this to something like /posts/another-post 28 02:14.970 --> 02:21.960 so the title of our new post that we created. And we hit enter and we get taken to the page where that blog 29 02:21.960 --> 02:28.860 posts exists. So you can see by using EJS we're able to create dynamically single pages, 30 02:28.860 --> 02:32.920 new web pages for each and every blog post that we're making. 31 02:33.240 --> 02:39.180 And through the challenge you're going to realize just how easy it is to use templating to achieve this. 32 02:39.180 --> 02:44.750 Now just before we get started, I want to show you what to expect in terms of the format of the challenges 33 02:44.760 --> 02:49.650 because there is a pretty dramatic step up from the previous ones that you've attempted. 34 02:49.650 --> 02:54.450 Now firstly you should complete the challenges in order because they are the steps that are required 35 02:54.450 --> 02:56.350 to create the final product. 36 02:56.610 --> 03:02.220 And when you view the challenge video, I'm first going to introduce to you what it is that I want you 37 03:02.220 --> 03:04.470 to achieve by the end of the challenge, 38 03:04.500 --> 03:08.300 so what is the goal of that particular challenge. 39 03:08.430 --> 03:12.060 And then you can pause the video and try to complete the challenge. 40 03:12.300 --> 03:18.960 But if you get stuck at any point and you really can't figure out how to proceed, instead of rewinding 41 03:18.960 --> 03:25.560 back and watching previous modules videos, I want you to go ahead and press play on the video again which 42 03:25.560 --> 03:27.430 will take you to a hint. 43 03:27.690 --> 03:32.910 And this is where I'm going to give you a couple of hints that should help you complete the challenge. 44 03:33.300 --> 03:38.150 And once you've gone through a hint, you should pause the video and head back to the challenge and 45 03:38.160 --> 03:39.310 give it another go. 46 03:39.510 --> 03:44.460 Now if that hint wasn't enough there might be a second hint or a third hint. 47 03:44.580 --> 03:50.250 So after each hint there is going to be 10 seconds for you to pause the video. So to complete the challenge 48 03:50.610 --> 03:56.910 I want you to use as few hints as you possibly can but the ultimate goal is to complete the challenge 49 03:56.910 --> 03:57.780 by yourself. 50 03:57.780 --> 04:04.440 So if you find that you need more hints then just press play and watch the next hint and then pause 51 04:04.500 --> 04:07.680 and try and see if that helps you with the challenge. 52 04:07.680 --> 04:12.660 Now at some point you're going to see a red screen on the video and it's going to tell you that if you 53 04:12.660 --> 04:13.820 proceed any further 54 04:13.830 --> 04:15.980 this is basically the spoiler right? 55 04:16.050 --> 04:20.440 This is where I'm going to reveal to you the answer to completing that challenge. 56 04:20.490 --> 04:26.070 So if you don't want to see the answer before you've given a proper go at the challenge, then I recommend 57 04:26.070 --> 04:31.780 you really pause and give the challenge at least an hour to try and see if you can figure it out. 58 04:31.950 --> 04:38.460 Now in the resources of each lesson, you'll find a download link to the solution code. 59 04:38.460 --> 04:44.550 So if after completing the challenge watching through all the hints and answers and your code still doesn't 60 04:44.550 --> 04:47.370 seem to work the same way that you see on screen, 61 04:47.490 --> 04:53.190 then you should download the completed code for that lesson and compare against yours to see whether 62 04:53.250 --> 04:56.310 if you've made any typos or if you've created any bugs. 63 04:56.310 --> 05:03.900 Now the point of these challenges is to test yourself and to break down a large problems such as creating 64 05:04.230 --> 05:10.890 this web app into small chunks that you can tackle one by one. And it's really really important that 65 05:10.890 --> 05:16.530 you promise me that you'll give it a real good go because this really is the way that you're going to 66 05:16.530 --> 05:17.070 learn. 67 05:17.100 --> 05:22.030 This is the part that's really going to take you from a student to an actual developer. 68 05:22.200 --> 05:28.830 And I've put so much thought and heart and soul into creating these challenges so that they can benefit 69 05:28.830 --> 05:35.580 you. So please please please give it a real good go before you go through to the next hint or to the 70 05:35.580 --> 05:36.690 answer. 71 05:36.870 --> 05:42.500 Now if you got through the challenge without looking at a single hint then you get a gold star. 72 05:42.660 --> 05:48.000 Whereas if you had to look at one hint, then you get a silver and if you had to look at two hints then 73 05:48.000 --> 05:49.500 you get a bronze. 74 05:49.500 --> 05:55.590 But we've done a lot of research on this and we've tested this method on real students through many 75 05:55.590 --> 06:02.130 many iterations and in person trials and this works fantastic as long as you have the perseverance 76 06:02.550 --> 06:04.110 and the will to give it a go. 77 06:04.230 --> 06:09.090 For the students who've gone through it, you'll realize just how fun and experience this is and how you 78 06:09.090 --> 06:12.360 can really see your skill level grow through these challenges. 79 06:12.480 --> 06:17.150 Now without further ado, if you head over to the next lesson we're going to get started with challenge 80 06:17.150 --> 06:17.860 1.