Preview

Start a free Courses trial
to watch this video

Creating a CSS Marquee

Name: Creating a CSS Marquee
Uploaded: 2013-09-12T20:09:21Z
Duration: 3007 s
Description: In this live Workshop, Nick tinkers around with CodePen and creates a movie theater marquee in HTML and CSS. He also takes questions from our YouTube audience!

50:07 with Nick Pettit

In this live Workshop, Nick tinkers around with CodePen and creates a movie theater marquee in HTML and CSS. He also takes questions from our YouTube audience!

Teacher's Notes
Video Transcript
Downloads

Resources

Balsamiq Mockups - The wireframing app used in this video.
View the completed project on CodePen!

[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

You need to sign up for Treehouse in order to download course files.