1
00:00:09,830 --> 00:00:14,410
Hello everyone and welcome back to our bootstrap course for beginners in this lecture.

2
00:00:14,420 --> 00:00:19,850
We're going to be introducing the project as well as setting up all of these skeleton elements of the

3
00:00:19,850 --> 00:00:24,440
Dom which means we're just going to set up the opening and closing tags for each of the elements inside

4
00:00:24,440 --> 00:00:25,150
the body.

5
00:00:25,250 --> 00:00:26,930
But we're not actually going to fill them in just yet.

6
00:00:26,930 --> 00:00:29,190
That will be for later lectures.

7
00:00:29,210 --> 00:00:34,640
So here I have opened a new James Bond page and as you can see there is only the basic template code

8
00:00:35,000 --> 00:00:38,420
that is created for every GSP project.

9
00:00:38,420 --> 00:00:43,700
We can go ahead and change the site title from Jaspan to something like the product are going to be

10
00:00:43,700 --> 00:00:44,220
promoting.

11
00:00:44,320 --> 00:00:47,090
So call this product.

12
00:00:47,090 --> 00:00:54,830
So this Web site is going to be a product promotion page that will allow the user to see a quick description

13
00:00:54,890 --> 00:01:03,110
of the product and then to see the pricing model of the product such as the sale price the regular price

14
00:01:03,200 --> 00:01:10,220
the monthly price or the yearly price for example if you had different pricing models for your product

15
00:01:10,640 --> 00:01:16,460
then there will also be a checkout page which will allow the user to enter their information and buy

16
00:01:16,460 --> 00:01:17,600
the product.

17
00:01:17,600 --> 00:01:18,170
Okay great.

18
00:01:18,170 --> 00:01:22,330
So let's go ahead and start setting up what we need in the body here.

19
00:01:22,370 --> 00:01:27,380
Now if you'd like you can add a navigation and a footer just like we did in the previous section and

20
00:01:27,380 --> 00:01:32,770
you can even use the same navigation and footer we used in the previous lecture because it's a good

21
00:01:32,770 --> 00:01:35,510
idea to reuse code whenever you can.

22
00:01:35,510 --> 00:01:41,120
If you have a project that is similar to your previous project then you can go ahead and use your previous

23
00:01:41,120 --> 00:01:46,850
project as a template to save you time because there is no point in reinventing the wheel and for efficiency

24
00:01:47,210 --> 00:01:52,820
it's a great idea to have your own custom templates that you can reuse for your clients.

25
00:01:52,820 --> 00:01:59,040
So here we have in our body we have all the elements that we're going to put in.

26
00:01:59,150 --> 00:02:00,650
So let's go ahead and set up what we need.

27
00:02:00,650 --> 00:02:08,810
So first of all we're going to have a header and this header is going to show the product name and give

28
00:02:08,810 --> 00:02:13,100
a brief overview as to what the product actually is.

29
00:02:13,100 --> 00:02:15,520
And then we're going to have a pricing model.

30
00:02:15,530 --> 00:02:23,990
So let's go ahead and add in the element header first ad header requires a closing tag as well as most

31
00:02:24,020 --> 00:02:25,110
elements do.

32
00:02:25,430 --> 00:02:27,980
Then we're going to also add in the pricing next.

33
00:02:28,010 --> 00:02:34,430
So we're gonna have one div for the pricing header and you can use the bootstrap class pricing header

34
00:02:34,430 --> 00:02:43,100
for this and close off the div tag and then the next div that we need is going to be a container container

35
00:02:43,100 --> 00:02:44,970
is another bootstrap class.

36
00:02:45,050 --> 00:02:53,150
And this container will contain a card deck which will allow you to create a very nicely styled pricing

37
00:02:53,720 --> 00:02:57,080
scheme so the user can see the pricing of your product.

38
00:02:57,830 --> 00:03:00,650
So now we have a pricing header and a container.

39
00:03:00,650 --> 00:03:02,800
We're also going to need a checkout page.

40
00:03:02,810 --> 00:03:04,750
So this is going to be a single page website.

41
00:03:04,760 --> 00:03:08,000
Again it'll be multiple pages on the single page.

42
00:03:08,000 --> 00:03:13,250
So it's gonna be a scrolling Web site just like the previous project scrolling is a good idea for a

43
00:03:13,280 --> 00:03:18,050
website because it is more user friendly in that users will have to click around.

44
00:03:18,050 --> 00:03:19,240
They can just scroll.

45
00:03:19,260 --> 00:03:24,350
This will also tend to keep them on the page longer because there's a scrolling effect.

46
00:03:24,350 --> 00:03:24,590
OK.

47
00:03:24,600 --> 00:03:29,630
So let's add a div with the idea of checkout and this is going to be at the checkout page.

48
00:03:29,630 --> 00:03:37,880
This will contain some input fields so the user can see their product can see their cart and what they're

49
00:03:37,970 --> 00:03:42,800
going to be charged as well as they could put in their address and their credit card information and

50
00:03:42,800 --> 00:03:44,630
then purchase your product.

51
00:03:45,260 --> 00:03:45,770
Okay great.

52
00:03:45,800 --> 00:03:51,680
So these are the four elements we're going to be working with throughout this project and we're gonna

53
00:03:51,680 --> 00:03:54,710
fill in a bunch of code in here using Bootstrap classes.

54
00:03:54,890 --> 00:04:00,980
What we need next is to copy in the end for bootstrap just like we did for the previous project you

55
00:04:00,980 --> 00:04:09,080
go to get bootstrap you go to bootstraps website and you copy the C N section which is the J query script

56
00:04:09,770 --> 00:04:16,310
link the j ust deliver a script link and the bootstrap style sheet as well as the bootstrap script itself

57
00:04:16,310 --> 00:04:17,940
so I'm going to copy that in right here.

58
00:04:18,020 --> 00:04:21,000
This is exactly what we did for the previous project as well.

59
00:04:21,090 --> 00:04:24,300
We just copied it directly from the bootstrap documentation.

60
00:04:24,380 --> 00:04:27,260
So this means we don't have to download bootstrap.

61
00:04:27,440 --> 00:04:31,940
We can just reference it using scripts and as well as one style sheet.

62
00:04:31,940 --> 00:04:37,960
So this is bootstrap styling and the rest are the scripts that bootstrap requires.

63
00:04:37,960 --> 00:04:39,980
So the javascript.

64
00:04:40,050 --> 00:04:40,640
Okay excellent.

65
00:04:40,640 --> 00:04:46,240
So this is all that we need for the template that we will set up.

66
00:04:46,380 --> 00:04:55,040
We can also add in some very basic CFS because for every website you will typically have a bare minimum

67
00:04:55,040 --> 00:05:00,110
CFS that you can begin with for every website so you can even have a template CFS that you always work

68
00:05:00,110 --> 00:05:09,140
with and it is the E UML and the body styling which you can style the width to 100 percent and the height

69
00:05:09,290 --> 00:05:10,310
to 100 percent.

70
00:05:10,400 --> 00:05:18,140
And as you remember from the previous lecture by styling the width and height 200 percent you can then

71
00:05:18,590 --> 00:05:23,940
give all the elements inside of the body a percentage width and height as well.

72
00:05:24,910 --> 00:05:25,290
OK.

73
00:05:25,310 --> 00:05:26,820
We cover that in the previous section.

74
00:05:26,910 --> 00:05:27,630
OK.

75
00:05:27,860 --> 00:05:37,010
You can also add a margin of zero and auto zero refers to the top and bottom margin and then auto refers

76
00:05:37,010 --> 00:05:38,190
to the left and right.

77
00:05:38,390 --> 00:05:44,900
Whenever you have two numbers like this or two values the first is the top and bottom and the second

78
00:05:44,900 --> 00:05:46,620
is the left and right.

79
00:05:46,760 --> 00:05:53,350
If you had four values here and the first B the top the second would be the right.

80
00:05:53,360 --> 00:05:56,450
The third would be the bottom and then the fourth would be the left.

81
00:05:56,450 --> 00:06:04,770
So in a clockwise formation we're going to just use to for efficiency if you just had one here then

82
00:06:04,770 --> 00:06:05,370
it would style.

83
00:06:05,400 --> 00:06:07,730
All four sides.

84
00:06:07,770 --> 00:06:07,980
OK.

85
00:06:07,980 --> 00:06:08,520
Excellent.

86
00:06:08,530 --> 00:06:15,840
We can also add in the background color for the EU melt in the body and in this project we're going

87
00:06:15,840 --> 00:06:21,000
to have a background color of black because the previous project we did was a light theme and in this

88
00:06:21,000 --> 00:06:26,310
lecture and section we're going to make a dark themed web site so we're gonna use a background color

89
00:06:26,310 --> 00:06:26,920
of black.

90
00:06:26,970 --> 00:06:31,380
And we're gonna set the color which refers to text color to white.

91
00:06:31,380 --> 00:06:34,500
So that will have white text on a black background.

92
00:06:35,670 --> 00:06:36,290
OK great.

93
00:06:36,330 --> 00:06:44,520
So we're going to have this black text of the white background and we're also going to set the paragraph

94
00:06:45,090 --> 00:06:47,780
text and you can just set that to white.

95
00:06:47,820 --> 00:06:53,090
Now we will use bootstrap colors selling as well but this is good to have as a backup.

96
00:06:53,100 --> 00:06:53,610
Okay great.

97
00:06:53,640 --> 00:06:59,980
So now in this section you'll learn how to make a dark themed and sometimes you often see on Web sites

98
00:07:00,210 --> 00:07:03,090
a little button that will allow you to click on dark mode.

99
00:07:03,330 --> 00:07:08,520
And what they're doing is upon the click of a button they will change the background color and the color

100
00:07:09,060 --> 00:07:14,130
and perhaps some more elements as well but it will change the background color from the light theme

101
00:07:14,130 --> 00:07:17,230
to this dark theme so you could add that you're upset as well.

102
00:07:17,370 --> 00:07:21,950
That would require javascript to little beyond the scope of this course but it's a nice challenge.

103
00:07:21,960 --> 00:07:24,280
In case you want to go above and beyond.

104
00:07:24,300 --> 00:07:24,840
OK great.

105
00:07:24,840 --> 00:07:32,550
So now we have set up the skeleton of the Dom the document object model which means we set up just the

106
00:07:32,550 --> 00:07:38,420
opening and closing tags of some elements that we we have a bird's eye view of what we're going to build.

107
00:07:38,760 --> 00:07:45,900
And we also added some bare CSX to the bare minimum that you would see on any Web site that you start

108
00:07:45,900 --> 00:07:46,230
with.

109
00:07:46,680 --> 00:07:47,130
Okay great.

110
00:07:47,130 --> 00:07:49,500
Thank you all for watching.

111
00:07:49,500 --> 00:07:51,340
Good job on getting bootstrapping here as well.

112
00:07:51,420 --> 00:07:56,570
And we will see you in the next lecture where we're going to start building out this header up here

113
00:07:56,580 --> 00:07:58,890
the first element in our body tag.

114
00:07:59,160 --> 00:08:00,090
Other than that.

115
00:08:00,090 --> 00:08:02,400
Thank you for watching and we'll see you in the next lecture.