Original subtitles

1 1

So before we start this basic HTML 2

2

and CSS Crash Course, 3

3

let me tell you again that you should only take this 4

4

if you have no knowledge about HTML and CSS at all. 5

5

So if you do, then just move on to the next section. 6

6

But for the rest of us let's now get started 7

7

and learn a little bit about HTML structure and elements 8

8

And let's start by creating a new product folder here 9

9

on the desktop, which I'm just gonna call HTML CSS. 10

10

And in this section, 11

11

we're actually not even gonna have any starter files. 12

12

So we're just gonna create everything from scratch. Okay? 13

13

So let's go back to VS code 14

14

and open this newly created folder. 15

15

And here we go. 16

16

So let's open up 17

17

or actually let's create an index.HTML file. 18

18

An index.HTML is always the name of the main file 19

19

in any project. Okay? 20

20

Let's hide this sidebar here 21

21

and I'm gonna use command + B for that, 22

22

or control + B on windows. Alright? 23

23

So HTML stands for hypertext markup language 24

24

and we use it to describe the content 25

25

of web pages basically. 26

26

And an HTML document is made out of elements 27

27

and we write elements using an opening 28

28

and closing tag. 29

29

The main element in all HTML documents 30

30

is always the HTML element. 31

31

So we write HTML and then VS code automatically gives 32

32

us the closing tag. 33

33

So you'll see the closing tag has just 34

34

the same name as the opening tag, 35

35

but then it has this slash here to close it. Okay? 36

36

So every HTML document always has to start with 37

37

the HTML opening tag and then close with 38

38

the HTML closing tag. 39

39

Then inside the HTML element 40

40

we always have to head and the body. 41

41

So let's write that head and body. 42

42

So this is always the structure that we use in HTML. 43

43

Now, whatever we put into this head here 44

44

is basically like the settings of the page. 45

45

So it's like describing the page. 46

46

For example, with the title. 47

47

So for that, we use the title element 48

48

and let's call this one learning HTML and CSS. 49

49

And then once again VS code automatically gives us 50

50

the closing tag here. 51

51

So this title here is what's gonna be visible 52

52

in Google Chrome. 53

53

So basically this title of the page right here. Okay? 54

54

And you will see that in a second. 55

55

Other things that we put here in this head 56

56

which is again like the settings of the page 57

57

is CSS styles or FATF icons. 58

58

So that little icon that appears here in browser tabs 59

59

and stuff like that. 60

60

Then whatever we put into the body 61

61

is what's actually gonna be visible on the page. 62

62

And let's start by adding a heading here. And for that, 63

63

we use the H1 element. 64

64

And this is a level one heading. Okay? 65

65

so you have H1, H2 all the way to H6. 66

66

And they will have different styles automatically applied 67

67

by the browser. Anyway, let's now give it to your title. 68

68

And let's say, "JavaScript is fun, 69

69

but so is HTML and CSS." 70

70

So just like before, we put the extra content here 71

71

between two tags. So the opening tag, 72

72

which is H1 and then the closing tag 73

73

which is this /H1 to close the element. 74

74

And different types of elements have different purposes. 75

75

For example, H1 is to describe a heading. 76

76

But we have other ones. 77

77

For example, we have the P element to describe a paragraph. 78

78

So let me show that as well. 79

79

So that's right. And a little bit longer text here. 80

80

So you can learn JavaScript without HTML and CSS, 81

81

but for dumb manipulation 82

82

it's useful to have some basic ideas of HTML and CSS. 83

83

And of course the texture doesn't really matter, 84

84

It's just that we have some content on the actual page. 85

85

And speaking of the page, 86

86

let's now actually preview it here in Google Chrome. 87

87

And for that let's use the live-server tool 88

88

that we installed in the previous section. So for that, 89

89

I'm gonna use the integrate a terminal 90

90

by hitting control + /. 91

91

Okay. So again, 92

92

this very weird shortcut 93

93

or I can also do it from the menu. 94

94

So that's gonna be new terminal down here. Okay? 95

95

Then I can clear the terminal from all 96

96

this weird stuff with command or control + K. 97

97

And so now it's a bit cleaner. 98

98

Again, it's not important at this point 99

99

that you really understand everything about the terminal. 100

100

We will learn really a lot about it kind of by the end of 101

101

the course. For now, all we want to do 102

102

is to use the live server, just like we did 103

103

in the previous section. 104

104

So when we hit enter on this, 105

105

this will now open up the page 106

106

in this Chrome window here, 107

107

and indeed here we go. 108

108

And you can already see that 109

109

the browser applied some basic formatting based on 110

110

the type of element. 111

111

So this H1 here is way bigger and bolder than 112

112

the main text down here, which is this paragraph, right? 113

113

And let's add another paragraph here 114

114

so we can see it appear on the page as well. 115

115

So P again, just another paragraph. 116

116

So when I saved us now, 117

117

the results should automatically appear here 118

118

on the right side. 119

119

And here we go. 120

120

And again, as I told you in the previous section, 121

121

if this life server is not working for you, 122

122

then that's no problem at all. 123

123

You can always just open the HTML document itself. 124

124

Anyway, let's take a look at another heading here. 125

125

So as I was saying, there is not just H1, 126

126

but also other type of headings. 127

127

So let's simply put one here. 128

128

So let's say an H2 another heading. 129

129

And so as you see this one here is a bit smaller 130

130

than this one. 131

131

And if I would change it to an H6 132

132

and you'll see automatically it changed the six here. 133

133

And that's because of an extension that I have. 134

134

I'm not sure if I showed it to you in the last section. 135

135

So that extension is called the auto renamed tag. 136

136

And the one that automatically closes a tag that it opened 137

137

is this auto close tag extension up here. 138

138

So these two extensions that I have here, 139

139

they are very useful for writing HTML. 140

140

Okay. 141

141

And here you already saw this reloading. 142

142

And so you see that H6 is actually even smaller 143

143

than the paragraph text. Okay? 144

144

So you see that these elements 145

145

which are composed of an opening and the closing tag 146

146

are really used to describe content in this way. 147

147

Now, of course we can do a lot more 148

148

than just headings and paragraphs. 149

149

For example, links or images. 150

150

But for that, we need to learn about attributes. 151

151

And we're gonna do that in the next video. 152

152

Now, just to finish this lecture, 153

153

I wanted to show you that we can actually create 154

154

this bare bones structure of HTML 155

155

in a very easy way in VS code. 156

156

All we have to do is basically type ! + tab 157

157

and like magic, all of appears. 158

158

So we still have the HTML tag and in there 159

159

we have to head and body just like we had before. 160

160

The difference is that we also got this doc type here, 161

161

which essentially identifies 162

162

this document as being HTML five. 163

163

And we also get this language here on HTML. 164

164

So in this case, 165

165

it's telling the browser that 166

166

we're using the English language. 167

167

Here is some other stuff that's also important 168

168

but I'm not gonna go into now. 169

169

And then here is the title that we just specified also in 170

170

our document up here. 171

171

So now I will just go ahead 172

172

and take this content and put it here in 173

173

this structure because it's actually a more complete. 174

174

So just take this and cut it, 175

175

put that here, 176

176

delete all of this, give it a save 177

177

and let's put this one here back to H2 178

178

and here we go. 179

179

Actually, we can close this one and alright. 180

180

So see you in the next lecture 181

181

were We're gonna talk a little bit about attributes 182

182

and classes and IDs.