1
00:00:02,120 --> 00:00:02,960
I want to start

2
00:00:02,960 --> 00:00:06,760
with a third-party CSS package.

3
00:00:06,760 --> 00:00:09,420
A package called Bootstrap.

4
00:00:09,420 --> 00:00:10,253
And for this,

5
00:00:10,253 --> 00:00:12,620
you can google for Bootstrap

6
00:00:12,620 --> 00:00:14,470
and you should find this page.

7
00:00:14,470 --> 00:00:16,309
Get bootstrapped.com,

8
00:00:16,309 --> 00:00:21,310
which is the official website of this Bootstrap package.

9
00:00:21,470 --> 00:00:26,390
Now this package or framework as it's also called,

10
00:00:26,390 --> 00:00:31,210
is a package that gives you a lot of pre-built CSS styles,

11
00:00:31,210 --> 00:00:33,120
for all kinds of things

12
00:00:33,120 --> 00:00:37,000
that help you build websites in less time.

13
00:00:37,000 --> 00:00:39,800
And you can get an overview by simply clicking on,

14
00:00:39,800 --> 00:00:42,540
get started here, which takes you to the docs.

15
00:00:42,540 --> 00:00:46,330
And here you can learn how to add it to your website,

16
00:00:46,330 --> 00:00:48,260
but we'll do that later.

17
00:00:48,260 --> 00:00:50,220
For the moment, let's just browse

18
00:00:50,220 --> 00:00:52,410
through the documentation here,

19
00:00:52,410 --> 00:00:53,500
and let's for example,

20
00:00:53,500 --> 00:00:56,363
have a look at this components area.

21
00:00:57,670 --> 00:01:01,130
Now, if you click here, you will get a list of components,

22
00:01:01,130 --> 00:01:02,970
and these are basically,

23
00:01:02,970 --> 00:01:05,370
built-in elements

24
00:01:05,370 --> 00:01:07,220
that you can add to your website.

25
00:01:07,220 --> 00:01:08,610
And with element,

26
00:01:08,610 --> 00:01:11,620
I know, don't mean HTML element,

27
00:01:11,620 --> 00:01:13,830
but instead, I mean styling,

28
00:01:13,830 --> 00:01:16,770
which you can apply to your HTML elements

29
00:01:16,770 --> 00:01:19,140
that will give you a certain look.

30
00:01:19,140 --> 00:01:21,580
For example, if we click on buttons,

31
00:01:21,580 --> 00:01:23,310
we see a bunch of buttons

32
00:01:23,310 --> 00:01:25,760
and we see that we would get this look,

33
00:01:25,760 --> 00:01:30,030
which we see here by simply adding these classes here

34
00:01:30,030 --> 00:01:33,193
to our regular button elements.

35
00:01:34,040 --> 00:01:38,610
So we still would work with the regular HTML elements

36
00:01:38,610 --> 00:01:40,710
we learned about in this course.

37
00:01:40,710 --> 00:01:44,160
Of course we do that because those are standardized

38
00:01:44,160 --> 00:01:48,460
and this package doesn't change the web standard.

39
00:01:48,460 --> 00:01:49,940
But this package,

40
00:01:49,940 --> 00:01:51,980
once we add it to our site,

41
00:01:51,980 --> 00:01:54,590
gives us a certain CSS classes,

42
00:01:54,590 --> 00:01:55,770
which we can add,

43
00:01:55,770 --> 00:01:57,970
which give us a certain look.

44
00:01:57,970 --> 00:01:59,240
Because this package

45
00:01:59,240 --> 00:02:03,490
simply gives us a bunch of pre-built CSS files,

46
00:02:03,490 --> 00:02:06,350
full of CSS rules.

47
00:02:06,350 --> 00:02:09,370
And the buttons are just one example.

48
00:02:09,370 --> 00:02:10,203
As you see,

49
00:02:10,203 --> 00:02:12,870
there are different types of buttons you can add simply

50
00:02:12,870 --> 00:02:15,740
by using different CSS classes.

51
00:02:15,740 --> 00:02:18,910
There also are other elements,

52
00:02:18,910 --> 00:02:20,220
like cards,

53
00:02:20,220 --> 00:02:21,810
which is simply a certain look,

54
00:02:21,810 --> 00:02:24,390
which you can use to wrap it around some content.

55
00:02:24,390 --> 00:02:26,160
And on this page,

56
00:02:26,160 --> 00:02:29,530
you also always see examples of the classes

57
00:02:29,530 --> 00:02:30,610
which you have to add

58
00:02:30,610 --> 00:02:34,400
and how you could structure your HTML code,

59
00:02:34,400 --> 00:02:37,570
and how you could then add certain classes to it,

60
00:02:37,570 --> 00:02:40,280
to achieve a certain look.

61
00:02:40,280 --> 00:02:43,240
And you can simply browse through these elements

62
00:02:43,240 --> 00:02:46,700
to see a (indistinct) components,

63
00:02:46,700 --> 00:02:51,230
which you then could use just like this on your website.

64
00:02:51,230 --> 00:02:53,320
And that is what we are going to do

65
00:02:53,320 --> 00:02:55,950
in this course section now.

66
00:02:55,950 --> 00:02:59,410
We are going to build a simple demo website,

67
00:02:59,410 --> 00:03:02,220
by including Bootstrap,

68
00:03:02,220 --> 00:03:05,280
by then adding some HTML code,

69
00:03:05,280 --> 00:03:08,270
and by then adding some Bootstrap classes

70
00:03:08,270 --> 00:03:11,170
to quickly throw together a website

71
00:03:11,170 --> 00:03:14,760
and to see why we might want to use third-party packages

72
00:03:14,760 --> 00:03:16,493
for certain projects.