1 00:00:01,080 --> 00:00:01,913 Instructor: All right. 2 00:00:01,913 --> 00:00:04,470 It is time to put everything we've learned so far together 3 00:00:04,470 --> 00:00:07,290 and create a project. 4 00:00:07,290 --> 00:00:09,990 In this project, we're going to create a website 5 00:00:09,990 --> 00:00:13,920 for your next party to help you invite all your guests 6 00:00:13,920 --> 00:00:16,860 because paper invites and WhatsApp invites 7 00:00:16,860 --> 00:00:20,490 are only for people who can't create websites. 8 00:00:20,490 --> 00:00:21,990 Am I right? 9 00:00:21,990 --> 00:00:23,760 We can do it better. 10 00:00:23,760 --> 00:00:25,740 This is what we're aiming for. 11 00:00:25,740 --> 00:00:29,310 We're aiming for a retro nineties look website 12 00:00:29,310 --> 00:00:31,800 because we haven't learned about styling websites yet 13 00:00:31,800 --> 00:00:33,360 which is yet to come, 14 00:00:33,360 --> 00:00:35,100 but this is already pretty nice. 15 00:00:35,100 --> 00:00:37,920 We're going to create a website to tell people 16 00:00:37,920 --> 00:00:41,160 that it's our birthday, which day it is, 17 00:00:41,160 --> 00:00:43,710 and we're going to add some images. 18 00:00:43,710 --> 00:00:46,980 We're going to tell people what to bring using lists 19 00:00:46,980 --> 00:00:49,050 and also we're gonna add an anchor tag 20 00:00:49,050 --> 00:00:51,540 to show people where they need to go. 21 00:00:51,540 --> 00:00:53,670 Hopefully, we're gonna combine a lot of the things 22 00:00:53,670 --> 00:00:56,280 that you've learned in previous lessons. 23 00:00:56,280 --> 00:00:57,960 And once you're ready, 24 00:00:57,960 --> 00:01:01,350 head over to the course resources for this lesson. 25 00:01:01,350 --> 00:01:05,370 Download and extract the zip file in order to get started. 26 00:01:05,370 --> 00:01:08,040 When you take a look at the index dot html, 27 00:01:08,040 --> 00:01:11,970 you can see I've provided an example image URL 28 00:01:11,970 --> 00:01:14,100 and an example Google Maps link. 29 00:01:14,100 --> 00:01:16,350 So if you take a look inside the goal, 30 00:01:16,350 --> 00:01:19,860 you can see what the example image will take you to. 31 00:01:19,860 --> 00:01:23,160 And if you're ready for an Easter egg slash mini surprise 32 00:01:23,160 --> 00:01:25,200 you can head over to the Google Map link 33 00:01:25,200 --> 00:01:28,650 and see where it's located as well. 34 00:01:28,650 --> 00:01:30,660 So this is a project, 35 00:01:30,660 --> 00:01:32,640 and it's not a coding exercise. 36 00:01:32,640 --> 00:01:35,730 It's not something that I'm testing you on. 37 00:01:35,730 --> 00:01:36,750 Everything I'm saying, 38 00:01:36,750 --> 00:01:38,430 it's just a guideline. 39 00:01:38,430 --> 00:01:42,960 I want you to at minimum have an image in there, 40 00:01:42,960 --> 00:01:45,420 have a list in there, 41 00:01:45,420 --> 00:01:48,780 and also have an anchor tag in there. 42 00:01:48,780 --> 00:01:51,030 Everything else is totally up to you. 43 00:01:51,030 --> 00:01:53,850 You can mess around with it as much as you like 44 00:01:53,850 --> 00:01:55,080 or change as much as you like 45 00:01:55,080 --> 00:01:56,460 or keep it as simple as you like. 46 00:01:56,460 --> 00:01:58,260 It doesn't really matter. 47 00:01:58,260 --> 00:02:01,390 Pause the video and give this project a go 48 00:02:02,460 --> 00:02:05,613 and happy birthday if it is your birthday today. 49 00:02:09,223 --> 00:02:13,650 All right, so I wanna walk through one possible solution. 50 00:02:13,650 --> 00:02:16,470 I just wanna say this is just one possibility. 51 00:02:16,470 --> 00:02:18,720 You can change it as much as you like. 52 00:02:18,720 --> 00:02:21,120 There is no right or wrong in the project. 53 00:02:21,120 --> 00:02:25,290 It's all about practice and also your own personal style. 54 00:02:25,290 --> 00:02:29,430 So in my case, I created an h1 for the top level heading, 55 00:02:29,430 --> 00:02:30,630 which is the most important thing, 56 00:02:30,630 --> 00:02:32,070 it's my birthday, 57 00:02:32,070 --> 00:02:33,870 and then I've got some h2s 58 00:02:33,870 --> 00:02:35,463 and some h3s, 59 00:02:36,510 --> 00:02:40,080 so for what to bring and where you need to go. 60 00:02:40,080 --> 00:02:43,950 In the image tag, I've added a source 61 00:02:43,950 --> 00:02:47,370 to that image I provided in the starting code. 62 00:02:47,370 --> 00:02:50,790 And also I provided an alternative text 63 00:02:50,790 --> 00:02:53,883 to show people what this image is all about. 64 00:02:54,900 --> 00:02:57,120 If you manage to get the image source 65 00:02:57,120 --> 00:02:58,680 and the alternative text 66 00:02:58,680 --> 00:03:01,440 and your image shows up, then congratulations. 67 00:03:01,440 --> 00:03:02,940 You did a great job. 68 00:03:02,940 --> 00:03:06,540 Now the next part I've got is a unordered list 69 00:03:06,540 --> 00:03:08,430 to tell people what they should bring 70 00:03:08,430 --> 00:03:12,870 with each item in its own list item element. 71 00:03:12,870 --> 00:03:15,780 And finally, I created an anchor tag 72 00:03:15,780 --> 00:03:17,970 to tell people where they need to go. 73 00:03:17,970 --> 00:03:20,700 So I've added an href attribute 74 00:03:20,700 --> 00:03:24,900 and I used the link that I supplied in the starting code 75 00:03:24,900 --> 00:03:29,700 and I told people that the link text is a Google Map link, 76 00:03:29,700 --> 00:03:31,680 which hopefully will take them 77 00:03:31,680 --> 00:03:34,290 to where they need to go, 78 00:03:34,290 --> 00:03:35,940 which is somewhere in Tokyo 79 00:03:35,940 --> 00:03:38,253 where all the pigeon people meet apparently. 80 00:03:39,510 --> 00:03:41,070 So if you found that Easter egg, 81 00:03:41,070 --> 00:03:43,200 then congratulations. 82 00:03:43,200 --> 00:03:45,570 But if you are really proud of what you managed to do 83 00:03:45,570 --> 00:03:46,590 for your project, 84 00:03:46,590 --> 00:03:48,720 then be sure to take a screenshot of it 85 00:03:48,720 --> 00:03:51,780 and post it in the Q and A to share it with the rest of us. 86 00:03:51,780 --> 00:03:54,450 I would love to see what you came up with, 87 00:03:54,450 --> 00:03:56,730 but that's all from me for this section. 88 00:03:56,730 --> 00:04:00,450 I hope you enjoyed learning more about HTML elements, 89 00:04:00,450 --> 00:04:01,550 and I'll see you soon.