1
00:00:00,120 --> 00:00:00,840
Hello, friend.

2
00:00:00,870 --> 00:00:05,220
We'll come back, you know, previous video I have already discussed about that, things with you,

3
00:00:05,220 --> 00:00:08,070
how can load as HTML template in Django?

4
00:00:08,430 --> 00:00:12,580
So now in this video I want to show you, like that is our e-mail template.

5
00:00:12,600 --> 00:00:17,650
So here, if you want to work with the bootstrap, then how can add that bootstrap in Django?

6
00:00:17,670 --> 00:00:19,910
I will show you that things with a live example.

7
00:00:20,250 --> 00:00:26,130
It's pretty much simple things like if you go to that bootstrap official website, OK, that means the

8
00:00:26,130 --> 00:00:26,990
bootstrap.

9
00:00:27,150 --> 00:00:28,470
So it's very much common.

10
00:00:28,500 --> 00:00:31,370
I think everybody knew about that bootstrap.

11
00:00:32,130 --> 00:00:33,510
So that is are bootstrap.

12
00:00:33,540 --> 00:00:38,410
And so with this bootstrap we can actually build our site very easily.

13
00:00:38,430 --> 00:00:45,390
So right now, go to that hour, get started so you can see that Mustafa is also a better shot at actually

14
00:00:45,480 --> 00:00:47,200
using that four point five version.

15
00:00:47,220 --> 00:00:49,920
So now from here, there is our home base.

16
00:00:50,430 --> 00:00:54,630
And here I want to do and actually use that our standard template so that there is a template.

17
00:00:54,630 --> 00:00:55,210
So no better.

18
00:00:55,210 --> 00:00:59,030
I simply copy it and now go to our home.

19
00:00:59,070 --> 00:01:02,490
That means our index file, actually.

20
00:01:02,490 --> 00:01:04,980
So that is our index file is loaded for our home.

21
00:01:04,980 --> 00:01:05,280
Right.

22
00:01:05,310 --> 00:01:09,450
So now I just simply remove everything and here I just simply paste it.

23
00:01:09,840 --> 00:01:11,550
OK, so I just simply paste it.

24
00:01:12,150 --> 00:01:14,820
So here I want to do and update our title.

25
00:01:14,820 --> 00:01:16,440
It will be as a home base

26
00:01:19,200 --> 00:01:20,900
is will be as a home page.

27
00:01:20,910 --> 00:01:22,940
And also that is our H1 tag.

28
00:01:22,950 --> 00:01:27,610
I just make the things as a home base, I just make as a home page.

29
00:01:27,700 --> 00:01:33,270
Now there you can see that by default that is all that CDN, our CSA is all that our JSW that in the

30
00:01:33,270 --> 00:01:36,760
clear link for the booster is automatically added on here.

31
00:01:36,780 --> 00:01:44,280
So now if you click on the Savol and now if you refresh it, the official site.

32
00:01:44,580 --> 00:01:48,570
Yeah, you can see it's perfectly get our bootstrap.

33
00:01:48,930 --> 00:01:50,100
How much easier it is.

34
00:01:50,100 --> 00:01:51,710
You can see we can actually run it.

35
00:01:51,720 --> 00:01:55,530
So if you want to add some of the neighbor, then it'll will be better.

36
00:01:56,190 --> 00:02:01,830
Like if you go to bootstrap and if you go to that component into the components area right now, you

37
00:02:01,830 --> 00:02:03,560
can actually use all the components.

38
00:02:03,570 --> 00:02:05,660
Right now I want to use all the neighbor.

39
00:02:06,540 --> 00:02:08,640
So that is a neighbor component.

40
00:02:08,640 --> 00:02:15,690
And here that is actually the neighbors right now to actually take that group because a copy and now

41
00:02:15,690 --> 00:02:17,270
in our project home base.

42
00:02:17,760 --> 00:02:20,220
So that is our H1 tag into the body area.

43
00:02:20,310 --> 00:02:20,650
OK.

44
00:02:20,670 --> 00:02:26,110
So in the body area here, I just simply based on Knepper, OK, I just simply passed it.

45
00:02:26,850 --> 00:02:31,010
Now if they're Savol, so now you'll be well understand about it.

46
00:02:31,020 --> 00:02:35,310
Our Buscemi's to successfully install or not if you click the refresh.

47
00:02:35,790 --> 00:02:36,510
Yes.

48
00:02:36,520 --> 00:02:39,690
You can see it's not perfectly getting our neighbor that liying.

49
00:02:39,990 --> 00:02:43,140
There is a drop down, there is a disable and other such.

50
00:02:43,260 --> 00:02:43,620
Right.

51
00:02:43,950 --> 00:02:47,130
So also here you've got to change that color.

52
00:02:47,160 --> 00:02:48,120
You can change it.

53
00:02:48,600 --> 00:02:51,690
That means that the Cloney upper class so that it will be the light.

54
00:02:51,690 --> 00:02:57,410
So now I to do and to actually make the things as would be the info, there is another one of the bootstrap

55
00:02:57,420 --> 00:03:04,560
class rather than you can also use that bootstrap success because the primary reason I want to use that

56
00:03:04,560 --> 00:03:06,870
info is refresh.

57
00:03:06,870 --> 00:03:09,030
Yeah, you can see it's not perfectly updated.

58
00:03:09,030 --> 00:03:10,910
So now our colors become change.

59
00:03:11,130 --> 00:03:11,470
Right.

60
00:03:11,910 --> 00:03:14,950
So that is actually now 100 percent.

61
00:03:14,970 --> 00:03:20,440
So now you can see that is actually our site and also here if you want to add some of the tape.

62
00:03:20,440 --> 00:03:23,490
But I want to display our base name.

63
00:03:24,150 --> 00:03:30,690
So after that neighbor here, after that, I take one of the Dave, OK, I just moved on of the class

64
00:03:30,690 --> 00:03:32,230
as a Jumbotron.

65
00:03:34,980 --> 00:03:36,950
OK, just name me to the Jumbotron.

66
00:03:36,960 --> 00:03:39,200
And here I take one of the H on deck.

67
00:03:40,590 --> 00:03:45,720
So I just simply take all the action tag A.H. on tag area.

68
00:03:45,720 --> 00:03:47,870
I mean need as a home base.

69
00:03:48,190 --> 00:03:50,270
OK, I just name it as a home base.

70
00:03:50,940 --> 00:03:53,340
And now if you click this save all.

71
00:03:54,540 --> 00:03:57,120
So now if you refresh it.

72
00:03:57,240 --> 00:03:57,480
Yeah.

73
00:03:57,600 --> 00:04:00,050
You can see it's not perfect, especially our home base.

74
00:04:00,450 --> 00:04:03,440
So better on the one to make the things on the class.

75
00:04:04,410 --> 00:04:08,460
So that is one of the class I'm here and name it or the tech center.

76
00:04:09,000 --> 00:04:09,960
Text center.

77
00:04:12,000 --> 00:04:16,800
So just name it as a tech center class click as a save all.

78
00:04:17,700 --> 00:04:20,310
And now if you refresh it.

79
00:04:20,340 --> 00:04:24,120
Yeah, no it's not perfectly, you know, our tech center area.

80
00:04:24,360 --> 00:04:31,170
And also here I want to update our this snapbacks into the neighboring area that is our neighbor.

81
00:04:31,860 --> 00:04:33,510
So that is our home.

82
00:04:33,510 --> 00:04:34,520
That is all content.

83
00:04:34,530 --> 00:04:38,070
And here I want to do want to put like a here name.

84
00:04:38,070 --> 00:04:44,820
It is about OK, it should be about and there is a neighbor that is a dropdown.

85
00:04:45,030 --> 00:04:46,950
That means that is actually our troubles right now.

86
00:04:46,950 --> 00:04:48,530
We don't need this dropdown slightly.

87
00:04:48,540 --> 00:04:49,350
We will need it.

88
00:04:49,350 --> 00:04:50,090
We'll use it.

89
00:04:50,730 --> 00:04:52,200
So right now I don't need it.

90
00:04:52,200 --> 00:04:54,330
I just simply remove it from here.

91
00:04:54,420 --> 00:04:55,880
OK, that is a dropdown.

92
00:04:56,400 --> 00:04:57,390
I just will be it.

93
00:04:57,390 --> 00:04:59,850
And then also there is another one as.

94
00:05:00,820 --> 00:05:07,720
Disable this one supporter, I want to make a note that is a disable, that will be the nibbling and

95
00:05:07,720 --> 00:05:12,340
here and it it will be as a contact again, that will be our contact.

96
00:05:13,120 --> 00:05:19,180
Now, if you click on the Savol and now if you refresh it.

97
00:05:19,540 --> 00:05:19,800
Yeah.

98
00:05:19,860 --> 00:05:22,660
You can say anything about under the clock contact.

99
00:05:22,870 --> 00:05:27,600
And also if you want to update that color, you can update it like here.

100
00:05:28,240 --> 00:05:30,670
That is our home, that is unneighborly in class.

101
00:05:30,670 --> 00:05:35,390
So, you know, the class area on want to add another bootstrap class as a tax white.

102
00:05:36,220 --> 00:05:37,940
OK, just name it the text.

103
00:05:37,940 --> 00:05:38,500
Right.

104
00:05:39,250 --> 00:05:42,040
And also that neighbor that mhere here.

105
00:05:42,040 --> 00:05:49,510
I want to change the dynamic that is the easy learning known as a Savol.

106
00:05:50,800 --> 00:05:56,890
And now if you refresh it, yeah, he can see with the easy learning and the result home is updated

107
00:05:56,890 --> 00:06:01,220
as a white Scibetta around to actually use that class again.

108
00:06:01,720 --> 00:06:03,760
So that will be the text white.

109
00:06:03,760 --> 00:06:12,790
I just simply copy it for the hour about I also I want to update our contact and also that will be our

110
00:06:12,790 --> 00:06:14,500
end of the class or the neighbor brand.

111
00:06:14,890 --> 00:06:20,440
And here I also want to use that our text white knuckling as a Savol.

112
00:06:21,640 --> 00:06:23,680
No, refresh it here.

113
00:06:23,740 --> 00:06:28,460
You can see the perfectly updated our easy learning home or about and the contact.

114
00:06:28,840 --> 00:06:29,380
Perfect.

115
00:06:29,680 --> 00:06:35,260
So now if you also want to add the things in our employee profile, that means that our employee profile.

116
00:06:35,320 --> 00:06:37,840
So right now, I also want to use here.

117
00:06:39,310 --> 00:06:43,990
That means that these are e-mails that I just simply copy everything from here.

118
00:06:43,990 --> 00:06:47,740
And I go to our employee and there is a profile e-mail here.

119
00:06:47,740 --> 00:06:50,270
I remove everything and I just simply paste it.

120
00:06:50,290 --> 00:06:55,990
OK, that means here past our bootstrap and here I name it as it will be as a profile.

121
00:06:58,960 --> 00:07:07,990
OK, so we have the profile page and also here I make that things as a profile page, not as a Savol,

122
00:07:08,920 --> 00:07:10,800
and now I just see freesheet.

123
00:07:11,050 --> 00:07:14,010
Yeah, you can see it's not perfectly sure our profile page.

124
00:07:14,380 --> 00:07:15,930
So that is our employee profile.

125
00:07:15,940 --> 00:07:21,250
So here I have already loaded our this template right into the view.

126
00:07:21,730 --> 00:07:24,220
That is our profile in the profile.

127
00:07:24,220 --> 00:07:28,310
I have already rendered our request, our employee and the profile e-mail.

128
00:07:28,630 --> 00:07:30,670
So now you can see it's not perfectly loaded.

129
00:07:30,670 --> 00:07:35,710
And also if you go to that home, you can see a perfectly loaded our home template.

130
00:07:36,130 --> 00:07:41,320
But here, one thing straight here, you can see if you want to change anything, you have to update

131
00:07:41,320 --> 00:07:43,230
it with a specific every pages.

132
00:07:43,240 --> 00:07:48,610
That means if you want to update that about us, that means about to about us, then you have to do

133
00:07:48,620 --> 00:07:52,080
you have to go to your index and read the index area.

134
00:07:52,240 --> 00:07:54,100
And here we have to updated.

135
00:07:54,340 --> 00:07:58,570
And also we have updated in our profile in the profile.

136
00:07:58,570 --> 00:08:01,000
We have to update our Ts about us.

137
00:08:01,150 --> 00:08:01,520
Right.

138
00:08:01,540 --> 00:08:09,670
That this about we have to update like if you make that update about us on our index base, if you to

139
00:08:09,850 --> 00:08:15,220
save all and now if you refresh it now you can see it's updated.

140
00:08:15,340 --> 00:08:21,670
But if you go to our employee into the employee profile now you can see into the employee profile,

141
00:08:21,670 --> 00:08:25,300
it's the same that was actually the previous one as about.

142
00:08:25,300 --> 00:08:25,700
Right.

143
00:08:25,720 --> 00:08:29,260
So here if not should be displayed like that.

144
00:08:29,260 --> 00:08:29,740
We're here.

145
00:08:29,740 --> 00:08:31,150
We have we have to inherit.

146
00:08:31,150 --> 00:08:36,880
And that means our header part will be the same for our every page is like if they have some of the

147
00:08:36,880 --> 00:08:39,700
future, our future will be the come on our sidebar.

148
00:08:39,700 --> 00:08:43,930
If they have a sidebar, our sidebar will be the common and only out.

149
00:08:43,930 --> 00:08:45,700
This contained part will be changed.

150
00:08:45,970 --> 00:08:49,300
Like if you go to our that is actually end up in a dot com.

151
00:08:49,300 --> 00:08:55,480
And here that is header part is the command for the web pages and futer part is also common for debris

152
00:08:55,510 --> 00:08:59,740
pages like if you go to one of the single most.

153
00:09:00,810 --> 00:09:05,680
So I just simply go to that single post and with a single post area you can see there is a header is

154
00:09:05,680 --> 00:09:08,500
the same and also futer is the same.

155
00:09:08,500 --> 00:09:11,220
Only this contained part is become changed.

156
00:09:11,560 --> 00:09:17,500
So also here we have to do we have to do the same things in our this project area so that you can do

157
00:09:17,500 --> 00:09:19,570
that work with using that inherited.

158
00:09:19,570 --> 00:09:22,270
That means you have to inherited this template.

159
00:09:22,480 --> 00:09:26,740
You have to insert your header and your future and your content.

160
00:09:26,760 --> 00:09:29,470
But so how can inherited this template?

161
00:09:29,470 --> 00:09:32,770
In our next video, I will show you that things with a live example.

162
00:09:33,130 --> 00:09:34,630
So thanks for watching.

163
00:09:34,630 --> 00:09:36,400
I will see you in the next video.