1 1 00:00:00,120 --> 00:00:01,940 Hi, guys, and welcome back. 2 2 00:00:01,940 --> 00:00:04,510 This is our first project video. 3 3 00:00:04,510 --> 00:00:06,790 We've been learning about the theory of HTML 4 4 00:00:06,790 --> 00:00:08,870 and explaining the different concepts, 5 5 00:00:08,870 --> 00:00:11,490 but there is no better way to learn how to code 6 6 00:00:11,490 --> 00:00:13,980 than by actually writing code. 7 7 00:00:13,980 --> 00:00:17,540 For our first project, we'll be building a simple HTML page 8 8 00:00:17,540 --> 00:00:20,320 that just has a bit of text and a couple images, 9 9 00:00:20,320 --> 00:00:22,620 and we're going to link it with a CSS file 10 10 00:00:22,620 --> 00:00:24,850 in the next section, as well. 11 11 00:00:24,850 --> 00:00:27,180 I would recommend for each project, 12 12 00:00:27,180 --> 00:00:30,540 that you open a new folder in your editor 13 13 00:00:30,540 --> 00:00:33,060 and that you write the code alongside me. 14 14 00:00:33,060 --> 00:00:34,930 That way, by the end of the section, 15 15 00:00:34,930 --> 00:00:37,550 you're gonna have the project written in your computer, 16 16 00:00:37,550 --> 00:00:40,350 and you can then go back to it and check the code again 17 17 00:00:40,350 --> 00:00:42,553 and maybe get some more learnings from it. 18 18 00:00:43,410 --> 00:00:45,760 All right, let's get started with this lecture. 19 19 00:00:47,200 --> 00:00:48,560 The first thing we're going to do 20 20 00:00:48,560 --> 00:00:52,370 whenever we start a new HTML project is, of course, 21 21 00:00:52,370 --> 00:00:53,880 we're gonna create a file. 22 22 00:00:53,880 --> 00:00:56,070 I'm going to call mine index.html. 23 23 00:00:56,070 --> 00:00:59,300 That's just the normal name for the main page 24 24 00:00:59,300 --> 00:01:02,860 in any HTML project, index.html. 25 25 00:01:02,860 --> 00:01:06,210 In here, we're going to put a few different parts 26 26 00:01:06,210 --> 00:01:08,560 of the HTML code, some that we've already seen 27 27 00:01:08,560 --> 00:01:10,440 and some that we're gonna explain in more detail 28 28 00:01:10,440 --> 00:01:11,470 in the coming lectures. 29 29 00:01:11,470 --> 00:01:13,940 The most important one is the doc type. 30 30 00:01:13,940 --> 00:01:16,630 So we're gonna put less than or (indistinct) our clip, 31 31 00:01:16,630 --> 00:01:20,810 exclamation mark, doc type, and then HTML. 32 32 00:01:20,810 --> 00:01:24,220 This tells the browser that this is an HTML5 document. 33 33 00:01:24,220 --> 00:01:25,890 So when the browser reads this document, 34 34 00:01:25,890 --> 00:01:27,290 it knows what to do with it. 35 35 00:01:28,160 --> 00:01:31,960 Then, all HTML documents have an HTML element, 36 36 00:01:31,960 --> 00:01:34,030 an inside it, as we've seen already, 37 37 00:01:34,030 --> 00:01:38,313 we have the head and we have the body. 38 38 00:01:39,870 --> 00:01:42,490 In this lecture, we're only going to focus on the body 39 39 00:01:42,490 --> 00:01:44,410 because we're going to explain the head 40 40 00:01:44,410 --> 00:01:45,980 towards the end of this section, 41 41 00:01:45,980 --> 00:01:48,860 and after that, we will then add more content 42 42 00:01:48,860 --> 00:01:50,083 to this document. 43 43 00:01:51,520 --> 00:01:52,530 So in the body for now, 44 44 00:01:52,530 --> 00:01:54,100 we're going to put a couple of elements. 45 45 00:01:54,100 --> 00:01:57,300 I'm gonna make a title, which is an <h1> element, 46 46 00:01:57,300 --> 00:02:02,300 and here I'm gonna write I'm learning HTML and CSS. 47 47 00:02:02,440 --> 00:02:03,920 You can put whatever you want, of course, 48 48 00:02:03,920 --> 00:02:07,757 but this is the project that is going to start off our HTML 49 49 00:02:07,757 --> 00:02:10,363 and CSS journey, so this feels fitting. 50 50 00:02:11,230 --> 00:02:14,590 Then I'm gonna write a bit of text about me as a person, 51 51 00:02:14,590 --> 00:02:16,600 and you should write about yourself. 52 52 00:02:16,600 --> 00:02:19,550 Later on when we put this project in your portfolio, 53 53 00:02:19,550 --> 00:02:21,690 then you'll be able to showcase 54 54 00:02:21,690 --> 00:02:24,440 that this is how you started learning HTML and CSS, 55 55 00:02:24,440 --> 00:02:25,910 and, of course, towards the end of the course, 56 56 00:02:25,910 --> 00:02:27,510 you're gonna have a bunch more projects 57 57 00:02:27,510 --> 00:02:29,520 in your portfolio, as well. 58 58 00:02:29,520 --> 00:02:32,670 So I'm going to put hello, my name is Rolf Smith. 59 59 00:02:32,670 --> 00:02:34,780 Obviously, that's not my name, 60 60 00:02:34,780 --> 00:02:38,400 but you can also split this into multiple lines like that. 61 61 00:02:38,400 --> 00:02:39,720 I'm learning about web development, 62 62 00:02:39,720 --> 00:02:42,320 and I'm starting with HTML and CSS. 63 63 00:02:42,320 --> 00:02:44,650 Then I'm going to add a second paragraph. 64 64 00:02:44,650 --> 00:02:46,470 Remember to close the first one. 65 65 00:02:46,470 --> 00:02:48,480 And here, I'm gonna type with HTML and CSS, 66 66 00:02:48,480 --> 00:02:50,130 I can make all sorts of websites. 67 67 00:02:50,130 --> 00:02:53,370 HTML and CSS are the most important languages to learn. 68 68 00:02:53,370 --> 00:02:55,130 They probably are for web development, 69 69 00:02:55,130 --> 00:02:58,053 even more so than Python and JavaScript. 70 70 00:02:58,910 --> 00:03:01,540 Then what I've done is I have opened my browser, 71 71 00:03:01,540 --> 00:03:05,350 and I've put in here the path to the file that I've created. 72 72 00:03:05,350 --> 00:03:07,370 So if you're using Visual Studio code like I am, 73 73 00:03:07,370 --> 00:03:10,090 you can just right click here and copy path, 74 74 00:03:10,090 --> 00:03:13,360 or if you bring back the folder here, 75 75 00:03:13,360 --> 00:03:17,360 you can right-click on Index and click on Copy Path. 76 76 00:03:17,360 --> 00:03:18,580 When you copy the path, 77 77 00:03:18,580 --> 00:03:20,170 you can then paste it into your browser, 78 78 00:03:20,170 --> 00:03:22,270 and that is going to open the HTML file, 79 79 00:03:22,270 --> 00:03:25,120 and your browser is going to be able to run it. 80 80 00:03:25,120 --> 00:03:27,140 You can see that this is what it looks like at the moment. 81 81 00:03:27,140 --> 00:03:29,410 Towards the end of the next section 82 82 00:03:29,410 --> 00:03:33,510 when we also include CSS, this is going to look much better. 83 83 00:03:33,510 --> 00:03:36,570 So don't worry if things are not looking amazing just now. 84 84 00:03:36,570 --> 00:03:38,550 Remember, this is the very first project 85 85 00:03:38,550 --> 00:03:41,720 that we're building, and we still have a lot to learn. 86 86 00:03:41,720 --> 00:03:43,690 That's everything from me for this video. 87 87 00:03:43,690 --> 00:03:46,010 Again, we're going to add a lot more content 88 88 00:03:46,010 --> 00:03:47,800 to this project as we along, 89 89 00:03:47,800 --> 00:03:50,250 and it's going to serve as a great springboard 90 90 00:03:50,250 --> 00:03:53,090 for us to learn more about HTML and CSS. 91 91 00:03:53,090 --> 00:03:54,370 Thank you for joining me in this one, 92 92 00:03:54,370 --> 00:03:56,020 and I'll see you in the next one.