1 00:00:04,130 --> 00:00:06,680 Hello everyone and welcome back to our bootstrap course. 2 00:00:06,680 --> 00:00:10,550 In the previous lecture we set up the skeleton template for our carousel. 3 00:00:10,610 --> 00:00:13,460 And in this lecture I'm going to be populating the carousel. 4 00:00:13,460 --> 00:00:15,390 So let's go ahead and begin doing that now. 5 00:00:15,410 --> 00:00:19,970 We have so far our indicators set up and those are all done. 6 00:00:20,060 --> 00:00:22,910 What we need to do next is fill in each item. 7 00:00:23,480 --> 00:00:27,740 So what we're going to do is begin with this first item here which is active and inside we're going 8 00:00:27,740 --> 00:00:30,440 to put in just a place holder to be to start. 9 00:00:31,070 --> 00:00:36,050 So it's going to be another div and this time is going to be carousel place holder. 10 00:00:36,050 --> 00:00:40,480 And we're also going to give it the class carousel place holder 1. 11 00:00:40,730 --> 00:00:46,010 And let's go ahead and close that div off immediately going to begin by putting in some place holder 12 00:00:46,010 --> 00:00:47,870 items here. 13 00:00:48,170 --> 00:00:50,780 And these are not bootstrap classes. 14 00:00:50,780 --> 00:00:56,870 These are classes that we are using ourselves in order to style how the council wants to or will look 15 00:00:57,560 --> 00:01:04,490 because if you use the default classes you will get white margins on the left and right and on the top 16 00:01:04,490 --> 00:01:05,210 and bottom. 17 00:01:05,210 --> 00:01:11,030 And so we want to remove those margins because we want to have each one be full screen. 18 00:01:11,030 --> 00:01:12,620 So we're going to show you how we're going to do that. 19 00:01:12,630 --> 00:01:15,020 Let's go ahead and pop open the output. 20 00:01:15,020 --> 00:01:21,110 And as you can see in the output we now have these three little indicators here and those represent 21 00:01:21,440 --> 00:01:25,040 those indicators that we mentioned for the carousel. 22 00:01:25,040 --> 00:01:29,960 So when the user clicks on each one and there will also be arrows that we're gonna add later the user 23 00:01:29,960 --> 00:01:34,910 will go through the carousel let's high the output for now and go to see us as an ECMO. 24 00:01:35,540 --> 00:01:42,320 Now we built these two class names and let's actually go ahead and use them to add some styling. 25 00:01:42,380 --> 00:01:45,280 So down here we're going to set our own custom styling. 26 00:01:45,290 --> 00:01:46,890 This is not bootstrap styling. 27 00:01:46,910 --> 00:01:48,650 It's our own. 28 00:01:48,650 --> 00:01:50,810 So we call dot carousel placeholder. 29 00:01:50,840 --> 00:01:57,830 And in here I'm going to set the width to be 100 percent and the height to be 100 percent as well. 30 00:01:57,830 --> 00:02:03,810 Now when you use percent you are talking about something that is relative to and in order to use percentages. 31 00:02:03,830 --> 00:02:07,790 You must have a parent that has a width and height. 32 00:02:07,880 --> 00:02:13,700 So in our case that's why we set each smell and body to have width and height because this might seem 33 00:02:13,730 --> 00:02:19,610 obvious within hyper you have to actually set it yourself in order to use percentages later on for elements 34 00:02:19,640 --> 00:02:21,470 inside of the body. 35 00:02:21,480 --> 00:02:27,280 So this will be 100 and 100 percent of its current element. 36 00:02:28,050 --> 00:02:28,410 OK. 37 00:02:28,430 --> 00:02:35,900 And you'll see that in action when we look at the output let's also set the background color to black 38 00:02:35,900 --> 00:02:37,250 by default. 39 00:02:37,580 --> 00:02:42,100 And we're going to change that to a different color with each of the carousel items. 40 00:02:42,170 --> 00:02:46,640 But it's useful to set the background color by default so you know if something's gone wrong it's also 41 00:02:46,640 --> 00:02:53,090 useful to set the color to right because although the text color which is what color means you may think 42 00:02:53,090 --> 00:02:59,720 that color means background color but no color means text color you may think that color is obviously 43 00:02:59,720 --> 00:03:05,840 white or color is obviously always black but you want to set your own color. 44 00:03:05,840 --> 00:03:12,440 Typically whenever you're standing elements even if it's obvious in this case the default will be black. 45 00:03:12,440 --> 00:03:16,910 So it's not even obvious we actually must change it to white because you're going to have a background 46 00:03:16,910 --> 00:03:20,350 color and white will look best on that background color. 47 00:03:20,390 --> 00:03:25,360 The last thing we should do is set the background size and we're gonna set this to cover. 48 00:03:25,370 --> 00:03:33,080 That means that the image will cover the whole container but it won't try to fit the entire image inside 49 00:03:33,080 --> 00:03:33,400 of it. 50 00:03:33,440 --> 00:03:38,310 Because that could lead to resizing issues where your image looks really compressed. 51 00:03:38,780 --> 00:03:44,030 And if you were going to use that you would do something like Phil but we're going to use cover instead 52 00:03:44,030 --> 00:03:45,510 it will look the best. 53 00:03:45,530 --> 00:03:48,030 Once you put images inside. 54 00:03:48,050 --> 00:03:48,350 OK. 55 00:03:48,350 --> 00:03:51,230 We also have this careful place holder one. 56 00:03:51,290 --> 00:03:53,720 Let's go ahead and style that next. 57 00:03:53,720 --> 00:03:58,940 Just below that and we're going to have a different place holder for each item because this is going 58 00:03:58,940 --> 00:04:01,160 to use this to add a background color. 59 00:04:01,160 --> 00:04:06,890 So let's add a red color for example such as F seven a sixty five E.. 60 00:04:07,400 --> 00:04:13,610 And don't forget that semicolon which you must add at the end of each of the different stylings. 61 00:04:13,610 --> 00:04:17,320 Now this is a hex code which is a way to represent a color. 62 00:04:17,370 --> 00:04:20,600 You can go ahead and click on output and hide everything else. 63 00:04:20,600 --> 00:04:25,880 And we should see soon we'll see are different colors here. 64 00:04:25,880 --> 00:04:34,190 But right now we have to go back to the HMO and add more into this actual div itself. 65 00:04:34,190 --> 00:04:38,360 So right now we have the stylings and so that it's a placeholder. 66 00:04:38,390 --> 00:04:44,300 Next we have to add a container containing our text because right now we just set the background color 67 00:04:44,870 --> 00:04:46,280 but we don't have anything inside. 68 00:04:46,310 --> 00:04:49,550 So the height is still zero because there's nothing inside. 69 00:04:49,610 --> 00:04:50,890 So let's put something inside. 70 00:04:50,930 --> 00:04:54,240 We're gonna put inside some text about product. 71 00:04:54,680 --> 00:04:56,720 This right here is our div. 72 00:04:56,750 --> 00:05:01,340 So actually this must be closed off just there. 73 00:05:01,370 --> 00:05:04,790 This is the place holder image box. 74 00:05:04,790 --> 00:05:05,940 We're gonna use. 75 00:05:05,940 --> 00:05:08,010 This is also where you would put your image. 76 00:05:08,070 --> 00:05:10,980 For example if you wanted to add an image you would just do it down here. 77 00:05:10,980 --> 00:05:12,730 The same image source. 78 00:05:12,750 --> 00:05:20,340 Putting a source just down here and images are self closing which means you don't have to add any kind 79 00:05:20,340 --> 00:05:21,600 of closing tag. 80 00:05:21,600 --> 00:05:24,650 You just write this OK but we're not adding images for now. 81 00:05:25,170 --> 00:05:27,540 So we have a placeholder and all we're gonna do next is ad text. 82 00:05:27,540 --> 00:05:34,110 So open up a new div and call this container container is again a reserved bootstrap class and it will 83 00:05:34,110 --> 00:05:37,360 put everything into a container with some padding. 84 00:05:37,380 --> 00:05:41,620 Let's also add in other div inside and we're gonna call this carousel caption. 85 00:05:41,760 --> 00:05:47,670 This is a bootstrap class that will automatically style this text as a caption. 86 00:05:47,700 --> 00:05:54,250 We're also going to do text left text left means that the text will be aligned to the left. 87 00:05:54,270 --> 00:05:59,190 You can also do text center which we have seen before and text right to align text to the right of the 88 00:05:59,190 --> 00:06:03,490 screen so it will be all aligned to the right or all line to the left. 89 00:06:03,530 --> 00:06:10,050 Using text left in this case and inside of this div with ADD in each one called product one actually 90 00:06:10,140 --> 00:06:15,380 make it each two because typically you don't want to have multiple each ones. 91 00:06:15,600 --> 00:06:16,280 Okay. 92 00:06:16,320 --> 00:06:22,420 And this is a header a header of importance too so it'll be bigger than normal. 93 00:06:22,500 --> 00:06:26,080 However it will not be as big as an each one header one. 94 00:06:26,100 --> 00:06:30,000 Let's open a paragraph and something like your product description here. 95 00:06:30,090 --> 00:06:36,150 If you have an actual product you can fill this in or you can just use this as a template whenever you're 96 00:06:36,150 --> 00:06:36,750 web designing. 97 00:06:36,750 --> 00:06:44,070 It's useful to have templates because you want to minimize as much work as you have to do by having 98 00:06:44,070 --> 00:06:49,800 reuse reuse is extremely helpful because by reusing I mean you can add more complex features instead 99 00:06:49,800 --> 00:06:54,750 of having to begin at the basics all the time which would be extremely time consuming and would mean 100 00:06:55,470 --> 00:06:59,460 less of a fine website. 101 00:06:59,550 --> 00:07:04,200 Let's open another paragraph which will contain another button so remember we made a button previously 102 00:07:04,590 --> 00:07:09,020 by using a paragraph tag and an anchor tag inside and a bootstrap Button class. 103 00:07:09,030 --> 00:07:10,620 We're going to do exactly the same. 104 00:07:10,620 --> 00:07:17,010 So we have a paragraph tag open and add an anchor with a class button and we'll go to say a button large 105 00:07:17,280 --> 00:07:23,010 this is a boot strap class that will make a large button of large size and make it a button primary 106 00:07:23,010 --> 00:07:26,250 which will set its colour to that same blue as we have already. 107 00:07:26,250 --> 00:07:35,250 And we're going to give it a link so we don't have a link right now but we will add more products later 108 00:07:35,270 --> 00:07:42,900 we're going to add product and service descriptions below this but we can add this as a hashtag for 109 00:07:42,900 --> 00:07:43,250 now. 110 00:07:43,290 --> 00:07:49,650 This is just going to lead it to the home page of the website and we can fill in that fill that in later 111 00:07:50,190 --> 00:07:57,570 when we do the optimizing the code and we have to set the rule of this to be a button and go ahead and 112 00:07:57,570 --> 00:08:02,690 close that anchor tag and type in something like learn more. 113 00:08:02,820 --> 00:08:05,870 And so this will be a button containing text learn more. 114 00:08:06,210 --> 00:08:08,430 Let's go ahead and check our output here. 115 00:08:08,430 --> 00:08:14,550 So far we're still not seeing anything so fix that high output. 116 00:08:14,550 --> 00:08:16,270 Okay let's look at what we've done so far. 117 00:08:16,350 --> 00:08:25,790 We've set up a carousel inner carousel item and we have set up several items for use later. 118 00:08:26,160 --> 00:08:33,240 And we have a container with our paragraph tax an hour each two. 119 00:08:34,360 --> 00:08:34,770 OK. 120 00:08:34,790 --> 00:08:37,520 That's all we need for the first item. 121 00:08:37,580 --> 00:08:43,240 Let's go ahead and set the rest of the items and that will allow us to actually get a preview of everything. 122 00:08:43,280 --> 00:08:46,280 So what we're going to do right now we have carousel item. 123 00:08:46,580 --> 00:08:50,690 Let's go ahead and follow the exact same structure to make our next item. 124 00:08:50,690 --> 00:08:56,770 So we're gonna make div class equals carousel placeholder carousel leaseholder too. 125 00:08:57,170 --> 00:09:03,170 So we're using carousel placeholder too because we're gonna use a different color for this place holder. 126 00:09:03,200 --> 00:09:05,590 So previously we had a red item. 127 00:09:05,620 --> 00:09:14,980 It's going to open our CFS and make a different color we can use a blue color for example carousel place 128 00:09:14,990 --> 00:09:16,140 holder too. 129 00:09:16,280 --> 00:09:22,970 It's useful for making a minimalist website to stick with a two color scheme so two colors plus white 130 00:09:24,110 --> 00:09:29,840 which means it will be extremely minimalist and it will be pleasing to the eye because it has that three 131 00:09:30,050 --> 00:09:31,530 color structure. 132 00:09:31,700 --> 00:09:37,670 If you've studied design you'll know that colors in threes like red blue and white. 133 00:09:37,670 --> 00:09:44,000 That's a useful and pleasing to the eye and it is useful to have those kinds of design tricks because 134 00:09:44,000 --> 00:09:48,950 they allow you to design faster bees instead of having to decide what color to choose. 135 00:09:48,950 --> 00:09:51,920 You know that 3 is going to be quite useful. 136 00:09:51,920 --> 00:09:52,120 Okay. 137 00:09:52,160 --> 00:09:54,110 So we can go ahead and hide this yes. 138 00:09:54,380 --> 00:09:58,810 Now that we've set up that place holder going gonna follow the exact same structure that we did for 139 00:09:59,210 --> 00:10:01,160 the first item. 140 00:10:01,250 --> 00:10:07,700 So we're gonna set up a div class of container and we're gonna close that off and inside of the container 141 00:10:08,360 --> 00:10:17,390 we're going to put in our captions so div class carousel caption and we're gonna close that off as well 142 00:10:18,410 --> 00:10:23,110 and inside of the careful caption we're gonna put it in H2 called Product 2. 143 00:10:24,410 --> 00:10:28,190 So this is where the company's product logo is being featured. 144 00:10:28,460 --> 00:10:32,620 And to put in your product description here. 145 00:10:33,440 --> 00:10:39,290 And as you do this multiple times kind of like if you if you ever heard of a code cata those are exercises 146 00:10:39,290 --> 00:10:44,870 that you do over and over again you'll gain muscle memory and this will help you learn the syntax of 147 00:10:44,870 --> 00:10:45,500 code. 148 00:10:45,720 --> 00:10:49,740 Code cutters aren't always the best but they are useful. 149 00:10:49,810 --> 00:10:51,270 If you're starting out with a language. 150 00:10:51,750 --> 00:10:52,710 OK. 151 00:10:53,090 --> 00:10:57,110 So we have your product description now we're gonna add a button again so an anchor. 152 00:10:57,110 --> 00:10:59,850 Class a bootstrap course button. 153 00:11:00,050 --> 00:11:05,230 Again another bootstrap class by and large and we don't have a link to a product yet but we're gonna 154 00:11:05,250 --> 00:11:10,520 be adding more pages with products later so we can leave it as a hashtag for now. 155 00:11:10,520 --> 00:11:17,780 And later we'll fill that in with actual anchor and the role is going to be button again and the text 156 00:11:17,800 --> 00:11:20,750 is going to be learn more. 157 00:11:21,380 --> 00:11:25,320 And we have we closing paragraph tag there. 158 00:11:25,610 --> 00:11:27,590 That is all we need for that careful item. 159 00:11:27,650 --> 00:11:35,540 Let's go ahead and fill in the final carousel item number three is a aesthetically pleasing number in 160 00:11:35,540 --> 00:11:36,430 terms of design. 161 00:11:36,440 --> 00:11:42,590 When you design things in three so that's we're having three carousel items for the exact same structure 162 00:11:42,590 --> 00:11:48,530 to set up a carousel leaseholder carousel please 3. 163 00:11:48,560 --> 00:11:54,410 Now I'm using one based indexing which means I started counting the place holders at 1 for simplicity's 164 00:11:54,410 --> 00:11:55,070 sake. 165 00:11:55,260 --> 00:11:59,380 But remember that JavaScript will count at zero. 166 00:11:59,480 --> 00:11:59,750 OK. 167 00:11:59,780 --> 00:12:03,050 So we have a new custom class here. 168 00:12:03,080 --> 00:12:09,240 So we have to sit there ourselves with open CFS and add our custom colouring here. 169 00:12:09,330 --> 00:12:11,010 To give it a background color. 170 00:12:11,270 --> 00:12:12,750 So far we have red and blue. 171 00:12:12,770 --> 00:12:14,150 We can give it a lighter blue. 172 00:12:14,150 --> 00:12:17,090 For example I just found these colors online. 173 00:12:17,090 --> 00:12:26,510 You can use Google for colors followed by hex code like blue hex code and that will find you some hex 174 00:12:26,510 --> 00:12:28,870 codes for the color you need. 175 00:12:28,880 --> 00:12:30,960 So now we have another background color for that. 176 00:12:30,960 --> 00:12:32,130 She's great. 177 00:12:32,540 --> 00:12:38,150 And let's go ahead and fill in the rest of this final item that we have here using the exact same structure 178 00:12:38,150 --> 00:12:39,140 that we did previously. 179 00:12:39,150 --> 00:12:41,630 And this is its own item. 180 00:12:41,630 --> 00:12:43,520 This place holder is considered its own div. 181 00:12:43,520 --> 00:12:47,270 It's not containing anything except for its background. 182 00:12:47,270 --> 00:12:52,570 And now we can set up the div for the container and we can close that. 183 00:12:52,640 --> 00:12:55,320 And this container is what actually contains the text. 184 00:12:55,370 --> 00:12:57,900 So we're separating the image from the text. 185 00:12:58,610 --> 00:13:03,620 Everything above this container can contain the image and everything in the container will contain the 186 00:13:03,620 --> 00:13:04,080 text. 187 00:13:04,810 --> 00:13:09,860 So when I say div class equals carousel caption text right. 188 00:13:09,920 --> 00:13:15,120 So you'll notice previously we should have aligned it to text center. 189 00:13:15,140 --> 00:13:19,830 Well text enter is a default which is why we didn't put any styling here. 190 00:13:19,920 --> 00:13:25,820 The careful caption because this will be styled text center because it's a carousel item. 191 00:13:25,990 --> 00:13:31,230 But for this careful caption We styled that text right because we had takes left to center. 192 00:13:31,240 --> 00:13:32,440 And now we're having text right. 193 00:13:32,460 --> 00:13:37,610 So our texts sort of jump as the carousel slides through. 194 00:13:37,610 --> 00:13:38,950 And that will give us a nice effect there. 195 00:13:39,500 --> 00:13:45,300 And we can close off that div as well and inside of the cursor caption we're going to put in our each 196 00:13:45,300 --> 00:13:54,430 to which we say product three and we can also put in our description so your product description here 197 00:13:56,380 --> 00:14:00,490 and then we're gonna open up a paragraph tag which will contain our anchor. 198 00:14:01,060 --> 00:14:03,310 So I'm going to say a class is gonna be a button. 199 00:14:03,310 --> 00:14:04,860 It's gonna be large again. 200 00:14:05,040 --> 00:14:08,460 It's gonna be that blue color using one primary. 201 00:14:08,510 --> 00:14:10,700 And we have no link yet. 202 00:14:11,470 --> 00:14:16,150 And we can add the text learn more so as you can see it might be confusing at first but once you've 203 00:14:16,150 --> 00:14:19,200 done a lot of times bootstrap is not so bad after all. 204 00:14:19,420 --> 00:14:24,300 And it saves you a lot of time with designing and making your website responsive. 205 00:14:24,370 --> 00:14:29,380 Let's go ahead and check the output here and we're still not seeing it here so there must be some issue 206 00:14:29,380 --> 00:14:30,680 that we're going to have to fix. 207 00:14:30,850 --> 00:14:31,260 That's OK. 208 00:14:31,270 --> 00:14:34,120 We're gonna learn how to troubleshoot that in the next lecture. 209 00:14:34,150 --> 00:14:34,680 Other than that. 210 00:14:34,680 --> 00:14:35,640 Thank you all for watching. 211 00:14:35,650 --> 00:14:46,510 And so far we have set up our items here for the indicators and we've also set up the back end for containing 212 00:14:46,510 --> 00:14:51,730 all replace holders and we can add images as well as needed for each product. 213 00:14:51,730 --> 00:14:53,620 Well we also have to do next is set up. 214 00:14:53,630 --> 00:14:54,790 The arrows. 215 00:14:54,790 --> 00:14:59,470 So we're gonna be showing our placeholders and setting up the arrows in the next lecture. 216 00:14:59,470 --> 00:15:01,090 Thank you for watching and we will see you there.