1
00:00:02,250 --> 00:00:04,950
Let's dive into more components,

2
00:00:04,950 --> 00:00:07,890
more features we can add with the help of bootstrap.

3
00:00:07,890 --> 00:00:10,020
And I also want to emphasize again,

4
00:00:10,020 --> 00:00:13,160
that bootstrap is just one possible third party package.

5
00:00:13,160 --> 00:00:16,430
One of the many CSS packages you can use.

6
00:00:16,430 --> 00:00:20,090
There are other packages which provide similar components,

7
00:00:20,090 --> 00:00:22,887
or maybe also some other components as well.

8
00:00:22,887 --> 00:00:26,750
But here with bootstrap, if we go back to components,

9
00:00:26,750 --> 00:00:30,090
we can, for example, always include a carousel.

10
00:00:30,090 --> 00:00:33,920
And a carousel is basically a slideshow that allows us to

11
00:00:33,920 --> 00:00:36,980
cycle through different elements of, for example,

12
00:00:36,980 --> 00:00:39,019
through different images.

13
00:00:39,019 --> 00:00:41,000
And for that here again,

14
00:00:41,000 --> 00:00:42,879
we find detailed documentation

15
00:00:42,879 --> 00:00:45,780
and there are tons of different variants,

16
00:00:45,780 --> 00:00:48,588
which we can include, different things we can configure,

17
00:00:48,588 --> 00:00:51,415
but I will just take this

18
00:00:51,415 --> 00:00:54,760
with indicators example here,

19
00:00:54,760 --> 00:00:58,600
where we have a slideshow with some indicators down there

20
00:00:58,600 --> 00:01:01,570
where we can see where we currently are.

21
00:01:01,570 --> 00:01:04,550
And again, since we included bootstrap,

22
00:01:04,550 --> 00:01:08,090
both the CSS package and the JavaScript package,

23
00:01:08,090 --> 00:01:10,960
since this will require some JavaScript code in order

24
00:01:10,960 --> 00:01:15,560
to run correctly, we can just grab this code snippet here.

25
00:01:15,560 --> 00:01:17,760
And of course we can also find the unit,

26
00:01:17,760 --> 00:01:19,620
but here I'll just grab it.

27
00:01:19,620 --> 00:01:23,810
And then in our index HTML file below the header,

28
00:01:23,810 --> 00:01:26,440
I'll add the main section, and in there

29
00:01:26,440 --> 00:01:31,440
I'll throw in that div, that div which has my carousel,

30
00:01:32,168 --> 00:01:35,358
and actually I'll change this to be a section

31
00:01:35,358 --> 00:01:39,770
because A: that is semantically a bit better, I would say.

32
00:01:39,770 --> 00:01:42,600
And B: I also want to show you that of course,

33
00:01:42,600 --> 00:01:46,230
these code examples are just examples.

34
00:01:46,230 --> 00:01:49,460
Of course, you need to adhere to the general structure.

35
00:01:49,460 --> 00:01:52,410
And of course you need to use the general attributes

36
00:01:52,410 --> 00:01:54,318
and CSS class as you see here.

37
00:01:54,318 --> 00:01:57,848
But of course you can also replace divs

38
00:01:57,848 --> 00:02:02,110
with more meaningful HTML elements.

39
00:02:02,110 --> 00:02:03,530
You can fine tune this,

40
00:02:03,530 --> 00:02:06,129
as you will also read into documentation.

41
00:02:06,129 --> 00:02:10,370
And therefore here I replaced the div with a section.

42
00:02:10,370 --> 00:02:13,118
And with that, if we save this,

43
00:02:13,118 --> 00:02:17,490
we now see this image placeholder here.

44
00:02:17,490 --> 00:02:20,950
And we see the image placeholder here on our page

45
00:02:20,950 --> 00:02:23,320
because actually the example I copied

46
00:02:23,320 --> 00:02:26,260
does not exactly give us what we see here,

47
00:02:26,260 --> 00:02:28,390
but instead it's using images.

48
00:02:28,390 --> 00:02:30,500
And at the moment, those images

49
00:02:30,500 --> 00:02:34,020
don't really point at any image.

50
00:02:34,020 --> 00:02:37,108
So now we'll need to throw in some images

51
00:02:37,108 --> 00:02:39,950
in order to then see something.

52
00:02:39,950 --> 00:02:42,623
And hence, we should now do that as a next step.

53
00:02:43,470 --> 00:02:46,520
Now attached you find an images, sipp file,

54
00:02:46,520 --> 00:02:49,830
which contains free images, which I will use here.

55
00:02:49,830 --> 00:02:52,150
But of course you can also bring your own images.

56
00:02:52,150 --> 00:02:54,600
You can otherwise just download and extract it

57
00:02:54,600 --> 00:02:58,163
and add the images folder into your project folder.

58
00:02:59,400 --> 00:03:00,940
And with that added here,

59
00:03:00,940 --> 00:03:04,540
I'll just quickly point at these images

60
00:03:04,540 --> 00:03:08,680
and I'll use the berries image for the first image element.

61
00:03:08,680 --> 00:03:12,541
Then here I'll use the christmas image and here I'll use

62
00:03:12,541 --> 00:03:16,650
the tasty image and we could, and should,

63
00:03:16,650 --> 00:03:19,730
of course also add some alt text,

64
00:03:19,730 --> 00:03:21,290
but I'll not do this right now

65
00:03:21,290 --> 00:03:24,011
because the main focus here really just is about

66
00:03:24,011 --> 00:03:26,370
how you can quickly get started with

67
00:03:26,370 --> 00:03:28,150
those third-party packages

68
00:03:28,150 --> 00:03:30,840
and how you can generally use them.

69
00:03:30,840 --> 00:03:34,061
Now I pressed auto format and I'll save this file.

70
00:03:34,061 --> 00:03:38,200
And we now see our image here.

71
00:03:38,200 --> 00:03:41,920
And it's huge because there is no other styling applied here

72
00:03:41,920 --> 00:03:46,050
to this carousel, but you should see the controls here.

73
00:03:46,050 --> 00:03:47,650
They might be a bit hard to spot,

74
00:03:47,650 --> 00:03:50,490
but if you come close to them with your cursor,

75
00:03:50,490 --> 00:03:53,048
you should see them and you can go forward

76
00:03:53,048 --> 00:03:55,800
and you can go backward.

77
00:03:55,800 --> 00:03:57,270
But of course at the moment, as I said,

78
00:03:57,270 --> 00:04:00,840
we've got absolutely no styling. The container is just huge.

79
00:04:00,840 --> 00:04:02,520
And therefore this overall element

80
00:04:02,520 --> 00:04:05,510
of course is not in perfect shape.

81
00:04:05,510 --> 00:04:10,210
And that's good because that brings me to another key topic:

82
00:04:10,210 --> 00:04:13,547
just because you're using some third-party package does

83
00:04:13,547 --> 00:04:15,700
not mean that you're not allowed

84
00:04:15,700 --> 00:04:17,563
to write your own code anymore.