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.