Original subtitles

1 1

Let's continue to build our features section 2

2

So the first thing that we're gonna do with this 3

3

is white space, you surely remember that white space 4

4

is a very important thing, and so let's define white space 5

5

between the sections for all sections at the same time. 6

6

So let's format the section, and I will do it here 7

7

right in the reusable competence part of our code. 8

8

And we will put that white space 9

9

between the sections using petting. 10

10

Now you maybe say that to put a space between elements, 11

11

we use margin, and that's actually right, but I will use 12

12

petting because I will later have some-- 13

13

I'm planning to have some sections with background colors, 14

14

and in order to preserve that background color, 15

15

we need to make sure that the space 16

16

is inside of each of the boxes. 17

17

You will see that later. 18

18

So I want a lot of white space, so let me say 80 pixels 19

19

at the top, and on the bottom. 20

20

Zero, so zero at left and right, so no margin. 21

21

Great, so this is a lot of white space, 22

22

and it looks great, right? 23

23

So the next thing is to format the H2 heading here. 24

24

So I want the H2 heading to look quite similar to the H1. 25

25

For example, I want it to have the same text transform, 26

26

the same letter spacing, and the same font white. 27

27

So what do I do in order to achieve that? 28

28

I just group the similar properties 29

29

just as I showed you before. 30

30

So H1 and H2 will have some things in common. 31

31

H1 and H2. 32

32

So this is for H1 only, this is for H1 only, 33

33

and this as well. 34

34

And also this, but the rest, we can leave here for both. 35

35

Now on H2, I want another font size, not so big, of course. 36

36

And I will say maybe 180 percent, so it's not so big. 37

37

And maybe a word spacing of 2 pixels. 38

38

Alright, I also want to align it on the web page 39

39

inside of the row, so I will make center-- 40

40

sorry, I will make text align center. 41

41

Yeah, that looks much better than before. 42

42

Now let's put some space between this. 43

43

So again, we use some margin at the bottom. 44

44

30 pixels should be a good value for this. 45

45

And now, I want a nice, little yellow line 46

46

between the H2 and the text, and as I told you 47

47

in the first lecture, we will learn to put some content 48

48

on a website just with CSS, so we do that 49

49

using the after pseudo-class. 50

50

So after it's just some stuff that will appear after the H2, 51

51

such as the name indicates. 52

52

And now we can style this 53

53

just as if it was a normal element. 54

54

You can say you want it to display as a block element, 55

55

and we want a eight of two pixels, 56

56

so it will be a nice little line with two pixel sides. 57

57

And we want it to be orange, and you already know 58

58

where to find that orange, it's up here. 59

59

Paste it here, and now a very important thing: 60

60

whenever we do a after pseudo-class, we have to specify 61

61

its content, and in this case, we don't want any words 62

62

to appear, so we put a space in there. 63

63

Now the width of that line, of that box will be 64

64

another pixel, and alright, let's see how that looks. 65

65

So somethings is not right here, 66

66

because we want it centered, and of course the reason 67

67

for that is that we have to say that we want it centered, 68

68

and we do that such as we did before. 69

69

So we say we want a margin zero, and bottom zero, 70

70

and left and right auto, and now this should work. 71

71

And also we need to specify some margin 72

72

between this and the bottom. 73

73

Three pixels as well, such as we have it here. 74

74

So let's take a look at this, alright, 75

75

but we still don't have the margin that we want, and-- 76

76

yeah, the reason's because this has to be margin top. 77

77

So there's a margin between DH2 after, so this block, 78

78

and the actual H2, and then 30 pixels after 79

79

that orange block we inserted, 80

80

and this is exactly what we want. 81

81

Now next up, we have this text here. 82

82

So let's define a nice paragraph style for this. 83

83

So this can also go here into the reusable competence 84

84

that will make a little sub-section here for paragraphs. 85

85

So this is called long copy, and one thing we will do 86

86

is to change the line height, which is one thing 87

87

that we learned in the typography lecture. 88

88

So line height should be between 120 and 145 percent, 89

89

and I will actually use the highest of the values, 90

90

because I really like some line height. 91

91

Now one thing that you notice is that this line 92

92

is very long, because another rule of typography 93

93

was that this line should have at most two 94

94

complete alphabets, and this is way more, 95

95

so let's make this paragraph a little less wide, 96

96

so I will say that the width of this paragraph 97

97

should be 70 percent. 98

98

Now the problem is that it will no longer be centered, 99

99

so a good idea for this problem is that instead of trying 100

100

to centering it, is to do another thing, which is this: 101

101

we say that the margin left should be 15 percent. 102

102

And why 15? 103

103

Because the total width would be 100 percent, 104

104

so if we want to center it, the remaining 30 percent 105

105

should be distributed to both sides. 106

106

So 15 percent left, 15 percent right, plus the 70 percent, 107

107

which is our width, makes 100 percent. 108

108

Okay, so let's see what it looks like. 109

109

Okay, and this is way better now. 110

110

Maybe you already noticed that sometimes I have to scroll 111

111

the webpage a little bit in order to make 112

112

our changes appear here, and I actually have no idea 113

113

why this happens, it must be something with the connection 114

114

between bracket and the browser, so don't worry, 115

115

maybe if you also experience this, just scroll your website 116

116

a little bit, and then the change will appear. 117

117

Now the next thing is to format these boxes. 118

118

And the first thing I notice immediately 119

119

is that these columns are a little too close to each other, 120

120

so I should give them some petting here, 121

121

like for example, one percent petting. 122

122

So let's go back to CSS, and now how should we do this? 123

123

So we should never, ever change anything of these classes 124

124

which come from our grid, so what we can do here 125

125

is to add another class, and then format that class, 126

126

and I will call it box, because you know, 127

127

it's like a box where all the features go. 128

128

And I will actually reuse this box probably later, 129

129

so let me just put it here. 130

130

I will call it box, and I just want to 131

131

have it a petting of one percent. 132

132

Alright, and that looks a little bit better now. 133

133

Now, these H3 elements here, they should be similar 134

134

to this one, but a little smaller, so I do 135

135

all the petting elements look similar, so that we maintain 136

136

a similar style all throughout the webpage. 137

137

So I want these three attributes to be always the same 138

138

in all these three pettings, and for the H3 ones 139

139

in specific, it should also be a little bigger 140

140

than the normal font size, but only slightly bigger, 141

141

so maybe 110 percent should be fine, and then also 142

142

some space between the H3 and the paragraph, 143

143

so let me say a margin bottom for instance, 15 pixels. 144

144

Alright, now I really don't like that this text 145

145

doesn't fit in one line, so what can we do about that? 146

146

Let's go back and maybe the reason for that 147

147

is this letter spacing, so if we take that away from the H3, 148

148

and I do this by pasting it here under H1 and in H2 149

149

headings, we will see so now the H3 no longer 150

150

has the letter spacing so let's see what happens. 151

151

Okay, now it fits, just as we wanted it, 152

152

so this is much better. 153

153

Now as for the text in here, I think this 154

154

is a little too big, actually. 155

155

It looks a bit overwhelming, don't you think so? 156

156

So what we can do here is to make the text 157

157

a little bit smaller, and raise its line height. 158

158

So we didn't give it any name because maybe 159

159

we don't need to, but you can see here, that it's a simple 160

160

paragraph inside of the box, so you already can guess 161

161

what I'm gonna do now, right? 162

162

I'm writing box and then I'm selecting 163

163

all the paragraphs inside a box, very easy. 164

164

So as I said a smaller font size, I will choose 165

165

90 percent here, and again I'm going 166

166

with a line height of 145 percent. 167

167

That will look much better. 168

168

So I think that's way more pleasant to look at. 169

169

And this section already looks great, don't you think so? 170

170

The only thing that we need to do now 171

171

is to change these icons, so let's do that. 172

172

And in order to do that, I will actually define 173

173

a new class for all those icons, and I will call this 174

174

icon big, because we will use some other icons 175

175

down the road, and they will probably not be as big 176

176

as these, so let's just call these icons big icons. 177

177

Makes sense right? 178

178

So, I can just say I want paragraphs, and here I want 179

179

some icons, so you see I'm really worried 180

180

with keeping this code organized, and you will see 181

181

when you have bigger projects, 182

182

this becomes incredibly important. 183

183

So in order to make you get used to this, 184

184

is why I'm doing this. 185

185

So let's define the icon big class, and as you notice, 186

186

it's an icon font, so it's really a font, so you can set 187

187

its font size, for instance, and I will make it really big. 188

188

I will start with 400 percent, and if it's too big, 189

189

we can always reduce that. 190

190

And I also want this icon to display as a block... 191

191

display block, so that it forces a line break, 192

192

as you already know. 193

193

I want it to be orange, so again as if it was a real font, 194

194

we can set its color, because color really means font color, 195

195

so I will again copy this orange color 196

196

that we're already used to and put it right here. 197

197

It may be a little margin between the icon and the heading, 198

198

so margin bottom, of course, and let's say 10 pixels. 199

199

And, okay, I think we can see how this looks like. 200

200

Okay, great. 201

201

Well the icons are probably a little too big, right? 202

202

So I think I'll maybe 350 percent, and let's check it again. 203

203

Yeah, that's better. 204

204

So this is really designing in the browser, 205

205

that's what I meant when I said-- when I told you 206

206

what designing in a browser was all about. 207

207

It's trying, tweaking the CSS codes, and see what 208

208

looks best and what works best in order 209

209

to make our website as good as we can. 210

210

So I think this section is ready, it looks great, right? 211

211

And see you in the next section.