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

2
00:00:14,830 --> 00:00:20,350
We're going to be downloading bootstrap rather importing it into our site as well as setting up the

3
00:00:20,410 --> 00:00:22,070
basic skeleton for our site.

4
00:00:22,090 --> 00:00:26,360
Over on J.S. Ben which is a free online editor.

5
00:00:26,470 --> 00:00:32,140
So I've gone ahead and googled bootstrap download and go ahead and click on what should be the first

6
00:00:32,350 --> 00:00:40,500
link up here and we'll take you to the bootstrap documentation and only download page.

7
00:00:40,540 --> 00:00:43,910
And now here there are several different options for downloading bootstrap.

8
00:00:43,900 --> 00:00:50,860
Now you want to scroll down here to this city a city and we'll allow you to put bootstrap directly into

9
00:00:50,860 --> 00:00:52,600
your HMO code.

10
00:00:53,320 --> 00:00:58,310
So you want to copy this as well as this code.

11
00:00:58,930 --> 00:01:01,920
And we're going to include this code first and then this code.

12
00:01:01,930 --> 00:01:06,880
Secondly into our Web page and let's go ahead and show you how to do that right now.

13
00:01:07,240 --> 00:01:07,510
OK.

14
00:01:07,540 --> 00:01:11,380
So this was get bootstrap dot com slash docs.

15
00:01:11,430 --> 00:01:18,160
Now we can close that and open up J.S. Ben dot com as soon as you open up GSP and you'll get what is

16
00:01:18,160 --> 00:01:21,370
known as the bare bones of a Web site.

17
00:01:21,370 --> 00:01:26,860
So this is the extra amount for the most basic type of Web site as you can see in the output.

18
00:01:26,860 --> 00:01:29,980
There is nothing here yet because there is nothing in the body.

19
00:01:29,980 --> 00:01:37,420
So we're going to do in this lecture is set up the basic skeleton for the different elements and blocks

20
00:01:37,630 --> 00:01:38,910
of our Web site.

21
00:01:38,920 --> 00:01:43,210
Right now we have a dark type which is a shame all the documents type.

22
00:01:43,240 --> 00:01:50,350
Then we have an opening issue email tag which means that anything inside of the issue email tags should

23
00:01:50,350 --> 00:01:53,200
be considered and read as each to mail code.

24
00:01:53,260 --> 00:02:00,040
Then we have the head which is where you will import style sheets or put in information like the site's

25
00:02:00,040 --> 00:02:02,300
title or the character set.

26
00:02:02,410 --> 00:02:08,800
Now because we're using just been we don't actually need to reference any style sheet which we typically

27
00:02:08,800 --> 00:02:14,980
would need to if we were using in environments such as Adam or any other idea.

28
00:02:15,490 --> 00:02:22,600
But we don't have to import SPSS style sheet because it is right here in the CSX tab on bean been as

29
00:02:22,600 --> 00:02:28,240
you can see any code that we write in this you tab will automatically be applied to the each GMO in

30
00:02:28,240 --> 00:02:29,410
the same GSP.

31
00:02:30,260 --> 00:02:30,500
OK.

32
00:02:30,520 --> 00:02:36,850
So we have the character set here in the head which is UTF 8 which means that it will recognize characters

33
00:02:36,850 --> 00:02:38,480
of this character set.

34
00:02:38,710 --> 00:02:46,030
Then we have the Met name viewport and contents saying that the width of the viewport is equal to the

35
00:02:46,030 --> 00:02:47,110
device with.

36
00:02:47,170 --> 00:02:53,770
Now this is for Jeff spend to be able to set the width of your page.

37
00:02:53,770 --> 00:02:54,970
Then we have the title.

38
00:02:54,970 --> 00:03:02,110
This is the little type the tail that will appear on the top of your web page so you can see here J.S.

39
00:03:02,120 --> 00:03:06,240
Benji has been that is the site title.

40
00:03:06,310 --> 00:03:08,110
Let's go ahead and change that right now.

41
00:03:08,110 --> 00:03:11,870
Now in this series we're going to be building a company Web site.

42
00:03:12,010 --> 00:03:16,660
So let's go ahead and add some template name company title like company name.

43
00:03:17,800 --> 00:03:24,880
So this won't actually show up on screen as you can see in the output the output represents what you

44
00:03:24,880 --> 00:03:29,680
would see on screen and you type in w w w dot company name dot com.

45
00:03:29,740 --> 00:03:35,680
So there's nothing on the screen because this code is all in the head and only what is in the body will

46
00:03:35,680 --> 00:03:36,910
be shown on screen.

47
00:03:36,910 --> 00:03:38,730
So let's go ahead and start setting up the body.

48
00:03:38,740 --> 00:03:45,890
But before we do that we need to import that bootstrap code that we copied over from the bootstrap documentation.

49
00:03:45,940 --> 00:03:50,770
So go ahead and copy DCD and code and paste it right in.

50
00:03:50,770 --> 00:03:54,460
Now the first bit here is what is required for the city and so J.

51
00:03:54,460 --> 00:03:55,960
Query and just deliver.

52
00:03:56,180 --> 00:04:01,180
And then underneath that is actually the script for bootstrap itself and then you'll get bootstrap CBN

53
00:04:01,750 --> 00:04:07,630
and by just putting it here into the body at the end of the body mind you just before the body type

54
00:04:07,660 --> 00:04:15,040
closes this will allow us to immediately use bootstrap without having to import or download or install

55
00:04:15,040 --> 00:04:15,580
anything.

56
00:04:16,330 --> 00:04:16,900
Okay great.

57
00:04:16,900 --> 00:04:22,840
So now we have bootstrap which means you can access its classes which allow for automatic styling et

58
00:04:22,840 --> 00:04:23,280
cetera.

59
00:04:23,290 --> 00:04:27,730
Let's go ahead and set up some of the blocks of what we're going to build.

60
00:04:27,730 --> 00:04:29,530
So first we're going to need a nap.

61
00:04:30,470 --> 00:04:37,470
So this will be our navigation containing different links to areas of the page.

62
00:04:37,540 --> 00:04:39,000
We're going to build a single page site.

63
00:04:39,010 --> 00:04:47,800
And when someone clicks on the link in the NAV it will scroll down to that page on the single page site.

64
00:04:48,290 --> 00:04:48,700
OK.

65
00:04:48,730 --> 00:04:57,370
So then what we're going to do is have these services overview for the company so the services that

66
00:04:57,370 --> 00:05:04,210
the company provides give us an idea like services overview.

67
00:05:04,210 --> 00:05:11,510
Now these tags and notice are not self closing which means you must provide an opening and closing tag

68
00:05:12,380 --> 00:05:19,140
some different elements like image they are self closing but these and most are not.

69
00:05:19,830 --> 00:05:20,140
OK.

70
00:05:20,180 --> 00:05:25,070
So we're also going to have a section of the page for services or view.

71
00:05:25,190 --> 00:05:29,050
Let's also setup one for their products.

72
00:05:29,080 --> 00:05:31,720
So put this here as well.

73
00:05:31,810 --> 00:05:35,030
Give B equals products.

74
00:05:35,090 --> 00:05:41,450
Now you'll notice I have a different idea for each element and that's because an idea is reserved for

75
00:05:41,450 --> 00:05:48,770
one element only a class you might have heard of is reserved for multiple elements so you can use classes

76
00:05:49,490 --> 00:05:52,250
on multiple elements at once.

77
00:05:52,400 --> 00:05:56,070
But ideas are for one element only.

78
00:05:56,150 --> 00:06:02,300
Okay so we're also gonna have a bunch of products maybe feature products rather featured products of

79
00:06:02,720 --> 00:06:07,450
the company and make sure you have a hyphen between any words in your idea.

80
00:06:07,770 --> 00:06:10,160
Okay so we have featured products.

81
00:06:10,160 --> 00:06:15,260
We're also going to include a carousel and that will be this featured products look good carefully at

82
00:06:15,260 --> 00:06:16,340
the end of this.

83
00:06:16,340 --> 00:06:20,480
So we're going to build a carousel which is going to show different images that the user can click through

84
00:06:20,480 --> 00:06:23,570
to see the featured products of the company.

85
00:06:23,570 --> 00:06:27,220
Okay we're gonna have product descriptions as well.

86
00:06:27,290 --> 00:06:31,110
And finally we can go more in-depth about the company's services.

87
00:06:31,250 --> 00:06:32,720
So we have an overview so far.

88
00:06:32,730 --> 00:06:38,990
We can add one that is going more in depth about the services and then we're going to also add a contact

89
00:06:38,990 --> 00:06:39,650
form.

90
00:06:39,650 --> 00:06:48,050
So this will allow any user to just immediately contact the company through the contact form.

91
00:06:48,050 --> 00:06:53,690
Now this we're actually going to make a section rather than a div and we're going to give us ideas of

92
00:06:53,690 --> 00:07:01,610
contact as well we're gonna give it the class contact because that is a bootstrap class that will make

93
00:07:01,730 --> 00:07:08,710
your contact form much more responsive and easy to build and more user interface friendly.

94
00:07:08,720 --> 00:07:12,180
So it will look nicer because it is made by bootstrap.

95
00:07:12,530 --> 00:07:20,290
That's a big step is for is to make it easier to make nicer looking and functional elements.

96
00:07:20,330 --> 00:07:23,360
And finally we're going to add a footer.

97
00:07:23,360 --> 00:07:26,630
Notice how all this is in the body just before the scripts.

98
00:07:26,660 --> 00:07:26,900
Okay.

99
00:07:26,930 --> 00:07:33,230
So this is the extremely basic barebones setups that you have an idea of where we're going to be continuing

100
00:07:33,230 --> 00:07:36,830
throughout this series for this specific project.

101
00:07:36,980 --> 00:07:45,140
We're going to have a nav as well as a services overview which is sort of like the main section we're

102
00:07:45,140 --> 00:07:51,610
gonna have a carousel and then more detailed services and a contact form.

103
00:07:51,630 --> 00:07:53,200
It's also footer.

104
00:07:53,270 --> 00:07:54,110
Okay great.

105
00:07:54,110 --> 00:07:58,220
That is all that you need to set up the web page you know so you click on output you still don't see

106
00:07:58,220 --> 00:07:58,870
anything.

107
00:07:58,980 --> 00:08:04,120
And that's because you don't actually have any text elements or image elements on in the body.

108
00:08:04,130 --> 00:08:05,290
We just have the tags.

109
00:08:05,300 --> 00:08:07,090
Nothing inside the tags.

110
00:08:07,100 --> 00:08:11,600
So we're gonna be working on showing something in the output in the next lecture and then I expect you're

111
00:08:11,600 --> 00:08:14,410
going to be beginning building this navigation.

112
00:08:14,420 --> 00:08:17,730
So it's the first element in our bodies we're gonna begin with that.

113
00:08:17,750 --> 00:08:20,670
So this will contain different links for the navigation.

114
00:08:20,750 --> 00:08:22,550
Other than that that is it for this lecture.

115
00:08:22,550 --> 00:08:25,190
Thank you everyone for watching and we will see you in the next lecture.