Original subtitles

1 1

Welcome to the next lecture. 2

2

After building the header in the last lecture, 3

3

let's build the features section right now. 4

4

So this is the nice, clean features section 5

5

we'll build based on my sketch. 6

6

Just a nice heading, some text, and then features 7

7

explained in four columns. 8

8

This should not be so hard, right? 9

9

So in this lecture, we'll learn some new things. 10

10

We'll learn how to put content on a website directly 11

11

from CSS with the after pseudo-class. 12

12

We'll use the fluid grid for the first time 13

13

in order to build the four features column. 14

14

And we'll also use beautiful icons in those columns as well. 15

15

So, let's go. 16

16

So this is where we left our project after the last lecture. 17

17

The header is all built, now it's time 18

18

to start adding the first section. 19

19

And in HTML, we actually have an element for that, 20

20

which is called Section. 21

21

In this is just like the header, it's a container 22

22

so that we can tell this is a section. 23

23

So I will call this section Features. 24

24

And now, let's start with the title, and with the paragraph. 25

25

We'll put that in a row. 26

26

So, class, row, because of course, we want this centered. 27

27

And now, let's put a heading here. 28

28

Now each web page should only have one H1 element, 29

29

which means only one main heading. 30

30

We already used that main heading here, 31

31

so for now in each of the sections, we will put an H2 title. 32

32

Let's see what content we have for this section, 33

33

and here it is. 34

34

I will copy all of it, actually, and put it down here 35

35

such as I did the last time. 36

36

Now, I already showed you how to make comments in CSS, 37

37

now I will tell you the same thing for HTML, 38

38

and it's very easy. 39

39

Just like this: you see everything turned grey here? 40

40

Now to close it, it's just like this. 41

41

And now it is a comment, and it will not appear anywhere. 42

42

I can just leave it here until we use all of this text. 43

43

So the title here is this one. 44

44

It is-- where-- right here, okay. 45

45

"Get Food Fast, Not Fast Food." 46

46

Instead of this, I actually want an larger dash 47

47

that's called an M dash, and in HTML, we have a thing 48

48

called HTML special characters, or special entities, 49

49

and to write those we start with an ampersand, 50

50

and in this case, I already know how it's called, 51

51

it's M dash. 52

52

So instead of writing that dash, I write this HTML code. 53

53

And you can find lots of tables on the internet about this, 54

54

and I will also include a link in the course e-book 55

55

where you can find lots of HTML entities. 56

56

Alright, this is for the heading, 57

57

and now let's add the text as well in form of a paragraph. 58

58

And of course we need a class name here, 59

59

and I will call this Long Copy because it's a long paragraph 60

60

with lots of text, and copy stands for copyright, 61

61

which is like the text for websites. 62

62

So in this paragraph, we'll put this text here. 63

63

We'll actually delete all the text we already used. 64

64

So put this text right here. 65

65

As we did with the header, I will start by building the HTML 66

66

and the CSS will be then used to format all of this. 67

67

And now let's start using the grid like a pro. 68

68

And in order to do that, we have to start a new row. 69

69

Just close this, and now inside of this row, 70

70

we make a dif for each column. 71

71

Dif. Class again. 72

72

Now each column needs to call class, and this comes here 73

73

from the grid CSS file, so we don't have to worry about it, 74

74

we just use this call class. 75

75

So each class-- sorry, so each column needs a call class. 76

76

Now we have four columns so each of those four columns 77

77

will have this class, span one of four. 78

78

And again, we can check this here in the grid file 79

79

with a three, and grid of four. 80

80

So each of our four columns will have 81

81

a width of 23.8 percent. 82

82

Alright, back here, so let's put some more text here. 83

83

I think that these things here are like titles 84

84

of each of the features, so let's make 85

85

another heading element with these. 86

86

We already used H1, H2, and now it's time for H3. 87

87

Alright, and now the text below this, 88

88

and again in a paragraph. 89

89

I'm not going to worry about icons for now, 90

90

the icons will also go inside of this column. 91

91

But I will just leave this for the end, 92

92

because we so far have not talked about it. 93

93

So now I will just copy this three times 94

94

and then fill this with our text. 95

95

It's kind of boring, I guess. 96

96

Now you will see that part of your work will always be 97

97

copy and paste, and you will probably get used to it. 98

98

And the last thing right here. 99

99

Okay, that's it with text. 100

100

So we already used all the text from here. 101

101

I will save this, and now let's see 102

102

how it looks like in the browser. 103

103

It's down here, alright, not so cool, right? 104

104

What's missing here? Our icons. 105

105

So let's fix that, and we will use a beautiful 106

106

icon font called ion icons, here it is. 107

107

So ion icons. 108

108

Don't worry, this link is once again in the course e-book. 109

109

And we will start by downloading it to our computer. 110

110

So this takes some time, and here we have it. 111

111

Right inside our folder, and that's extracted. 112

112

And what do we have here? 113

113

We have a bunch of files, 114

114

but we actually only need two things. 115

115

We need these CSS files, and these font files. 116

116

We actually need this, ion icons mini file CSS. 117

117

We will paste this inside our vendors folder, CSS, 118

118

because you already know, it's a file that we got 119

119

from the internet, and then the fonts, 120

120

because it's an icon font. 121

121

This also comes with the icons in form of images, 122

122

but we want the fonts. 123

123

So let's copy this entire folder and there's, 124

124

okay there already was a folder here, 125

125

so I will replace this, and this is our icon font here. 126

126

And now, how do we use this? 127

127

I actually shouldn't have closed that... ion icons. 128

128

Because this is where we will choose our icons. 129

129

Alright, but first, I will show you how we use it. 130

130

So we want them right here, even before the heading. 131

131

So we just write E class and then the name of an icon. 132

132

For instance, imagine that we want this heart 133

133

We just need to copy the name of this class, paste it here, 134

134

and then we'll have a nice little heart. 135

135

Want to see? 136

136

Well of course not, because we didn't include 137

137

the CSS file yet. 138

138

So let's do that, I'll hit command D to duplicate this, 139

139

and alright, here it is, ion icons, CSS, 140

140

but now it will work. 141

141

And here it is, here is our heart. 142

142

It's not where I wanted it, let me go back, of course not. 143

143

I don't want it in this place, I want it here 144

144

right before the H3, so let me paste it here, 145

145

and now I have this icon right here. 146

146

So, but that's not the icon that I want 147

147

for this feature here, so let's choose just another one. 148

148

So "up to 365 days per year," 149

149

well which of these could look good for that? 150

150

These are a lot, really a lot. 151

151

You will need some time to go through all of them. 152

152

And I choose to go with these icons here, 153

153

these are IOS inspired, which you can see from the name, 154

154

and I really like those line icons, 155

155

so I will choose all icons of this class, 156

156

so that we have some consistency here. 157

157

And this looks great for the first feature, I think, 158

158

because it's the infinity symbol, 159

159

and 365 days per year is kind of an infinity. 160

160

So the next one is "ready in 20 minutes." 161

161

And we could use kind of a watch for that. 162

162

Like this one here. 163

163

So, copy it, paste it here, so I class. 164

164

Paste and close it. 165

165

And the next one is "100 % organic," 166

166

so let me see what we have for that. 167

167

First let's check if they're showing up here. 168

168

Okay, they are, cool. 169

169

Now let me choose another one for the 100 % organic, 170

170

I'm going with this little carrot here, 171

171

so let me just write it here, I class, and... 172

172

Last, but not least, we have the "order anything" feature, 173

173

and that could be like a shopping cart, 174

174

let's see if we find one. 175

175

Here we go, copy and paste. 176

176

Alright, so this is our HTML. 177

177

In the next lecture, we will format this 178

178

so that it looks professionally designed, 179

179

so don't wait, come with me to the next lecture.