1 00:00:01,140 --> 00:00:04,320 So this video is going to be a solution video. 2 00:00:04,350 --> 00:00:08,640 So like all solution videos you do not have to watch them if you just want the code. 3 00:00:08,670 --> 00:00:09,580 It's in the description. 4 00:00:09,600 --> 00:00:10,840 You can just view the file. 5 00:00:10,890 --> 00:00:14,030 But I'm going to go through the actual process of writing it here. 6 00:00:14,700 --> 00:00:19,950 So the first thing I want to do is make a new file and save it and I'm going to call this just solution 7 00:00:20,020 --> 00:00:22,140 that HTML. 8 00:00:22,950 --> 00:00:27,450 Every time we make an HMO document we create our boiler plate. 9 00:00:27,650 --> 00:00:29,210 Each Tim I'll hit tab. 10 00:00:29,370 --> 00:00:31,860 Or you can type it all from scratch. 11 00:00:32,400 --> 00:00:34,900 Let's start with our title let's fill that in. 12 00:00:34,950 --> 00:00:37,490 Things I've Learned. 13 00:00:38,400 --> 00:00:39,440 All right. 14 00:00:39,450 --> 00:00:42,670 So next up we're going to actually fill out the body. 15 00:00:42,870 --> 00:00:43,630 I'd like to start. 16 00:00:43,650 --> 00:00:48,390 Let's identify the big elements of the headings on the page. 17 00:00:48,390 --> 00:00:50,190 So we're going to have an H1 18 00:00:53,280 --> 00:00:57,290 and that is going to say things I've learned. 19 00:00:57,340 --> 00:01:02,850 Remember H-1 is for the largest thing on the page the largest heading on the page. 20 00:01:02,850 --> 00:01:06,670 So then we also had an H two 21 00:01:09,900 --> 00:01:18,870 and this one is Internet basics and then we have another age to just for the record you might see me 22 00:01:18,870 --> 00:01:21,780 duplicating things very quickly. 23 00:01:21,780 --> 00:01:27,630 I'm not copying and pasting it's actually all done with a short cut and sublime on a Mac it is command 24 00:01:27,720 --> 00:01:28,550 shift. 25 00:01:28,540 --> 00:01:32,180 D OK. 26 00:01:32,700 --> 00:01:35,650 Another h to this one for each out. 27 00:01:36,060 --> 00:01:38,440 So let's take a look at how this is going so far. 28 00:01:38,580 --> 00:01:40,840 Let's open it up. 29 00:01:40,860 --> 00:01:41,280 All right. 30 00:01:41,310 --> 00:01:42,440 So far so good. 31 00:01:42,690 --> 00:01:44,830 Now we need to go in and fill out the list. 32 00:01:44,850 --> 00:01:50,830 So let's start with this one so that it's going to be an ordered list. 33 00:01:50,880 --> 00:01:52,730 We're going to have three list items. 34 00:01:52,740 --> 00:01:59,970 First one is HTP requests and then we're going to have another one IP address 35 00:02:03,030 --> 00:02:08,440 and another one server's hopes. 36 00:02:08,460 --> 00:02:09,970 I put that in the wrong place. 37 00:02:10,020 --> 00:02:13,600 You want to put that below Internet basics. 38 00:02:14,190 --> 00:02:15,490 Let's refresh the page. 39 00:02:15,920 --> 00:02:16,470 OK. 40 00:02:16,620 --> 00:02:17,500 Looks good. 41 00:02:17,730 --> 00:02:22,200 So now we're on to the tricky part which is this nasty nested list. 42 00:02:22,950 --> 00:02:29,330 So the outer list this whole thing is in an ordered list. 43 00:02:30,540 --> 00:02:34,110 And we have a few allies so we've got stands for. 44 00:02:34,110 --> 00:02:38,640 And then we have hypertext markup which is a strong tag 45 00:02:41,130 --> 00:02:47,080 hyper text markup language. 46 00:02:47,250 --> 00:02:47,840 OK. 47 00:02:48,120 --> 00:02:54,900 If another ally which has lots of tags and I'm actually going to finish out just double check it this 48 00:02:54,900 --> 00:02:55,440 works. 49 00:02:55,440 --> 00:02:56,630 Before we move on. 50 00:02:57,060 --> 00:02:58,930 OK that looks good. 51 00:02:58,980 --> 00:03:04,690 So now we're going to work on the nested list inside of the first unordered list. 52 00:03:04,680 --> 00:03:06,170 We have another unordered list. 53 00:03:06,510 --> 00:03:10,920 So just do that right here. 54 00:03:11,040 --> 00:03:13,680 It helps to be very particular with your indentation here. 55 00:03:13,680 --> 00:03:19,770 It won't actually impact anything but it will help us just to be able to view our code and know what 56 00:03:19,830 --> 00:03:21,400 is nested inside of what. 57 00:03:21,660 --> 00:03:27,730 So we have a UL and then we have one two three four five allies. 58 00:03:28,650 --> 00:03:30,730 So I'm just going to go ahead and write those. 59 00:03:30,960 --> 00:03:32,420 One two three four or five. 60 00:03:32,430 --> 00:03:33,780 You can copy and paste them. 61 00:03:33,780 --> 00:03:35,580 Type them manually. 62 00:03:36,090 --> 00:03:38,310 First one is boilerplate. 63 00:03:39,450 --> 00:03:48,690 And I'm going to finish out the list first so headings paragraph and then we have 64 00:03:51,270 --> 00:04:01,170 E-M tag with the word E-M inside of it and a strong tag with the word strong instead of it just to hammer 65 00:04:01,170 --> 00:04:02,460 this home one more time. 66 00:04:02,550 --> 00:04:04,380 You probably should do this in quite a few times. 67 00:04:04,440 --> 00:04:06,770 You can type the name of a tag and hit tab. 68 00:04:07,110 --> 00:04:08,450 Very useful. 69 00:04:09,060 --> 00:04:10,820 So let's double check this. 70 00:04:11,150 --> 00:04:11,880 OK. 71 00:04:12,060 --> 00:04:13,770 We're getting close. 72 00:04:13,770 --> 00:04:16,280 Now we just need this final nesting. 73 00:04:16,410 --> 00:04:21,250 Well two things actually of an ordered list and another ordered list. 74 00:04:21,510 --> 00:04:24,040 So that goes inside of boiler plate. 75 00:04:24,210 --> 00:04:25,410 So we find that ally 76 00:04:29,310 --> 00:04:36,450 and now we're going to have an ordered list and we have one two three four allies. 77 00:04:37,020 --> 00:04:41,220 We have one that says dock type. 78 00:04:42,510 --> 00:04:49,490 We have another one that says each time I'll have another one that says head and one that says body 79 00:04:51,180 --> 00:04:51,780 OK. 80 00:04:51,780 --> 00:04:52,970 So we're very close now. 81 00:04:53,070 --> 00:04:56,910 The last thing we need is the title that goes instead of head. 82 00:04:56,930 --> 00:04:58,100 You'll notice there's a number. 83 00:04:58,140 --> 00:04:59,650 So it's an ordered bust. 84 00:05:00,030 --> 00:05:01,110 So if we open up head 85 00:05:04,350 --> 00:05:08,590 we're going to type ordered list again lie again. 86 00:05:09,070 --> 00:05:13,210 Title. 87 00:05:13,260 --> 00:05:14,220 All right. 88 00:05:14,220 --> 00:05:15,470 And that's all we need to do. 89 00:05:15,480 --> 00:05:20,130 So let's just compare the side by side check if anything is different. 90 00:05:20,250 --> 00:05:21,300 Looks good to me. 91 00:05:21,300 --> 00:05:27,340 Titles are the same ones age twos first list and all of these lists done here. 92 00:05:27,360 --> 00:05:28,740 They look identical. 93 00:05:28,740 --> 00:05:29,220 Great. 94 00:05:29,340 --> 00:05:32,970 So if you have any questions feel free to take some time go through the code. 95 00:05:32,970 --> 00:05:34,660 Again it's in the description. 96 00:05:34,860 --> 00:05:38,860 This is not something that you'll have to do all the time creating these nasty lists. 97 00:05:38,940 --> 00:05:43,350 But what it really is about and the reason that I had to do this is that it's important that you're 98 00:05:43,350 --> 00:05:49,050 able to combine tags you can put a strong tag instead of an ally or an emphasis tag inside of another 99 00:05:49,050 --> 00:05:53,680 ally or an oh well as that of an ally or an ally instead of a UL and so on. 100 00:05:53,700 --> 00:05:57,830 It's important that you get comfortable with the basic boiler plate as well. 101 00:05:57,960 --> 00:05:59,320 So hopefully you enjoyed that.