0
1
00:00:00,990 --> 00:00:01,340
All right.
1

2
00:00:01,350 --> 00:00:10,140
So in the last lesson there was a pdf that you could download which showed the end result of our web
2

3
00:00:10,140 --> 00:00:13,720
site and it shows how things would be laid out,
3

4
00:00:13,740 --> 00:00:20,790
what is the rough spacing between each of the elements and how everything should look and feel.
4

5
00:00:20,820 --> 00:00:25,900
Now I've also specified the hex codes for the colors that I'm using here.
5

6
00:00:26,040 --> 00:00:31,260
And I also showed you how you can go about getting hold of this button code.
6

7
00:00:31,260 --> 00:00:35,340
Now in this lesson I'm going to show you how I implemented this,
7

8
00:00:35,550 --> 00:00:40,220
adding in the rest of the CSS code that we need to achieve this look.
8

9
00:00:40,350 --> 00:00:47,010
Now it might just be that your code, based on what you estimated visually, is a little bit different from
9

10
00:00:47,010 --> 00:00:48,200
what I'm going to type.
10

11
00:00:48,270 --> 00:00:50,490
That's not a problem at all.
11

12
00:00:50,490 --> 00:00:58,440
Now you can either follow along with what I'm doing in the solution or you can simply watch it just
12

13
00:00:58,440 --> 00:01:00,800
to see if you got the broad strokes right.
13

14
00:01:00,810 --> 00:01:04,010
For example how did you implement the horizontal rule,
14

15
00:01:04,060 --> 00:01:08,360
or how do I get this bottom footer section to look like this?
15

16
00:01:08,430 --> 00:01:13,360
Now it doesn't matter if your web site looks similar to mine or not.
16

17
00:01:13,380 --> 00:01:20,850
In fact, I encourage you to personalize your web site, but I want you to be able to achieve the layouts
17

18
00:01:20,940 --> 00:01:22,500
that I've specified.
18

19
00:01:22,530 --> 00:01:28,890
So after you're able to look at a specification like this. Now, I admit this is a very rough spec and
19

20
00:01:28,890 --> 00:01:36,120
I haven't given you the specific margins and paddings etc., but it's a great skill as a web designer
20

21
00:01:36,120 --> 00:01:44,250
to be able to look at a sketched out layout or a mockup and to be able to implement that in code inside
21

22
00:01:44,260 --> 00:01:46,430
your CSS and HTML.
22

23
00:01:46,560 --> 00:01:54,240
So let's get going and feel free to follow along with me or just watch the solution video to see how
23

24
00:01:54,240 --> 00:01:56,280
to do something that you couldn't figure out.
24

25
00:01:56,280 --> 00:02:02,130
So the first thing I'm going to change is that I'm going to change the body text color to a slightly
25

26
00:02:02,610 --> 00:02:05,820
off black, and that's the color I specified here,
26

27
00:02:05,830 --> 00:02:07,780
40514E.
27

28
00:02:07,950 --> 00:02:12,830
So let's head over to our body and let's add that font color here.
28

29
00:02:13,050 --> 00:02:15,690
So that's going to be changing the color property.
29

30
00:02:15,900 --> 00:02:28,140
And it is 40514E, and that's this sort of dark greyish color that we're going to implement for
30

31
00:02:28,140 --> 00:02:30,720
the text inside our web site.
31

32
00:02:30,780 --> 00:02:35,940
And that just makes it look a little bit more designed than previously but it's still highly readable.
32

33
00:02:35,940 --> 00:02:41,430
So be careful about using really light greys when you're changing the body color because if there's
33

34
00:02:41,520 --> 00:02:47,130
not enough contrast with the background color then it can make it really difficult, not just people with
34

35
00:02:47,130 --> 00:02:50,710
visual impairment but even normal people would be a strain on their eyes.
35

36
00:02:50,760 --> 00:02:53,450
So always go for something dark and high contrast.
36

37
00:02:53,610 --> 00:02:59,340
Now the next thing that I want is to have a little bit more padding between the h2s and the text
37

38
00:02:59,340 --> 00:02:59,990
below them.
38

39
00:02:59,990 --> 00:03:07,110
So for example I want just a bit more space between the Hello and this bio, and also My Skills and the
39

40
00:03:07,110 --> 00:03:08,330
skills section.
40

41
00:03:08,340 --> 00:03:18,920
So let's head over to our h2 and add that padding-bottom, and I'm going to add only about 10 pixels
41

42
00:03:19,040 --> 00:03:20,230
to achieve that.
42

43
00:03:20,390 --> 00:03:25,740
So you can see the effect is really subtle but it helps to space things out a little bit.
43

44
00:03:25,760 --> 00:03:31,810
Now the next thing I want is a bit of space between the middle section and the top section.
44

45
00:03:31,850 --> 00:03:38,810
So I'm going to add again 100 pixels of padding to the top and 100 pixels to the bottom to space it
45

46
00:03:38,810 --> 00:03:41,920
out between the middle, the top and the bottom containers.
46

47
00:03:42,080 --> 00:03:45,720
But I don't want to add any further margin to the left and right, 
47

48
00:03:45,890 --> 00:03:52,370
so I'm going to leave it as 0 so that it's stuck to the left and right sides of the viewport, which is
48

49
00:03:52,370 --> 00:03:53,550
the screen.
49

50
00:03:54,230 --> 00:03:59,240
So in order to do that I'm going to use the shorthand, where I say it's 100 pixels for the top
50

51
00:03:59,270 --> 00:04:02,860
and bottom and 0 for the left and right.
51

52
00:04:02,870 --> 00:04:10,070
So let's hit save and refresh and you see we've now got a good bit of space between the top and bottom containers.
52

53
00:04:10,070 --> 00:04:13,170
And that looks a lot more natural than before.
53

54
00:04:13,190 --> 00:04:22,040
Now the next thing I'm going to do is, I want to format this little bit of bio here so that it's less
54

55
00:04:22,130 --> 00:04:27,880
in width, and you can have a few more lines rather than this long line that's quite hard to read.
55

56
00:04:28,190 --> 00:04:31,230
And so I can do that by changing it’s width.
56

57
00:04:31,460 --> 00:04:39,660
So if I go into my index.html, and I already have this class for that paragraph which is called 
57

58
00:04:39,670 --> 00:04:40,580
intro.
58

59
00:04:40,730 --> 00:04:44,350
You might have called it something else or you may or may not have this class.
59

60
00:04:44,390 --> 00:04:48,160
Just check to see what you called this class over here.
60

61
00:04:48,440 --> 00:04:53,350
And then we can target it inside our styles.css.
61

62
00:04:53,450 --> 00:04:56,090
And I'm just going to put it below the pro class.
62

63
00:04:56,120 --> 00:04:57,990
So it's called intro,
63

64
00:04:58,670 --> 00:05:05,780
and I'm going to change its width to only 30 percent of its parent container, which is of course the middle
64

65
00:05:05,780 --> 00:05:06,340
container.
65

66
00:05:06,350 --> 00:05:14,270
So let's hit refresh and you can see it's now a lot less in width and it's now taking up three lines,
66

67
00:05:14,600 --> 00:05:18,740
which is much easier to read rather than one long big line.
67

68
00:05:18,790 --> 00:05:25,730
So, but the problem is now, it's left aligned and it's no longer in the center of our web page, and that's
68

69
00:05:25,730 --> 00:05:30,420
because it's no longer edge to edge and we now have to set the margin to
69

70
00:05:30,470 --> 00:05:31,220
auto
70

71
00:05:31,400 --> 00:05:36,250
in order to get it to be centered in the web page, which is exactly what we want.
71

72
00:05:36,470 --> 00:05:42,830
So I'm going to go ahead and add a margin property and just set it to auto on all four sides.
72

73
00:05:42,980 --> 00:05:48,630
And now you can see it's perfectly centered and it looks a lot nicer than before.
73

74
00:05:48,660 --> 00:05:55,310
So one of the things I added here was to make the line height double what it used to be and that spaces
74

75
00:05:55,310 --> 00:05:58,200
out the text and makes it a lot easier to read.
75

76
00:05:58,220 --> 00:06:01,660
Now I'd like to do that consistently across my web site,
76

77
00:06:01,670 --> 00:06:05,900
so for the intro as well as the other parts of text.
77

78
00:06:05,960 --> 00:06:14,660
So instead of having that line-height down in the skill-row section, I'm actually going to cut that
78

79
00:06:15,020 --> 00:06:19,280
and add that to a paragraph level
79

80
00:06:19,920 --> 00:06:20,960
CSS rule.
80

81
00:06:21,020 --> 00:06:28,010
So I'm targeting all the paragraphs inside my web site and I'm changing all of their line-heights to double
81

82
00:06:28,070 --> 00:06:29,370
the height that it used to be.
82

83
00:06:29,510 --> 00:06:33,620
And this makes it a lot more spaced out and a lot easier to read.
83

84
00:06:33,680 --> 00:06:37,870
Now finally I just want to adjust my clouds a little bit,
84

85
00:06:38,120 --> 00:06:41,990
just based on what I prefer it to look.
85

86
00:06:42,170 --> 00:06:48,260
So I'm going to change the top cloud to have 40 from the top rather than 300,
86

87
00:06:48,320 --> 00:06:53,180
make it go up a little bit, and then I'm going to make the bottom cloud
87

88
00:06:53,240 --> 00:06:56,480
only have a left of 250,
88

89
00:06:56,500 --> 00:06:58,470
so make it go further to the left.
89

90
00:06:58,490 --> 00:06:58,750
All right.
90

91
00:06:58,760 --> 00:07:02,660
So that is pretty much the top sections done.
91

92
00:07:02,660 --> 00:07:07,490
Now the next thing we need to look at is this horizontal rule and at the moment it's looking a little
92

93
00:07:07,490 --> 00:07:08,340
bit ugly.
93

94
00:07:08,480 --> 00:07:14,960
But as we did previously, we managed to get these little grey dots to show up as the horizontal rule
94

95
00:07:15,140 --> 00:07:16,880
separating the sections instead.
95

96
00:07:16,940 --> 00:07:19,070
And that's what we want to do here also.
96

97
00:07:19,310 --> 00:07:23,130
So let's go ahead and target the horizontal rule.
97

98
00:07:23,660 --> 00:07:30,950
So, remember, because it's an HTML element we're going to put it with the other HTML elements, and we're
98

99
00:07:30,950 --> 00:07:38,960
going to first change the border so that it has a dotted style and I'm going to change the color to
99

100
00:07:39,350 --> 00:07:40,660
a light grey,
100

101
00:07:40,660 --> 00:07:51,120
so an EAF6F6, and I want it to be 6 pixels in width. So let's refresh that.
101

102
00:07:51,120 --> 00:08:00,930
Now you can see that there's now two borders of one above and one below and enclosing a zero pixel height
102

103
00:08:01,080 --> 00:08:02,770
horizontal rule.
103

104
00:08:02,760 --> 00:08:12,360
So if we now go and set the border-bottom to none, then we can get rid of that bottom border to only
104

105
00:08:12,360 --> 00:08:17,520
have a single line, which looks the way that we want it to.
105

106
00:08:17,520 --> 00:08:21,890
So the next thing is to change its width and I want it to be a lot narrower than that.
106

107
00:08:21,900 --> 00:08:31,070
In fact, I want it only to be about maybe 4 percent of the width, and it's important to use percent here so
107

108
00:08:31,070 --> 00:08:38,660
that it scales when my web site scales, and finally I need to give it some margin, because at the
108

109
00:08:38,660 --> 00:08:41,070
moment it's far too close to everything else.
109

110
00:08:41,210 --> 00:08:48,860
So I want it to have 100 pixels of margin-top, 100 pixels margin-bottom, and I want it to be centered
110

111
00:08:49,070 --> 00:08:49,940
in the middle.
111

112
00:08:49,940 --> 00:08:53,210
So we're going to go for that good old margin property,
112

113
00:08:53,240 --> 00:08:59,150
and we're going to say top and bottom should be 100 pixels, and left and right should be auto, so that
113

114
00:08:59,180 --> 00:09:05,010
we keep this centered in the middle. And that is looking really really nice.
114

115
00:09:05,060 --> 00:09:09,950
And I know it's a very very light color but it's fine because it doesn't need to be read, 
115

116
00:09:10,040 --> 00:09:13,430
it’s just there to visually separate some of our section.
116

117
00:09:13,490 --> 00:09:19,220
Now the next section that we get to is, of course, this Contact Me section, and the first thing I want
117

118
00:09:19,220 --> 00:09:26,180
to do is similar to this intro or bio bit of text. I need to make this Contact Me message a little bit
118

119
00:09:26,180 --> 00:09:27,730
less wide.
119

120
00:09:27,830 --> 00:09:36,320
So let's target that and change its width. So, the contact message currently has a class called 
120

121
00:09:36,320 --> 00:09:37,270
contact-message.
121

122
00:09:37,280 --> 00:09:42,720
So let's go ahead and target that inside our CSS,
122

123
00:09:42,770 --> 00:09:52,380
so .contact-message, and we're going to change its width. And I'm going to change it to just 40 percent
123

124
00:09:52,390 --> 00:10:00,610
in this case, and that will make it go onto two lines but it will also make it go to the left.
124

125
00:10:00,640 --> 00:10:08,450
So let's change the margin so that we have 40 pixels from the top and 40 pixels from the bottom,
125

126
00:10:08,680 --> 00:10:11,820
but the left and right should be auto.
126

127
00:10:11,950 --> 00:10:19,190
Now the shorthand way of specifying that is by using the three element circle rule, 
127

128
00:10:19,330 --> 00:10:27,290
so that's 40 pixels from the top, auto for the left and right and 60 pixels for the bottom. Again,
128

129
00:10:27,310 --> 00:10:29,490
if that confuses you at all,
129

130
00:10:29,500 --> 00:10:35,690
make sure you take a look at the MDN Developer Docs for the margin property.
130

131
00:10:36,010 --> 00:10:39,790
So hit save and we've now got more margin here than here, 
131

132
00:10:39,940 --> 00:10:43,900
and it's also spaced so that it's automatically centered in the middle.
132

133
00:10:43,900 --> 00:10:49,330
Now the final thing in this section is of course changing that Contact Me button from this horrible
133

134
00:10:49,360 --> 00:10:54,000
ugly looking thing to something that looks a little bit more like a real button.
134

135
00:10:54,250 --> 00:11:01,480
And as we mentioned in the challenge we're going to use the CSS Button Generator web site. So the text
135

136
00:11:01,540 --> 00:11:04,240
I'm going to change to CONTACT ME, 
136

137
00:11:04,270 --> 00:11:05,290
all caps,
137

138
00:11:05,290 --> 00:11:12,250
the font-family we’ll leave as Arial for now, the font-color is just going to be white, and the font-size
138

139
00:11:12,250 --> 00:11:15,730
we’re going to leave as 20 pixels as well.
139

140
00:11:15,730 --> 00:11:20,860
Now we're not going to change anything in the box but we are going to change the border and specifically
140

141
00:11:20,860 --> 00:11:22,530
that's the border radius.
141

142
00:11:22,600 --> 00:11:28,080
I'm going to change it down to 8 so that it's a little bit more square looking rather than rounded.
142

143
00:11:28,390 --> 00:11:34,420
And it's not going to have a border but it is going to have a gradient background and the starting color
143

144
00:11:34,420 --> 00:11:40,690
for our gradient is going to be 11CDD4,
144

145
00:11:41,110 --> 00:11:47,010
and the end color is going to be 11999E.
145

146
00:11:47,320 --> 00:11:56,590
And for our hover or rollover state, we're going to start the gradient at 30E3CB, and we're going
146

147
00:11:56,590 --> 00:12:02,500
to end at 2BC4AD.
147

148
00:12:02,510 --> 00:12:07,530
All right so now you can see that when you hover over it it's a little bit lighter shade of green.
148

149
00:12:07,690 --> 00:12:09,750
So that looks pretty nice to me.
149

150
00:12:09,880 --> 00:12:16,030
And this is the automatically generated CSS code based on all of those options that we've selected.
150

151
00:12:16,180 --> 00:12:22,310
And we can now just copy it wholesale and paste it into our CSS over here.
151

152
00:12:22,630 --> 00:12:33,010
Now if you take a look at our anchor tag for our contact button, you can see it has a class of btn, and
152

153
00:12:33,010 --> 00:12:39,420
that matches perfectly with the class that we get back from CSS Button Generator,
153

154
00:12:39,520 --> 00:12:42,940
and that means that we will be able to target it without a problem.
154

155
00:12:42,940 --> 00:12:49,420
Now the only thing that I want to change here is, I want to change the text so that it fits in with our
155

156
00:12:49,420 --> 00:12:52,460
font-family that we've set for the entire web site.
156

157
00:12:52,540 --> 00:13:00,490
I’m going to change the font-family from Arial to Montserrat. And now if we hit save and we go ahead and
157

158
00:13:00,490 --> 00:13:06,280
refresh our page, you can see that we've got that beautiful button that we've implemented without
158

159
00:13:06,430 --> 00:13:07,990
very much work at all.
159

160
00:13:07,990 --> 00:13:13,780
All right. So now we're finally ready to tackle the bottom section which is basically our footer that
160

161
00:13:13,780 --> 00:13:15,610
you'll see on most web pages.
161

162
00:13:15,730 --> 00:13:21,310
Now the first thing that we want to do is, we want to change its background color so that we can see
162

163
00:13:21,310 --> 00:13:24,730
the difference between the footer and the middle section.
163

164
00:13:24,730 --> 00:13:31,810
So find the bottom-container, and let's go ahead and change its background color to the color that we've
164

165
00:13:31,810 --> 00:13:40,990
been using for a while now which is 66BFBF, and let's hit save and refresh. You can see we've now got
165

166
00:13:41,290 --> 00:13:46,200
this bottom section highlighted and separated from the rest of the content.
166

167
00:13:46,210 --> 00:13:52,190
Now why is there this gap between the bottom of our page and the bottom of our footer?
167

168
00:13:52,480 --> 00:13:58,140
Well, the reason, if you inspect, is that you can scroll it all the way up to the top,
168

169
00:13:58,330 --> 00:14:06,010
and if you hover over that paragraph for the last copyright message you can see that it's got a pretty
169

170
00:14:06,010 --> 00:14:10,090
large margin, 16 from the top and 16 from the bottom.
170

171
00:14:10,180 --> 00:14:16,610
And remember that came automatically from the user agent stylesheet which comes from the browser.
171

172
00:14:16,660 --> 00:14:20,010
And that's 1em top and 1em bottom.
172

173
00:14:20,020 --> 00:14:26,620
So we have to either get rid of that padding or we can pad out our footer a little bit more and make
173

174
00:14:26,620 --> 00:14:33,020
it a little bit taller so that it encompasses that padding for the paragraph tag.
174

175
00:14:33,190 --> 00:14:34,540
I'll show you what I mean.
175

176
00:14:34,540 --> 00:14:43,720
So if we go into our bottom-container and we change the padding to 50 pixels up top, 0 left and right,
176

177
00:14:43,990 --> 00:14:50,410
and 20 pixels at the bottom, then that should be more than enough to cover the 16 pixels which is the
177

178
00:14:50,420 --> 00:14:54,710
1em padding for our paragraph.
178

179
00:14:54,730 --> 00:15:01,450
So if we hit refresh you'll see now our footer goes all the way down to the bottom and there is now
179

180
00:15:01,450 --> 00:15:07,490
enough space for that padding to be included inside the footer rather than outside the footer.
180

181
00:15:07,660 --> 00:15:10,580
So next let’s style our anchor tags.
181

182
00:15:10,630 --> 00:15:15,970
Currently they're a little bit too squished up together and it's not looking very nice.
182

183
00:15:16,000 --> 00:15:23,440
So let's go ahead and target them by targeting all of the anchor tags and lets first change the text
183

184
00:15:23,440 --> 00:15:32,690
color to what we have in the rest of our document and the text color that I specified was 11999E.
184

185
00:15:32,890 --> 00:15:38,910
And let's add the property, of course, and that's hit save and refresh.
185

186
00:15:38,980 --> 00:15:45,760
You can see that we've now got a slightly lighter color than before but it's still relatively readable
186

187
00:15:45,760 --> 00:15:46,760
against the background.
187

188
00:15:46,810 --> 00:15:52,900
Now you can of course make that contrast more if you wish to but I usually think that the text in the
188

189
00:15:52,900 --> 00:15:53,590
footer,
189

190
00:15:53,710 --> 00:15:58,600
you don't want it to distract from the main message which is either Contact Me or whatever it is that
190

191
00:15:58,600 --> 00:16:00,240
you want to highlight to people.
191

192
00:16:00,280 --> 00:16:02,880
So I want to have that a little bit more muted.
192

193
00:16:02,980 --> 00:16:07,510
Now let's make this text look a little bit more in line with the rest of our text.
193

194
00:16:07,570 --> 00:16:13,270
You can see that the anchor text is actually styled in a different font from the rest of our text. So
194

195
00:16:13,420 --> 00:16:20,800
we can change that to what we've got for the rest of our body, which is Montserrat, by just copying this
195

196
00:16:20,800 --> 00:16:24,650
line over here, or, as you probably should to get more practice,
196

197
00:16:24,670 --> 00:16:25,720
just type it up.
197

198
00:16:26,050 --> 00:16:27,360
So let's update that.
198

199
00:16:27,430 --> 00:16:32,710
And we've got something that fits in with the overall look and feel of our web site.
199

200
00:16:32,800 --> 00:16:38,200
And now all we need to do is just space them apart a little bit so that they can be easily distinguished
200

201
00:16:38,260 --> 00:16:39,480
from each other.
201

202
00:16:39,790 --> 00:16:45,790
So to do that we're going to have to add a little bit of margin to it and I'm going to add a 10 pixel
202

203
00:16:45,790 --> 00:16:53,440
top and bottom margin and a 20 pixel left and right margin to give it more space away from each other,
203

204
00:16:53,590 --> 00:16:58,340
and this way we can click on each one individually without having them all mushed together.
204

205
00:16:58,630 --> 00:17:04,720
Now the final thing I don't like about this look is that by default all anchor tags have an underline
205

206
00:17:05,020 --> 00:17:07,950
that shows you that this is clickable.
206

207
00:17:07,950 --> 00:17:11,790
Now I want to show that in a different way by changing the hover state.
207

208
00:17:11,830 --> 00:17:19,720
So I want to get rid of this underline, and I can do that by changing the text-decoration which, remember,
208

209
00:17:19,720 --> 00:17:23,930
the browser automatically makes it underlined for all anchor tags,
209

210
00:17:24,110 --> 00:17:26,530
and I'm going to change it to none.
210

211
00:17:26,530 --> 00:17:27,860
So now we update that.
211

212
00:17:28,000 --> 00:17:28,570
That's gone.
212

213
00:17:28,600 --> 00:17:33,020
And that looks a lot nicer and it doesn't look like a 90s web site anymore,
213

214
00:17:33,040 --> 00:17:33,480
right?
214

215
00:17:33,670 --> 00:17:39,550
So as we said we want to show that these links are clickable by making it have a different color
215

216
00:17:39,640 --> 00:17:46,900
when I rollover it. So I can target that using the hover state of the anchor tag.
216

217
00:17:47,200 --> 00:17:52,250
And if you remember that we spoke about these pseudo classes a few lessons ago.
217

218
00:17:52,450 --> 00:17:58,430
And if you're confused about this at all then be sure to check out those previous lessons on the CSS
218

219
00:17:58,430 --> 00:17:59,810
selectors.
219

220
00:17:59,920 --> 00:18:05,500
So for the hover state, instead of having a fun color of 11999E,
220

221
00:18:05,650 --> 00:18:16,900
we instead want to have a EAF6F6, and that will just be a little bit lighter so that when we hover over
221

222
00:18:16,900 --> 00:18:22,510
it, it looks like it's definitely clickable and that gives the user enough clues as to what to do with
222

223
00:18:22,510 --> 00:18:23,210
it.
223

224
00:18:23,230 --> 00:18:30,010
Now the very very final thing that I'm going to format is the copyright here, and I'm going to change
224

225
00:18:30,010 --> 00:18:34,720
its color to make it less assuming and also make it a little bit smaller.
225

226
00:18:34,990 --> 00:18:39,340
So let's go ahead and see what we used for that copyright message.
226

227
00:18:39,390 --> 00:18:42,620
We used the class copyright.
227

228
00:18:42,630 --> 00:18:47,560
So let's go into our styles.css, find the part where we have the text,
228

229
00:18:47,560 --> 00:18:57,330
and let's go ahead and select the copyright message and change its color to the same as we had for our
229

230
00:18:57,330 --> 00:19:06,780
anchor tag rollover state which is EAF6F6, hit refresh, and see it's now this lovely light white color,
230

231
00:19:07,230 --> 00:19:09,870
and then we're going to make it a lot smaller.
231

232
00:19:09,900 --> 00:19:18,480
So we're going to change the font size to 0.75rem, so that's 75 percent of 16 pixels, and
232

233
00:19:18,570 --> 00:19:23,940
it's now less important and it's taking up less space as well.
233

234
00:19:23,940 --> 00:19:28,260
Now finally I want to give a little bit more padding from the top and the bottom.
234

235
00:19:28,260 --> 00:19:37,800
So I'm going to change its padding to maybe 20 pixels top and bottom and zero pixels left and right so
235

236
00:19:37,800 --> 00:19:39,780
that it goes all the way to the end.
236

237
00:19:39,780 --> 00:19:43,270
And that way it's got a little bit more separation from the top.
237

238
00:19:43,500 --> 00:19:46,300
And this looks a lot nicer than before.
238

239
00:19:46,590 --> 00:19:55,150
So that's all the changes that I have to make in order to fully recreate our specification here.
239

240
00:19:55,170 --> 00:20:02,100
Now if you had any problems such as implementing the buttons or changing the horizontal rules then be
240

241
00:20:02,100 --> 00:20:06,030
sure to try and fix it using this solution.
241

242
00:20:06,030 --> 00:20:11,160
Now at this stage if you're happy with everything that we've spoken about, feel free to go ahead and
242

243
00:20:11,160 --> 00:20:17,130
completely change or personalize this web site, change the color schemes, change the layouts to whatever
243

244
00:20:17,130 --> 00:20:18,760
it is that you prefer.
244

245
00:20:18,880 --> 00:20:27,750
But this is the live web site, and the next step is of course make it hosted on GitHub so that your
245

246
00:20:27,750 --> 00:20:34,200
personal site is live and you can share it with your friends and your family or show it to anybody who
246

247
00:20:34,200 --> 00:20:35,450
might want to employ you.
247

248
00:20:35,520 --> 00:20:37,950
So that's all for this section.
248

249
00:20:38,070 --> 00:20:46,380
But in this module we learnt a lot about CSS and styling and positioning and layout, changing the text,
249

250
00:20:46,380 --> 00:20:53,670
changing the colors, making text wrap around images, how to create hover states, and loads and loads more.
250

251
00:20:53,670 --> 00:21:00,960
So if any of this is not apparent immediately it might be worth reviewing some of the more difficult
251

252
00:21:00,960 --> 00:21:01,630
concepts,
252

253
00:21:01,740 --> 00:21:05,790
for example the positioning and the difference between absolute and relative.
253

254
00:21:05,790 --> 00:21:12,600
Or you could simply just go ahead and start creating a web design of your own fancy that you've designed,
254

255
00:21:12,870 --> 00:21:18,350
pencil and paper, and try to solve those problems by doing. So,
255

256
00:21:18,360 --> 00:21:21,240
that’s all from me in this lesson. I'll see you on the next lesson.