1
00:00:04,120 --> 00:00:06,690
Hello everyone and welcome back to our bootstrap course.

2
00:00:06,700 --> 00:00:12,160
In this lecture we're gonna be setting up more rows and columns for each service as well as actually

3
00:00:12,160 --> 00:00:21,020
showing all of the services so previously we were not able to see these services here in the console.

4
00:00:21,220 --> 00:00:28,420
But in order to see that all you have to do is remove this full page here from the div because this

5
00:00:28,420 --> 00:00:37,900
class uses you port height of 100 using 100 V H and it looks like Bean has some issues with using viewport

6
00:00:37,900 --> 00:00:43,180
height because if you put height means the compiler has to calculate the viewport height and if you're

7
00:00:43,180 --> 00:00:49,690
using something like G.S. bean which is an online editor then there can be issues with calculating viewport

8
00:00:49,690 --> 00:00:50,440
height.

9
00:00:50,440 --> 00:00:52,340
However if you're using an Ivy.

10
00:00:52,390 --> 00:00:57,670
So an integrated development environment such as brackets or atom or something then you won't have problems

11
00:00:57,670 --> 00:01:02,380
with viewport height but for Japan you may suggest to go ahead and delete that and now in the output

12
00:01:02,410 --> 00:01:10,720
you will see we have here we've added this gift icon as well as service title the service subtitle in

13
00:01:10,780 --> 00:01:13,990
italics and the description so we'll go ahead and hide e-mail.

14
00:01:14,020 --> 00:01:16,010
This is what it would look like on a web page.

15
00:01:16,420 --> 00:01:20,000
And then if we toggle that this is what it would look like on mobile.

16
00:01:20,260 --> 00:01:22,750
Something like this.

17
00:01:22,770 --> 00:01:23,370
OK.

18
00:01:23,650 --> 00:01:31,090
So what you could do is to decrease this image size when it's on mobile because this is quite huge however

19
00:01:31,360 --> 00:01:33,070
because it's an icon right now.

20
00:01:33,250 --> 00:01:39,430
It looks huge but if it was a product image or a service image then we actually would need it to be

21
00:01:39,430 --> 00:01:44,780
full size because a product would have to take up the whole screen for the user to see what it is.

22
00:01:44,800 --> 00:01:51,040
So going to leave it as the size for now as a placeholder icon and then below we have the title and

23
00:01:51,640 --> 00:01:55,560
this title ice tower sized using Bootstrap classes and description.

24
00:01:55,900 --> 00:02:01,750
So in a previous lecture we challenged you to make the two other pages for two more services and let's

25
00:02:01,750 --> 00:02:07,690
go ahead and do that together now to build out some more pages of our Web site.

26
00:02:07,700 --> 00:02:14,170
So we're going to use the exact same structure as we did for the first feature set for the first service.

27
00:02:14,170 --> 00:02:15,740
We're gonna build our second service.

28
00:02:15,790 --> 00:02:20,220
Now make sure this is outside of this first feature.

29
00:02:20,530 --> 00:02:27,700
So you can add a comment here telling you that this is one feature set and each feature set is for its

30
00:02:27,760 --> 00:02:28,760
own product.

31
00:02:28,780 --> 00:02:35,950
So this is the div containing all of the products all products.

32
00:02:35,950 --> 00:02:38,560
So just outside of the first feature we're going to add a second one.

33
00:02:38,560 --> 00:02:47,110
So to do that we're gonna open up another div and this time it's going to be a div class with the same

34
00:02:47,680 --> 00:02:53,510
bootstrap class of row row means that we can put items in there to be columns in a row.

35
00:02:53,520 --> 00:02:58,240
It's going to be another feature set and we're gonna add the painting immediately as well as another

36
00:02:58,240 --> 00:02:59,460
custom class block.

37
00:02:59,470 --> 00:03:06,610
And the custom class block too and we're going to avoid using full page and just use the default height

38
00:03:06,790 --> 00:03:09,360
which will be 100 percent as we set it in this.

39
00:03:09,360 --> 00:03:15,160
Yes yes it will just be its parent's height if we don't give it a height because just has been doesn't

40
00:03:15,160 --> 00:03:20,840
seem to like the viewport height if you're using an idea even you can use viewport height.

41
00:03:20,950 --> 00:03:23,830
So now we have our next feature right set up here.

42
00:03:23,830 --> 00:03:29,520
Let's go ahead and set up block two as our custom class because this is not a bootstrap class.

43
00:03:29,590 --> 00:03:35,560
This is one of our own classes so you can scroll down here and RCA says We have block one to be a background

44
00:03:35,560 --> 00:03:42,250
color of a blue ish and you can add block to to be a background color using one of the colors you've

45
00:03:42,250 --> 00:03:43,300
been using previously.

46
00:03:43,300 --> 00:03:53,050
So background color we can go back up here and use one of these such as this light blue and copy that

47
00:03:53,560 --> 00:03:54,850
and paste it over here.

48
00:03:54,880 --> 00:03:57,850
That way we're using similar colors in our web page.

49
00:03:57,850 --> 00:04:05,380
You want to avoid using many web Pete when many colors on your web page typically two colors two main

50
00:04:05,380 --> 00:04:05,900
colors.

51
00:04:05,910 --> 00:04:12,430
It's a good idea to associate those two with a brand and of course you can have little splotches of

52
00:04:12,430 --> 00:04:17,920
other color for buttons or for inside of images of course but typically for your main design you want

53
00:04:17,920 --> 00:04:20,390
to minimize the number of colors you use.

54
00:04:20,410 --> 00:04:27,610
So now we have this custom class set up block to we can hide the CFS and let's go back to filling in

55
00:04:27,610 --> 00:04:33,790
the second feature set using a similar structure to the first feature that you'll notice in the first

56
00:04:34,600 --> 00:04:40,690
feature at or service we have the icon on the left and the description on the right for the second one

57
00:04:40,690 --> 00:04:42,430
we're going to switch the order.

58
00:04:42,430 --> 00:04:47,650
This is commonly done in web design where you have one product image here and then the next product

59
00:04:47,680 --> 00:04:49,060
image down here on the right.

60
00:04:49,060 --> 00:04:52,480
So we're going to switch the order for our second feature.

61
00:04:52,890 --> 00:04:54,300
We're going to highlight this.

62
00:04:54,340 --> 00:05:00,190
And now here in the free trade I'm going to write in this code so I'm going to have first one column

63
00:05:00,250 --> 00:05:01,230
there will be the text.

64
00:05:01,240 --> 00:05:05,750
So we're doing this in order so be a div class column.

65
00:05:05,880 --> 00:05:10,880
I'm D7 which specifies its size and just go ahead and close that off immediately so we don't forget

66
00:05:11,470 --> 00:05:16,200
you can add a little comment here by copying this comment and putting it here so that we know that this

67
00:05:16,200 --> 00:05:18,350
div is a feature set.

68
00:05:18,810 --> 00:05:19,040
OK.

69
00:05:19,050 --> 00:05:24,570
Now I'm going to add a header too and you're going to say it's a class feature Red heading this is another

70
00:05:24,570 --> 00:05:30,150
bootstrap class that will automatically sell or text and I'm gonna give it some padding on the top and

71
00:05:30,150 --> 00:05:36,430
bottom of five padding is something you often want to include before you can see the output.

72
00:05:36,900 --> 00:05:44,670
And we can add a service title and similarly to the previous threat to add a span class called a font

73
00:05:44,860 --> 00:05:52,710
italic to italicized text using Bootstrap that way we are minimizing our CFS I'm going to put in subtitle

74
00:05:52,710 --> 00:06:00,600
here and then go ahead and close as band tag and let's close the each to tag and let's finally add a

75
00:06:00,960 --> 00:06:06,200
description and it's gonna be lead in the bootstrap class lead will increase the text a little bit I'm

76
00:06:06,200 --> 00:06:12,660
going to say your service description here and let's close that p tag as well.

77
00:06:12,690 --> 00:06:13,120
Okay great.

78
00:06:13,110 --> 00:06:16,640
So we just set up our second feature it detects for it.

79
00:06:16,650 --> 00:06:18,790
We also have to go ahead and pull in an icon.

80
00:06:18,870 --> 00:06:24,270
So go back to the bootstrap icon library and find an icon that you'd like to use.

81
00:06:24,480 --> 00:06:28,290
And go ahead and copy its code just in here.

82
00:06:28,290 --> 00:06:35,640
I'm going to use the bootstrap icon for an eye you'll see a B I B I I.

83
00:06:35,640 --> 00:06:37,720
That is a tongue twister anyway.

84
00:06:37,740 --> 00:06:43,110
This will make an eye on the screen and I'm going to put it inside of another column because remember

85
00:06:43,110 --> 00:06:47,070
this is part of a row which means you must put it into a column.

86
00:06:47,910 --> 00:06:55,710
I'm going to give it padding as well then close off that div you can't put padding onto an SPG you must

87
00:06:55,710 --> 00:06:56,700
put that onto a div.

88
00:06:56,700 --> 00:07:00,170
That's why we have a div that will contain the SPG.

89
00:07:00,200 --> 00:07:00,400
OK.

90
00:07:00,420 --> 00:07:01,190
Great.

91
00:07:01,200 --> 00:07:07,760
That just set up our second column in the row and that's all we need for that second row.

92
00:07:07,830 --> 00:07:13,210
Let's go ahead and look at the output this time and we're not seeing anything yet.

93
00:07:13,210 --> 00:07:15,090
When I hit run just just to check.

94
00:07:15,360 --> 00:07:15,630
No.

95
00:07:15,660 --> 00:07:20,970
OK well let's go ahead and build out some more and see why we're not seeing it yet.

96
00:07:21,870 --> 00:07:24,450
That's fine we'll fix anything if there is an issue.

97
00:07:26,010 --> 00:07:26,310
OK.

98
00:07:26,820 --> 00:07:29,760
So we have a column you have a feature at

99
00:07:32,780 --> 00:07:40,270
not sure why we're not seeing it but it's fine you some real time troubleshooting here mealtime error

100
00:07:40,300 --> 00:07:47,680
handling as long as it's all inside of the services div then we should be fine.

101
00:07:50,150 --> 00:07:54,560
Sometimes if you're missing something in the CFS or if there is just a semicolon missing then it can

102
00:07:54,560 --> 00:07:58,770
completely hide your whole element.

103
00:07:58,820 --> 00:08:00,600
That's why detail is very important.

104
00:08:02,390 --> 00:08:04,200
Okay well we'll find a later and fix it later.

105
00:08:04,200 --> 00:08:09,980
For now let's go ahead and set up our third feature set and then we'll see that.

106
00:08:09,990 --> 00:08:12,870
OK all products great.

107
00:08:12,910 --> 00:08:14,480
Let's set up our third trek.

108
00:08:14,500 --> 00:08:21,200
We're gonna open up a other div following the exact same structure if we tread with the padding a five

109
00:08:21,520 --> 00:08:26,160
gonna block block three and then we're gonna go ahead and close that div.

110
00:08:26,200 --> 00:08:34,090
Now let's go ahead and style block 3 which is the third custom block element that we have here.

111
00:08:34,100 --> 00:08:40,450
Now let's go to a different color and we can use this similar color that we've been using above.

112
00:08:40,680 --> 00:08:46,780
We have this red color we can apply that red color to our block 3 class.

113
00:08:47,800 --> 00:08:48,420
Excellent.

114
00:08:48,430 --> 00:08:48,850
Okay.

115
00:08:48,940 --> 00:08:50,320
It's gonna open output.

116
00:08:50,370 --> 00:08:52,460
See.

117
00:08:52,630 --> 00:08:52,840
Okay.

118
00:08:52,870 --> 00:08:54,730
So we set up the feature red for this one.

119
00:08:54,730 --> 00:09:04,370
Let's go ahead and now fill in the contents the columns for the row.

120
00:09:04,370 --> 00:09:05,420
This will be the final row.

121
00:09:05,420 --> 00:09:08,800
So let's go ahead and set up the call last for the first column.

122
00:09:08,840 --> 00:09:15,620
Now previously we had the icon on the right where if using an image you would have the image on the

123
00:09:15,620 --> 00:09:15,980
right.

124
00:09:16,700 --> 00:09:19,440
And now we're gonna put the third image back on the left.

125
00:09:19,520 --> 00:09:24,060
So we'll have a zigzag structure which is common in design.

126
00:09:24,080 --> 00:09:30,770
Let's add padding immediately and specify that it's a column and close off that div and go ahead and

127
00:09:31,070 --> 00:09:33,670
find another icon or image whatever you prefer.

128
00:09:33,670 --> 00:09:37,010
You can even put a video for this column.

129
00:09:37,010 --> 00:09:40,730
I'm gonna find the icon for a game controller.

130
00:09:40,730 --> 00:09:43,510
Perhaps this is a video game development company.

131
00:09:43,510 --> 00:09:45,740
I'm going to copy that right in here.

132
00:09:45,780 --> 00:09:46,490
OK great.

133
00:09:46,520 --> 00:09:54,620
So now that is inside of my div here and that is all set up there.

134
00:09:54,620 --> 00:09:54,840
OK.

135
00:09:54,860 --> 00:09:55,280
Excellent.

136
00:09:55,310 --> 00:10:05,390
So all we can do also is add any more padding that we might need depending on what the output is often

137
00:10:05,390 --> 00:10:13,250
you add styling afterwards but having the template up first is the best idea that you have the structure

138
00:10:13,250 --> 00:10:20,270
set up because if you start adding styling too early then you might end up changing it at the end.

139
00:10:20,270 --> 00:10:23,180
So you want to avoid styling too much at the beginning.

140
00:10:23,180 --> 00:10:25,960
OK so I have my eye in here.

141
00:10:25,970 --> 00:10:30,610
I'm going to add another column for so I had a comment that this is the end of our third feature right.

142
00:10:31,280 --> 00:10:39,230
And I'm gonna add another column now for my text element and this will follow the exact same structure

143
00:10:39,230 --> 00:10:43,090
that we have appear with this kind of text it up here.

144
00:10:43,190 --> 00:10:48,290
It's useful to type it out when you're just starting to learn because then you'll memorize what the

145
00:10:48,290 --> 00:10:49,580
structure should be like.

146
00:10:49,580 --> 00:10:55,070
You don't have to necessarily memorize all the different classes you will with time but you should memorize

147
00:10:55,700 --> 00:10:57,110
the structure of what it can be.

148
00:10:57,110 --> 00:11:01,510
But all the classes you can look up and I have encourage you to look at more classes as you need them.

149
00:11:01,550 --> 00:11:06,380
You don't have to learn everything off the bat but the best way to learn is to learn as you need it.

150
00:11:06,510 --> 00:11:13,640
Let's set up another header to make this feature it heading and I'll make it with Patty neatly.

151
00:11:13,760 --> 00:11:17,700
We'll call this service title then let's add in a span.

152
00:11:17,990 --> 00:11:26,360
Call this font italic and we'll add another subtitle so following the exact same structure that way

153
00:11:26,360 --> 00:11:28,990
we have several different pages that look the same.

154
00:11:29,030 --> 00:11:32,420
You want to be as consistent as possible throughout your page.

155
00:11:32,480 --> 00:11:35,750
That way your users minimize confusion.

156
00:11:35,950 --> 00:11:42,590
Let's add another description here and this will end up looking extremely neat and aligned because it

157
00:11:42,590 --> 00:11:48,560
is the same structure you'll notice for each of the different pages each service follows the same structure

158
00:11:49,040 --> 00:11:53,840
icon and then information about the product okay.

159
00:11:54,070 --> 00:11:54,340
Great.

160
00:11:54,350 --> 00:11:58,390
So now that is all we need to set up the feature ads.

161
00:11:59,200 --> 00:12:01,760
Let's go ahead and check if we can see them in output.

162
00:12:02,110 --> 00:12:05,250
So so far we're only seeing this one in the output.

163
00:12:05,260 --> 00:12:12,190
So in the next lecture we're gonna go ahead and troubleshoot how we can show the other pages that we

164
00:12:12,190 --> 00:12:14,490
have in our feature sets.

165
00:12:14,500 --> 00:12:17,860
So far we have one in our div and we're gonna show the rest in the next lecture.

166
00:12:17,860 --> 00:12:18,420
Other than that.

167
00:12:18,430 --> 00:12:19,140
Thank you for watching.

168
00:12:19,140 --> 00:12:24,560
You've now set up your first feature at the back end for the other featured feature ads.

169
00:12:24,570 --> 00:12:28,180
Actually this is all front end but my back and I just mean the code behind the Web site.

170
00:12:28,690 --> 00:12:34,030
But this is all front end development back end development would mean using servers to save data from

171
00:12:34,030 --> 00:12:35,430
users.

172
00:12:35,440 --> 00:12:35,650
OK.

173
00:12:35,650 --> 00:12:36,700
Thank you all for watching.

174
00:12:36,730 --> 00:12:40,350
And we're going to see you in the next lecture where we'll continue with this project Cesar.