0
1
00:00:01,060 --> 00:00:01,440
All right.
1

2
00:00:01,440 --> 00:00:04,890
So how did you get on with that challenge?
2

3
00:00:04,890 --> 00:00:11,430
Well, if you managed to style your web site to look more or less like what we've got here, then you win.
3

4
00:00:11,430 --> 00:00:14,100
Ding ding ding ding ding.
4

5
00:00:14,820 --> 00:00:19,620
But if you struggled, or if there was anything that was unclear, then I'm going to walk you through the
5

6
00:00:19,620 --> 00:00:23,210
solution, so that you can do it along with me.
6

7
00:00:23,210 --> 00:00:28,410
Now you can see that to turn this into this there's still a little bit of work that we have to do in
7

8
00:00:28,410 --> 00:00:35,370
terms of styling, and the first thing is to change the call to action section to a different background
8

9
00:00:35,370 --> 00:00:36,190
color.
9

10
00:00:36,210 --> 00:00:44,700
So let's go ahead and do that now. So, you can see that we've got this call to action or CTA section, and
10

11
00:00:44,790 --> 00:00:48,330
this is the id that we can use to target that section.
11

12
00:00:48,330 --> 00:00:50,240
So if we scroll all the way down,
12

13
00:00:50,250 --> 00:00:59,690
but just before the media queries, we can add in a new section called the CTA section and we're going
13

14
00:00:59,690 --> 00:01:02,480
to comment it out and this is our new section.
14

15
00:01:02,480 --> 00:01:10,640
Now I'm going to target the cta id, and I'm going to change the background color to that pinkish red
15

16
00:01:10,640 --> 00:01:15,000
color that we had before, which is ff4c68.
16

17
00:01:15,110 --> 00:01:18,480
So let's hit save and check it out.
17

18
00:01:18,620 --> 00:01:18,850
All right.
18

19
00:01:18,860 --> 00:01:19,700
Looks good.
19

20
00:01:19,700 --> 00:01:26,810
Now we mentioned previously that whenever a background is colored we want the text to be white and not
20

21
00:01:26,810 --> 00:01:29,870
black because it doesn't look contrasty enough.
21

22
00:01:29,870 --> 00:01:34,820
So let's go ahead and add some text color and we're going to make it fff.
22

23
00:01:35,120 --> 00:01:38,390
And now we have white text instead of black text.
23

24
00:01:38,450 --> 00:01:47,090
Now currently our content of this section is pretty much stuck to the left and the top and the bottom
24

25
00:01:47,180 --> 00:01:49,570
and it's all too squished together.
25

26
00:01:49,640 --> 00:01:55,850
So let's give this section some padding like what we've done for all the previous sections. So we're
26

27
00:01:55,850 --> 00:02:03,110
going to use the same amount of padding as we had in, say, the carousel, or in the features section, which
27

28
00:02:03,290 --> 00:02:10,900
is 7 percent top and bottom and 15 percent left and right.
28

29
00:02:10,940 --> 00:02:14,420
So now we’ve got a little bit of padding. Looking nice,
29

30
00:02:14,420 --> 00:02:15,010
right?
30

31
00:02:15,020 --> 00:02:18,940
So the next thing that you might want to address is the heading.
31

32
00:02:19,070 --> 00:02:22,030
It's far too small for a call to action.
32

33
00:02:22,040 --> 00:02:25,420
I mean as a call to action you want to grab people's attention, right,
33

34
00:02:25,450 --> 00:02:27,150
not be like an afterthought.
34

35
00:02:27,260 --> 00:02:34,210
So let's go ahead and change the style of that heading. So we've got an h3 here.
35

36
00:02:34,430 --> 00:02:43,190
But you can see we've already styled the h3 for the feature titles up here, so we can't really override
36

37
00:02:43,190 --> 00:02:43,640
this.
37

38
00:02:43,640 --> 00:02:45,030
So what do we do?
38

39
00:02:45,050 --> 00:02:47,700
Let's give it a custom class.
39

40
00:02:47,750 --> 00:02:54,650
Now the class I'm going to give it is cta-heading, and I'm just going to copy that over to here so that
40

41
00:02:54,650 --> 00:02:56,850
I can target it down here,
41

42
00:02:56,990 --> 00:03:03,860
cta-heading, and remember this is a class whereas this is an id. So I know I'm getting repetitive but
42

43
00:03:03,860 --> 00:03:06,470
it's really important you don't mess this up.
43

44
00:03:06,470 --> 00:03:13,220
All right so now we've got our cta-heading and we want to change our font-family to probably the
44

45
00:03:13,220 --> 00:03:18,040
heaviest Montserrat that we can find which is Montserrat-Black.
45

46
00:03:18,210 --> 00:03:25,580
And this is the same font as the one that we've got up here as our heading,
46

47
00:03:25,880 --> 00:03:32,280
so Montserrat-Black. And also we're going to change the font-size to maybe 3.5rem
47

48
00:03:32,330 --> 00:03:38,010
and the line-height to 1.5.
48

49
00:03:38,440 --> 00:03:41,200
So let's hit save, let's refresh.
49

50
00:03:41,290 --> 00:03:43,030
Massive call to action.
50

51
00:03:43,150 --> 00:03:44,190
Looks pretty good.
51

52
00:03:44,320 --> 00:03:48,470
So you'll notice that this looks very awkward being left aligned.
52

53
00:03:48,470 --> 00:03:55,990
So let's go ahead and fix that and go into the parent section and change text-align inside the parent
53

54
00:03:55,990 --> 00:03:58,470
container to be center.
54

55
00:03:58,480 --> 00:04:03,540
And now we have centered items and centered text. Next.
55

56
00:04:03,580 --> 00:04:04,890
What's the next thing that looks weird?
56

57
00:04:04,900 --> 00:04:07,650
Well the download buttons look pretty weird.
57

58
00:04:07,870 --> 00:04:10,600
So let's apply some Bootstrap styles.
58

59
00:04:10,600 --> 00:04:22,720
So let's add a class and let's give it the btn style and then btn-lg, then bth-dark, and then we
59

60
00:04:22,720 --> 00:04:31,510
will just simply copy and paste this icon from up here which is the Apple icon and we're going to put
60

61
00:04:31,510 --> 00:04:32,540
it here.
61

62
00:04:32,560 --> 00:04:37,910
And then again I'm going to copy the Google Play icon.
62

63
00:04:37,930 --> 00:04:41,900
Now of course you can go on to Font Awesome and get all of this fresh,
63

64
00:04:41,950 --> 00:04:46,560
but it's exactly the same so why not just reuse the code that we've already got?
64

65
00:04:46,780 --> 00:04:52,440
So now let's hit save and let's add a class to the second button.
65

66
00:04:52,510 --> 00:04:57,390
And this again is going to be btn, btn-lg, btn-light.
66

67
00:04:57,390 --> 00:04:59,400
So hit save and refresh.
67

68
00:04:59,450 --> 00:04:59,850
Nice.
68

69
00:04:59,860 --> 00:05:01,950
We've got some nice buttons now.
69

70
00:05:01,950 --> 00:05:06,880
They're a little bit too close to each other and too close to the heading.
70

71
00:05:07,030 --> 00:05:11,060
So we need to give it some custom CSS styles.
71

72
00:05:11,080 --> 00:05:16,510
Now you would notice that we've already applied some styles up at the top to give it a nice amount of
72

73
00:05:16,510 --> 00:05:20,530
separation and a bit of margin away from anything else.
73

74
00:05:20,530 --> 00:05:28,720
So, what if we just borrowed the class that we used up here which was download-button, and we simply
74

75
00:05:28,720 --> 00:05:37,850
straight up just applied it over here as is? Now let’s hit save, refresh, and that looks pretty good.
75

76
00:05:37,870 --> 00:05:41,230
So now we're pretty much done with the CTA section.
76

77
00:05:41,290 --> 00:05:43,790
All we have is the footer that's left.
77

78
00:05:43,960 --> 00:05:49,090
So the footer of course again needs a whole load of padding and we're going to use the same amount of
78

79
00:05:49,090 --> 00:05:54,930
padding as we had before to give the content the same amount of separation from the edges.
79

80
00:05:54,940 --> 00:06:02,110
So let's go ahead and check that we've got the footer with an id called footer so we can target it down
80

81
00:06:02,110 --> 00:06:02,700
here.
81

82
00:06:02,770 --> 00:06:11,990
And I'm just going to add the footer section comment and then I'm going to target the footer id and
82

83
00:06:11,990 --> 00:06:18,370
I'm going to give it a padding of, you got it, 7 percent and 15 percent.
83

84
00:06:18,380 --> 00:06:22,700
All right. So we now actually have a footer, which is pretty sweet.
84

85
00:06:22,790 --> 00:06:24,570
Again content needs to be centered.
85

86
00:06:24,590 --> 00:06:30,900
So let's add text-align center, centering our text.
86

87
00:06:31,130 --> 00:06:35,490
And finally we need to add some social icons from Font
87

88
00:06:35,510 --> 00:06:36,140
Awesome.
88

89
00:06:36,200 --> 00:06:37,640
So let's head over to Font
89

90
00:06:37,640 --> 00:06:38,230
Awesome
90

91
00:06:38,260 --> 00:06:39,950
/ Icons,
91

92
00:06:40,100 --> 00:06:44,930
and we're going to grab Facebook, Twitter,
92

93
00:06:48,260 --> 00:06:53,730
Instagram and envelope.
93

94
00:06:53,770 --> 00:06:54,130
All right.
94

95
00:06:54,200 --> 00:06:54,810
Nice.
95

96
00:06:54,810 --> 00:07:08,470
So let's copy Facebook and put it in here into the footer. Then next one is Twitter.
96

97
00:07:08,680 --> 00:07:09,100
All right.
97

98
00:07:09,110 --> 00:07:14,020
Next one is Instagram.
98

99
00:07:14,150 --> 00:07:18,090
And finally our mailing option.
99

100
00:07:18,090 --> 00:07:18,860
All right. Cool.
100

101
00:07:18,870 --> 00:07:23,260
So now let's refresh our web site, and we now have icons.
101

102
00:07:23,480 --> 00:07:24,300
Pretty cool.
102

103
00:07:24,410 --> 00:07:30,530
Now the icons are a little bit too close to each other at the moment so we need a little bit of margin
103

104
00:07:30,890 --> 00:07:36,500
around each of them just to give it a bit of separation and not look so bunched up,
104

105
00:07:36,520 --> 00:07:39,430
and it’ll be difficult to click on individual ones at the moment.
105

106
00:07:39,500 --> 00:07:48,930
So let's give each of these icons another class. So I’m holding down the option button to engage the Sublime
106

107
00:07:48,980 --> 00:07:50,420
like selection,
107

108
00:07:50,420 --> 00:07:53,500
and I'm going to call this social-icon.
108

109
00:07:53,500 --> 00:07:54,130
All right.
109

110
00:07:54,290 --> 00:08:04,340
So now I can go into my styles.css and I can target the social-icon and give it a margin of, say,
110

111
00:08:04,670 --> 00:08:08,950
20 pixels top and bottom, 10 pixels left and right.
111

112
00:08:09,050 --> 00:08:09,360
All right.
112

113
00:08:09,380 --> 00:08:12,230
Now let's hit refresh and sweet.
113

114
00:08:12,410 --> 00:08:14,040
We have a footer.
114

115
00:08:14,390 --> 00:08:20,560
Now, if you look through your web site, this is a beauty of a startup web site.
115

116
00:08:20,570 --> 00:08:27,220
You could probably launch TinDog right now and start using this beautiful web site.
116

117
00:08:27,260 --> 00:08:31,820
It does not look out of place compared to any of the other startup web sites
117

118
00:08:31,850 --> 00:08:33,020
that you see these days.
118

119
00:08:33,020 --> 00:08:35,210
So I think we did a pretty good job.
119

120
00:08:35,260 --> 00:08:42,560
Now just to finish off the last thing I want to enable is to make these navigation buttons work and
120

121
00:08:42,590 --> 00:08:47,380
I want to show you why it is that we gave each section an id.
121

122
00:08:47,480 --> 00:08:55,910
So one of the things that you can do is you can use a href that's not a URL and it's not a page but
122

123
00:08:56,030 --> 00:08:57,380
it's an id.
123

124
00:08:57,400 --> 00:09:03,910
So because ids are unique, then what you can do here in the href for that button,
124

125
00:09:04,070 --> 00:09:12,110
so all the way at the top here in the button for Contact, you see that we left the href for the anchor
125

126
00:09:12,110 --> 00:09:13,400
tag blank.
126

127
00:09:13,400 --> 00:09:18,980
But what I'm going to put here now is I'm going to put in the id. So, remember, ids have to start with
127

128
00:09:18,980 --> 00:09:19,940
the pound sign.
128

129
00:09:20,270 --> 00:09:25,670
So you can see that for our footer section we've got an id that's unique, called footer.
129

130
00:09:25,700 --> 00:09:32,570
So if I head back to that anchor tag where I've got the href, if I want to target that section all
130

131
00:09:32,570 --> 00:09:37,550
I have to do is just to put in the pound sign to say that this is an id for an href and then put
131

132
00:09:37,550 --> 00:09:40,160
in the name of the id which is footer.
132

133
00:09:40,330 --> 00:09:47,990
And now if you hit save and refresh then, if I click on Contact, it will scroll all the way down to the
133

134
00:09:47,990 --> 00:09:51,220
footer section where the user can contact me.
134

135
00:09:51,230 --> 00:09:55,410
So let's go ahead and put in the other ones for pricing.
135

136
00:09:55,430 --> 00:09:58,440
So pricing was called pricing.
136

137
00:09:58,550 --> 00:09:59,730
Okay that's easy.
137

138
00:09:59,750 --> 00:10:07,310
So we're going to put in hash tag or pound sign pricing, and then download is of course going to be
138

139
00:10:07,340 --> 00:10:09,800
the cta section, Call To Action.
139

140
00:10:09,800 --> 00:10:12,270
So let's hit save and refresh.
140

141
00:10:12,410 --> 00:10:19,410
Now if we click on Pricing, it goes to pricing, Download, it goes to download, and it's pretty cool.
141

142
00:10:19,430 --> 00:10:27,740
So this is one of the reasons why you would want to use ids sparingly, because they can be really useful
142

143
00:10:27,920 --> 00:10:30,800
when you're trying to set up the navigation of your web site.
143

144
00:10:31,010 --> 00:10:37,010
And if you take a look at GitHub, and if you scroll through the documentation, you can see that each
144

145
00:10:37,010 --> 00:10:40,060
of the headings have a id.
145

146
00:10:40,100 --> 00:10:46,790
So if I right click on this and I hit Inspect, you can see that this one has an id of product-features.
146

147
00:10:46,880 --> 00:10:50,660
So you can see that this is the URL of the web page,
147

148
00:10:50,810 --> 00:10:57,650
and if you put in that pound sign, which stands for, of course, go to this particular id, and then you
148

149
00:10:57,650 --> 00:11:01,940
put in the name on the heading, that it navigates you straight there.
149

150
00:11:01,940 --> 00:11:07,610
So this works in the URL level as well as in the href.
150

151
00:11:07,610 --> 00:11:14,140
So that's yet another reason for why sometimes you see people use ids across their web pages.
151

152
00:11:14,180 --> 00:11:21,250
So in the next lesson we're going to be tidying up this mess that we've made around here in our CSS
152

153
00:11:21,260 --> 00:11:21,920
file.
153

154
00:11:21,920 --> 00:11:26,160
You might have noticed along the way that there's been a lot of code duplication,
154

155
00:11:26,180 --> 00:11:30,050
and, remember that, as a programmer, we're always trying to stay dry,
155

156
00:11:30,050 --> 00:11:30,520
right?
156

157
00:11:30,530 --> 00:11:32,230
Do not repeat yourself.
157

158
00:11:32,360 --> 00:11:38,840
So in the next lesson we're going to look at why we need to refactor our code on a regular basis,
158

159
00:11:38,990 --> 00:11:41,390
and what is the best way of doing that
159

160
00:11:41,420 --> 00:11:45,640
in our case. So for all of that and more, I'll see you on the next lesson.