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

2
00:00:06,740 --> 00:00:10,960
In this lecture we're gonna be adding a contact form just to the bottom of this website here below.

3
00:00:10,970 --> 00:00:12,410
All of these services.

4
00:00:12,500 --> 00:00:18,680
Let's go ahead and open our each Jamal and close our output tab and scroll down here to where we have

5
00:00:18,800 --> 00:00:23,600
our contact forms should be at the bottom of our e-mail.

6
00:00:23,600 --> 00:00:27,800
Yes right here we have our contact form just above the footer.

7
00:00:27,800 --> 00:00:29,660
So let's go ahead and start building this out.

8
00:00:29,660 --> 00:00:33,890
Currently we have the ideas contact and a class of contact which is fine.

9
00:00:33,920 --> 00:00:35,170
This is a bootstrap class.

10
00:00:35,180 --> 00:00:39,230
And we can also add a class and B four and five.

11
00:00:39,230 --> 00:00:44,720
Now we will add margin and padding of 4 5 and 5.

12
00:00:45,230 --> 00:00:49,070
So go ahead and add those bootstrap classes.

13
00:00:49,070 --> 00:00:57,380
And now we are going to add a heading that will say contact us and then a prompt for the user to enter

14
00:00:57,380 --> 00:01:00,140
in their information in a message to your company.

15
00:01:00,150 --> 00:01:02,750
So let's go ahead and make a header to first.

16
00:01:02,750 --> 00:01:06,560
You can make it a header to the class each to a responsive.

17
00:01:07,010 --> 00:01:12,540
This is a bootstrap class as well as font weight bold and text center.

18
00:01:12,560 --> 00:01:17,360
This will allow you to Bolden and center the text without using any CFS as well.

19
00:01:17,360 --> 00:01:23,080
Let's add some margin to the top and bottom with the integer 4.

20
00:01:23,090 --> 00:01:26,390
And we'll see how that looks and if we need to adjust this week we'll adjust it as well.

21
00:01:26,390 --> 00:01:28,090
Let's go ahead and close at each to tag.

22
00:01:28,250 --> 00:01:30,410
And then we can add some taxing.

23
00:01:30,560 --> 00:01:31,950
Contact us.

24
00:01:32,030 --> 00:01:34,730
So now we have the header set up for the contact form.

25
00:01:34,760 --> 00:01:40,550
Let's go ahead and add a description so I can use a paragraph tacked openness in the center of the text

26
00:01:40,610 --> 00:01:42,820
with a bootstrap class tech center.

27
00:01:42,880 --> 00:01:46,310
You're gonna make it responsive by writing w responsive.

28
00:01:46,310 --> 00:01:54,710
Also going to give it the margin on the left and right to auto which will center this paragraph.

29
00:01:54,950 --> 00:01:59,340
And we're also going to give it the margin border of five.

30
00:01:59,400 --> 00:02:06,960
And now we can put in some text here into this paragraph tag as do you have any questions.

31
00:02:07,220 --> 00:02:14,870
Contact us and our team will be happy to help within two business days.

32
00:02:14,870 --> 00:02:20,840
So that is a prompt to the user to enter some message to your company and now below that we can add

33
00:02:21,230 --> 00:02:23,650
our contact form input fields.

34
00:02:23,720 --> 00:02:29,380
So we're gonna have all this be inside of rows and columns because those will be responsive.

35
00:02:29,450 --> 00:02:36,410
So let's go ahead and open up a new row with div class equals row and go ahead and close it off immediately

36
00:02:37,270 --> 00:02:38,170
so that we don't forget.

37
00:02:38,210 --> 00:02:46,940
And now we're going to set up a grid column and say div class equals column and the nine and B and D

38
00:02:47,030 --> 00:02:55,760
0 will remove any borders and outlines and then we'll set the margin four to five and we can go ahead

39
00:02:55,760 --> 00:02:58,070
and close off that div as well.

40
00:02:58,310 --> 00:03:03,230
And now we're going to open up a form using the HMO form element and we're gonna give it the idea of

41
00:03:03,230 --> 00:03:12,080
contact form and its name will be contact form as well as we're gonna set the action of what will happen

42
00:03:13,400 --> 00:03:19,340
when the user fills in the contact form and that will be we'll send it off to mailed out peach Pete.

43
00:03:19,580 --> 00:03:23,510
So we're not gonna be working with backend in this course but if you were a front end developer and

44
00:03:23,510 --> 00:03:28,070
you were handing off your design to a back end developer then you're setting up this action of what

45
00:03:28,070 --> 00:03:33,350
will happen when the user fills in the end perform which is typically that the data that is put into

46
00:03:33,350 --> 00:03:39,740
the form is sent to a database which would be held in this mail that peach file and then I'm gonna set

47
00:03:39,740 --> 00:03:42,230
the method to equal post.

48
00:03:42,230 --> 00:03:48,290
Now this is again part of the back end of what would happen a post request would be sent with the data.

49
00:03:48,380 --> 00:03:52,490
Now you don't have to know this is necessarily because where does the front end course.

50
00:03:52,820 --> 00:03:58,720
But this is what is typically also set up with every contact form in order to at least set up the front

51
00:03:58,730 --> 00:04:00,930
end part of collecting data.

52
00:04:00,950 --> 00:04:06,020
Because if you don't collect data like this then the contact form is useless the data will just disappear

53
00:04:06,050 --> 00:04:11,750
as soon as user hits send it it can go ahead and close off that form immediately as well.

54
00:04:11,750 --> 00:04:19,360
So now we have a contact form let's now set up these rows and columns for each of the different inputs.

55
00:04:19,390 --> 00:04:24,170
So we're going to allow the user to input their name their email maybe their phone number their message

56
00:04:24,170 --> 00:04:25,460
for sure.

57
00:04:25,520 --> 00:04:31,640
Okay so let's go ahead and set up div class to be a road to contain all that information.

58
00:04:31,760 --> 00:04:38,720
And then here we're gonna set up another column give it some margin and we're gonna close off that div

59
00:04:38,810 --> 00:04:39,970
immediately.

60
00:04:40,030 --> 00:04:48,120
Now in here to open up a div class of M.D. forms this is a bootstrap class that will make a form.

61
00:04:48,180 --> 00:04:53,040
We can set the boarder to 0 when we close off that div.

62
00:04:53,180 --> 00:05:00,290
Now in here we're going to make an input and input element which will allow you to take an input and

63
00:05:00,290 --> 00:05:04,330
it will create an input field on the type is going to be text.

64
00:05:04,330 --> 00:05:06,460
There are different types of input fields.

65
00:05:06,640 --> 00:05:10,950
There can be numbers or email et cetera.

66
00:05:10,960 --> 00:05:15,810
But we're going to start with text because this is going to be the user's name first.

67
00:05:15,970 --> 00:05:21,060
And the idea is going to be name the name of the input is going to be name as well.

68
00:05:21,640 --> 00:05:27,640
Name and I.D. may look similar but name is used for the data collection part whereas I.D. is used for

69
00:05:27,640 --> 00:05:31,990
the styling as well as the anchoring.

70
00:05:31,990 --> 00:05:39,310
If you were to use this as an anchor link you can also give it the cost of form control and then we're

71
00:05:39,310 --> 00:05:42,570
also going to give it a label.

72
00:05:42,580 --> 00:05:49,460
Now you don't need to close this input field because input tags are one of those self closing tags.

73
00:05:49,540 --> 00:05:54,850
Let's also make a label for every input field you should also have a label which will prompt the user

74
00:05:54,850 --> 00:06:04,030
of what they should put into that specific input field so label for name is where that name comes in.

75
00:06:04,030 --> 00:06:06,340
So we can ask changes to user name to make this more clearer.

76
00:06:07,060 --> 00:06:11,030
So name equals user name refers to the name of the input.

77
00:06:11,140 --> 00:06:15,520
And so then when the label says that it's for user name it means that this label should be attached

78
00:06:15,520 --> 00:06:19,780
to this input field and you'll see how that looks and we look at it in the output.

79
00:06:19,780 --> 00:06:22,960
This will be immediately above the input field.

80
00:06:22,960 --> 00:06:28,860
So this label is for the user name input and we don't get any class for now at least.

81
00:06:29,260 --> 00:06:33,640
And we can put a name as the label and that will be the label text.

82
00:06:33,790 --> 00:06:34,450
Okay.

83
00:06:34,570 --> 00:06:38,410
And now we have the rest of them closed off here.

84
00:06:38,410 --> 00:06:39,860
So what we can do next.

85
00:06:39,910 --> 00:06:44,560
We also have to close off this form div kind of do that here.

86
00:06:44,650 --> 00:06:45,010
Excellent.

87
00:06:45,010 --> 00:06:48,180
We closed off this one because of this one just good.

88
00:06:48,280 --> 00:06:49,750
We haven't closed off this row.

89
00:06:49,750 --> 00:06:52,030
So let's go ahead and close the row.

90
00:06:52,030 --> 00:06:56,170
So now we have one input field for the users name.

91
00:06:56,170 --> 00:07:02,800
We're going to follow this similar structure to add more input fields into this rows that the user can

92
00:07:03,070 --> 00:07:04,900
send us more information.

93
00:07:04,930 --> 00:07:07,450
Let's go ahead and test what this looks like in the output so far.

94
00:07:07,760 --> 00:07:12,100
So if you click on output and then scroll all the way down we'll see the contact form down here.

95
00:07:12,100 --> 00:07:16,660
Now we're having a bit of centering issues on mobile we can check what it also looks like on the web

96
00:07:16,660 --> 00:07:20,510
and on the web it looks like it's fine without any centering issues.

97
00:07:20,510 --> 00:07:30,340
We can go ahead and fix all of those by moving the borders if we have too much of padding on the x axis

98
00:07:30,360 --> 00:07:36,870
then that is what will create those padding issues where it looks a bit smushed on the left and right.

99
00:07:37,020 --> 00:07:43,930
But we can fix those all at the end once we have all the all the forms and the fields put in so we're

100
00:07:43,930 --> 00:07:49,290
gonna add a few more fields here for email and a submit button as well.

101
00:07:49,470 --> 00:07:54,360
So let's go ahead and hide the output and add in the rest of those elements.

102
00:07:54,370 --> 00:08:01,480
So what we're going to need here next we can have another column similarly to this but the column this

103
00:08:01,480 --> 00:08:04,850
time will be for the email instead of for the name.

104
00:08:04,870 --> 00:08:16,060
So just below the column for the name make another day of class column M.D. 6 and then this one tree

105
00:08:16,090 --> 00:08:19,070
closing off and in here this is going to be for the email.

106
00:08:19,120 --> 00:08:25,240
So it's filing a similar structure because of the same class empty form and we can give it maybe 0 as

107
00:08:25,240 --> 00:08:32,170
well just for consistencies sake and then we can close close off that div here and we're gonna make

108
00:08:32,170 --> 00:08:38,900
an input of type text again we can also make it of type email can stick to text for now and that idea

109
00:08:38,980 --> 00:08:40,330
is going to be email.

110
00:08:40,480 --> 00:08:47,080
Its name is also going to be email and its class is going to be form control just like for your name

111
00:08:48,190 --> 00:08:52,600
and now for the input number itself closing so we don't have to close it but we do have to add a label

112
00:08:52,600 --> 00:08:59,800
for each input for accessibility sake having a label is very useful for every input it makes it more

113
00:08:59,800 --> 00:09:07,090
clear for the user because it will tell them what they should put into the input field and on some browsers

114
00:09:07,450 --> 00:09:08,670
a place holder won't work.

115
00:09:08,680 --> 00:09:13,750
So sometimes you'll see place holder being added to the input which will create some text inside of

116
00:09:13,750 --> 00:09:20,230
the form but placeholders aren't visible on all browsers which is why a label is a better idea than

117
00:09:20,230 --> 00:09:21,620
a placeholder.

118
00:09:21,700 --> 00:09:27,970
So we're going to have a label for email and this refers to the name of the input over here and we're

119
00:09:27,970 --> 00:09:33,220
also going to add the text that should be inside of the label so we can close off the label and then

120
00:09:33,220 --> 00:09:40,220
inside of the tag put in something like email to prompt the user to enter their email and that is all

121
00:09:40,250 --> 00:09:43,260
we need for the email column.

122
00:09:43,330 --> 00:09:50,350
Now that was one row containing the name and the email we can add another row to contain the subject

123
00:09:50,560 --> 00:09:52,930
and the actual message of the email.

124
00:09:52,930 --> 00:10:01,360
So our column ends here and our row ends here and that means that inside of the form element we're going

125
00:10:01,360 --> 00:10:07,000
to put in the row just down here you can add another row div class equals row and this will immediately

126
00:10:07,000 --> 00:10:12,350
create another row below the first row and inside of the row you can put in columns.

127
00:10:12,370 --> 00:10:16,630
So we're gonna make another column and we're splitting this up because we need these columns to be a

128
00:10:16,630 --> 00:10:17,850
bit larger.

129
00:10:17,860 --> 00:10:23,980
So there's gonna be a call and D twelve and I'm going to close off that div and now in here we can put

130
00:10:24,040 --> 00:10:28,510
in the message or the subject to begin with.

131
00:10:28,600 --> 00:10:33,220
You'll start with the subject of the email so the user can put in the email subject here.

132
00:10:33,340 --> 00:10:39,040
We're gonna make another div with the same class empty form and empty zero and then we're going to close

133
00:10:39,040 --> 00:10:45,520
off the half empty form and in here we're gonna put in an input again so input type equals text which

134
00:10:45,520 --> 00:10:46,680
will create an input field.

135
00:10:46,720 --> 00:10:50,680
And this time it's going to be subject of the email and the name also be subject.

136
00:10:50,830 --> 00:10:56,480
So the Andy and name are the same which is fine because they are two different identifiers.

137
00:10:56,830 --> 00:11:03,220
Then the class is going to be form control which is a bootstrap class and we're going to also add a

138
00:11:03,220 --> 00:11:11,680
label for the subject price name and we don't have to add any class it's fine and we're going to close

139
00:11:11,680 --> 00:11:15,410
that label tag and inside of here we're gonna put the text subject.

140
00:11:15,450 --> 00:11:23,680
OK excellent so now we've just made another column here inside of a new row and that will be on its

141
00:11:23,770 --> 00:11:24,760
own row.

142
00:11:24,760 --> 00:11:31,620
Now every row has its call M.D. twelve or call and for column B six 12 is the maximum.

143
00:11:31,620 --> 00:11:37,900
And that means that the subject line will take up the entire row six means that this current element

144
00:11:38,560 --> 00:11:39,940
would take up half of the row.

145
00:11:39,940 --> 00:11:45,230
So if you had called empty for then the element would take up a third of the row.

146
00:11:45,340 --> 00:11:48,310
So let's test this and see how it looks for proof.

147
00:11:48,310 --> 00:11:53,650
We can go to the output and we can scroll all the way down and you'll see we haven't name email and

148
00:11:53,650 --> 00:11:54,370
subject.

149
00:11:54,490 --> 00:11:57,970
Now they are all on their own column because this is mobile.

150
00:11:57,970 --> 00:12:05,320
But if we open up e-mail you'll see that name and email both take up six in terms of six out of twelve

151
00:12:05,890 --> 00:12:11,770
because each row is divided into twelve units and each one should take up six then subject takes up

152
00:12:11,770 --> 00:12:16,560
twice the amount because we set it's called Empty 212 instead of six.

153
00:12:16,570 --> 00:12:23,070
So that is how it's looking right now and let's go and add another input field here for the actual message.

154
00:12:23,080 --> 00:12:26,880
So we're gonna hide the output and open e him out and down here.

155
00:12:26,890 --> 00:12:29,520
Let's add another element.

156
00:12:29,530 --> 00:12:36,640
So we are going to not add another column but instead add another row that way we can have it take up

157
00:12:36,880 --> 00:12:37,980
the entire row.

158
00:12:38,080 --> 00:12:47,020
So just below this row here we're going to add in another row div class row again or following exact

159
00:12:47,020 --> 00:12:50,250
same structure as we have for the previous rows and columns.

160
00:12:50,370 --> 00:12:57,390
We're making a div row and now inside we're gonna put a column and we're gonna make it the length twelve.

161
00:12:57,580 --> 00:13:02,560
So it's width is 12 units of the row which is divided into twelve pieces.

162
00:13:02,570 --> 00:13:08,740
So it'll take up 100 percent of the row and now inside of this column we're going to make another div

163
00:13:08,980 --> 00:13:16,780
which has the class M.D. form and let's close off at and inside of here we're going to make an input

164
00:13:16,780 --> 00:13:22,300
field again this time instead of using an input we're gonna need a larger area for the user to input

165
00:13:22,420 --> 00:13:26,290
text because an input will create a single line input by default.

166
00:13:26,350 --> 00:13:31,240
So a text area will create a multi line input and that's we want because we were expecting that the

167
00:13:31,240 --> 00:13:38,170
message will be quite long from the user I'm gonna put the type of the text area to be texts just like

168
00:13:38,170 --> 00:13:44,500
the type of the input and text area is just another form of input and we're gonna add an idea of message

169
00:13:44,890 --> 00:13:46,850
though as the name message.

170
00:13:47,110 --> 00:13:53,200
And now we can actually set the number of rules that we want the message to be so how long we want the

171
00:13:53,230 --> 00:14:02,710
text area to allow for and display the message so we can add a number of rows such as two and we can

172
00:14:02,710 --> 00:14:08,740
add a class which is going to be form control as well as M.D. text area because we're not using an input

173
00:14:09,070 --> 00:14:14,590
this time we're using a text area and we have to go ahead and close off the text area tag because unlike

174
00:14:14,590 --> 00:14:16,750
input it is not self closing.

175
00:14:16,750 --> 00:14:23,660
We do however have to add a label and it's going to be for that message text area and text can be a

176
00:14:23,660 --> 00:14:27,360
message and being closed off to leave label with the closing tag.

177
00:14:28,210 --> 00:14:29,040
Okay excellent.

178
00:14:29,050 --> 00:14:35,740
And now we're closing off the column and we've closed off the row and then this closes off the entire

179
00:14:35,740 --> 00:14:36,770
form.

180
00:14:37,300 --> 00:14:38,200
Okay great.

181
00:14:38,200 --> 00:14:42,010
This should be everything that we need barring any syntax errors.

182
00:14:42,050 --> 00:14:43,310
I think this looks great.

183
00:14:43,390 --> 00:14:47,150
We can go ahead and test how this looks like.

184
00:14:47,680 --> 00:14:53,500
However we are missing one thing right now we have the name the email the subject and the message but

185
00:14:53,500 --> 00:14:58,680
you might be able to remember what we're forgetting and that is a send button.

186
00:14:58,690 --> 00:15:04,300
So we're gonna need to add a button to allow the user to send their email and we also need the user's

187
00:15:04,310 --> 00:15:04,750
e-mails.

188
00:15:04,750 --> 00:15:06,130
That way we can email them back.

189
00:15:06,150 --> 00:15:08,900
So let's add those two before we test how this look.

190
00:15:08,910 --> 00:15:16,000
So just after the form ends we're going to add our Send button because the form contains all the inputs

191
00:15:16,030 --> 00:15:19,080
but the button itself can be outside of the form.

192
00:15:19,180 --> 00:15:27,490
So let's make a day of class and we can center it tech center and also give it the text and be left.

193
00:15:27,550 --> 00:15:30,530
Let's close off that div immediately.

194
00:15:30,640 --> 00:15:35,640
And now we're going to add an anchor class to make a button just as we have done previously.

195
00:15:35,750 --> 00:15:40,630
And we can set its text to white immediately by saying text white and we're going to close off that

196
00:15:40,630 --> 00:15:42,370
anchor tag immediately.

197
00:15:42,490 --> 00:15:48,170
And now in after the class we're also going to say what will happen when the user clicks on the button.

198
00:15:48,190 --> 00:15:49,840
So you can do that with on click.

199
00:15:49,960 --> 00:15:57,940
And then inside of the double quotation marks you put document dot get element by I.D. contact form

200
00:15:58,900 --> 00:16:00,010
dot submit.

201
00:16:00,010 --> 00:16:06,190
So this is where we're getting into javascript because this is what is going to happen on the back end.

202
00:16:06,220 --> 00:16:13,960
So when the user clicks the button the button will search the document and find the element by the I.V.

203
00:16:13,990 --> 00:16:15,160
contact form.

204
00:16:15,160 --> 00:16:19,950
So we'll find our contact form and then it will submit that contact form.

205
00:16:19,990 --> 00:16:24,650
This is just preparation for any back end you might be doing.

206
00:16:24,730 --> 00:16:29,080
Again we're not going to go into back into this course but this is preparation for it because the back

207
00:16:29,080 --> 00:16:34,420
end is connected to the front end in some cases just like with buttons where you have to set what will

208
00:16:34,420 --> 00:16:40,310
happen when a button is clicked not required but we're going to add it for for our sake.

209
00:16:40,870 --> 00:16:41,080
OK.

210
00:16:41,080 --> 00:16:49,750
So we have send as the button text and now we've closed off that David was perfect and let's see we

211
00:16:49,750 --> 00:16:55,710
can also add a status class so we can just add that below.

212
00:16:55,900 --> 00:16:58,200
And that's going to be actually outside of the button.

213
00:16:58,210 --> 00:17:03,490
And that will give a status of the form to div class equals status and it will tell us if we submitted

214
00:17:03,490 --> 00:17:05,020
it or not.

215
00:17:05,170 --> 00:17:09,760
And that is everything that we need to make that button the send button.

216
00:17:09,760 --> 00:17:11,510
So now the user can click send.

217
00:17:11,710 --> 00:17:17,320
And we also want to finally add an email so we can add that just below here.

218
00:17:17,590 --> 00:17:21,950
We're going to add it as he did class call and D three.

219
00:17:22,630 --> 00:17:30,550
So that means its width will be three out of the twelve units of the row and we can center its text

220
00:17:30,610 --> 00:17:33,570
as well and close off that div.

221
00:17:33,620 --> 00:17:37,600
And Anthony here we're going to allow the user to put in their email and we're gonna do this with an

222
00:17:37,660 --> 00:17:43,680
unordered list and the class is going to be a list on styled and B zero.

223
00:17:43,900 --> 00:17:50,050
And then we're gonna close off that you all tag and in here we're going to open a new list item and

224
00:17:50,050 --> 00:17:55,240
we can close it off immediately and we're going to set here is an eye class.

225
00:17:55,290 --> 00:17:57,220
There's going to be a farce if a globe.

226
00:17:57,220 --> 00:18:10,720
So this will make a icon and we can set it's empty and it's size using the empty NFA classes of bootstrap.

227
00:18:10,720 --> 00:18:15,680
And then finally just below the icon we can have them enter in their email.

228
00:18:15,680 --> 00:18:20,400
So we're going to actually make this a paragraph tag and I'm gonna put in yellow at email dot com

229
00:18:23,190 --> 00:18:26,950
OK so this is going to be referring to the company email.

230
00:18:27,030 --> 00:18:29,910
So that way they know who they're sending to.

231
00:18:29,910 --> 00:18:32,440
So this here is the user's e-mail.

232
00:18:32,530 --> 00:18:37,410
And this here is where you would put in the company email so that the user knows where it's getting

233
00:18:37,410 --> 00:18:42,510
sent off to and who they might want to put into their contact books that their response is and go to

234
00:18:42,510 --> 00:18:43,980
spam for example.

235
00:18:44,220 --> 00:18:48,240
Let's go ahead and test what this all looks like so far so we can go ahead and click on the output and

236
00:18:48,240 --> 00:18:49,830
scroll all the way down.

237
00:18:50,070 --> 00:18:54,520
And here we'll see we have our name our email subject and our message as well as a send button.

238
00:18:54,550 --> 00:18:55,380
This looks quite good.

239
00:18:55,380 --> 00:19:01,170
And we have our e-mail down here in case the user wants to copy this and send it in their own e-mail

240
00:19:01,170 --> 00:19:04,620
provider instead of through our contact form.

241
00:19:04,620 --> 00:19:12,450
And then if we want to test this through our HMO using the larger screen size it will look something

242
00:19:12,450 --> 00:19:13,640
like this.

243
00:19:13,680 --> 00:19:15,110
The email goes up here.

244
00:19:15,120 --> 00:19:20,370
Besides the name and the e-mail and then we have the message labeled just down here which should be

245
00:19:20,370 --> 00:19:21,150
just blown there.

246
00:19:21,200 --> 00:19:22,120
Can fix that later.

247
00:19:22,710 --> 00:19:22,950
OK.

248
00:19:22,960 --> 00:19:24,450
Well other than that thank you all for watching.

249
00:19:24,450 --> 00:19:27,960
We're going to pause the video here because that is enough for now.

250
00:19:27,960 --> 00:19:33,210
And in the next lecture we're going to work on fixing up these padding which has a little bit too much

251
00:19:33,210 --> 00:19:38,950
padding on the side as well as aligning this contact us to just fine tuning.

252
00:19:38,970 --> 00:19:43,050
Typically it's a good idea to set up everything and then fine tune afterwards you have all your setup

253
00:19:44,070 --> 00:19:45,360
quite done.

254
00:19:45,360 --> 00:19:45,900
Other than that.

255
00:19:45,900 --> 00:19:48,690
Thank you all for watching and we will see you in the next lecture.