1
00:00:04,040 --> 00:00:06,600
Hello everyone and welcome back to our bootstrapped course.

2
00:00:06,620 --> 00:00:12,770
In the previous lecture we set up the navigation up here and we have a fixed nav bar here and in this

3
00:00:12,770 --> 00:00:17,210
lecture we're going to be continuing with our same project but we're going to be building next a nav

4
00:00:17,240 --> 00:00:21,260
so that's going to be this services overview can also be called the header.

5
00:00:21,290 --> 00:00:27,410
It's going to be the main section on our page when ever the user logs onto the website or opens the

6
00:00:27,410 --> 00:00:28,380
Web site.

7
00:00:28,400 --> 00:00:33,200
So what we're going to need here is some information about the company and we can put the company logo.

8
00:00:33,200 --> 00:00:35,190
Again what are we going to do first.

9
00:00:35,190 --> 00:00:43,370
Well we have this idea here services overview and what I'm gonna do next is add more information in

10
00:00:43,430 --> 00:00:44,470
this div.

11
00:00:44,570 --> 00:00:51,710
So let's go ahead and give it some classes and we're going to use bootstrap classes to automatically

12
00:00:51,710 --> 00:00:52,910
style our page.

13
00:00:52,910 --> 00:00:55,580
So first we're going to give us some padding.

14
00:00:55,580 --> 00:01:03,470
P Why is padding on the y direction so padding at the top and the bottom of the Element 1 is the minimum

15
00:01:03,650 --> 00:01:11,480
and 5 is the maximum you can set and text center is another class of bootstrap which will center all

16
00:01:11,480 --> 00:01:14,060
the text inside of this div here.

17
00:01:14,090 --> 00:01:20,720
Let's also add some of our own classes now so I'm gonna make a block and a block one as well as a full

18
00:01:20,720 --> 00:01:21,710
page.

19
00:01:21,710 --> 00:01:27,020
So let's go ahead and actually begin styling using our own styling in this lecture because so far we

20
00:01:27,020 --> 00:01:30,590
have only worked with bootstrap styling.

21
00:01:30,650 --> 00:01:37,340
So go ahead and click on S S and close the output to open up our us as tab here and this is where we

22
00:01:37,340 --> 00:01:38,450
can add styling.

23
00:01:38,450 --> 00:01:43,160
Typically when you add CSF styling you always want to styling each [REMOVED] and the body first and you

24
00:01:43,160 --> 00:01:49,310
want to give it a width of 100 percent and a height of 100 percent because whenever you do relative

25
00:01:49,880 --> 00:01:58,070
width and height four elements inside of the each GMO code and inside of the body tag the relative width

26
00:01:58,100 --> 00:02:06,170
and height needs some kind of anchor to base their width and height on and that is the e-mail and body

27
00:02:06,170 --> 00:02:06,930
width and height.

28
00:02:07,010 --> 00:02:12,260
So you need this in order for relative width and height to work as well we can also set the margin to

29
00:02:12,260 --> 00:02:13,290
zero and auto.

30
00:02:13,400 --> 00:02:20,360
This will center any elements by setting the margins to zero on the top and bottom and auto on left

31
00:02:20,360 --> 00:02:20,750
and right.

32
00:02:20,750 --> 00:02:23,170
Which means that the elements will be centered.

33
00:02:23,210 --> 00:02:30,410
Now here we've specified three different types of classes that we're going to set and let's go ahead

34
00:02:30,410 --> 00:02:32,210
and set those right now.

35
00:02:32,210 --> 00:02:33,520
First I'll start with block.

36
00:02:33,560 --> 00:02:37,950
So this is how you style with our custom CSA styling.

37
00:02:37,970 --> 00:02:43,110
These are not reserved words in bootstrap which means we're now styling with our own CSX.

38
00:02:43,280 --> 00:02:46,910
So we're using the DOT to call it by the class and we're calling the class name.

39
00:02:47,090 --> 00:02:51,950
And here's where we can put any styling typically you want to set the color of the text and the color

40
00:02:51,980 --> 00:03:00,080
of the background for these elements because for every one you want to have a default.

41
00:03:00,080 --> 00:03:03,080
So we're gonna make the default background color to be black.

42
00:03:03,080 --> 00:03:09,740
For example you can use words like white and black for many different colors or you can use the hex

43
00:03:09,740 --> 00:03:15,800
code representations which we will be using as well which is a way to represent colors.

44
00:03:15,800 --> 00:03:17,580
We're also going to set the padding.

45
00:03:17,720 --> 00:03:23,780
Typically it's recommended to set sizes with percentages rather than pixels because this way you make

46
00:03:23,780 --> 00:03:26,910
it friendly for all screen sizes.

47
00:03:27,000 --> 00:03:27,250
Okay.

48
00:03:27,260 --> 00:03:29,480
So this is what I'm going to have as a styling for the block.

49
00:03:29,480 --> 00:03:33,440
So as you can imagine this represents a block on our Web page.

50
00:03:34,070 --> 00:03:39,560
So one big block of it element containing other elements.

51
00:03:39,770 --> 00:03:44,030
We also have block one and we're going to have several different numbers of blocks because we're going

52
00:03:44,030 --> 00:03:48,250
to have different blocks with different colors on our Web site.

53
00:03:48,810 --> 00:03:50,110
And do that.

54
00:03:50,120 --> 00:03:52,020
So let's go ahead and style block 1 as well.

55
00:03:52,020 --> 00:04:00,650
We're going to call it similarly by its class name and the dot here and let's give block one a color.

56
00:04:00,680 --> 00:04:08,620
So we're going to give it background color 3 to 4 3 7 6 and this is a dark blue.

57
00:04:08,660 --> 00:04:11,350
So let's go ahead and look at what we've done so far in the output.

58
00:04:12,850 --> 00:04:16,450
Okay you're not seeing anything in the output yet so let's go ahead and check this out.

59
00:04:16,490 --> 00:04:16,660
Yes.

60
00:04:16,700 --> 00:04:22,780
So we need to make sure that these double quotation marks are after all of these class names.

61
00:04:23,150 --> 00:04:26,750
So each of these are separate classes but they're not separated by any commas.

62
00:04:26,750 --> 00:04:32,430
They're just separated by a space and they all have to be contained in these double quotation marks.

63
00:04:32,570 --> 00:04:36,950
So we can go ahead and soon we'll be seeing some output in our output.

64
00:04:37,640 --> 00:04:37,900
OK.

65
00:04:37,910 --> 00:04:41,640
So we've set the block back 1 in full page.

66
00:04:41,870 --> 00:04:44,930
Now when we put content in here then we're gonna see some action.

67
00:04:44,970 --> 00:04:47,880
Let's go ahead and go back to CFS.

68
00:04:47,960 --> 00:04:48,200
OK.

69
00:04:48,230 --> 00:04:51,580
So we've set a background color we also added a full page here.

70
00:04:51,600 --> 00:04:56,870
This is gonna be a class that will set the height of our block because right now we just have the height

71
00:04:56,870 --> 00:05:02,060
of the body as you see but we haven't set the height of this element because it contains no content

72
00:05:02,350 --> 00:05:03,580
its height is zero.

73
00:05:03,580 --> 00:05:08,730
So to set its height you can call the full page class by its class name and then you can set its height.

74
00:05:08,850 --> 00:05:10,860
We can set it to one hundred v each.

75
00:05:10,910 --> 00:05:18,190
No I said it's useful to use percentages for response responsibility or percentages means a percent

76
00:05:18,520 --> 00:05:19,360
of something.

77
00:05:19,360 --> 00:05:27,130
So in terms of padding it's this percent of its width and if you were to set the height using percentage

78
00:05:27,130 --> 00:05:34,350
it would be to the percentage of the closest parent that has a set height.

79
00:05:34,360 --> 00:05:41,260
So in this case it would be of the body in our case we want to set it to be 100 of the viewport.

80
00:05:41,260 --> 00:05:48,730
This the H stands for viewport height so 100 V H means you are setting it to 100 of the viewport height

81
00:05:48,960 --> 00:05:52,270
the viewport is the window.

82
00:05:52,270 --> 00:05:56,950
There's a slight difference between viewport and window but it's not important for our same purposes.

83
00:05:56,950 --> 00:05:57,190
OK.

84
00:05:57,190 --> 00:06:01,000
So you can set the height this way and go ahead and check the output.

85
00:06:02,710 --> 00:06:07,420
OK we'll be seeing some soon we just have to add more to the H channel.

86
00:06:07,510 --> 00:06:14,280
So let's go ahead and close off the CFS there for now and let's start adding more elements to our div

87
00:06:14,290 --> 00:06:16,110
here.

88
00:06:16,120 --> 00:06:16,410
OK.

89
00:06:16,420 --> 00:06:23,800
So what we're going to do here is have the company logo as well as the company's name and some information

90
00:06:23,800 --> 00:06:25,450
about it.

91
00:06:25,450 --> 00:06:29,490
So we're going to do first is add that logo so we can scroll back up here.

92
00:06:29,500 --> 00:06:36,760
We have the logo already in here and copy that and then scroll back down and just paste it right into

93
00:06:36,760 --> 00:06:38,420
here.

94
00:06:38,440 --> 00:06:43,570
So now we have our logo contained in here and we want to add a bit more padding to this logo but we'll

95
00:06:43,570 --> 00:06:44,410
do that later.

96
00:06:44,410 --> 00:06:46,310
You can have the output here.

97
00:06:46,310 --> 00:06:48,780
See when we finally see it.

98
00:06:50,490 --> 00:06:51,270
OK.

99
00:06:51,280 --> 00:06:52,210
Should be seeing it soon

100
00:06:54,840 --> 00:06:57,100
sometimes there's a hiccup with GSP.

101
00:06:57,870 --> 00:07:00,480
OK so now we have our logo in here.

102
00:07:00,480 --> 00:07:07,650
We're also going to put in our company name so as to do that we can open in each one tag H1 means header

103
00:07:07,650 --> 00:07:13,950
one and it means this is the most important text on the page in terms of SEO.

104
00:07:14,040 --> 00:07:17,040
Typically you only have one each one per website.

105
00:07:17,040 --> 00:07:23,700
Otherwise you could have SEO difficulties but each one means it would be the largest text and it will

106
00:07:23,700 --> 00:07:25,380
be treated as the most important text.

107
00:07:25,380 --> 00:07:28,410
Typically you want to have it something that's very SEO friendly.

108
00:07:28,530 --> 00:07:35,820
We can give it some pattern using the bootstrap padding class and put company name here and close off

109
00:07:35,820 --> 00:07:37,860
at each one tag and you'll see the output.

110
00:07:37,860 --> 00:07:42,650
We now have company name and we also have our logo up here.

111
00:07:42,660 --> 00:07:50,190
But there's a bit of spacing error here in terms of the icon is too high up so we can add some padding

112
00:07:50,190 --> 00:07:56,340
to that and you can't add bootstrap padding to an SPG but what you can do is put the SPG into its own

113
00:07:56,340 --> 00:07:57,360
div.

114
00:07:57,540 --> 00:08:03,780
So we've already added a bit of padding to the services overview div and we can add more either through

115
00:08:04,080 --> 00:08:12,270
our custom to assess or we can add it through this bootstrap class and can close off that div and you

116
00:08:12,270 --> 00:08:19,920
can indent this for clean code and if you pull out the output now you're seeing this icon is central

117
00:08:20,550 --> 00:08:25,380
better in terms of alignment on the page there's been more padding here and we have a company name and

118
00:08:25,380 --> 00:08:31,650
if you try to scroll down the page you'll notice it's only the size of one viewport and it's only the

119
00:08:31,650 --> 00:08:35,380
size of one window as we specified.

120
00:08:35,390 --> 00:08:38,480
OK go out and check back here.

121
00:08:38,850 --> 00:08:41,500
Now I'm going to try to change this back.

122
00:08:41,580 --> 00:08:43,430
OK.

123
00:08:43,530 --> 00:08:45,050
Now it's showing you the background color.

124
00:08:45,060 --> 00:08:46,600
Great.

125
00:08:46,680 --> 00:08:51,570
Not sure what the issue was there but now it's showing us the background color which we also added to

126
00:08:51,570 --> 00:08:58,710
be this blue and you'll see now that we have a background color we can also see the roundness of our

127
00:08:59,070 --> 00:09:03,990
navigation here so you'll see there's the rounded corner of our navigation.

128
00:09:03,990 --> 00:09:05,180
We can have that or we can remove it.

129
00:09:05,190 --> 00:09:07,380
I'm going to remove it because it looks better without it.

130
00:09:07,530 --> 00:09:13,860
So just right here you have when you really have the NAV class just move around it and you'll see those

131
00:09:13,860 --> 00:09:18,780
rounded corners will disappear but that is a useful class of bootstrap even though we don't need it

132
00:09:18,780 --> 00:09:20,530
for this website.

133
00:09:20,560 --> 00:09:20,780
OK.

134
00:09:20,810 --> 00:09:28,760
So we have the icon as our logo standard and we have the company name as our place holder for now.

135
00:09:28,770 --> 00:09:32,410
This is what our website would look like on mobile.

136
00:09:32,820 --> 00:09:34,530
And now let's go ahead and add a description.

137
00:09:34,560 --> 00:09:39,630
So we're going to add that just below the company name just below this H1 here.

138
00:09:39,630 --> 00:09:44,260
We're going to put in a P and let's make this a class lead.

139
00:09:44,340 --> 00:09:47,640
This will make the text a bit larger.

140
00:09:48,090 --> 00:09:52,440
And it's a bootstrap class again which means we don't have to put any of our own styling.

141
00:09:52,610 --> 00:10:02,550
Let's say something like put your company description here with calls to action and an incentive to

142
00:10:02,550 --> 00:10:06,450
sign up to your newsletter or contact you.

143
00:10:06,450 --> 00:10:09,180
So we're writing a placeholder for a company here.

144
00:10:09,210 --> 00:10:14,550
So if a company were to hire you as a designer then you could fill us in with their information and

145
00:10:14,550 --> 00:10:24,870
you'll see some text has been added here and we're getting a bit of an issue here with the with the

146
00:10:24,870 --> 00:10:25,680
text being cut off.

147
00:10:25,680 --> 00:10:30,090
But we're going to fix that nor a suite to see what happens when we remove the lead class.

148
00:10:30,300 --> 00:10:33,070
You'll see the text gets a bit smaller.

149
00:10:33,300 --> 00:10:38,950
So it's up to you if you want it to be bigger or smaller can have it bigger for now.

150
00:10:39,020 --> 00:10:39,300
OK.

151
00:10:39,330 --> 00:10:39,650
Great.

152
00:10:40,620 --> 00:10:47,130
So let's go ahead and go back to the CFS here and check what would happen if we removed this padding

153
00:10:47,310 --> 00:10:55,050
percent here and you can see just a bit of padding as a rule but this doesn't fix our text error here.

154
00:10:55,470 --> 00:10:58,830
It's being over flown out of the box.

155
00:10:58,860 --> 00:11:00,680
We're going to have to fix that as well.

156
00:11:00,690 --> 00:11:02,340
No worries we will.

157
00:11:02,460 --> 00:11:07,480
This is what the page looks like so far in our preview.

158
00:11:07,530 --> 00:11:08,530
OK.

159
00:11:08,700 --> 00:11:12,920
Let's go ahead and toggle the output of it again.

160
00:11:12,990 --> 00:11:17,380
So now we have our company name and a company description.

161
00:11:17,430 --> 00:11:23,760
Let's go ahead and also add a button that will allow the user to continue onto the page somewhere.

162
00:11:24,060 --> 00:11:32,340
So perhaps we want to bring them down the page into this idea of future products carousel.

163
00:11:32,340 --> 00:11:39,080
Well we can add a button with using the button class or we can just add a link.

164
00:11:39,210 --> 00:11:45,000
So we're going to add a link and then add the bootstrap button class onto it.

165
00:11:45,000 --> 00:11:49,740
So sometimes you see people making a button tag like this which is fine.

166
00:11:49,740 --> 00:11:57,350
We are going to use the anchor tag in our case so a trip equals hashtags featured products carousel

167
00:11:57,380 --> 00:11:58,710
which is next.

168
00:11:58,730 --> 00:12:02,150
Coming up and we're going to add a button.

169
00:12:02,600 --> 00:12:05,800
So this is the link to where the button will link to.

170
00:12:05,900 --> 00:12:09,180
And now it's make it a button by adding a bootstrap button class.

171
00:12:09,510 --> 00:12:14,230
So we're going to say button button primary.

172
00:12:14,450 --> 00:12:22,490
So these are two bootstrap classes that will create a button for you button and button primary button

173
00:12:22,490 --> 00:12:25,390
primary is the coloring in the styling of the button.

174
00:12:25,400 --> 00:12:26,720
It will make a blue button.

175
00:12:26,850 --> 00:12:30,840
There is also button secondary which will make a different color button.

176
00:12:30,830 --> 00:12:35,330
There are made different types of buttons which you can find in the blue stripe documentation and depending

177
00:12:35,330 --> 00:12:39,270
on what you need you can use different button classes.

178
00:12:39,320 --> 00:12:43,910
You can also style the buttons yourselves to override the bootstrap styling.

179
00:12:44,000 --> 00:12:49,610
We're also going to add margin of 5 and Y means margin on the y axis.

180
00:12:49,610 --> 00:12:52,820
So that means margin at the top and the bottom of the element.

181
00:12:52,910 --> 00:12:56,600
And similarly to padding the minimum is one and the maximum is five.

182
00:12:57,230 --> 00:13:05,630
Let's set the padding on the X to for key X means padding on the x axis which means on the left and

183
00:13:05,630 --> 00:13:10,250
right of the element could also set padding y to 2.

184
00:13:10,250 --> 00:13:15,290
So this is adding some margin and padding to the button itself.

185
00:13:15,350 --> 00:13:21,890
So it will actually change the button size because padding is inside of the element whereas margin is

186
00:13:21,890 --> 00:13:24,000
outside of the element.

187
00:13:24,020 --> 00:13:24,280
OK.

188
00:13:24,290 --> 00:13:31,070
Now we have the anchor setup with the link as well as the button class which will styled this button

189
00:13:31,070 --> 00:13:32,210
for us.

190
00:13:32,210 --> 00:13:36,950
We actually need the text to be inside the button now so what text do we want to be displayed inside

191
00:13:36,950 --> 00:13:37,700
the button.

192
00:13:37,790 --> 00:13:42,700
We can have something like learn more with an arrow.

193
00:13:42,890 --> 00:13:44,630
So I just googled an arrow.

194
00:13:44,630 --> 00:13:46,670
You can Google this arrow and find it if you'd like.

195
00:13:46,670 --> 00:13:54,990
Or you can add an icon here as you learn more with an arrow and you have to close off this anchor tag.

196
00:13:55,040 --> 00:14:03,130
You also have to close off that p tag because this is all actually this is a new p tag.

197
00:14:03,240 --> 00:14:12,670
We can make a new p tag here to contain this link but we will try without it for now.

198
00:14:13,280 --> 00:14:15,980
OK let's go ahead and open the output again.

199
00:14:16,000 --> 00:14:18,040
We should be seeing a button now.

200
00:14:18,080 --> 00:14:18,320
OK.

201
00:14:18,350 --> 00:14:22,510
So we're seeing some interesting finding here which we're gonna have to work on.

202
00:14:24,230 --> 00:14:25,430
But we are seeing a bun here.

203
00:14:25,430 --> 00:14:27,610
So just try and put it into a pea.

204
00:14:27,620 --> 00:14:29,690
It could be the issue sometimes you have to put anchors into.

205
00:14:29,720 --> 00:14:29,950
Yep.

206
00:14:29,980 --> 00:14:30,340
OK.

207
00:14:30,440 --> 00:14:38,300
So we have to put our anchor into a p tag as you can see this isn't always the case but when you are

208
00:14:38,660 --> 00:14:45,080
making just an anchor here like this with a button of bootstrap you want to put it into its own paragraph

209
00:14:45,950 --> 00:14:49,550
because we're using anchor not a button like this.

210
00:14:50,470 --> 00:14:56,600
OK it's opening output again that's open output again and see what we have so far.

211
00:14:56,600 --> 00:15:04,370
So now we have a button and we're still getting a bunch of margin down here and we're going to have

212
00:15:04,370 --> 00:15:10,000
to fix that but I as we as we add more elements this will clear this White part here.

213
00:15:10,040 --> 00:15:11,000
This is we have so far.

214
00:15:12,170 --> 00:15:12,510
OK.

215
00:15:12,980 --> 00:15:17,480
Let's open each again and hide output a little limit.

216
00:15:18,320 --> 00:15:18,860
OK great.

217
00:15:18,890 --> 00:15:27,800
So what we've done so far is we have now set up our NAV services overview and we've added an icon a

218
00:15:27,800 --> 00:15:34,020
company name with our header one which is good for SEO as well as the company description.

219
00:15:34,070 --> 00:15:40,160
You can also make this in each two if you like because each two is just below each one and it means

220
00:15:40,160 --> 00:15:41,490
the slightly less important.

221
00:15:41,690 --> 00:15:44,720
But it's still important in terms of SEO.

222
00:15:44,720 --> 00:15:47,660
So it's another option.

223
00:15:47,660 --> 00:15:53,110
Typically headers are reserved for titles of sections.

224
00:15:53,150 --> 00:15:54,650
So we're going to leave that as P for now

225
00:15:57,430 --> 00:16:03,320
ok great and make sure all your closing tags match their opening tags.

226
00:16:03,370 --> 00:16:09,460
Other than that Congratulations everyone you just set up the NAV of your site this year known as the

227
00:16:09,460 --> 00:16:14,860
NAV in the next lecture I'm going to be continuing and make our next page so each page that we will

228
00:16:14,860 --> 00:16:20,860
have will be the size of one viewport height and as the user clicks on each button there will be scroll

229
00:16:20,860 --> 00:16:25,430
down to that part of the page want that.

230
00:16:25,450 --> 00:16:28,030
Thank you all for watching and we'll see you in the next lecture.