1 00:00:00,000 --> 00:00:04,400 [Creating a CSS Marquee with Nick Pettit] [CSS3 Workshop] 2 00:00:04,400 --> 00:00:06,480 [Nick Pettit - @nickrp] Hey, everybody, I'm Nick Pettit. 3 00:00:06,480 --> 00:00:11,660 I am @nickrp on Twitter and I am a web design teacher here at Treehouse, 4 00:00:11,660 --> 00:00:18,260 which of course is the best way to learn web design, web development, business, mobile, and so much more. 5 00:00:18,260 --> 00:00:23,230 Today we are doing a little Livestream test. 6 00:00:23,230 --> 00:00:28,390 This could go horribly wrong. We're going to wait and see and find out what happens. 7 00:00:28,390 --> 00:00:29,970 That's going to be part of the fun. 8 00:00:29,970 --> 00:00:32,920 I'm going to make a lot of mistakes as I'm coding. 9 00:00:32,920 --> 00:00:35,370 We're going to get into some CSS here. 10 00:00:35,370 --> 00:00:37,980 But yeah, like I said, that's part of the fun. 11 00:00:37,980 --> 00:00:41,830 So we're going to learn together, basically. 12 00:00:41,830 --> 00:00:49,220 I'm going to code a marquee like you might see around a movie theater sign 13 00:00:49,220 --> 00:00:53,660 or a sign at an actual theater, like a live performance theater. 14 00:00:53,660 --> 00:00:57,240 We're going to do it with just CSS and HTML. 15 00:00:57,240 --> 00:00:59,740 I don't want to use any kind of images. 16 00:00:59,740 --> 00:01:02,840 We're going to be doing everything in CodePen today. 17 00:01:02,840 --> 00:01:06,850 Before I actually get into the HTML and CSS, 18 00:01:06,850 --> 00:01:14,020 I want to jump into Balsamiq Mockups and just give you a game plan for what we're going to be doing. 19 00:01:14,020 --> 00:01:18,140 I'm going to drag out a rectangle here. 20 00:01:18,140 --> 00:01:19,450 There we go. 21 00:01:19,450 --> 00:01:24,270 If you're not familiar, Balsamiq Mockups is this really cool wireframing tool. 22 00:01:24,270 --> 00:01:29,950 I'm not sure how much it costs, but it's pretty cheap. They've got a free trial, super awesome. 23 00:01:29,950 --> 00:01:38,670 I'm going to drag out this rectangle, and I think I'm going to make it kind of squarish here. That's good. 24 00:01:38,670 --> 00:01:45,150 I want these chaser lights to go all the way around the outside. 25 00:01:45,150 --> 00:01:50,360 So just like you'll see at a cinema or a live performance venue, 26 00:01:50,360 --> 00:01:54,090 we're going to have these lights going all the way around. 27 00:01:54,090 --> 00:02:00,060 I'm going to go ahead and do this with 4 elements. 28 00:02:00,060 --> 00:02:08,430 I'm going to have one right here, I'm going to have another box right here, 29 00:02:08,430 --> 00:02:15,700 then I'm going to have one down at the bottom. There we go. Let's line all these up. 30 00:02:15,700 --> 00:02:23,180 And then I'm going to have one more box over here on the left side. 31 00:02:23,180 --> 00:02:27,080 We're going to position these using absolute positioning. 32 00:02:27,080 --> 00:02:30,790 I don't think there's anything that could really go wrong here. 33 00:02:30,790 --> 00:02:36,060 Each one of these elements is going to be an unordered list 34 00:02:36,060 --> 00:02:40,630 and then we're going to have list items for each light on the inside. 35 00:02:40,630 --> 00:02:44,090 We're actually going to do some fairly advanced CSS stuff here. 36 00:02:44,090 --> 00:02:50,080 We're going to do some pretty advanced selectors using nth-child pseudo elements, 37 00:02:50,080 --> 00:02:52,320 and then we're also going to use— 38 00:02:52,320 --> 00:02:57,610 I think box-shadow would be a good way to make these lights actually light up. 39 00:02:57,610 --> 00:03:00,870 This isn't going to be terribly semantic. 40 00:03:00,870 --> 00:03:07,430 It's probably not something you would necessarily want to do in a real setting, 41 00:03:07,430 --> 00:03:12,110 but it will still be kind of fun and we're still going to learn a lot about CSS. 42 00:03:12,110 --> 00:03:18,440 So let's go ahead and jump into the code with our plan in mind here. 43 00:03:18,440 --> 00:03:21,140 Here I'm using CodePen. 44 00:03:21,140 --> 00:03:27,980 CodePen is this really amazing website put together by Chris Coyier and I think a few other people. 45 00:03:27,980 --> 00:03:30,310 Chris Coyier I know is the designer on it. 46 00:03:30,310 --> 00:03:34,970 Chris Coyier of course is well known for CSS-Tricks. 47 00:03:34,970 --> 00:03:41,410 Go ahead and bring that up. CSS-Tricks is a pretty cool blog, a friend of the show here. 48 00:03:41,410 --> 00:03:47,630 They have all sorts of stuff on here about CSS, as the name might imply. 49 00:03:47,630 --> 00:03:50,340 I'm going to go ahead and close that. 50 00:03:50,340 --> 00:04:02,650 To start out here, I think I want to create just a div that we're going to center on the page. 51 00:04:02,650 --> 00:04:07,950 I'm going to call this my wrapper div. 52 00:04:07,950 --> 00:04:09,980 There we go. 53 00:04:09,980 --> 00:04:15,430 We're going to have a couple of unordered lists inside of here. 54 00:04:15,430 --> 00:04:20,500 I'm going to go ahead and create one to get started. 55 00:04:20,500 --> 00:04:23,410 Oops. Close that. 56 00:04:25,050 --> 00:04:27,850 There we go. Now we have 3 list items. 57 00:04:27,850 --> 00:04:33,110 I think each one of these should actually have 9 items. 58 00:04:33,110 --> 00:04:38,930 So if we jump back to our mockup here, there will be 9 lights inside each one of these, 59 00:04:38,930 --> 00:04:43,640 and that should give us what we need to chase around here. 60 00:04:43,640 --> 00:04:49,210 I might have done my math wrong on that, but we'll go ahead and figure it out as we go along. 61 00:04:49,210 --> 00:04:59,470 I want to actually make these kind of an ugly color just so we can see what's going on and how everything is positioned. 62 00:04:59,470 --> 00:05:06,030 I'm going to close my JavaScript and I'm going to select my unordered list, 63 00:05:06,030 --> 00:05:12,120 and we're going to say list-style: none; to remove all the bullet points. 64 00:05:12,120 --> 00:05:16,310 We're going to say padding: 0; to remove any kind of padding. 65 00:05:16,310 --> 00:05:21,670 And then on our list items we're also going to say padding: 0; to remove the padding, 66 00:05:21,670 --> 00:05:25,940 and then we're going to set these to an explicit width and height. 67 00:05:25,940 --> 00:05:31,860 I'm going to say 50 pixels for the width and the height so it will be square, 68 00:05:31,860 --> 00:05:35,420 and then I'm going to say background: orange; 69 00:05:35,420 --> 00:05:37,300 This is something that I actually do a lot. 70 00:05:37,300 --> 00:05:42,610 I set the color of an element to just a straight-up CSS keyword 71 00:05:42,610 --> 00:05:48,470 so that we can actually see the element on the page and see how much space it's taking up. 72 00:05:48,470 --> 00:05:59,270 I'm going to float all of these to left, set the margin-right to 5 pixels there, and there we go. 73 00:05:59,270 --> 00:06:03,870 We have 9 list items all in a row there. 74 00:06:03,870 --> 00:06:09,840 Now we need to actually center our wrapper on the page, 75 00:06:09,840 --> 00:06:12,480 so let's go ahead and do that. 76 00:06:12,480 --> 00:06:15,830 I'm going to use a technique here that's called absolute centering. 77 00:06:15,830 --> 00:06:19,390 It's actually something that I saw on CodePen not too long ago, 78 00:06:19,390 --> 00:06:21,530 and it's pretty cool. 79 00:06:21,530 --> 00:06:28,260 It basically will center everything on the page not only horizontally but also vertically 80 00:06:28,260 --> 00:06:31,130 so we'll have this nice square box in the middle. 81 00:06:31,130 --> 00:06:38,310 We called that wrapper. We're going to select that using an ID selector wrapper. There we go. 82 00:06:38,310 --> 00:06:47,220 We're going to say margin: auto; and actually I'm going to set this to another ugly background color there. 83 00:06:47,220 --> 00:06:50,540 We're going to set it to purple just so we can see it. 84 00:06:50,540 --> 00:06:52,780 As you can see, nothing is showing up just yet, 85 00:06:52,780 --> 00:06:58,350 so that means that it's not actually present on the page really. It's not taking up space. 86 00:06:58,350 --> 00:07:04,920 We're going to set that to margin: auto; and we're going to say position: absolute; 87 00:07:04,920 --> 00:07:16,090 and then for the top, right, bottom, and left we're going to set those values to 0. 88 00:07:16,090 --> 00:07:22,030 There's one more thing we need to do here, and that is set an explicit width and height. 89 00:07:22,030 --> 00:07:26,700 So I'm just going to set a value. We'll change these later on. 90 00:07:26,700 --> 00:07:29,070 If we set it to 500 pixels there— 91 00:07:29,070 --> 00:07:33,140 Actually, I'm going to make it slightly smaller just so you can see it. There we go. 92 00:07:33,140 --> 00:07:35,590 You can see that it's actually centered on the page. 93 00:07:35,590 --> 00:07:39,210 Of course we want to leave enough room for all of these list items, 94 00:07:39,210 --> 00:07:46,910 so let's change that back, let's say 600. There we go. 95 00:07:46,910 --> 00:07:50,130 That's pretty cool there. 96 00:07:50,130 --> 00:07:57,140 We want to do the math here properly, though, so let's do that. 97 00:07:57,140 --> 00:08:02,420 It looks like there's some weird padding going on here. I'm not sure what that's about. 98 00:08:02,420 --> 00:08:08,590 I'm going to open up my inspector here in Chrome and see if we can get rid of that. 99 00:08:08,590 --> 00:08:12,210 I'm going to go to the Metrics here. 100 00:08:12,210 --> 00:08:17,980 It looks like—oh, okay. I guess maybe there is some margin in there. 101 00:08:17,980 --> 00:08:24,050 Maybe it's on the unordered list. Aha! Yes, it is. 102 00:08:24,050 --> 00:08:29,160 So we need to actually say margin: 0; on that as well. There we go. 103 00:08:29,160 --> 00:08:33,559 Now it's flush right up against the edge of that element. 104 00:08:33,559 --> 00:08:39,799 Let's set this to the proper width or a width that's good enough at least to get us started. 105 00:08:39,799 --> 00:08:42,760 We know that we have 9 elements here. 106 00:08:42,760 --> 00:08:50,680 Each one is 50 pixels wide, and we're going to have a 10th element over here on the right. 107 00:08:50,680 --> 00:08:54,610 We actually have 10 elements that are all 50 pixels wide, 108 00:08:54,610 --> 00:08:59,410 and each one of them has a margin-right of 5 pixels. 109 00:08:59,410 --> 00:09:04,090 This last list item over here that's actually going to be a list going down 110 00:09:04,090 --> 00:09:07,460 will not have that extra margin. 111 00:09:07,460 --> 00:09:09,850 So we need to calculate this. 112 00:09:09,850 --> 00:09:14,100 Let's go ahead and just open up our Spotlight here. 113 00:09:14,100 --> 00:09:18,710 This is where I like to do all of my calculations, believe it or not. 114 00:09:18,710 --> 00:09:25,910 We're going to say 9 * 55. That will give us 495. 115 00:09:25,910 --> 00:09:32,500 And then we need to add 50 to that, so that's going to be 545 across. 116 00:09:32,500 --> 00:09:36,320 We're going to say width: 545px; 117 00:09:36,320 --> 00:09:40,660 I think I did my math correctly there. It looks okay so far. 118 00:09:40,660 --> 00:09:47,860 Then of course this is going to be square, so we'll go ahead and do the same thing. 119 00:09:47,860 --> 00:09:49,040 Cool. 120 00:09:49,040 --> 00:09:55,920 It looks like we're running out of space. I'm just going to make this full screen so that we can see what's going on here. 121 00:09:55,920 --> 00:10:02,190 Let's start adding in the rest of these lists and then positioning them, 122 00:10:02,190 --> 00:10:05,370 again, just like we have in our mockup here. 123 00:10:05,370 --> 00:10:09,820 We have our first one here, then we need 3 more. 124 00:10:09,820 --> 00:10:17,900 I'm going to close my CSS and jump into the HTML here. 125 00:10:20,620 --> 00:10:25,190 So now we have a whole bunch of lists here. It actually looks kind of cool. 126 00:10:25,190 --> 00:10:31,960 We're going to label this one top, so we'll use an ID of "top". 127 00:10:31,960 --> 00:10:36,720 And then we need IDs on the rest of these so that we can identify them. 128 00:10:36,720 --> 00:10:42,030 This one is going to be on the right, this one is going to be on the bottom, 129 00:10:42,030 --> 00:10:46,360 and then finally, we'll have the one over here on the left. 130 00:10:47,380 --> 00:10:48,600 Cool. 131 00:10:50,530 --> 00:10:54,480 Now let's jump back into the CSS. 132 00:10:54,480 --> 00:11:06,130 For the first list, top, we want to position it absolutely. 133 00:11:06,130 --> 00:11:12,580 And then we want to say top: 0; and left: 0; 134 00:11:12,580 --> 00:11:13,850 Cool. 135 00:11:14,990 --> 00:11:19,620 For the one on the right we want to do something similar, 136 00:11:19,620 --> 00:11:23,630 so we'll copy and paste that code. 137 00:11:23,630 --> 00:11:29,420 But instead, we actually want that to be over on the right side. 138 00:11:29,420 --> 00:11:35,090 We also need to make sure that those list items are not floated to the left. 139 00:11:35,090 --> 00:11:37,280 We actually just want them running down the page. 140 00:11:37,280 --> 00:11:46,330 So we're going to need to move this float out of this list item and get a little bit more specific. 141 00:11:46,330 --> 00:11:54,890 We'll say top li. That's going to be floated to the left with a margin-right of 5 pixels. 142 00:11:54,890 --> 00:12:02,000 And then for the ones on the right we're going to do something similar here, except we're not going to float these. 143 00:12:02,000 --> 00:12:07,600 We're just going to say margin-bottom; 5px; 144 00:12:08,840 --> 00:12:13,210 There we go. Margin-right. Okay. Cool. 145 00:12:13,210 --> 00:12:22,950 Now we have our UL positioned over here on the right and we just need to do it for the bottom and the left. 146 00:12:23,910 --> 00:12:30,860 Let's go ahead and copy all this stuff here because it's going to be pretty similar code. 147 00:12:30,860 --> 00:12:34,650 Here's our new code. Just make some space here. 148 00:12:37,050 --> 00:12:44,520 For the stuff that's on the bottom, we're going to say bottom and align it to the right. 149 00:12:46,010 --> 00:12:53,040 We want to float everything to the left, and we actually want margin on the left side this time. 150 00:12:53,040 --> 00:12:54,870 There we go. 151 00:12:54,870 --> 00:13:00,960 And then finally, for our left UL we're going to say margin-bottom. 152 00:13:00,960 --> 00:13:06,590 It's going to be positioned on the left side at the bottom. 153 00:13:06,590 --> 00:13:13,410 And let's see. What's going on here? Oh. We want that margin to be on the top. 154 00:13:13,410 --> 00:13:19,570 There we go. Look at that. We have list items going all the way around our element now. 155 00:13:19,570 --> 00:13:24,590 We have exactly what we want here. 156 00:13:24,590 --> 00:13:28,600 Now we need to make these light bulbs. 157 00:13:28,600 --> 00:13:34,870 First we're going to style the light bulbs and then we're going to make them light up. 158 00:13:34,870 --> 00:13:39,860 Let's jump down here. That's all of our positioning stuff. 159 00:13:39,860 --> 00:13:44,190 I'm just going to make some space here to work. 160 00:13:44,190 --> 00:13:53,210 For each one of our list items, we do not want the background to be this ugly orange color, 161 00:13:53,210 --> 00:13:55,850 so let's get rid of that. 162 00:13:55,850 --> 00:14:02,650 Actually, I'm going to do all the work up here in this list item rather than creating a new selector. There we go. 163 00:14:06,140 --> 00:14:13,820 I want the background to be some kind of gradient, so that will go there. I'm not sure what's going there yet. 164 00:14:13,820 --> 00:14:17,510 But then we also want it to be round. 165 00:14:17,510 --> 00:14:23,900 To do that, we'll just use border-radius and we'll set it to 100%. 166 00:14:23,900 --> 00:14:26,210 I'm actually going to cheat a little bit here. 167 00:14:26,210 --> 00:14:30,560 In CodePen there's this really cool feature called Prefix Free. 168 00:14:30,560 --> 00:14:38,480 I'm going to turn that on, and that's going to allow me to type CSS3 according to the W3C spec 169 00:14:38,480 --> 00:14:45,150 without actually having to use all of those browser prefixes and worry about compatibility. 170 00:14:45,150 --> 00:14:50,740 So border-radius should be set to 100% there. 171 00:14:50,740 --> 00:14:55,250 And if we set the background to orange, cool, we have all these little circles. 172 00:14:55,250 --> 00:14:59,300 Now we want to drop in a gradient. 173 00:14:59,300 --> 00:15:05,730 I'm going to jump into a gradient generator. 174 00:15:05,730 --> 00:15:08,820 I'm not actually going to write it out myself. Too lazy for that. 175 00:15:08,820 --> 00:15:12,250 There we go. We have a nice gradient here. 176 00:15:12,250 --> 00:15:20,300 We want it to be a radial gradient, and we want it to be a little bit darker on the outside than it is on the inside. 177 00:15:20,300 --> 00:15:24,100 There you can see we have this yellow color happening, 178 00:15:24,100 --> 00:15:26,570 and towards the middle it's kind of white. 179 00:15:26,570 --> 00:15:34,510 We want that to be a little bit lower in opacity, so let's drop that down to 60. 180 00:15:34,510 --> 00:15:36,950 And then same thing on the edges. 181 00:15:36,950 --> 00:15:39,390 We want it to be a little bit transparent. 182 00:15:39,390 --> 00:15:41,550 Let's go ahead and do that. 183 00:15:41,550 --> 00:15:43,520 It looks good enough for now. 184 00:15:43,520 --> 00:15:46,990 We can make additional tweaks in our code. 185 00:15:46,990 --> 00:15:50,740 All I need here is the W3C compatible version. 186 00:15:50,740 --> 00:15:55,600 They actually give you everything in this particular gradient generator. That's pretty cool. 187 00:15:55,600 --> 00:15:59,060 But we just need this code right here. 188 00:15:59,060 --> 00:16:06,050 So I will copy that, we'll leave that open in case we need it, and I'll paste it right here, 189 00:16:06,050 --> 00:16:08,540 and that should give us some gradients. 190 00:16:08,540 --> 00:16:13,310 Let's get rid of this purple background color 191 00:16:13,310 --> 00:16:19,750 and let's set the background of the body to black just to add some drama here. 192 00:16:19,750 --> 00:16:26,020 I'm going to say background and I'll use the hexadecimal value black. There we go. 193 00:16:26,020 --> 00:16:28,110 Now we have these lights here. 194 00:16:28,110 --> 00:16:31,390 They look okay. I think we could do a little bit better, though. 195 00:16:31,390 --> 00:16:37,410 I'm actually going to set the center to kind of a yellowish color. 196 00:16:37,410 --> 00:16:42,040 I'm going to say 200, something like that. That's pretty good. 197 00:16:42,040 --> 00:16:44,670 I'm going to lower the opacity here. 198 00:16:44,670 --> 00:16:51,650 And then on the outer side of this light bulb I'm going to make some further adjustments. 199 00:16:51,650 --> 00:16:56,770 I would actually like this to be a pretty bright yellow color as well, 200 00:16:56,770 --> 00:17:05,520 so I'm just adjusting rgb. I'm adjusting the blue here, so taking out some blue. That looks good. 201 00:17:05,520 --> 00:17:08,890 And then I also want to adjust the radius of this gradient, 202 00:17:08,890 --> 00:17:12,790 so I'm going to actually move that out by just a little bit. 203 00:17:12,790 --> 00:17:17,250 That looks pretty good, but I think we could make this look even more realistic 204 00:17:17,250 --> 00:17:20,450 if we had some kind of shine here on the light bulb. 205 00:17:20,450 --> 00:17:24,710 I'm going to use a pseudo element here. 206 00:17:24,710 --> 00:17:32,010 I'm going to say before on each list item, the content node will be blank, 207 00:17:32,010 --> 00:17:35,830 so we'll just have absolutely nothing in there. 208 00:17:35,830 --> 00:17:38,800 We'll set the display to block. 209 00:17:38,800 --> 00:17:43,310 And then same kind of thing, we're going to set this to an ugly background color 210 00:17:43,310 --> 00:17:46,250 just so that we can actually see it. 211 00:17:46,250 --> 00:17:51,930 Width and height will be something like 20 pixels. 212 00:17:51,930 --> 00:17:54,000 We'll set that. 213 00:17:54,000 --> 00:18:02,570 And there we go. We have this element here right on top of each one of our light bulbs. 214 00:18:02,570 --> 00:18:10,410 We need to shape this and kind of style it so it looks like this white reflection or refraction or whatever you call it. 215 00:18:10,410 --> 00:18:18,750 Let's go ahead and set the background to rgba. We'll set it to pure white. 216 00:18:18,750 --> 00:18:25,270 And then we're going to adjust the opacity a little bit there. There we go. 217 00:18:25,270 --> 00:18:31,110 We're going to set the border-radius once again to 100%. 218 00:18:31,110 --> 00:18:38,030 Actually, I don't want this to be completely circular, so let's make it kind of oblong there. 219 00:18:38,030 --> 00:18:46,140 That's looking pretty good. Let's see if we can get that effect to be exaggerated even more. 220 00:18:46,140 --> 00:18:49,250 There we go. I like that a little bit better. 221 00:18:49,250 --> 00:18:57,780 That is a bit big for my taste, so let's drop down the size there down to 15 pixels. 222 00:18:57,780 --> 00:19:02,160 Now we need to position it over each light bulb, so let's do that. 223 00:19:02,160 --> 00:19:09,750 We'll say position: absolute; right: 0; top: 0; and let's see where that gets us. 224 00:19:09,750 --> 00:19:16,870 Oh, okay. So we need to actually say position: relative; on each one of our light bulbs there. There we go. 225 00:19:16,870 --> 00:19:20,110 Now we can position these relative to the light bulb. 226 00:19:20,110 --> 00:19:23,240 We'll move this down a little bit, 227 00:19:23,240 --> 00:19:29,330 over from the right 10 pixels, over from the top 10 pixels. That's a little bit much. 228 00:19:29,330 --> 00:19:33,780 I'm going to drop that down to 6. Will that do it? 229 00:19:33,780 --> 00:19:37,120 Yeah, that's pretty good. 230 00:19:37,120 --> 00:19:40,920 I'm actually going to drop the opacity a bit more. There we go. 231 00:19:40,920 --> 00:19:43,460 Those light bulbs don't look too bad. 232 00:19:43,460 --> 00:19:47,050 They'll actually look a lot more realistic when they're lit up. 233 00:19:47,050 --> 00:19:56,710 Maybe we can even put something inside here, perhaps Jason Seifer or Andrew Chalkley. That would be nice. 234 00:19:56,710 --> 00:20:03,620 Let's make these light bulbs light up. How are we going to do that? 235 00:20:03,620 --> 00:20:10,020 I think we should probably use box-shadow because with box-shadow we can apply multiple shadows, 236 00:20:10,020 --> 00:20:17,000 which will really actually be lights, and we can do one on the inside and we can do one on the outside. 237 00:20:17,000 --> 00:20:24,990 I'm going to use an nth-child selector here so I can select just a few of these light bulbs. 238 00:20:24,990 --> 00:20:32,470 Let's say li:nth-child and I'm just going to select every third light bulb. 239 00:20:32,470 --> 00:20:36,890 I'm going to say box-shadow. 240 00:20:36,890 --> 00:20:44,020 We want the x and y offsets to be at 0 and we want the blur radius to be at 40 pixels, 241 00:20:44,020 --> 00:20:52,500 and then we're going to say rgba, again pure white, and we'll set it to just slightly transparent. 242 00:20:52,500 --> 00:20:55,830 There you can see that we have some of these light bulbs lighting up. 243 00:20:55,830 --> 00:21:03,120 That's pretty cool. I think I'd actually like to apply a bit of a choke there just so we can get these a little brighter. 244 00:21:03,120 --> 00:21:05,180 That's too much. 245 00:21:05,180 --> 00:21:09,030 There we go. That's not too bad. 246 00:21:09,030 --> 00:21:13,580 I think I like the look of that. I'd actually like to make these lights kind of yellowish. 247 00:21:13,580 --> 00:21:20,540 So again, I'll drop the blue, and mixing red and green, unlike in elementary school, 248 00:21:20,540 --> 00:21:23,390 will actually give you yellow. 249 00:21:23,390 --> 00:21:29,390 It's kind of the difference between additive and subtractive color processes there. It's rather complicated. 250 00:21:29,390 --> 00:21:35,940 I'm going to change that to add a little bit more blue there. There we go. 251 00:21:35,940 --> 00:21:40,190 I think I like that yellow color. That's not too bad. 252 00:21:40,190 --> 00:21:43,350 I want the interior of these to be a little bit more white. 253 00:21:43,350 --> 00:21:48,130 So now we need to add our second box-shadow. 254 00:21:48,130 --> 00:21:52,820 Let's go ahead and put that there. 255 00:21:52,820 --> 00:21:57,940 We'll tab this out and we're going to type inset here. 256 00:21:57,940 --> 00:22:06,760 The inset keyword will actually put a box-shadow on the inside of our light bulbs. That's pretty cool. 257 00:22:06,760 --> 00:22:10,910 Like I said, I want this to be fairly bright. 258 00:22:10,910 --> 00:22:16,940 I think I want to introduce a little bit more yellow there. 259 00:22:16,940 --> 00:22:19,990 It's still a little bit too white. There we go. 260 00:22:19,990 --> 00:22:23,860 Okay. I think that looks pretty nice when it's lit up. 261 00:22:23,860 --> 00:22:32,920 I think I could adjust a couple things here, like the blur radius and the choke, just to give it a little bit of a different look. 262 00:22:35,230 --> 00:22:39,480 I think I liked it the way it was, just exactly the same as the outside. 263 00:22:39,480 --> 00:22:46,630 There we go. A little bit more, a little bit less. All right. We're perfecting pixels now. It's too much. 264 00:22:46,630 --> 00:22:52,410 Okay, cool. I think those look like light bulbs that are lit up. 265 00:22:52,410 --> 00:22:57,710 Now we need to animate these things, and the way we're going to do that 266 00:22:57,710 --> 00:23:05,550 is we're going to grab these light bulbs in sets of 3 and then we're going to set an animation delay 267 00:23:05,550 --> 00:23:09,590 so that they light up one at a time. 268 00:23:09,590 --> 00:23:15,130 Every first light bulb will light up, then every second one, then every third one, 269 00:23:15,130 --> 00:23:19,150 and it will look like these lights are actually chasing around. 270 00:23:19,150 --> 00:23:21,420 We might need to make a few other adjustments. 271 00:23:21,420 --> 00:23:23,860 For example, I think when we get down here and over on the left 272 00:23:23,860 --> 00:23:26,770 we'll actually need to rotate these 180 degrees 273 00:23:26,770 --> 00:23:29,490 because I think it's going to be going backwards. 274 00:23:29,490 --> 00:23:33,700 But we'll deal with that as we need to. 275 00:23:33,700 --> 00:23:43,950 Let's pop down here and let's add some animation keyframes. 276 00:23:46,000 --> 00:23:57,410 I'm going to say @keyframes, and at 0% here it's not going to be lit up at all. 277 00:23:57,410 --> 00:24:01,020 We actually need to move these box-shadows down. 278 00:24:01,020 --> 00:24:06,520 Let me grab those box-shadows. There we go. 279 00:24:06,520 --> 00:24:10,380 We'll use these selectors later on. 280 00:24:12,370 --> 00:24:18,230 We don't want any box-shadow at 0%. I think I may need to zero those out for it to actually work. 281 00:24:18,230 --> 00:24:22,170 But at 100% we want it to be completely lit up. 282 00:24:22,170 --> 00:24:25,970 Or wait, no. Actually, I'm sorry, that needs to be reversed. 283 00:24:25,970 --> 00:24:30,570 At 0% we want it to be lit up completely so it will kind of pop on, 284 00:24:30,570 --> 00:24:36,430 and then once we get to 100% we want it to gently fade. 285 00:24:36,430 --> 00:24:47,380 So I'll say box-shadow. Actually, let me just copy this entire thing here. There we go. 286 00:24:47,380 --> 00:24:57,240 We want it to fade out gracefully, so we'll set the blur radius or blur radii to 0 287 00:24:57,240 --> 00:25:03,660 and we'll set the opacity on each one of these box-shadows to 0 as well. 288 00:25:03,660 --> 00:25:05,610 CodePen isn't really— 289 00:25:05,610 --> 00:25:09,660 Yeah, there we go. Now we have enough room so we can actually see this code. 290 00:25:09,660 --> 00:25:14,530 There we go. Now it's nicely formatted so it's not wrapping all over the place. 291 00:25:14,530 --> 00:25:17,060 There we go. Okay. 292 00:25:17,060 --> 00:25:26,280 Let's apply this animation to all of our list items just to see where we're at and see how this actually blinks. 293 00:25:26,280 --> 00:25:32,920 I'm going to jump up here to my list item and I'm going to say animation, 294 00:25:32,920 --> 00:25:38,450 which again, normally, you would need a bunch of browser prefixes for this to actually work. 295 00:25:38,450 --> 00:25:43,290 But we're using no prefix, so we can just type in animation. Pretty awesome. 296 00:25:43,290 --> 00:25:51,820 We need to give that an animation name, so we're going to say chase. There we go. 297 00:25:51,820 --> 00:25:54,730 We've called that animation chase. 298 00:25:54,730 --> 00:26:05,550 We want these to blink for 1 second, and we want this to be infinite. 299 00:26:05,550 --> 00:26:11,340 Now these lights will blink at an interval of 1 second. 300 00:26:11,340 --> 00:26:18,950 Like I said, we need to actually select each one of these and apply an animation delay so that they chase around. 301 00:26:18,950 --> 00:26:21,990 Let's comment that out. 302 00:26:21,990 --> 00:26:24,030 We'll do that next. 303 00:26:24,030 --> 00:26:32,250 I'm going to copy that and I'm going to paste it into this nth-child selector. 304 00:26:32,250 --> 00:26:37,870 Here we're just selecting the first element in each one of these lists. 305 00:26:37,870 --> 00:26:43,640 Like I said, we have a bit of an issue down here, as you can see, 306 00:26:43,640 --> 00:26:48,030 because these 2 are right next to each other, but they should never blink at the same time. 307 00:26:48,030 --> 00:26:51,400 So we're actually need to rotate these 180 degrees. 308 00:26:51,400 --> 00:26:54,560 Here's another instance of that as well. 309 00:26:54,560 --> 00:26:59,950 But we'll do that last. Let's just get this chase working first. 310 00:26:59,950 --> 00:27:03,790 We need to use some fairly advanced nth-child selectors in order to do this 311 00:27:03,790 --> 00:27:10,400 because we want to select every first, every second, and every third element in these lists. 312 00:27:10,400 --> 00:27:15,620 There's this really cool post over on CSS-Tricks that I refer to quite a lot. 313 00:27:15,620 --> 00:27:20,530 It's called nth-child Recipes. 314 00:27:20,530 --> 00:27:24,750 Let me see if I can find that. Yeah, Useful nth-child Recipes. 315 00:27:26,860 --> 00:27:31,260 If we scroll down here, you'll see that there's all sorts of cool recipes here. 316 00:27:31,260 --> 00:27:35,310 You can select only the fifth element, you can select all but the first five, 317 00:27:35,310 --> 00:27:41,790 select only the first five, select every fourth, starting at the first, and so on. 318 00:27:41,790 --> 00:27:48,970 This is pretty similar to what we need to do, so we're going to do something kind of like this. 319 00:27:48,970 --> 00:27:56,950 I'm just going to copy and paste this selector knowing that it will be every fourth, starting at the first. 320 00:27:56,950 --> 00:28:02,600 I want to do it this way. I think that will be a little bit better stylistically. 321 00:28:05,100 --> 00:28:07,690 Let's paste that in there. 322 00:28:07,690 --> 00:28:16,420 I think I need to say every third one—yeah, like that—plus the first one. 323 00:28:16,420 --> 00:28:23,650 Now I need to do the same thing but for every second one. 324 00:28:23,650 --> 00:28:26,510 Let me comment that out. 325 00:28:27,500 --> 00:28:32,660 We'll say that. Will that do what I want? No, not quite. 326 00:28:32,660 --> 00:28:34,630 You know what I need to do? 327 00:28:34,630 --> 00:28:47,070 I need to say every third on every one of these nth-child selectors, plus the amount that I want it to be an interval. 328 00:28:47,070 --> 00:28:49,630 I don't know. That sentence was an absolute train wreck. 329 00:28:49,630 --> 00:28:51,670 Okay, moving on. 330 00:28:51,670 --> 00:28:55,510 There we have our third one. 331 00:28:55,510 --> 00:28:59,690 With this nth-child selector we're actually selecting every third element. 332 00:28:59,690 --> 00:29:07,870 I think that's it. I think we have all of the selectors that we need here. 333 00:29:07,870 --> 00:29:14,950 Now what we can do is apply this animation to the list items, 334 00:29:14,950 --> 00:29:21,900 and then down here we'll set these to have an animation delay. 335 00:29:21,900 --> 00:29:27,000 What that's going to do is it's going to start each light bulb at different times. 336 00:29:27,000 --> 00:29:34,620 Or in this case it will start every first light bulb and then it will start every second one and every third one. 337 00:29:34,620 --> 00:29:41,310 So instead of these animations here, we actually want to use the animation-delay property. 338 00:29:41,310 --> 00:29:45,090 I'm going to say animation-delay. 339 00:29:45,090 --> 00:29:48,940 And you can just put in any time value here in CSS. 340 00:29:48,940 --> 00:29:51,740 We can say something like 1 second. 341 00:29:51,740 --> 00:29:56,820 And then down here we can say 2 seconds and then we'll say 3 seconds. 342 00:29:56,820 --> 00:30:00,470 Actually, we don't want any delay on the first one at all. We want it to start right away. 343 00:30:00,470 --> 00:30:08,340 So we'll say 1, 2, and then up here in our actual animation property 344 00:30:08,340 --> 00:30:11,560 we'll say that this lasts for 3 seconds. 345 00:30:11,560 --> 00:30:15,460 That way we can kind of see it slowly coming together here. 346 00:30:15,460 --> 00:30:25,080 We can see we've got 1, 2, 3, 1, 2, 3, 1, 2, 3 and so on. 347 00:30:25,080 --> 00:30:33,000 This one is just fine, but again, we need to rotate these, it looks like, because they're actually going backwards, 348 00:30:33,000 --> 00:30:36,080 1, 2, 3, just like the top here. 349 00:30:36,080 --> 00:30:38,870 Let's go ahead and do that. 350 00:30:38,870 --> 00:30:44,150 We'll go to—I believe it's bottom here that we want to rotate. 351 00:30:44,150 --> 00:30:51,800 We'll say transform: rotate and we just need to rotate it 180 degrees. 352 00:30:51,800 --> 00:30:55,070 Same thing on the left side. 353 00:30:55,070 --> 00:31:00,540 And I think that should do it. Uh-oh. There's something wrong with the math here. 354 00:31:00,540 --> 00:31:04,910 Oh, you know what? Because we rotated it, we actually need to change the margins. 355 00:31:04,910 --> 00:31:10,530 So this gets a little bit tricky, but I think we can do it. 356 00:31:10,530 --> 00:31:15,740 On the bottom here we actually need to say margin-right, I believe. Yeah. 357 00:31:15,740 --> 00:31:20,540 And then instead of margin-top we just need to say margin-bottom on the left side. 358 00:31:20,540 --> 00:31:28,450 So yeah, I think that's working. It looks like it's working just fine. 359 00:31:28,450 --> 00:31:34,560 Let's change the pace of this so we can actually make sure it's working. 360 00:31:37,260 --> 00:31:43,440 If we do our math right, we have 0, 1, and 2 seconds and then 3 seconds. 361 00:31:43,440 --> 00:31:51,990 So theoretically, if we just said something like 200 milliseconds, 400 milliseconds, 362 00:31:51,990 --> 00:31:57,850 and we're just adding 200 every time, this should be 600 milliseconds. 363 00:32:00,330 --> 00:32:04,500 And there we go. It looks like these are chasing around here. 364 00:32:04,500 --> 00:32:08,480 This wouldn't be complete without some kind of Web celebrity inside, 365 00:32:08,480 --> 00:32:15,550 so we're going to head over to Facebook and open up Andrew's page here. There we go. 366 00:32:15,550 --> 00:32:17,700 Oh man, look at that beautiful man. 367 00:32:17,700 --> 00:32:23,400 We're just going to steal this image, open this image in a new tab. 368 00:32:23,400 --> 00:32:26,600 This is probably against the Facebook terms of service, 369 00:32:26,600 --> 00:32:36,580 but I'm just going to hotlink this image directly and we're going to set it as the background image for our wrapper here. 370 00:32:36,580 --> 00:32:42,020 I think that's what we want to do, right? Yeah, because the wrapper is containing everything. 371 00:32:42,020 --> 00:32:44,110 That should do it. 372 00:32:44,110 --> 00:32:52,700 If we say background: green; that's exactly what I thought would happen. Wonderful. 373 00:32:52,700 --> 00:33:01,340 We're going to say url and we'll put in this link to Andrew that is entirely too large. 374 00:33:01,340 --> 00:33:07,440 Say background-size: 90%; on both. 375 00:33:07,440 --> 00:33:10,890 We don't want it to repeat, so we'll say no-repeat. 376 00:33:10,890 --> 00:33:18,900 And then we need to change the background-position and we just need to move it over 377 00:33:18,900 --> 00:33:24,280 I think by 10% on each axis. 378 00:33:24,280 --> 00:33:33,330 Okay. That looks like it's still a little bit too large, so let's decrease the size there, 20% and 20%. 379 00:33:33,330 --> 00:33:35,130 Is that what we need to do? 380 00:33:35,130 --> 00:33:39,570 Oh my goodness, this is terrible. Oh, there we go. Okay. 50%. 381 00:33:39,570 --> 00:33:42,000 That's what actually centers it. Silly me. 382 00:33:42,000 --> 00:33:45,730 And there we have it. There's Andrew right in the middle there. 383 00:33:45,730 --> 00:33:49,280 I'm going to go ahead and save this Pen. That was extremely risky. 384 00:33:49,280 --> 00:33:53,380 I actually didn't save that the entire time. That's okay. 385 00:33:53,380 --> 00:33:58,720 I'm going to go ahead and call this Marquee Lights. 386 00:33:58,720 --> 00:34:02,840 Oh my gosh. How do you spell marquee? I have no idea. 387 00:34:02,840 --> 00:34:11,100 Marquee. Is that really the spelling? I don't think it is. Yeah. Yeah, I think that's it. Okay. 388 00:34:11,100 --> 00:34:22,659 Sure. We're going to go with that. So I'm going to call it Marquee Chaser Lights. 389 00:34:22,659 --> 00:34:28,360 I'll just put in a silly description here, say, Just for fun! 390 00:34:28,360 --> 00:34:31,530 We'll tag it with a couple things. 391 00:34:31,530 --> 00:34:44,110 We'll say something like css3, animation, box-shadow. Sure. That looks great. 392 00:34:44,110 --> 00:34:50,600 Now it should be on my CodePen profile. There it is, there's Marquee Chaser Lights. 393 00:34:50,600 --> 00:34:54,949 There's Tom Hanks and Meg Ryan spinning around the Space Jam logo. Don't ask. 394 00:34:54,949 --> 00:35:01,630 I've been writing a jQuery plugin recently, doing a whole bunch of other cool stuff on CodePen. 395 00:35:01,630 --> 00:35:04,140 It's a wonderful place. 396 00:35:04,140 --> 00:35:07,330 So that is pretty much it. 397 00:35:07,330 --> 00:35:13,470 I'm going to hop into our Livestream chat moderation here. 398 00:35:13,470 --> 00:35:19,080 One of our crew members, Chris Zabriskie, is actually moderating the chat over on YouTube, 399 00:35:19,080 --> 00:35:25,400 and he's putting questions in here for me to look at so I don't actually have to try to keep up with the stream. 400 00:35:25,400 --> 00:35:30,240 We'll do a little bit of Q&A here. 401 00:35:30,240 --> 00:35:33,020 There's a couple of questions. 402 00:35:33,020 --> 00:35:38,440 One says, "Can you show how you got to Chrome's inspector when you get a chance?" 403 00:35:38,440 --> 00:35:41,240 Well, guess what? We've got the chance right now. 404 00:35:41,240 --> 00:35:46,840 I'm going to open up Google Chrome here. 405 00:35:46,840 --> 00:35:52,550 Let's open this up in a new window. 406 00:35:53,660 --> 00:36:00,600 There we go. That's wonderful. This is just the greatest web page on the entire Internet really, if you think about it. 407 00:36:00,600 --> 00:36:05,530 The way I got the Chrome inspector to come up, 408 00:36:05,530 --> 00:36:13,810 on a Mac you hit Command Alt I and that will pop up the inspector. 409 00:36:13,810 --> 00:36:18,750 Another way you can do it is by right clicking on the element that you want to inspect, 410 00:36:18,750 --> 00:36:22,570 and then you can say Inspect Element. 411 00:36:22,570 --> 00:36:26,620 I'm not sure what the hotkeys are on Windows. 412 00:36:26,620 --> 00:36:31,320 I think it's something similar, like Control Alt I. 413 00:36:31,320 --> 00:36:36,740 But you can definitely look it up just by Googling for it. 414 00:36:36,740 --> 00:36:39,430 Just Google for Chrome hotkeys or something. 415 00:36:39,430 --> 00:36:44,420 The cool thing about the inspector is that you can actually click on this little magnifying glass here 416 00:36:44,420 --> 00:36:48,470 and you can highlight each individual element that you want to inspect. 417 00:36:48,470 --> 00:36:54,230 So I can say, "Whoa, there's a list item," or something like that. 418 00:36:54,230 --> 00:36:59,390 If we wanted to take this wrapper here and hack our own styles on top, we can do that. 419 00:36:59,390 --> 00:37:02,370 This will just do this within my browser. 420 00:37:02,370 --> 00:37:08,220 This actually isn't going to affect the Pen in any way or affect any website that you do this to, 421 00:37:08,220 --> 00:37:10,990 so nobody else will actually see your hacking. 422 00:37:10,990 --> 00:37:16,800 But let's go ahead and just change the background here. 423 00:37:16,800 --> 00:37:25,950 I'm going to say background-image. Oh. What's going on here in HipChat? 424 00:37:25,950 --> 00:37:30,360 Is that just another question? Oh, okay. Yeah. We'll get to that. 425 00:37:30,360 --> 00:37:38,550 So we'll say background: orange; and as you can see, you can actually change the background color here. 426 00:37:38,550 --> 00:37:46,900 I could go crazy. I could add in an animation and do all sorts of fun stuff there. 427 00:37:46,900 --> 00:37:48,220 Actually, let's see if that works. 428 00:37:48,220 --> 00:37:54,910 We'll say animation, and I think we do need to use prefixes here since we're not using— 429 00:37:54,910 --> 00:38:03,590 Well, I don't know. Hmm. I don't know how Prefix Free actually works. Maybe we could get away with it. 430 00:38:03,590 --> 00:38:05,950 But we're going to add the prefix. 431 00:38:05,950 --> 00:38:15,900 We'll say webkit-animation: chase for 1 second infinite, and that should do it. 432 00:38:15,900 --> 00:38:24,380 Oh yeah, okay. It's kind of hard to tell, but it is actually adding a box-shadow to the image. 433 00:38:24,380 --> 00:38:27,420 But that's pretty much how the inspector works. It's pretty cool. 434 00:38:27,420 --> 00:38:33,320 If you've never used it before, there's a bunch of other different tabs here that do all sorts of cool stuff. 435 00:38:33,320 --> 00:38:38,490 Let's jump back into the chat here. 436 00:38:38,490 --> 00:38:45,640 We have another question that says, "Someone mentioned that the bulb highlight is in different spots on different sides." 437 00:38:45,640 --> 00:38:48,300 You are correct. Very observant. 438 00:38:48,300 --> 00:38:53,050 We flipped these around, but we never actually flipped the highlight. 439 00:38:53,050 --> 00:38:56,050 So let's go ahead and fix that right now. 440 00:38:56,050 --> 00:39:01,340 We can jump into our Pen here. 441 00:39:01,340 --> 00:39:08,400 All that means is that we need to adjust the selector that we're using. 442 00:39:08,400 --> 00:39:17,420 We have li:before but we need to just change the top and right values— 443 00:39:17,420 --> 00:39:20,320 well, actually the positioning values. 444 00:39:20,320 --> 00:39:22,300 Let me grab that. 445 00:39:22,300 --> 00:39:27,040 We only need to do this on bottom and left. 446 00:39:27,040 --> 00:39:40,910 For bottom we'll say before, and let's just see if that selector is actually working. 447 00:39:40,910 --> 00:39:46,000 Yes, it is. Look at that. We're selecting those appropriately. 448 00:39:46,000 --> 00:39:58,700 Then we need to change this to be, I think, left and bottom. Oh gosh. 449 00:39:58,700 --> 00:40:06,220 Okay. You know what? I think we need to zero out top and right. 450 00:40:06,220 --> 00:40:09,740 Will that work, or do we actually need to make another whole selector there? 451 00:40:09,740 --> 00:40:12,660 Huh. No. That's doing something. 452 00:40:12,660 --> 00:40:19,810 Bottom? Top? I'm not really sure. 453 00:40:21,100 --> 00:40:27,460 I do know that we could do this rather explicitly by just grabbing the selector. 454 00:40:27,460 --> 00:40:30,930 You know what? Nah, actually, I'm not going to mess with that. 455 00:40:30,930 --> 00:40:37,790 But you get the idea. You could select those separately and position them appropriately. 456 00:40:37,790 --> 00:40:40,910 I'm not going to do that. We're just going to leave it as is. 457 00:40:40,910 --> 00:40:44,310 We don't want to change Andrew at all here. 458 00:40:44,310 --> 00:40:49,870 Let's hop back into the chat here and answer some more questions. 459 00:40:49,870 --> 00:40:54,050 Let's see. "Someone asked what specs you're running." 460 00:40:54,050 --> 00:40:57,940 I'm going to say About This Mac. 461 00:40:57,940 --> 00:41:03,940 You can see I have a 2.6 GHz Intel Core I7. 462 00:41:03,940 --> 00:41:12,120 I have 16 GB of RAM. It's on a solid state hard drive, not that that really matters a whole lot for what we were doing today. 463 00:41:12,120 --> 00:41:16,170 I think there's a pretty nice graphics card in here as well. 464 00:41:16,170 --> 00:41:21,850 Pretty fancy MacBook Pro Retina display. 465 00:41:22,900 --> 00:41:28,760 "Do you have any formal web dev qualifications, or do you think self-taught is the way to go?" 466 00:41:28,760 --> 00:41:32,910 Whoa, we're getting into some deep philosophy here. 467 00:41:32,910 --> 00:41:37,980 I have a little bit of formal training through my university. 468 00:41:37,980 --> 00:41:42,490 I went to the University of Central Florida and got a degree in digital media. 469 00:41:42,490 --> 00:41:45,630 I don't think it was tremendously valuable. 470 00:41:45,630 --> 00:41:52,620 It didn't really do a whole lot for my web design or web development training. 471 00:41:52,620 --> 00:41:57,140 Most of what I know is self-taught just through experimentation 472 00:41:57,140 --> 00:42:01,430 and just doing stuff exactly like you saw today, just basically trying things out, 473 00:42:01,430 --> 00:42:05,830 seeing what works and just kind of going through the thought process. 474 00:42:05,830 --> 00:42:08,880 You can even talk out loud to yourself if you want. 475 00:42:09,550 --> 00:42:18,430 Next question is, "Can you please give us a nice course going deeper into HTML5 structure and semantics?" 476 00:42:18,430 --> 00:42:24,010 Sure. If you head over to TeamTreehouse.com, there's a whole bunch of stuff there. 477 00:42:24,010 --> 00:42:27,640 We are doing a lot more with HTML5, teaching structure and semantics. 478 00:42:27,640 --> 00:42:34,780 In fact, I am going to be making a new course pretty soon that will get a little bit more into that. 479 00:42:34,780 --> 00:42:39,060 Yeah, we'll definitely do more stuff in depth on that in the future. 480 00:42:39,060 --> 00:42:42,150 Next question is, "What if you wanted to see it in Internet Explorer?" 481 00:42:42,150 --> 00:42:45,150 "Do you have a preferred tool for that?" 482 00:42:46,500 --> 00:42:51,490 First of all, this demo will not work in Internet Explorer, at least I don't think. 483 00:42:51,490 --> 00:42:54,320 I'm trying to think. Is there anything that wouldn't work in there? 484 00:42:54,320 --> 00:42:57,400 I know box-shadow works in the latest versions of Internet Explorer. 485 00:42:57,400 --> 00:42:59,910 You should be able to do the transforms. 486 00:42:59,910 --> 00:43:03,620 And I think animations work just fine. 487 00:43:03,620 --> 00:43:09,670 So actually, it might look just fine in the latest versions. I'm not totally 100% sure. 488 00:43:09,670 --> 00:43:12,600 If we wanted to test that out, there's a number of different ways we could do it. 489 00:43:12,600 --> 00:43:16,930 We could use a service like Browsershots. 490 00:43:16,930 --> 00:43:20,610 I think it's at Browsershots.com. Maybe not. 491 00:43:22,350 --> 00:43:28,000 Browsershots. Oh. No, no, no, no. Excuse me. That is one service, Browsershots. 492 00:43:28,000 --> 00:43:33,740 I meant to say BrowserStack. This one is super-duper cool. 493 00:43:33,740 --> 00:43:38,690 You can actually get screenshots from a ton of different browsers. 494 00:43:40,130 --> 00:43:47,840 Yeah, so if you bring up screenshots here, you can actually get screenshots off of any of these browsers on any operating system, 495 00:43:47,840 --> 00:43:51,540 any different version you want. It's pretty incredible. 496 00:43:51,540 --> 00:43:59,710 Another way to do this would be to actually use something like Parallels or Boot Camp. 497 00:43:59,710 --> 00:44:05,100 You could just load Windows straight onto your Mac. 498 00:44:05,100 --> 00:44:13,300 I'm going to jump back to the chat here and see if there's any other good questions. 499 00:44:14,500 --> 00:44:23,180 Sarah says, "Learning CSS3 first feels awkward to me. Would love more HTML5." 500 00:44:24,390 --> 00:44:30,290 Yeah. I mean, you should really learn HTML before you jump into CSS. 501 00:44:30,290 --> 00:44:37,050 Having good structure and semantics is a great way to build an awesome website. 502 00:44:37,050 --> 00:44:39,770 There's a lot of things it's going to do for you. 503 00:44:41,150 --> 00:44:47,240 I'm not going to go into the specifics here, but basically, you want to create the structure of your web page using HTML 504 00:44:47,240 --> 00:44:50,390 and then you want to style it using CSS. 505 00:44:50,390 --> 00:44:54,700 You want to keep pretty clean separation between those things as much as possible. 506 00:44:54,700 --> 00:44:58,720 And then once you get into JavaScript, you would also want that to be separate as well. 507 00:44:58,720 --> 00:45:03,160 So you have your structural, presentational, and behavioral layers separate from one another, 508 00:45:03,160 --> 00:45:06,350 your HTML, CSS, and JavaScript, respectively. 509 00:45:06,350 --> 00:45:14,150 So the next question says, "I am currently in an HTML5 and CSS3 boot camp for the next 6 weeks." 510 00:45:14,150 --> 00:45:17,130 "What advice would you give someone just stating out?" 511 00:45:17,130 --> 00:45:18,940 Just experiment as much as possible. 512 00:45:18,940 --> 00:45:22,560 Make as many things as you can. That's going to help you so, so much. 513 00:45:22,560 --> 00:45:27,850 You can of course supplement that with actual learning materials. 514 00:45:27,850 --> 00:45:31,770 You could use a service like Treehouse to do that. 515 00:45:31,770 --> 00:45:37,680 But one of the best ways to learn is to just try things out and just make as many mistakes as you can 516 00:45:37,680 --> 00:45:39,940 and don't be afraid to break stuff. 517 00:45:39,940 --> 00:45:43,520 You can also fork things on CodePen, which is pretty cool. 518 00:45:43,520 --> 00:45:51,140 You can fork stuff and then you can safely play around with it and try things out for yourself. 519 00:45:51,140 --> 00:45:54,000 So that's a cool way to learn how to code too. 520 00:45:54,000 --> 00:45:57,620 "How long have you been writing CSS?" Oh my gosh. 521 00:45:57,620 --> 00:46:00,760 We'll try to condense this history lesson. 522 00:46:00,760 --> 00:46:08,890 I actually started making websites when I was about 11 years old. I'm 26 now. 523 00:46:08,890 --> 00:46:12,350 So I've been making websites for a little while. 524 00:46:12,350 --> 00:46:19,190 I actually started writing CSS—gosh, I mean, it's been more than 10 years now. 525 00:46:19,190 --> 00:46:23,200 I don't even really know when the first time I wrote CSS was. 526 00:46:23,200 --> 00:46:27,740 But it was amazing. I'm sure I had my mind completely blown. 527 00:46:27,740 --> 00:46:33,200 Eduardo said, "Treehouse is the only thing I needed to land me a web designer position." 528 00:46:33,200 --> 00:46:37,330 That is super awesome! We actually have a job placement program at Treehouse. 529 00:46:37,330 --> 00:46:42,740 So if you sign up at TeamTreehouse.com, you can train up, unlock badges, 530 00:46:42,740 --> 00:46:45,880 and we'll actually help you get a job. Pretty cool. 531 00:46:45,880 --> 00:46:50,510 We're just going to wrap up here, do a couple more questions. 532 00:46:50,510 --> 00:46:55,330 "Do you prefer to use Chrome browser over all others?" Yes, absolutely. 533 00:46:55,330 --> 00:47:02,070 "The class I'm in prefers Firefox, but I have many friends that say that Chrome is the way to go." 534 00:47:02,070 --> 00:47:08,700 "What is your preference?" You should definitely be using Google Chrome if you're at all interested in web design and development. 535 00:47:08,700 --> 00:47:13,510 You do need to make sure that your website works in other browsers. 536 00:47:13,510 --> 00:47:20,350 For example, the thing I just made today, like I said, probably doesn't work perfectly right away in Internet Explorer. 537 00:47:20,350 --> 00:47:23,150 Maybe it does. I'm not sure. We'd have to test that out. 538 00:47:23,150 --> 00:47:26,260 You do need to make sure that you test in every browser. 539 00:47:26,260 --> 00:47:30,610 But for day-to-day development, lots of people use Chrome. 540 00:47:30,610 --> 00:47:34,030 In fact, lots of people that are not web designers and developers use Chrome. 541 00:47:34,030 --> 00:47:37,800 I think it's the most popular browser in the world at this point. 542 00:47:37,800 --> 00:47:46,950 Definitely worth using. It's super-duper fast. It's just a fantastic browser. I highly recommend it. 543 00:47:46,950 --> 00:47:55,530 The last question we're going to do here is, "I don't know HTML, just not the semantic 5 updates." Okay. 544 00:47:55,530 --> 00:48:08,630 "Curious as to if you use any of the new Adobe programs for web development, like Edge Code, Inspect, or Reflow, and why." 545 00:48:08,630 --> 00:48:12,480 No, I actually don't use any of those programs at all. 546 00:48:12,480 --> 00:48:16,780 I actually prefer to just use— 547 00:48:16,780 --> 00:48:21,940 Well, the text editor that I use day to day is Sublime Text 2. 548 00:48:21,940 --> 00:48:26,870 We use that at Treehouse quite a lot. It's a really great text editor. 549 00:48:26,870 --> 00:48:31,780 It's pretty inexpensive and so it's not too difficult to get started with. 550 00:48:31,780 --> 00:48:39,470 I like a pretty vanilla text editor. I don't like to have something with too many bells and whistles. 551 00:48:39,470 --> 00:48:43,680 So Sublime Text works great for me. 552 00:48:43,680 --> 00:48:48,380 Edge Code, Inspect, and Reflow I haven't played with as much, 553 00:48:48,380 --> 00:48:53,310 but I'm sure they're all great tools to use too. 554 00:48:53,310 --> 00:48:58,660 As long as you're coding all the stuff by hand, so to speak, 555 00:48:58,660 --> 00:49:01,380 or I guess that's kind of the phrase that people use to describe it, 556 00:49:01,380 --> 00:49:06,840 as long as you're writing all of the code yourself, then it's totally okay. 557 00:49:06,840 --> 00:49:13,410 And even if you're using generators like the one that I used earlier on to generate the gradient, 558 00:49:13,410 --> 00:49:17,200 as long as you understand what's going on there, it's totally okay to use stuff like that 559 00:49:17,200 --> 00:49:19,640 because it actually just speeds up your workflow. 560 00:49:19,640 --> 00:49:27,090 You're able to create a gradient really quickly, and then you can just go ahead and make adjustments as needed. 561 00:49:27,090 --> 00:49:29,670 I prefer to work that way. 562 00:49:29,670 --> 00:49:32,910 I'm sure there's going to be a lot of up-and-coming web designers and developers 563 00:49:32,910 --> 00:49:36,900 that will prefer to use those other tools, 564 00:49:36,900 --> 00:49:40,900 but you should try to code by hand as much as you can. 565 00:49:40,900 --> 00:49:43,920 So that's pretty much it. 566 00:49:43,920 --> 00:49:48,280 This was just a Livestream test. Hopefully you all enjoyed it. 567 00:49:48,280 --> 00:49:50,370 We may do more stuff like this in the future. 568 00:49:50,370 --> 00:49:56,370 But if you'd like to learn more about web design, web development, mobile, business, and so much more, 569 00:49:56,370 --> 00:49:59,800 be sure to check us out at TeamTreehouse.com. 570 00:49:59,800 --> 00:50:02,610 I'm Nick Pettit. I'm @nickrp on Twitter. 571 00:50:02,610 --> 00:50:05,900 Thanks so much for watching, and we'll see you real soon.