Creating a CSS Marquee

[Creating a CSS Marquee with Nick Pettit] [CSS3 Workshop] 0:00 [Nick Pettit - @nickrp] Hey, everybody, I'm Nick Pettit. 0:04 I am @nickrp on Twitter and I am a web design teacher here at Treehouse, 0:06 which of course is the best way to learn web design, web development, business, mobile, and so much more. 0:11 Today we are doing a little Livestream test. 0:18 This could go horribly wrong. We're going to wait and see and find out what happens. 0:23 That's going to be part of the fun. 0:28 I'm going to make a lot of mistakes as I'm coding. 0:29 We're going to get into some CSS here. 0:32 But yeah, like I said, that's part of the fun. 0:35 So we're going to learn together, basically. 0:37 I'm going to code a marquee like you might see around a movie theater sign 0:41 or a sign at an actual theater, like a live performance theater. 0:49 We're going to do it with just CSS and HTML. 0:53 I don't want to use any kind of images. 0:57 We're going to be doing everything in CodePen today. 0:59 Before I actually get into the HTML and CSS, 1:02 I want to jump into Balsamiq Mockups and just give you a game plan for what we're going to be doing. 1:06 I'm going to drag out a rectangle here. 1:14 There we go. 1:18 If you're not familiar, Balsamiq Mockups is this really cool wireframing tool. 1:19 I'm not sure how much it costs, but it's pretty cheap. They've got a free trial, super awesome. 1:24 I'm going to drag out this rectangle, and I think I'm going to make it kind of squarish here. That's good. 1:29 I want these chaser lights to go all the way around the outside. 1:38 So just like you'll see at a cinema or a live performance venue, 1:45 we're going to have these lights going all the way around. 1:50 I'm going to go ahead and do this with 4 elements. 1:54 I'm going to have one right here, I'm going to have another box right here, 2:00 then I'm going to have one down at the bottom. There we go. Let's line all these up. 2:08 And then I'm going to have one more box over here on the left side. 2:15 We're going to position these using absolute positioning. 2:23 I don't think there's anything that could really go wrong here. 2:27 Each one of these elements is going to be an unordered list 2:30 and then we're going to have list items for each light on the inside. 2:36 We're actually going to do some fairly advanced CSS stuff here. 2:40 We're going to do some pretty advanced selectors using nth-child pseudo elements, 2:44 and then we're also going to use— 2:50 I think box-shadow would be a good way to make these lights actually light up. 2:52 This isn't going to be terribly semantic. 2:57 It's probably not something you would necessarily want to do in a real setting, 3:00 but it will still be kind of fun and we're still going to learn a lot about CSS. 3:07 So let's go ahead and jump into the code with our plan in mind here. 3:12 Here I'm using CodePen. 3:18 CodePen is this really amazing website put together by Chris Coyier and I think a few other people. 3:21 Chris Coyier I know is the designer on it. 3:27 Chris Coyier of course is well known for CSS-Tricks. 3:30 Go ahead and bring that up. CSS-Tricks is a pretty cool blog, a friend of the show here. 3:34 They have all sorts of stuff on here about CSS, as the name might imply. 3:41 I'm going to go ahead and close that. 3:47 To start out here, I think I want to create just a div that we're going to center on the page. 3:50 I'm going to call this my wrapper div. 4:02 There we go. 4:07 We're going to have a couple of unordered lists inside of here. 4:09 I'm going to go ahead and create one to get started. 4:15 Oops. Close that. 4:20 There we go. Now we have 3 list items. 4:25 I think each one of these should actually have 9 items. 4:27 So if we jump back to our mockup here, there will be 9 lights inside each one of these, 4:33 and that should give us what we need to chase around here. 4:38 I might have done my math wrong on that, but we'll go ahead and figure it out as we go along. 4:43 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. 4:49 I'm going to close my JavaScript and I'm going to select my unordered list, 4:59 and we're going to say list-style: none; to remove all the bullet points. 5:06 We're going to say padding: 0; to remove any kind of padding. 5:12 And then on our list items we're also going to say padding: 0; to remove the padding, 5:16 and then we're going to set these to an explicit width and height. 5:21 I'm going to say 50 pixels for the width and the height so it will be square, 5:25 and then I'm going to say background: orange; 5:31 This is something that I actually do a lot. 5:35 I set the color of an element to just a straight-up CSS keyword 5:37 so that we can actually see the element on the page and see how much space it's taking up. 5:42 I'm going to float all of these to left, set the margin-right to 5 pixels there, and there we go. 5:48 We have 9 list items all in a row there. 5:59 Now we need to actually center our wrapper on the page, 6:03 so let's go ahead and do that. 6:09 I'm going to use a technique here that's called absolute centering. 6:12 It's actually something that I saw on CodePen not too long ago, 6:15 and it's pretty cool. 6:19 It basically will center everything on the page not only horizontally but also vertically 6:21 so we'll have this nice square box in the middle. 6:28 We called that wrapper. We're going to select that using an ID selector wrapper. There we go. 6:31 We're going to say margin: auto; and actually I'm going to set this to another ugly background color there. 6:38 We're going to set it to purple just so we can see it. 6:47 As you can see, nothing is showing up just yet, 6:50 so that means that it's not actually present on the page really. It's not taking up space. 6:52 We're going to set that to margin: auto; and we're going to say position: absolute; 6:58 and then for the top, right, bottom, and left we're going to set those values to 0. 7:04 There's one more thing we need to do here, and that is set an explicit width and height. 7:16 So I'm just going to set a value. We'll change these later on. 7:22 If we set it to 500 pixels there— 7:26 Actually, I'm going to make it slightly smaller just so you can see it. There we go. 7:29 You can see that it's actually centered on the page. 7:33 Of course we want to leave enough room for all of these list items, 7:35 so let's change that back, let's say 600. There we go. 7:39 That's pretty cool there. 7:46 We want to do the math here properly, though, so let's do that. 7:50 It looks like there's some weird padding going on here. I'm not sure what that's about. 7:57 I'm going to open up my inspector here in Chrome and see if we can get rid of that. 8:02 I'm going to go to the Metrics here. 8:08 It looks like—oh, okay. I guess maybe there is some margin in there. 8:12 Maybe it's on the unordered list. Aha! Yes, it is. 8:17 So we need to actually say margin: 0; on that as well. There we go. 8:24 Now it's flush right up against the edge of that element. 8:29 Let's set this to the proper width or a width that's good enough at least to get us started. 8:33 We know that we have 9 elements here. 8:39 Each one is 50 pixels wide, and we're going to have a 10th element over here on the right. 8:42 We actually have 10 elements that are all 50 pixels wide, 8:50 and each one of them has a margin-right of 5 pixels. 8:54 This last list item over here that's actually going to be a list going down 8:59 will not have that extra margin. 9:04 So we need to calculate this. 9:07 Let's go ahead and just open up our Spotlight here. 9:09 This is where I like to do all of my calculations, believe it or not. 9:14 We're going to say 9 * 55. That will give us 495. 9:18 And then we need to add 50 to that, so that's going to be 545 across. 9:25 We're going to say width: 545px; 9:32 I think I did my math correctly there. It looks okay so far. 9:36 Then of course this is going to be square, so we'll go ahead and do the same thing. 9:40 Cool. 9:47 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. 9:49 Let's start adding in the rest of these lists and then positioning them, 9:55 again, just like we have in our mockup here. 10:02 We have our first one here, then we need 3 more. 10:05 I'm going to close my CSS and jump into the HTML here. 10:09 So now we have a whole bunch of lists here. It actually looks kind of cool. 10:20 We're going to label this one top, so we'll use an ID of "top". 10:25 And then we need IDs on the rest of these so that we can identify them. 10:31 This one is going to be on the right, this one is going to be on the bottom, 10:36 and then finally, we'll have the one over here on the left. 10:42 Cool. 10:47 Now let's jump back into the CSS. 10:50 For the first list, top, we want to position it absolutely. 10:54 And then we want to say top: 0; and left: 0; 11:06 Cool. 11:12 For the one on the right we want to do something similar, 11:14 so we'll copy and paste that code. 11:19 But instead, we actually want that to be over on the right side. 11:23 We also need to make sure that those list items are not floated to the left. 11:29 We actually just want them running down the page. 11:35 So we're going to need to move this float out of this list item and get a little bit more specific. 11:37 We'll say top li. That's going to be floated to the left with a margin-right of 5 pixels. 11:46 And then for the ones on the right we're going to do something similar here, except we're not going to float these. 11:54 We're just going to say margin-bottom; 5px; 12:02 There we go. Margin-right. Okay. Cool. 12:08 Now we have our UL positioned over here on the right and we just need to do it for the bottom and the left. 12:13 Let's go ahead and copy all this stuff here because it's going to be pretty similar code. 12:23 Here's our new code. Just make some space here. 12:30 For the stuff that's on the bottom, we're going to say bottom and align it to the right. 12:37 We want to float everything to the left, and we actually want margin on the left side this time. 12:46 There we go. 12:53 And then finally, for our left UL we're going to say margin-bottom. 12:54 It's going to be positioned on the left side at the bottom. 13:00 And let's see. What's going on here? Oh. We want that margin to be on the top. 13:06 There we go. Look at that. We have list items going all the way around our element now. 13:13 We have exactly what we want here. 13:19 Now we need to make these light bulbs. 13:24 First we're going to style the light bulbs and then we're going to make them light up. 13:28 Let's jump down here. That's all of our positioning stuff. 13:34 I'm just going to make some space here to work. 13:39 For each one of our list items, we do not want the background to be this ugly orange color, 13:44 so let's get rid of that. 13:53 Actually, I'm going to do all the work up here in this list item rather than creating a new selector. There we go. 13:55 I want the background to be some kind of gradient, so that will go there. I'm not sure what's going there yet. 14:06 But then we also want it to be round. 14:13 To do that, we'll just use border-radius and we'll set it to 100%. 14:17 I'm actually going to cheat a little bit here. 14:23 In CodePen there's this really cool feature called Prefix Free. 14:26 I'm going to turn that on, and that's going to allow me to type CSS3 according to the W3C spec 14:30 without actually having to use all of those browser prefixes and worry about compatibility. 14:38 So border-radius should be set to 100% there. 14:45 And if we set the background to orange, cool, we have all these little circles. 14:50 Now we want to drop in a gradient. 14:55 I'm going to jump into a gradient generator. 14:59 I'm not actually going to write it out myself. Too lazy for that. 15:05 There we go. We have a nice gradient here. 15:08 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. 15:12 There you can see we have this yellow color happening, 15:20 and towards the middle it's kind of white. 15:24 We want that to be a little bit lower in opacity, so let's drop that down to 60. 15:26 And then same thing on the edges. 15:34 We want it to be a little bit transparent. 15:36 Let's go ahead and do that. 15:39 It looks good enough for now. 15:41 We can make additional tweaks in our code. 15:43 All I need here is the W3C compatible version. 15:46 They actually give you everything in this particular gradient generator. That's pretty cool. 15:50 But we just need this code right here. 15:55 So I will copy that, we'll leave that open in case we need it, and I'll paste it right here, 15:59 and that should give us some gradients. 16:06 Let's get rid of this purple background color 16:08 and let's set the background of the body to black just to add some drama here. 16:13 I'm going to say background and I'll use the hexadecimal value black. There we go. 16:19 Now we have these lights here. 16:26 They look okay. I think we could do a little bit better, though. 16:28 I'm actually going to set the center to kind of a yellowish color. 16:31 I'm going to say 200, something like that. That's pretty good. 16:37 I'm going to lower the opacity here. 16:42 And then on the outer side of this light bulb I'm going to make some further adjustments. 16:44 I would actually like this to be a pretty bright yellow color as well, 16:51 so I'm just adjusting rgb. I'm adjusting the blue here, so taking out some blue. That looks good. 16:56 And then I also want to adjust the radius of this gradient, 17:05 so I'm going to actually move that out by just a little bit. 17:08 That looks pretty good, but I think we could make this look even more realistic 17:12 if we had some kind of shine here on the light bulb. 17:17 I'm going to use a pseudo element here. 17:20 I'm going to say before on each list item, the content node will be blank, 17:24 so we'll just have absolutely nothing in there. 17:32 We'll set the display to block. 17:35 And then same kind of thing, we're going to set this to an ugly background color 17:38 just so that we can actually see it. 17:43 Width and height will be something like 20 pixels. 17:46 We'll set that. 17:51 And there we go. We have this element here right on top of each one of our light bulbs. 17:54 We need to shape this and kind of style it so it looks like this white reflection or refraction or whatever you call it. 18:02 Let's go ahead and set the background to rgba. We'll set it to pure white. 18:10 And then we're going to adjust the opacity a little bit there. There we go. 18:18 We're going to set the border-radius once again to 100%. 18:25 Actually, I don't want this to be completely circular, so let's make it kind of oblong there. 18:31 That's looking pretty good. Let's see if we can get that effect to be exaggerated even more. 18:38 There we go. I like that a little bit better. 18:46 That is a bit big for my taste, so let's drop down the size there down to 15 pixels. 18:49 Now we need to position it over each light bulb, so let's do that. 18:57 We'll say position: absolute; right: 0; top: 0; and let's see where that gets us. 19:02 Oh, okay. So we need to actually say position: relative; on each one of our light bulbs there. There we go. 19:09 Now we can position these relative to the light bulb. 19:16 We'll move this down a little bit, 19:20 over from the right 10 pixels, over from the top 10 pixels. That's a little bit much. 19:23 I'm going to drop that down to 6. Will that do it? 19:29 Yeah, that's pretty good. 19:33 I'm actually going to drop the opacity a bit more. There we go. 19:37 Those light bulbs don't look too bad. 19:40 They'll actually look a lot more realistic when they're lit up. 19:43 Maybe we can even put something inside here, perhaps Jason Seifer or Andrew Chalkley. That would be nice. 19:47 Let's make these light bulbs light up. How are we going to do that? 19:56 I think we should probably use box-shadow because with box-shadow we can apply multiple shadows, 20:03 which will really actually be lights, and we can do one on the inside and we can do one on the outside. 20:10 I'm going to use an nth-child selector here so I can select just a few of these light bulbs. 20:17 Let's say li:nth-child and I'm just going to select every third light bulb. 20:24 I'm going to say box-shadow. 20:32 We want the x and y offsets to be at 0 and we want the blur radius to be at 40 pixels, 20:36 and then we're going to say rgba, again pure white, and we'll set it to just slightly transparent. 20:44 There you can see that we have some of these light bulbs lighting up. 20:52 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. 20:55 That's too much. 21:03 There we go. That's not too bad. 21:05 I think I like the look of that. I'd actually like to make these lights kind of yellowish. 21:09 So again, I'll drop the blue, and mixing red and green, unlike in elementary school, 21:13 will actually give you yellow. 21:20 It's kind of the difference between additive and subtractive color processes there. It's rather complicated. 21:23 I'm going to change that to add a little bit more blue there. There we go. 21:29 I think I like that yellow color. That's not too bad. 21:35 I want the interior of these to be a little bit more white. 21:40 So now we need to add our second box-shadow. 21:43 Let's go ahead and put that there. 21:48 We'll tab this out and we're going to type inset here. 21:52 The inset keyword will actually put a box-shadow on the inside of our light bulbs. That's pretty cool. 21:57 Like I said, I want this to be fairly bright. 22:06 I think I want to introduce a little bit more yellow there. 22:10 It's still a little bit too white. There we go. 22:16 Okay. I think that looks pretty nice when it's lit up. 22:19 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. 22:23 I think I liked it the way it was, just exactly the same as the outside. 22:35 There we go. A little bit more, a little bit less. All right. We're perfecting pixels now. It's too much. 22:39 Okay, cool. I think those look like light bulbs that are lit up. 22:46 Now we need to animate these things, and the way we're going to do that 22:52 is we're going to grab these light bulbs in sets of 3 and then we're going to set an animation delay 22:57 so that they light up one at a time. 23:05 Every first light bulb will light up, then every second one, then every third one, 23:09 and it will look like these lights are actually chasing around. 23:15 We might need to make a few other adjustments. 23:19 For example, I think when we get down here and over on the left 23:21 we'll actually need to rotate these 180 degrees 23:23 because I think it's going to be going backwards. 23:26 But we'll deal with that as we need to. 23:29 Let's pop down here and let's add some animation keyframes. 23:33 I'm going to say @keyframes, and at 0% here it's not going to be lit up at all. 23:46 We actually need to move these box-shadows down. 23:57 Let me grab those box-shadows. There we go. 24:01 We'll use these selectors later on. 24:06 We don't want any box-shadow at 0%. I think I may need to zero those out for it to actually work. 24:12 But at 100% we want it to be completely lit up. 24:18 Or wait, no. Actually, I'm sorry, that needs to be reversed. 24:22 At 0% we want it to be lit up completely so it will kind of pop on, 24:25 and then once we get to 100% we want it to gently fade. 24:30 So I'll say box-shadow. Actually, let me just copy this entire thing here. There we go. 24:36 We want it to fade out gracefully, so we'll set the blur radius or blur radii to 0 24:47 and we'll set the opacity on each one of these box-shadows to 0 as well. 24:57 CodePen isn't really— 25:03 Yeah, there we go. Now we have enough room so we can actually see this code. 25:05 There we go. Now it's nicely formatted so it's not wrapping all over the place. 25:09 There we go. Okay. 25:14 Let's apply this animation to all of our list items just to see where we're at and see how this actually blinks. 25:17 I'm going to jump up here to my list item and I'm going to say animation, 25:26 which again, normally, you would need a bunch of browser prefixes for this to actually work. 25:32 But we're using no prefix, so we can just type in animation. Pretty awesome. 25:38 We need to give that an animation name, so we're going to say chase. There we go. 25:43 We've called that animation chase. 25:51 We want these to blink for 1 second, and we want this to be infinite. 25:54 Now these lights will blink at an interval of 1 second. 26:05 Like I said, we need to actually select each one of these and apply an animation delay so that they chase around. 26:11 Let's comment that out. 26:18 We'll do that next. 26:21 I'm going to copy that and I'm going to paste it into this nth-child selector. 26:24 Here we're just selecting the first element in each one of these lists. 26:32 Like I said, we have a bit of an issue down here, as you can see, 26:37 because these 2 are right next to each other, but they should never blink at the same time. 26:43 So we're actually need to rotate these 180 degrees. 26:48 Here's another instance of that as well. 26:51 But we'll do that last. Let's just get this chase working first. 26:54 We need to use some fairly advanced nth-child selectors in order to do this 26:59 because we want to select every first, every second, and every third element in these lists. 27:03 There's this really cool post over on CSS-Tricks that I refer to quite a lot. 27:10 It's called nth-child Recipes. 27:15 Let me see if I can find that. Yeah, Useful nth-child Recipes. 27:20 If we scroll down here, you'll see that there's all sorts of cool recipes here. 27:26 You can select only the fifth element, you can select all but the first five, 27:31 select only the first five, select every fourth, starting at the first, and so on. 27:35 This is pretty similar to what we need to do, so we're going to do something kind of like this. 27:41 I'm just going to copy and paste this selector knowing that it will be every fourth, starting at the first. 27:48 I want to do it this way. I think that will be a little bit better stylistically. 27:56 Let's paste that in there. 28:05 I think I need to say every third one—yeah, like that—plus the first one. 28:07 Now I need to do the same thing but for every second one. 28:16 Let me comment that out. 28:23 We'll say that. Will that do what I want? No, not quite. 28:27 You know what I need to do? 28:32 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. 28:34 I don't know. That sentence was an absolute train wreck. 28:47 Okay, moving on. 28:49 There we have our third one. 28:51 With this nth-child selector we're actually selecting every third element. 28:55 I think that's it. I think we have all of the selectors that we need here. 28:59 Now what we can do is apply this animation to the list items, 29:07 and then down here we'll set these to have an animation delay. 29:14 What that's going to do is it's going to start each light bulb at different times. 29:21 Or in this case it will start every first light bulb and then it will start every second one and every third one. 29:27 So instead of these animations here, we actually want to use the animation-delay property. 29:34 I'm going to say animation-delay. 29:41 And you can just put in any time value here in CSS. 29:45 We can say something like 1 second. 29:48 And then down here we can say 2 seconds and then we'll say 3 seconds. 29:51 Actually, we don't want any delay on the first one at all. We want it to start right away. 29:56 So we'll say 1, 2, and then up here in our actual animation property 30:00 we'll say that this lasts for 3 seconds. 30:08 That way we can kind of see it slowly coming together here. 30:11 We can see we've got 1, 2, 3, 1, 2, 3, 1, 2, 3 and so on. 30:15 This one is just fine, but again, we need to rotate these, it looks like, because they're actually going backwards, 30:25 1, 2, 3, just like the top here. 30:33 Let's go ahead and do that. 30:36 We'll go to—I believe it's bottom here that we want to rotate. 30:38 We'll say transform: rotate and we just need to rotate it 180 degrees. 30:44 Same thing on the left side. 30:51 And I think that should do it. Uh-oh. There's something wrong with the math here. 30:55 Oh, you know what? Because we rotated it, we actually need to change the margins. 31:00 So this gets a little bit tricky, but I think we can do it. 31:04 On the bottom here we actually need to say margin-right, I believe. Yeah. 31:10 And then instead of margin-top we just need to say margin-bottom on the left side. 31:15 So yeah, I think that's working. It looks like it's working just fine. 31:20 Let's change the pace of this so we can actually make sure it's working. 31:28 If we do our math right, we have 0, 1, and 2 seconds and then 3 seconds. 31:37 So theoretically, if we just said something like 200 milliseconds, 400 milliseconds, 31:43 and we're just adding 200 every time, this should be 600 milliseconds. 31:51 And there we go. It looks like these are chasing around here. 32:00 This wouldn't be complete without some kind of Web celebrity inside, 32:04 so we're going to head over to Facebook and open up Andrew's page here. There we go. 32:08 Oh man, look at that beautiful man. 32:15 We're just going to steal this image, open this image in a new tab. 32:17 This is probably against the Facebook terms of service, 32:23 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. 32:26 I think that's what we want to do, right? Yeah, because the wrapper is containing everything. 32:36 That should do it. 32:42 If we say background: green; that's exactly what I thought would happen. Wonderful. 32:44 We're going to say url and we'll put in this link to Andrew that is entirely too large. 32:52 Say background-size: 90%; on both. 33:01 We don't want it to repeat, so we'll say no-repeat. 33:07 And then we need to change the background-position and we just need to move it over 33:10 I think by 10% on each axis. 33:18 Okay. That looks like it's still a little bit too large, so let's decrease the size there, 20% and 20%. 33:24 Is that what we need to do? 33:33 Oh my goodness, this is terrible. Oh, there we go. Okay. 50%. 33:35 That's what actually centers it. Silly me. 33:39 And there we have it. There's Andrew right in the middle there. 33:42 I'm going to go ahead and save this Pen. That was extremely risky. 33:45 I actually didn't save that the entire time. That's okay. 33:49 I'm going to go ahead and call this Marquee Lights. 33:53 Oh my gosh. How do you spell marquee? I have no idea. 33:58 Marquee. Is that really the spelling? I don't think it is. Yeah. Yeah, I think that's it. Okay. 34:02 Sure. We're going to go with that. So I'm going to call it Marquee Chaser Lights. 34:11 I'll just put in a silly description here, say, Just for fun! 34:22 We'll tag it with a couple things. 34:28 We'll say something like css3, animation, box-shadow. Sure. That looks great. 34:31 Now it should be on my CodePen profile. There it is, there's Marquee Chaser Lights. 34:44 There's Tom Hanks and Meg Ryan spinning around the Space Jam logo. Don't ask. 34:50 I've been writing a jQuery plugin recently, doing a whole bunch of other cool stuff on CodePen. 34:54 It's a wonderful place. 35:01 So that is pretty much it. 35:04 I'm going to hop into our Livestream chat moderation here. 35:07 One of our crew members, Chris Zabriskie, is actually moderating the chat over on YouTube, 35:13 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. 35:19 We'll do a little bit of Q&A here. 35:25 There's a couple of questions. 35:30 One says, "Can you show how you got to Chrome's inspector when you get a chance?" 35:33 Well, guess what? We've got the chance right now. 35:38 I'm going to open up Google Chrome here. 35:41 Let's open this up in a new window. 35:46 There we go. That's wonderful. This is just the greatest web page on the entire Internet really, if you think about it. 35:53 The way I got the Chrome inspector to come up, 36:00 on a Mac you hit Command Alt I and that will pop up the inspector. 36:05 Another way you can do it is by right clicking on the element that you want to inspect, 36:13 and then you can say Inspect Element. 36:18 I'm not sure what the hotkeys are on Windows. 36:22 I think it's something similar, like Control Alt I. 36:26 But you can definitely look it up just by Googling for it. 36:31 Just Google for Chrome hotkeys or something. 36:36 The cool thing about the inspector is that you can actually click on this little magnifying glass here 36:39 and you can highlight each individual element that you want to inspect. 36:44 So I can say, "Whoa, there's a list item," or something like that. 36:48 If we wanted to take this wrapper here and hack our own styles on top, we can do that. 36:54 This will just do this within my browser. 36:59 This actually isn't going to affect the Pen in any way or affect any website that you do this to, 37:02 so nobody else will actually see your hacking. 37:08 But let's go ahead and just change the background here. 37:10 I'm going to say background-image. Oh. What's going on here in HipChat? 37:16 Is that just another question? Oh, okay. Yeah. We'll get to that. 37:25 So we'll say background: orange; and as you can see, you can actually change the background color here. 37:30 I could go crazy. I could add in an animation and do all sorts of fun stuff there. 37:38 Actually, let's see if that works. 37:46 We'll say animation, and I think we do need to use prefixes here since we're not using— 37:48 Well, I don't know. Hmm. I don't know how Prefix Free actually works. Maybe we could get away with it. 37:54 But we're going to add the prefix. 38:03 We'll say webkit-animation: chase for 1 second infinite, and that should do it. 38:05 Oh yeah, okay. It's kind of hard to tell, but it is actually adding a box-shadow to the image. 38:15 But that's pretty much how the inspector works. It's pretty cool. 38:24 If you've never used it before, there's a bunch of other different tabs here that do all sorts of cool stuff. 38:27 Let's jump back into the chat here. 38:33 We have another question that says, "Someone mentioned that the bulb highlight is in different spots on different sides." 38:38 You are correct. Very observant. 38:45 We flipped these around, but we never actually flipped the highlight. 38:48 So let's go ahead and fix that right now. 38:53 We can jump into our Pen here. 38:56 All that means is that we need to adjust the selector that we're using. 39:01 We have li:before but we need to just change the top and right values— 39:08 well, actually the positioning values. 39:17 Let me grab that. 39:20 We only need to do this on bottom and left. 39:22 For bottom we'll say before, and let's just see if that selector is actually working. 39:27 Yes, it is. Look at that. We're selecting those appropriately. 39:40 Then we need to change this to be, I think, left and bottom. Oh gosh. 39:46 Okay. You know what? I think we need to zero out top and right. 39:58 Will that work, or do we actually need to make another whole selector there? 40:06 Huh. No. That's doing something. 40:09 Bottom? Top? I'm not really sure. 40:12 I do know that we could do this rather explicitly by just grabbing the selector. 40:21 You know what? Nah, actually, I'm not going to mess with that. 40:27 But you get the idea. You could select those separately and position them appropriately. 40:30 I'm not going to do that. We're just going to leave it as is. 40:37 We don't want to change Andrew at all here. 40:40 Let's hop back into the chat here and answer some more questions. 40:44 Let's see. "Someone asked what specs you're running." 40:49 I'm going to say About This Mac. 40:54 You can see I have a 2.6 GHz Intel Core I7. 40:57 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. 41:03 I think there's a pretty nice graphics card in here as well. 41:12 Pretty fancy MacBook Pro Retina display. 41:16 "Do you have any formal web dev qualifications, or do you think self-taught is the way to go?" 41:22 Whoa, we're getting into some deep philosophy here. 41:28 I have a little bit of formal training through my university. 41:32 I went to the University of Central Florida and got a degree in digital media. 41:37 I don't think it was tremendously valuable. 41:42 It didn't really do a whole lot for my web design or web development training. 41:45 Most of what I know is self-taught just through experimentation 41:52 and just doing stuff exactly like you saw today, just basically trying things out, 41:57 seeing what works and just kind of going through the thought process. 42:01 You can even talk out loud to yourself if you want. 42:05 Next question is, "Can you please give us a nice course going deeper into HTML5 structure and semantics?" 42:09 Sure. If you head over to TeamTreehouse.com, there's a whole bunch of stuff there. 42:18 We are doing a lot more with HTML5, teaching structure and semantics. 42:24 In fact, I am going to be making a new course pretty soon that will get a little bit more into that. 42:27 Yeah, we'll definitely do more stuff in depth on that in the future. 42:34 Next question is, "What if you wanted to see it in Internet Explorer?" 42:39 "Do you have a preferred tool for that?" 42:42 First of all, this demo will not work in Internet Explorer, at least I don't think. 42:46 I'm trying to think. Is there anything that wouldn't work in there? 42:51 I know box-shadow works in the latest versions of Internet Explorer. 42:54 You should be able to do the transforms. 42:57 And I think animations work just fine. 42:59 So actually, it might look just fine in the latest versions. I'm not totally 100% sure. 43:03 If we wanted to test that out, there's a number of different ways we could do it. 43:09 We could use a service like Browsershots. 43:12 I think it's at Browsershots.com. Maybe not. 43:16 Browsershots. Oh. No, no, no, no. Excuse me. That is one service, Browsershots. 43:22 I meant to say BrowserStack. This one is super-duper cool. 43:28 You can actually get screenshots from a ton of different browsers. 43:33 Yeah, so if you bring up screenshots here, you can actually get screenshots off of any of these browsers on any operating system, 43:40 any different version you want. It's pretty incredible. 43:47 Another way to do this would be to actually use something like Parallels or Boot Camp. 43:51 You could just load Windows straight onto your Mac. 43:59 I'm going to jump back to the chat here and see if there's any other good questions. 44:05 Sarah says, "Learning CSS3 first feels awkward to me. Would love more HTML5." 44:14 Yeah. I mean, you should really learn HTML before you jump into CSS. 44:24 Having good structure and semantics is a great way to build an awesome website. 44:30 There's a lot of things it's going to do for you. 44:37 I'm not going to go into the specifics here, but basically, you want to create the structure of your web page using HTML 44:41 and then you want to style it using CSS. 44:47 You want to keep pretty clean separation between those things as much as possible. 44:50 And then once you get into JavaScript, you would also want that to be separate as well. 44:54 So you have your structural, presentational, and behavioral layers separate from one another, 44:58 your HTML, CSS, and JavaScript, respectively. 45:03 So the next question says, "I am currently in an HTML5 and CSS3 boot camp for the next 6 weeks." 45:06 "What advice would you give someone just stating out?" 45:14 Just experiment as much as possible. 45:17 Make as many things as you can. That's going to help you so, so much. 45:18 You can of course supplement that with actual learning materials. 45:22 You could use a service like Treehouse to do that. 45:27 But one of the best ways to learn is to just try things out and just make as many mistakes as you can 45:31 and don't be afraid to break stuff. 45:37 You can also fork things on CodePen, which is pretty cool. 45:39 You can fork stuff and then you can safely play around with it and try things out for yourself. 45:43 So that's a cool way to learn how to code too. 45:51 "How long have you been writing CSS?" Oh my gosh. 45:54 We'll try to condense this history lesson. 45:57 I actually started making websites when I was about 11 years old. I'm 26 now. 46:00 So I've been making websites for a little while. 46:08 I actually started writing CSS—gosh, I mean, it's been more than 10 years now. 46:12 I don't even really know when the first time I wrote CSS was. 46:19 But it was amazing. I'm sure I had my mind completely blown. 46:23 Eduardo said, "Treehouse is the only thing I needed to land me a web designer position." 46:27 That is super awesome! We actually have a job placement program at Treehouse. 46:33 So if you sign up at TeamTreehouse.com, you can train up, unlock badges, 46:37 and we'll actually help you get a job. Pretty cool. 46:42 We're just going to wrap up here, do a couple more questions. 46:45 "Do you prefer to use Chrome browser over all others?" Yes, absolutely. 46:50 "The class I'm in prefers Firefox, but I have many friends that say that Chrome is the way to go." 46:55 "What is your preference?" You should definitely be using Google Chrome if you're at all interested in web design and development. 47:02 You do need to make sure that your website works in other browsers. 47:08 For example, the thing I just made today, like I said, probably doesn't work perfectly right away in Internet Explorer. 47:13 Maybe it does. I'm not sure. We'd have to test that out. 47:20 You do need to make sure that you test in every browser. 47:23 But for day-to-day development, lots of people use Chrome. 47:26 In fact, lots of people that are not web designers and developers use Chrome. 47:30 I think it's the most popular browser in the world at this point. 47:34 Definitely worth using. It's super-duper fast. It's just a fantastic browser. I highly recommend it. 47:37 The last question we're going to do here is, "I don't know HTML, just not the semantic 5 updates." Okay. 47:46 "Curious as to if you use any of the new Adobe programs for web development, like Edge Code, Inspect, or Reflow, and why." 47:55 No, I actually don't use any of those programs at all. 48:08 I actually prefer to just use— 48:12 Well, the text editor that I use day to day is Sublime Text 2. 48:16 We use that at Treehouse quite a lot. It's a really great text editor. 48:21 It's pretty inexpensive and so it's not too difficult to get started with. 48:26 I like a pretty vanilla text editor. I don't like to have something with too many bells and whistles. 48:31 So Sublime Text works great for me. 48:39 Edge Code, Inspect, and Reflow I haven't played with as much, 48:43 but I'm sure they're all great tools to use too. 48:48 As long as you're coding all the stuff by hand, so to speak, 48:53 or I guess that's kind of the phrase that people use to describe it, 48:58 as long as you're writing all of the code yourself, then it's totally okay. 49:01 And even if you're using generators like the one that I used earlier on to generate the gradient, 49:06 as long as you understand what's going on there, it's totally okay to use stuff like that 49:13 because it actually just speeds up your workflow. 49:17 You're able to create a gradient really quickly, and then you can just go ahead and make adjustments as needed. 49:19 I prefer to work that way. 49:27 I'm sure there's going to be a lot of up-and-coming web designers and developers 49:29 that will prefer to use those other tools, 49:32 but you should try to code by hand as much as you can. 49:36 So that's pretty much it. 49:40 This was just a Livestream test. Hopefully you all enjoyed it. 49:43 We may do more stuff like this in the future. 49:48 But if you'd like to learn more about web design, web development, mobile, business, and so much more, 49:50 be sure to check us out at TeamTreehouse.com. 49:56 I'm Nick Pettit. I'm @nickrp on Twitter. 49:59 Thanks so much for watching, and we'll see you real soon. 50:02