Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Creating a CSS Marquee!
You have completed Creating a CSS Marquee!
Preview
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!
Resources
- Balsamiq Mockups - The wireframing app used in this video.
- View the completed project on CodePen!
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[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.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up