1
00:00:00,340 --> 00:00:03,690
Now we're going to build up
the speaker section of the site.

2
00:00:03,690 --> 00:00:07,370
The mock up shows that the speaker
listings include an image, a name, and

3
00:00:07,370 --> 00:00:09,110
a short bio.

4
00:00:09,110 --> 00:00:13,413
Bootstrap 4 introduces a new
UI component called cards.

5
00:00:13,413 --> 00:00:17,404
A card is a flexible and
stylish container for displaying a wide

6
00:00:17,404 --> 00:00:22,505
variety of content including images,
text, list groups and headings.

7
00:00:22,505 --> 00:00:25,785
Cards have all the elements we need
to display the speaker line up.

8
00:00:25,785 --> 00:00:26,655
So let's get started.

9
00:00:28,000 --> 00:00:33,130
Card components have plenty of
styling options like alignment,

10
00:00:33,130 --> 00:00:37,070
grouping, colors,
even image overlays and more.

11
00:00:37,070 --> 00:00:40,681
So you can mix and match multiple content
types to create the card design and

12
00:00:40,681 --> 00:00:42,179
layout you need for your site.

13
00:00:42,179 --> 00:00:45,599
For example,
you can display a group of cards as

14
00:00:45,599 --> 00:00:48,849
a single attached element
with card groups or

15
00:00:48,849 --> 00:00:54,310
display them as equal within height
cards with the card deck classes.

16
00:00:54,310 --> 00:00:57,700
An interesting option is
the Masonry column layout,

17
00:00:57,700 --> 00:01:02,480
which places cards in optimal positions
based on the available vertical space.

18
00:01:02,480 --> 00:01:03,980
For my speaker section,

19
00:01:03,980 --> 00:01:07,900
I'm going to lay out the card
components using the trusty grid.

20
00:01:07,900 --> 00:01:12,720
So first, back in index.html
right below the speakers heading,

21
00:01:12,720 --> 00:01:15,670
I'll replace the placeholder content

22
00:01:15,670 --> 00:01:19,890
by placing a six-column grid
snippet to get the layout started.

23
00:01:19,890 --> 00:01:23,930
And you can copy this exact snippet
from the teacher's notes of this video.

24
00:01:23,930 --> 00:01:31,250
In this grid, each column spans the width
of six columns in medium devices and up.

25
00:01:31,250 --> 00:01:35,100
If the total column count within
a single row is more than 12,

26
00:01:35,100 --> 00:01:38,840
each group of extra columns
will wrap onto a new line.

27
00:01:38,840 --> 00:01:44,166
So that means that in medium screens,
speakers display on three separate lines.

28
00:01:44,166 --> 00:01:46,580
So two speakers per line.

29
00:01:46,580 --> 00:01:52,040
Now each card should display
a speaker's image, name, and bio.

30
00:01:52,040 --> 00:01:57,060
So I'm going to use the image caps
design option, which includes an image,

31
00:01:57,060 --> 00:01:58,820
heading, and paragraph.

32
00:01:58,820 --> 00:02:03,945
So I'll scroll down and
copy the top card snippet only,

33
00:02:03,945 --> 00:02:07,337
and paste it inside my first column.

34
00:02:13,937 --> 00:02:18,247
And I don't need the second paragraph
containing the small text, so

35
00:02:18,247 --> 00:02:19,370
I'll delete it.

36
00:02:21,510 --> 00:02:24,460
Now, let's begin adding
the famous speaker line up.

37
00:02:24,460 --> 00:02:29,381
In the image's source attribute,
I'll add the path to

38
00:02:29,381 --> 00:02:35,361
the vivianne.png image located in
the image folder of my project.

39
00:02:37,390 --> 00:02:41,862
So let's set the path to

40
00:02:41,862 --> 00:02:46,786
image/vivianne.png.

41
00:02:46,786 --> 00:02:49,441
And set the alt text to Vivianne.

42
00:02:52,552 --> 00:02:57,102
In the Card title,
I'll write the first speaker's name,

43
00:02:59,323 --> 00:03:03,643
Vivianne McVue.

44
00:03:03,643 --> 00:03:06,209
Then I'll type a short bio for Vivianne.

45
00:03:06,209 --> 00:03:12,916
So I'll replace the paragraph text
with Vivianne is a web developer and

46
00:03:12,916 --> 00:03:20,342
teacher Who is passionate about

47
00:03:23,300 --> 00:03:27,674
Building scalable, data-driven web apps,

48
00:03:39,180 --> 00:03:46,902
Especially ones that Address
old problems with new tech!

49
00:03:50,266 --> 00:03:51,360
I'll give this a save.

50
00:03:53,030 --> 00:03:55,730
In the browser,
you can see Vivianne's card container.

51
00:03:55,730 --> 00:03:57,450
Let's create another one.

52
00:03:57,450 --> 00:04:04,512
You can simply copy the one
you just created Paste the new

53
00:04:04,512 --> 00:04:08,868
card inside the second column, then write
the content for the second speaker.

54
00:04:12,433 --> 00:04:20,130
So I'll set this image's path
to img/nodestradamus.png.

55
00:04:20,130 --> 00:04:25,614
And I'll set the alt
text to NodeStradamus.

56
00:04:28,370 --> 00:04:32,204
The speaker name will be NodeStradamus.

57
00:04:32,204 --> 00:04:33,370
And let's add the bio.

58
00:04:33,370 --> 00:04:35,701
So I'll replace Vivianne's bio,

59
00:04:38,389 --> 00:04:42,984
With NodeStra is a software

60
00:04:42,984 --> 00:04:48,906
engineer And philosopher

61
00:04:54,387 --> 00:05:01,202
Trying to leave the world
better Than he found it.

62
00:05:05,678 --> 00:05:10,291
Let's also say that he codes for
non-profits,

63
00:05:14,744 --> 00:05:22,642
eCommerce, And large-scale web apps.

64
00:05:27,775 --> 00:05:32,137
All right, let's give this a save,
refresh the browser, and

65
00:05:32,137 --> 00:05:34,700
the speaker line up is looking good.

66
00:05:35,830 --> 00:05:37,940
So now to add the rest of the speakers,

67
00:05:37,940 --> 00:05:42,080
I'll paste their card snippets
into my last four columns.

68
00:05:43,390 --> 00:05:45,992
So first, I'll paste the card for

69
00:05:45,992 --> 00:05:51,890
Robbie Redux, Then I'll paste the card for
Ecma Scriptnstuff.

70
00:05:54,429 --> 00:05:57,820
Next, I'll add the card for

71
00:05:57,820 --> 00:06:03,515
Jay Query, and finally the card for Json Babel.

72
00:06:05,728 --> 00:06:10,915
These are the exact same card components
we just wrote just with different images,

73
00:06:10,915 --> 00:06:12,490
names, and bios.

74
00:06:12,490 --> 00:06:15,141
You can copy them from
the teacher's notes of this video.

75
00:06:17,180 --> 00:06:22,890
So the equal width to column layout
looks great in the medium break points.

76
00:06:22,890 --> 00:06:28,270
But the columns appear too wide in
the large and extra large breakpoints.

77
00:06:28,270 --> 00:06:32,989
So let’s adjust the layout so that we
see three speakers per line in large and

78
00:06:32,989 --> 00:06:34,780
extra large screens.

79
00:06:34,780 --> 00:06:39,150
Remember, you can only fit 12
columns per line by default.

80
00:06:39,150 --> 00:06:42,090
And we want to display
three columns per line.

81
00:06:42,090 --> 00:06:44,592
So 12 divided by 3 equals 4.

82
00:06:44,592 --> 00:06:49,791
So we'll give each column
class the class col-lg-4 so

83
00:06:49,791 --> 00:06:55,000
that they each span four columns
in the large grid and up.

84
00:06:56,560 --> 00:06:59,173
So I'll go ahead and
copy this column class and

85
00:06:59,173 --> 00:07:02,470
paste it in all remaining
column classes for my speakers.

86
00:07:14,289 --> 00:07:16,300
Give that a save.

87
00:07:16,300 --> 00:07:18,943
And now in a large screens and up,

88
00:07:18,943 --> 00:07:24,050
the page displays an equal width,
three column layout, good.

89
00:07:26,550 --> 00:07:30,230
All right, so
we have one more major section to build.

90
00:07:30,230 --> 00:07:31,980
The schedule, we'll do that next.