1 00:00:02,090 --> 00:00:04,980 So let's move on to the main section now 2 00:00:04,980 --> 00:00:07,939 and to the content we can add in there. 3 00:00:07,939 --> 00:00:12,940 Now, here in that main part of my page, of course 4 00:00:13,120 --> 00:00:15,320 it's always up to you what you want to have in there, 5 00:00:15,320 --> 00:00:20,020 but in the end, I will have two sub sections, so to say. 6 00:00:20,020 --> 00:00:24,630 A part with a HTML summary and a part about the CSS 7 00:00:24,630 --> 00:00:27,413 summary, though, I will say that the content we add here 8 00:00:27,413 --> 00:00:30,100 is just a very short summary, 9 00:00:30,100 --> 00:00:33,810 a way more detailed summary can be found in that PDF 10 00:00:33,810 --> 00:00:36,440 document, which I provided to you. 11 00:00:36,440 --> 00:00:38,600 Now, that being said, it's now time for two 12 00:00:38,600 --> 00:00:40,980 sub sections here. 13 00:00:40,980 --> 00:00:44,590 And for this, I want to use subtitles to mark 14 00:00:44,590 --> 00:00:46,840 their beginning, their start. 15 00:00:46,840 --> 00:00:48,610 And hence, I'll add more titles, 16 00:00:48,610 --> 00:00:53,610 more headings here, not headers, but heading elements. 17 00:00:54,260 --> 00:00:56,480 And we could use H1 again, 18 00:00:56,480 --> 00:01:00,380 but you should typically only have 19 00:01:00,380 --> 00:01:05,349 one main title per HTML document. 20 00:01:05,349 --> 00:01:08,010 And we already got this main title here, 21 00:01:08,010 --> 00:01:11,350 this main H1 element, and therefore 22 00:01:11,350 --> 00:01:14,092 I'll use H2 elements here to make it clear 23 00:01:14,092 --> 00:01:19,092 that these sub sections still belong to the overall main 24 00:01:19,712 --> 00:01:24,712 page theme of being a CSS and HTML summary. 25 00:01:26,330 --> 00:01:29,475 Now in this first subsection title here, 26 00:01:29,475 --> 00:01:33,883 I'll give this a title of text of HTML summary. 27 00:01:34,910 --> 00:01:37,170 And then I'll already add a second one, 28 00:01:37,170 --> 00:01:40,973 a second subtitle with the CSS summary. 29 00:01:42,610 --> 00:01:47,430 Now these two H2 elements are on the same level. 30 00:01:47,430 --> 00:01:51,010 They're both children of main, but to each other, 31 00:01:51,010 --> 00:01:52,530 they are siblings. 32 00:01:52,530 --> 00:01:55,200 They are on the same level, they have the same 33 00:01:56,206 --> 00:01:57,759 amount of indentation, 34 00:01:57,759 --> 00:02:00,730 which signals that they are on the same level. 35 00:02:00,730 --> 00:02:04,440 And they mark two separate sub sections, 36 00:02:04,440 --> 00:02:07,610 which together make up our main content. 37 00:02:07,610 --> 00:02:11,740 That's the semantics behind the structure we're adding here. 38 00:02:11,740 --> 00:02:16,380 Now let's start with that first sub section here. 39 00:02:16,380 --> 00:02:20,870 Here, we might want to start with a short entry text 40 00:02:20,870 --> 00:02:25,870 where we have a short general definition of what HTML is. 41 00:02:26,610 --> 00:02:30,760 And if I want to have just some standard regular text, 42 00:02:30,760 --> 00:02:35,760 then the paragraph element always is a great choice. 43 00:02:35,780 --> 00:02:39,940 And then we could say HTML and then explain what 44 00:02:41,416 --> 00:02:44,420 that stands for hypertext markup language 45 00:02:45,690 --> 00:02:50,690 is used to define our page content, structure and meaning. 46 00:02:53,400 --> 00:02:58,400 You don't use it for styling purposes. 47 00:03:00,260 --> 00:03:05,260 Use CSS for that instead and I'll press the auto format 48 00:03:06,100 --> 00:03:09,640 shortcut so that some automatic line breaks are added, 49 00:03:09,640 --> 00:03:13,763 which again, as you learned will be ignored by the browser. 50 00:03:15,050 --> 00:03:16,890 And now with that, if we save this, 51 00:03:16,890 --> 00:03:21,543 we got this subtitle here and then this entry text. 52 00:03:22,570 --> 00:03:25,860 Now below that entry text, I want to have a list 53 00:03:25,860 --> 00:03:30,260 with the main HTML features being laid out. 54 00:03:30,260 --> 00:03:32,713 And therefore, we can add a list here with 55 00:03:32,713 --> 00:03:37,130 one of the two main list elements we have. 56 00:03:37,130 --> 00:03:40,459 An unordered list with the UL element or an ordered 57 00:03:40,459 --> 00:03:44,050 list with the OL element. 58 00:03:44,050 --> 00:03:47,540 Now it's up to you, which kind of list you see here. 59 00:03:47,540 --> 00:03:50,800 But I would say it's an unordered list because the main 60 00:03:50,800 --> 00:03:54,900 features which I'm going to lay out here actually won't have 61 00:03:54,900 --> 00:03:56,970 any particular order. 62 00:03:56,970 --> 00:04:01,070 And hence I'll use the UL element to then define my 63 00:04:01,070 --> 00:04:06,003 different LI elements in there, the different list items. 64 00:04:07,000 --> 00:04:11,560 And a list, no matter if it's UL or OL, 65 00:04:11,560 --> 00:04:13,840 always is a great choice if you have 66 00:04:13,840 --> 00:04:18,339 well list content, multiple pieces of content, 67 00:04:18,339 --> 00:04:20,600 multiple sentences, for example, 68 00:04:20,600 --> 00:04:22,170 that make up a list. 69 00:04:22,170 --> 00:04:25,550 Could be your shopping list for the grocery store, 70 00:04:25,550 --> 00:04:28,900 could be your favorite sports or like in this 71 00:04:28,900 --> 00:04:32,033 case, the main HTML features. 72 00:04:33,480 --> 00:04:36,980 And here are the first list item could be that we say 73 00:04:36,980 --> 00:04:41,980 HTML uses elements to describe 74 00:04:42,710 --> 00:04:45,823 which basically means annotate content. 75 00:04:46,750 --> 00:04:51,590 The second list item here could be that we say HTML elements 76 00:04:51,590 --> 00:04:54,800 typically have an opening tag 77 00:04:54,800 --> 00:04:59,800 and then content, and then a closing tag. 78 00:05:02,290 --> 00:05:04,163 And then thereafter, we say, 79 00:05:05,070 --> 00:05:10,070 you can also have void empty elements like images. 80 00:05:14,610 --> 00:05:17,660 And we can also say you can also 81 00:05:17,660 --> 00:05:22,393 configure elements with attributes. 82 00:05:23,910 --> 00:05:26,040 I'll also add one more list item. 83 00:05:26,040 --> 00:05:29,130 Though of course, there are more HTML features 84 00:05:29,130 --> 00:05:32,520 we could add here, but I want to keep this relatively short. 85 00:05:32,520 --> 00:05:34,200 And on that last list item, 86 00:05:34,200 --> 00:05:39,200 I'll just say there's a long list of available elements, 87 00:05:40,520 --> 00:05:45,520 but you'll gain experience over time. No worries. 88 00:05:48,000 --> 00:05:50,570 So that's now my list, and if we save this, 89 00:05:50,570 --> 00:05:55,210 we see all those list items with that default styling, 90 00:05:55,210 --> 00:05:58,090 these bullet points added to them 91 00:05:58,090 --> 00:06:00,523 automatically by the browser. 92 00:06:01,440 --> 00:06:05,560 Now after this list, I'll add one more sentence and 93 00:06:05,560 --> 00:06:07,410 therefore, I'll use a paragraph again 94 00:06:07,410 --> 00:06:10,670 for this regular text and here just want to say, 95 00:06:10,670 --> 00:06:15,670 learn more about all available HTML elements 96 00:06:16,720 --> 00:06:21,720 on the MDN HTML element reference. 97 00:06:21,800 --> 00:06:25,410 And you might've noticed that this actually had a special 98 00:06:25,410 --> 00:06:29,150 style on that screenshot, which I showed you earlier. 99 00:06:29,150 --> 00:06:32,090 So that this part here actually was highlighted, 100 00:06:32,090 --> 00:06:35,180 and that was not just some special styling. 101 00:06:35,180 --> 00:06:38,680 That was actually a link to MDN. 102 00:06:38,680 --> 00:06:41,630 And if you haven't added that link, that's no problem. 103 00:06:41,630 --> 00:06:45,420 But if you did, good job and I will therefore also 104 00:06:45,420 --> 00:06:50,420 add an anchor tag, which I wrap around this text here 105 00:06:50,570 --> 00:06:54,613 around the MDN HTML reference. 106 00:06:55,680 --> 00:06:59,530 And now we just need to configure this link with an 107 00:06:59,530 --> 00:07:01,540 attribute again, to tell the browser 108 00:07:01,540 --> 00:07:03,960 where this link should lead to, 109 00:07:03,960 --> 00:07:07,320 and we need an attribute for that because the content alone 110 00:07:07,320 --> 00:07:09,843 is just the text that should be displayed to tell the 111 00:07:09,843 --> 00:07:13,270 browser where the link actually leads to, 112 00:07:13,270 --> 00:07:17,480 we need that extra behind the scenes configuration, 113 00:07:17,480 --> 00:07:20,340 which attributes provide. 114 00:07:20,340 --> 00:07:23,720 And hence, I'll add to the ref attribute here 115 00:07:23,720 --> 00:07:27,960 and then simply search for MDN element reference 116 00:07:27,960 --> 00:07:29,763 and grab that link here. 117 00:07:30,620 --> 00:07:31,710 Copy that link 118 00:07:32,890 --> 00:07:37,890 and use that here as a value for this ref attribute. 119 00:07:39,340 --> 00:07:42,080 And I'll hide that sidebar now, 120 00:07:42,080 --> 00:07:44,490 and also press the auto format shortcut again, 121 00:07:44,490 --> 00:07:47,240 to make this more readable again. 122 00:07:47,240 --> 00:07:52,053 Now that is my HTML section content. 123 00:07:53,240 --> 00:07:56,260 Now we also got that CSS summary and here it's quite 124 00:07:56,260 --> 00:07:57,530 similar. 125 00:07:57,530 --> 00:08:01,061 We got a paragraph with a little starting text where I say 126 00:08:01,061 --> 00:08:06,061 CSS "cascading style sheets" is used for 127 00:08:07,890 --> 00:08:11,360 styling your page content. 128 00:08:11,360 --> 00:08:16,360 Then below that a list with the main CSS style features 129 00:08:17,540 --> 00:08:20,460 where we could say styles are assigned via 130 00:08:20,460 --> 00:08:25,460 property value pairs. 131 00:08:25,920 --> 00:08:28,930 And that should be in a list item of course, 132 00:08:28,930 --> 00:08:31,450 not in the unordered list like this. 133 00:08:31,450 --> 00:08:33,490 So now it's in a list item and then we have another 134 00:08:33,490 --> 00:08:36,809 list item where we can say, 135 00:08:36,809 --> 00:08:41,809 you can assign styles via the style attribute 136 00:08:42,750 --> 00:08:44,570 that's one thing you could do. 137 00:08:44,570 --> 00:08:49,570 But then I add another list item to avoid code duplication. 138 00:08:52,780 --> 00:08:56,466 You typically use global styles, via the 139 00:08:56,466 --> 00:09:01,466 style element instead, 140 00:09:02,410 --> 00:09:07,410 or maybe let's say e.g via the style element instead. 141 00:09:08,510 --> 00:09:11,640 And then add another list item where I say, 142 00:09:11,640 --> 00:09:16,640 alternatively, you can work with external style 143 00:09:24,155 --> 00:09:26,250 sheets or style sheet files, which you link to. 144 00:09:28,490 --> 00:09:32,133 And then I'll add a last list item where I just want to say 145 00:09:33,380 --> 00:09:37,830 when working with CSS concepts like 146 00:09:39,636 --> 00:09:42,870 inheritance, specificity 147 00:09:46,470 --> 00:09:51,470 and the box model should be understood. 148 00:09:54,329 --> 00:09:56,630 Okay, these are my list items. 149 00:09:56,630 --> 00:10:00,420 Now below the unordered list, we can add another paragraph 150 00:10:00,420 --> 00:10:05,420 where we also say learn more about all available CSS 151 00:10:06,950 --> 00:10:11,950 properties and values on the MDN CSS property reference. 152 00:10:15,090 --> 00:10:17,560 And again, I'll grab a link for that 153 00:10:17,560 --> 00:10:20,390 simply search for MDN CSS properties 154 00:10:20,390 --> 00:10:23,700 to find that CSS reference and I'll grab that 155 00:10:23,700 --> 00:10:26,430 link and then create a link here. 156 00:10:26,430 --> 00:10:31,160 Anchor tag set the ref attribute to that link, 157 00:10:31,160 --> 00:10:35,720 grab the closing tag and wrap this around the MDN CSS 158 00:10:35,720 --> 00:10:37,850 property reference, 159 00:10:37,850 --> 00:10:40,260 press the reformat shortcut, 160 00:10:40,260 --> 00:10:43,030 and now we got that content here as well. 161 00:10:43,030 --> 00:10:46,680 And hence, we now have this page look here 162 00:10:47,650 --> 00:10:49,780 And that is looking okay. 163 00:10:49,780 --> 00:10:53,100 The content is there. It's readable, it's usable. 164 00:10:53,100 --> 00:10:55,690 And it has the correct semantics, 165 00:10:55,690 --> 00:11:00,440 but the styling is still not very close to 166 00:11:00,440 --> 00:11:03,090 what you saw on that screenshot. 167 00:11:03,090 --> 00:11:07,300 And therefore let's now next dive into the styling 168 00:11:07,300 --> 00:11:09,253 of this content here.