[Creating a CSS Marquee with Nick Pettit] [CSS3 Workshop]

[Nick Pettit - @nickrp] Hey, everybody, I'm Nick Pettit.

I am @nickrp on Twitter and I am a web design teacher here at Treehouse,

which of course is the best way to learn web design, web development, business, mobile, and so much more.

Today we are doing a little Livestream test.

This could go horribly wrong. We're going to wait and see and find out what happens.

That's going to be part of the fun.

I'm going to make a lot of mistakes as I'm coding.

We're going to get into some CSS here.

But yeah, like I said, that's part of the fun.

So we're going to learn together, basically.

I'm going to code a marquee like you might see around a movie theater sign

or a sign at an actual theater, like a live performance theater.

We're going to do it with just CSS and HTML.

I don't want to use any kind of images.

We're going to be doing everything in CodePen today.

Before I actually get into the HTML and CSS,

I want to jump into Balsamiq Mockups and just give you a game plan for what we're going to be doing.

I'm going to drag out a rectangle here.

There we go.

If you're not familiar, Balsamiq Mockups is this really cool wireframing tool.

I'm not sure how much it costs, but it's pretty cheap. They've got a free trial, super awesome.

I'm going to drag out this rectangle, and I think I'm going to make it kind of squarish here. That's good.

I want these chaser lights to go all the way around the outside.

So just like you'll see at a cinema or a live performance venue,

we're going to have these lights going all the way around.

I'm going to go ahead and do this with 4 elements.

I'm going to have one right here, I'm going to have another box right here,

then I'm going to have one down at the bottom. There we go. Let's line all these up.

And then I'm going to have one more box over here on the left side.

We're going to position these using absolute positioning.

I don't think there's anything that could really go wrong here.

Each one of these elements is going to be an unordered list

and then we're going to have list items for each light on the inside.

We're actually going to do some fairly advanced CSS stuff here.

We're going to do some pretty advanced selectors using nth-child pseudo elements,

and then we're also going to use—

I think box-shadow would be a good way to make these lights actually light up.

This isn't going to be terribly semantic.

It's probably not something you would necessarily want to do in a real setting,

but it will still be kind of fun and we're still going to learn a lot about CSS.

So let's go ahead and jump into the code with our plan in mind here.

Here I'm using CodePen.

CodePen is this really amazing website put together by Chris Coyier and I think a few other people.

Chris Coyier I know is the designer on it.

Chris Coyier of course is well known for CSS-Tricks.

Go ahead and bring that up. CSS-Tricks is a pretty cool blog, a friend of the show here.

They have all sorts of stuff on here about CSS, as the name might imply.

I'm going to go ahead and close that.

To start out here, I think I want to create just a div that we're going to center on the page.

I'm going to call this my wrapper div.

There we go.

We're going to have a couple of unordered lists inside of here.

I'm going to go ahead and create one to get started.

Oops. Close that.

There we go. Now we have 3 list items.

I think each one of these should actually have 9 items.

So if we jump back to our mockup here, there will be 9 lights inside each one of these,

and that should give us what we need to chase around here.

I might have done my math wrong on that, but we'll go ahead and figure it out as we go along.

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.

I'm going to close my JavaScript and I'm going to select my unordered list,

and we're going to say list-style: none; to remove all the bullet points.

We're going to say padding: 0; to remove any kind of padding.

And then on our list items we're also going to say padding: 0; to remove the padding,

and then we're going to set these to an explicit width and height.

I'm going to say 50 pixels for the width and the height so it will be square,

and then I'm going to say background: orange;

This is something that I actually do a lot.

I set the color of an element to just a straight-up CSS keyword

so that we can actually see the element on the page and see how much space it's taking up.

I'm going to float all of these to left, set the margin-right to 5 pixels there, and there we go.

We have 9 list items all in a row there.

Now we need to actually center our wrapper on the page,

so let's go ahead and do that.

I'm going to use a technique here that's called absolute centering.

It's actually something that I saw on CodePen not too long ago,

and it's pretty cool.

It basically will center everything on the page not only horizontally but also vertically

so we'll have this nice square box in the middle.

We called that wrapper. We're going to select that using an ID selector wrapper. There we go.

We're going to say margin: auto; and actually I'm going to set this to another ugly background color there.

We're going to set it to purple just so we can see it.

As you can see, nothing is showing up just yet,

so that means that it's not actually present on the page really. It's not taking up space.

We're going to set that to margin: auto; and we're going to say position: absolute;

and then for the top, right, bottom, and left we're going to set those values to 0.

There's one more thing we need to do here, and that is set an explicit width and height.

So I'm just going to set a value. We'll change these later on.

If we set it to 500 pixels there—

Actually, I'm going to make it slightly smaller just so you can see it. There we go.

You can see that it's actually centered on the page.

Of course we want to leave enough room for all of these list items,

so let's change that back, let's say 600. There we go.

That's pretty cool there.

We want to do the math here properly, though, so let's do that.

It looks like there's some weird padding going on here. I'm not sure what that's about.

I'm going to open up my inspector here in Chrome and see if we can get rid of that.

I'm going to go to the Metrics here.

It looks like—oh, okay. I guess maybe there is some margin in there.

Maybe it's on the unordered list. Aha! Yes, it is.

So we need to actually say margin: 0; on that as well. There we go.

Now it's flush right up against the edge of that element.

Let's set this to the proper width or a width that's good enough at least to get us started.

We know that we have 9 elements here.

Each one is 50 pixels wide, and we're going to have a 10th element over here on the right.

We actually have 10 elements that are all 50 pixels wide,

and each one of them has a margin-right of 5 pixels.

This last list item over here that's actually going to be a list going down

will not have that extra margin.

So we need to calculate this.

Let's go ahead and just open up our Spotlight here.

This is where I like to do all of my calculations, believe it or not.

We're going to say 9 * 55. That will give us 495.

And then we need to add 50 to that, so that's going to be 545 across.

We're going to say width: 545px;

I think I did my math correctly there. It looks okay so far.

Then of course this is going to be square, so we'll go ahead and do the same thing.

Cool.

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.

Let's start adding in the rest of these lists and then positioning them,

again, just like we have in our mockup here.

We have our first one here, then we need 3 more.

I'm going to close my CSS and jump into the HTML here.

So now we have a whole bunch of lists here. It actually looks kind of cool.

We're going to label this one top, so we'll use an ID of "top".

And then we need IDs on the rest of these so that we can identify them.

This one is going to be on the right, this one is going to be on the bottom,

and then finally, we'll have the one over here on the left.

Cool.

Now let's jump back into the CSS.

For the first list, top, we want to position it absolutely.

And then we want to say top: 0; and left: 0;

Cool.

For the one on the right we want to do something similar,

so we'll copy and paste that code.

But instead, we actually want that to be over on the right side.

We also need to make sure that those list items are not floated to the left.

We actually just want them running down the page.

So we're going to need to move this float out of this list item and get a little bit more specific.

We'll say top li. That's going to be floated to the left with a margin-right of 5 pixels.

And then for the ones on the right we're going to do something similar here, except we're not going to float these.

We're just going to say margin-bottom; 5px;

There we go. Margin-right. Okay. Cool.

Now we have our UL positioned over here on the right and we just need to do it for the bottom and the left.

Let's go ahead and copy all this stuff here because it's going to be pretty similar code.

Here's our new code. Just make some space here.

For the stuff that's on the bottom, we're going to say bottom and align it to the right.

We want to float everything to the left, and we actually want margin on the left side this time.

There we go.

And then finally, for our left UL we're going to say margin-bottom.

It's going to be positioned on the left side at the bottom.

And let's see. What's going on here? Oh. We want that margin to be on the top.

There we go. Look at that. We have list items going all the way around our element now.

We have exactly what we want here.

Now we need to make these light bulbs.

First we're going to style the light bulbs and then we're going to make them light up.

Let's jump down here. That's all of our positioning stuff.

I'm just going to make some space here to work.

For each one of our list items, we do not want the background to be this ugly orange color,

so let's get rid of that.

Actually, I'm going to do all the work up here in this list item rather than creating a new selector. There we go.

I want the background to be some kind of gradient, so that will go there. I'm not sure what's going there yet.

But then we also want it to be round.

To do that, we'll just use border-radius and we'll set it to 100%.

I'm actually going to cheat a little bit here.

In CodePen there's this really cool feature called Prefix Free.

I'm going to turn that on, and that's going to allow me to type CSS3 according to the W3C spec

without actually having to use all of those browser prefixes and worry about compatibility.

So border-radius should be set to 100% there.

And if we set the background to orange, cool, we have all these little circles.

Now we want to drop in a gradient.

I'm going to jump into a gradient generator.

I'm not actually going to write it out myself. Too lazy for that.

There we go. We have a nice gradient here.

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.

There you can see we have this yellow color happening,

and towards the middle it's kind of white.

We want that to be a little bit lower in opacity, so let's drop that down to 60.

And then same thing on the edges.

We want it to be a little bit transparent.

Let's go ahead and do that.

It looks good enough for now.

We can make additional tweaks in our code.

All I need here is the W3C compatible version.

They actually give you everything in this particular gradient generator. That's pretty cool.

But we just need this code right here.

So I will copy that, we'll leave that open in case we need it, and I'll paste it right here,

and that should give us some gradients.

Let's get rid of this purple background color

and let's set the background of the body to black just to add some drama here.

I'm going to say background and I'll use the hexadecimal value black. There we go.

Now we have these lights here.

They look okay. I think we could do a little bit better, though.

I'm actually going to set the center to kind of a yellowish color.

I'm going to say 200, something like that. That's pretty good.

I'm going to lower the opacity here.

And then on the outer side of this light bulb I'm going to make some further adjustments.

I would actually like this to be a pretty bright yellow color as well,

so I'm just adjusting rgb. I'm adjusting the blue here, so taking out some blue. That looks good.

And then I also want to adjust the radius of this gradient,

so I'm going to actually move that out by just a little bit.

That looks pretty good, but I think we could make this look even more realistic

if we had some kind of shine here on the light bulb.

I'm going to use a pseudo element here.

I'm going to say before on each list item, the content node will be blank,

so we'll just have absolutely nothing in there.

We'll set the display to block.

And then same kind of thing, we're going to set this to an ugly background color

just so that we can actually see it.

Width and height will be something like 20 pixels.

We'll set that.

And there we go. We have this element here right on top of each one of our light bulbs.

We need to shape this and kind of style it so it looks like this white reflection or refraction or whatever you call it.

Let's go ahead and set the background to rgba. We'll set it to pure white.

And then we're going to adjust the opacity a little bit there. There we go.

We're going to set the border-radius once again to 100%.

Actually, I don't want this to be completely circular, so let's make it kind of oblong there.

That's looking pretty good. Let's see if we can get that effect to be exaggerated even more.

There we go. I like that a little bit better.

That is a bit big for my taste, so let's drop down the size there down to 15 pixels.

Now we need to position it over each light bulb, so let's do that.

We'll say position: absolute; right: 0; top: 0; and let's see where that gets us.

Oh, okay. So we need to actually say position: relative; on each one of our light bulbs there. There we go.

Now we can position these relative to the light bulb.

We'll move this down a little bit,

over from the right 10 pixels, over from the top 10 pixels. That's a little bit much.

I'm going to drop that down to 6. Will that do it?

Yeah, that's pretty good.

I'm actually going to drop the opacity a bit more. There we go.

Those light bulbs don't look too bad.

They'll actually look a lot more realistic when they're lit up.

Maybe we can even put something inside here, perhaps Jason Seifer or Andrew Chalkley. That would be nice.

Let's make these light bulbs light up. How are we going to do that?

I think we should probably use box-shadow because with box-shadow we can apply multiple shadows,

which will really actually be lights, and we can do one on the inside and we can do one on the outside.

I'm going to use an nth-child selector here so I can select just a few of these light bulbs.

Let's say li:nth-child and I'm just going to select every third light bulb.

I'm going to say box-shadow.

We want the x and y offsets to be at 0 and we want the blur radius to be at 40 pixels,

and then we're going to say rgba, again pure white, and we'll set it to just slightly transparent.

There you can see that we have some of these light bulbs lighting up.

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.

That's too much.

There we go. That's not too bad.

I think I like the look of that. I'd actually like to make these lights kind of yellowish.

So again, I'll drop the blue, and mixing red and green, unlike in elementary school,

will actually give you yellow.

It's kind of the difference between additive and subtractive color processes there. It's rather complicated.

I'm going to change that to add a little bit more blue there. There we go.

I think I like that yellow color. That's not too bad.

I want the interior of these to be a little bit more white.

So now we need to add our second box-shadow.

Let's go ahead and put that there.

We'll tab this out and we're going to type inset here.

The inset keyword will actually put a box-shadow on the inside of our light bulbs. That's pretty cool.

Like I said, I want this to be fairly bright.

I think I want to introduce a little bit more yellow there.

It's still a little bit too white. There we go.

Okay. I think that looks pretty nice when it's lit up.

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.

I think I liked it the way it was, just exactly the same as the outside.

There we go. A little bit more, a little bit less. All right. We're perfecting pixels now. It's too much.

Okay, cool. I think those look like light bulbs that are lit up.

Now we need to animate these things, and the way we're going to do that

is we're going to grab these light bulbs in sets of 3 and then we're going to set an animation delay

so that they light up one at a time.

Every first light bulb will light up, then every second one, then every third one,

and it will look like these lights are actually chasing around.

We might need to make a few other adjustments.

For example, I think when we get down here and over on the left

we'll actually need to rotate these 180 degrees

because I think it's going to be going backwards.

But we'll deal with that as we need to.

Let's pop down here and let's add some animation keyframes.

I'm going to say @keyframes, and at 0% here it's not going to be lit up at all.

We actually need to move these box-shadows down.

Let me grab those box-shadows. There we go.

We'll use these selectors later on.

We don't want any box-shadow at 0%. I think I may need to zero those out for it to actually work.

But at 100% we want it to be completely lit up.

Or wait, no. Actually, I'm sorry, that needs to be reversed.

At 0% we want it to be lit up completely so it will kind of pop on,

and then once we get to 100% we want it to gently fade.

So I'll say box-shadow. Actually, let me just copy this entire thing here. There we go.

We want it to fade out gracefully, so we'll set the blur radius or blur radii to 0

and we'll set the opacity on each one of these box-shadows to 0 as well.

CodePen isn't really—

Yeah, there we go. Now we have enough room so we can actually see this code.

There we go. Now it's nicely formatted so it's not wrapping all over the place.

There we go. Okay.

Let's apply this animation to all of our list items just to see where we're at and see how this actually blinks.

I'm going to jump up here to my list item and I'm going to say animation,

which again, normally, you would need a bunch of browser prefixes for this to actually work.

But we're using no prefix, so we can just type in animation. Pretty awesome.

We need to give that an animation name, so we're going to say chase. There we go.

We've called that animation chase.

We want these to blink for 1 second, and we want this to be infinite.

Now these lights will blink at an interval of 1 second.

Like I said, we need to actually select each one of these and apply an animation delay so that they chase around.

Let's comment that out.

We'll do that next.

I'm going to copy that and I'm going to paste it into this nth-child selector.

Here we're just selecting the first element in each one of these lists.

Like I said, we have a bit of an issue down here, as you can see,

because these 2 are right next to each other, but they should never blink at the same time.

So we're actually need to rotate these 180 degrees.

Here's another instance of that as well.

But we'll do that last. Let's just get this chase working first.

We need to use some fairly advanced nth-child selectors in order to do this

because we want to select every first, every second, and every third element in these lists.

There's this really cool post over on CSS-Tricks that I refer to quite a lot.

It's called nth-child Recipes.

Let me see if I can find that. Yeah, Useful nth-child Recipes.

If we scroll down here, you'll see that there's all sorts of cool recipes here.

You can select only the fifth element, you can select all but the first five,

select only the first five, select every fourth, starting at the first, and so on.

This is pretty similar to what we need to do, so we're going to do something kind of like this.

I'm just going to copy and paste this selector knowing that it will be every fourth, starting at the first.

I want to do it this way. I think that will be a little bit better stylistically.

Let's paste that in there.

I think I need to say every third one—yeah, like that—plus the first one.

Now I need to do the same thing but for every second one.

Let me comment that out.

We'll say that. Will that do what I want? No, not quite.

You know what I need to do?

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.

I don't know. That sentence was an absolute train wreck.

Okay, moving on.

There we have our third one.

With this nth-child selector we're actually selecting every third element.

I think that's it. I think we have all of the selectors that we need here.

Now what we can do is apply this animation to the list items,

and then down here we'll set these to have an animation delay.

What that's going to do is it's going to start each light bulb at different times.

Or in this case it will start every first light bulb and then it will start every second one and every third one.

So instead of these animations here, we actually want to use the animation-delay property.

I'm going to say animation-delay.

And you can just put in any time value here in CSS.

We can say something like 1 second.

And then down here we can say 2 seconds and then we'll say 3 seconds.

Actually, we don't want any delay on the first one at all. We want it to start right away.

So we'll say 1, 2, and then up here in our actual animation property

we'll say that this lasts for 3 seconds.

That way we can kind of see it slowly coming together here.

We can see we've got 1, 2, 3, 1, 2, 3, 1, 2, 3 and so on.

This one is just fine, but again, we need to rotate these, it looks like, because they're actually going backwards,

1, 2, 3, just like the top here.

Let's go ahead and do that.

We'll go to—I believe it's bottom here that we want to rotate.

We'll say transform: rotate and we just need to rotate it 180 degrees.

Same thing on the left side.

And I think that should do it. Uh-oh. There's something wrong with the math here.

Oh, you know what? Because we rotated it, we actually need to change the margins.

So this gets a little bit tricky, but I think we can do it.

On the bottom here we actually need to say margin-right, I believe. Yeah.

And then instead of margin-top we just need to say margin-bottom on the left side.

So yeah, I think that's working. It looks like it's working just fine.

Let's change the pace of this so we can actually make sure it's working.

If we do our math right, we have 0, 1, and 2 seconds and then 3 seconds.

So theoretically, if we just said something like 200 milliseconds, 400 milliseconds,

and we're just adding 200 every time, this should be 600 milliseconds.

And there we go. It looks like these are chasing around here.

This wouldn't be complete without some kind of Web celebrity inside,

so we're going to head over to Facebook and open up Andrew's page here. There we go.

Oh man, look at that beautiful man.

We're just going to steal this image, open this image in a new tab.

This is probably against the Facebook terms of service,

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.

I think that's what we want to do, right? Yeah, because the wrapper is containing everything.

That should do it.

If we say background: green; that's exactly what I thought would happen. Wonderful.

We're going to say url and we'll put in this link to Andrew that is entirely too large.

Say background-size: 90%; on both.

We don't want it to repeat, so we'll say no-repeat.

And then we need to change the background-position and we just need to move it over

I think by 10% on each axis.

Okay. That looks like it's still a little bit too large, so let's decrease the size there, 20% and 20%.

Is that what we need to do?

Oh my goodness, this is terrible. Oh, there we go. Okay. 50%.

That's what actually centers it. Silly me.

And there we have it. There's Andrew right in the middle there.

I'm going to go ahead and save this Pen. That was extremely risky.

I actually didn't save that the entire time. That's okay.

I'm going to go ahead and call this Marquee Lights.

Oh my gosh. How do you spell marquee? I have no idea.

Marquee. Is that really the spelling? I don't think it is. Yeah. Yeah, I think that's it. Okay.

Sure. We're going to go with that. So I'm going to call it Marquee Chaser Lights.

I'll just put in a silly description here, say, Just for fun!

We'll tag it with a couple things.

We'll say something like css3, animation, box-shadow. Sure. That looks great.

Now it should be on my CodePen profile. There it is, there's Marquee Chaser Lights.

There's Tom Hanks and Meg Ryan spinning around the Space Jam logo. Don't ask.

I've been writing a jQuery plugin recently, doing a whole bunch of other cool stuff on CodePen.

It's a wonderful place.

So that is pretty much it.

I'm going to hop into our Livestream chat moderation here.

One of our crew members, Chris Zabriskie, is actually moderating the chat over on YouTube,

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.

We'll do a little bit of Q&A here.

There's a couple of questions.

One says, "Can you show how you got to Chrome's inspector when you get a chance?"

Well, guess what? We've got the chance right now.

I'm going to open up Google Chrome here.

Let's open this up in a new window.

There we go. That's wonderful. This is just the greatest web page on the entire Internet really, if you think about it.

The way I got the Chrome inspector to come up,

on a Mac you hit Command Alt I and that will pop up the inspector.

Another way you can do it is by right clicking on the element that you want to inspect,

and then you can say Inspect Element.

I'm not sure what the hotkeys are on Windows.

I think it's something similar, like Control Alt I.

But you can definitely look it up just by Googling for it.

Just Google for Chrome hotkeys or something.

The cool thing about the inspector is that you can actually click on this little magnifying glass here

and you can highlight each individual element that you want to inspect.

So I can say, "Whoa, there's a list item," or something like that.

If we wanted to take this wrapper here and hack our own styles on top, we can do that.

This will just do this within my browser.

This actually isn't going to affect the Pen in any way or affect any website that you do this to,

so nobody else will actually see your hacking.

But let's go ahead and just change the background here.

I'm going to say background-image. Oh. What's going on here in HipChat?

Is that just another question? Oh, okay. Yeah. We'll get to that.

So we'll say background: orange; and as you can see, you can actually change the background color here.

I could go crazy. I could add in an animation and do all sorts of fun stuff there.

Actually, let's see if that works.

We'll say animation, and I think we do need to use prefixes here since we're not using—

Well, I don't know. Hmm. I don't know how Prefix Free actually works. Maybe we could get away with it.

But we're going to add the prefix.

We'll say webkit-animation: chase for 1 second infinite, and that should do it.

Oh yeah, okay. It's kind of hard to tell, but it is actually adding a box-shadow to the image.

But that's pretty much how the inspector works. It's pretty cool.

If you've never used it before, there's a bunch of other different tabs here that do all sorts of cool stuff.

Let's jump back into the chat here.

We have another question that says, "Someone mentioned that the bulb highlight is in different spots on different sides."

You are correct. Very observant.

We flipped these around, but we never actually flipped the highlight.

So let's go ahead and fix that right now.

We can jump into our Pen here.

All that means is that we need to adjust the selector that we're using.

We have li:before but we need to just change the top and right values—

well, actually the positioning values.

Let me grab that.

We only need to do this on bottom and left.

For bottom we'll say before, and let's just see if that selector is actually working.

Yes, it is. Look at that. We're selecting those appropriately.

Then we need to change this to be, I think, left and bottom. Oh gosh.

Okay. You know what? I think we need to zero out top and right.

Will that work, or do we actually need to make another whole selector there?

Huh. No. That's doing something.

Bottom? Top? I'm not really sure.

I do know that we could do this rather explicitly by just grabbing the selector.

You know what? Nah, actually, I'm not going to mess with that.

But you get the idea. You could select those separately and position them appropriately.

I'm not going to do that. We're just going to leave it as is.

We don't want to change Andrew at all here.

Let's hop back into the chat here and answer some more questions.

Let's see. "Someone asked what specs you're running."

I'm going to say About This Mac.

You can see I have a 2.6 GHz Intel Core I7.

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.

I think there's a pretty nice graphics card in here as well.

Pretty fancy MacBook Pro Retina display.

"Do you have any formal web dev qualifications, or do you think self-taught is the way to go?"

Whoa, we're getting into some deep philosophy here.

I have a little bit of formal training through my university.

I went to the University of Central Florida and got a degree in digital media.

I don't think it was tremendously valuable.

It didn't really do a whole lot for my web design or web development training.

Most of what I know is self-taught just through experimentation

and just doing stuff exactly like you saw today, just basically trying things out,

seeing what works and just kind of going through the thought process.

You can even talk out loud to yourself if you want.

Next question is, "Can you please give us a nice course going deeper into HTML5 structure and semantics?"

Sure. If you head over to TeamTreehouse.com, there's a whole bunch of stuff there.

We are doing a lot more with HTML5, teaching structure and semantics.

In fact, I am going to be making a new course pretty soon that will get a little bit more into that.

Yeah, we'll definitely do more stuff in depth on that in the future.

Next question is, "What if you wanted to see it in Internet Explorer?"

"Do you have a preferred tool for that?"

First of all, this demo will not work in Internet Explorer, at least I don't think.

I'm trying to think. Is there anything that wouldn't work in there?

I know box-shadow works in the latest versions of Internet Explorer.

You should be able to do the transforms.

And I think animations work just fine.

So actually, it might look just fine in the latest versions. I'm not totally 100% sure.

If we wanted to test that out, there's a number of different ways we could do it.

We could use a service like Browsershots.

I think it's at Browsershots.com. Maybe not.

Browsershots. Oh. No, no, no, no. Excuse me. That is one service, Browsershots.

I meant to say BrowserStack. This one is super-duper cool.

You can actually get screenshots from a ton of different browsers.

Yeah, so if you bring up screenshots here, you can actually get screenshots off of any of these browsers on any operating system,

any different version you want. It's pretty incredible.

Another way to do this would be to actually use something like Parallels or Boot Camp.

You could just load Windows straight onto your Mac.

I'm going to jump back to the chat here and see if there's any other good questions.

Sarah says, "Learning CSS3 first feels awkward to me. Would love more HTML5."

Yeah. I mean, you should really learn HTML before you jump into CSS.

Having good structure and semantics is a great way to build an awesome website.

There's a lot of things it's going to do for you.

I'm not going to go into the specifics here, but basically, you want to create the structure of your web page using HTML

and then you want to style it using CSS.

You want to keep pretty clean separation between those things as much as possible.

And then once you get into JavaScript, you would also want that to be separate as well.

So you have your structural, presentational, and behavioral layers separate from one another,

your HTML, CSS, and JavaScript, respectively.

So the next question says, "I am currently in an HTML5 and CSS3 boot camp for the next 6 weeks."

"What advice would you give someone just stating out?"

Just experiment as much as possible.

Make as many things as you can. That's going to help you so, so much.

You can of course supplement that with actual learning materials.

You could use a service like Treehouse to do that.

But one of the best ways to learn is to just try things out and just make as many mistakes as you can

and don't be afraid to break stuff.

You can also fork things on CodePen, which is pretty cool.

You can fork stuff and then you can safely play around with it and try things out for yourself.

So that's a cool way to learn how to code too.

"How long have you been writing CSS?" Oh my gosh.

We'll try to condense this history lesson.

I actually started making websites when I was about 11 years old. I'm 26 now.

So I've been making websites for a little while.

I actually started writing CSS—gosh, I mean, it's been more than 10 years now.

I don't even really know when the first time I wrote CSS was.

But it was amazing. I'm sure I had my mind completely blown.

Eduardo said, "Treehouse is the only thing I needed to land me a web designer position."

That is super awesome! We actually have a job placement program at Treehouse.

So if you sign up at TeamTreehouse.com, you can train up, unlock badges,

and we'll actually help you get a job. Pretty cool.

We're just going to wrap up here, do a couple more questions.

"Do you prefer to use Chrome browser over all others?" Yes, absolutely.

"The class I'm in prefers Firefox, but I have many friends that say that Chrome is the way to go."

"What is your preference?" You should definitely be using Google Chrome if you're at all interested in web design and development.

You do need to make sure that your website works in other browsers.

For example, the thing I just made today, like I said, probably doesn't work perfectly right away in Internet Explorer.

Maybe it does. I'm not sure. We'd have to test that out.

You do need to make sure that you test in every browser.

But for day-to-day development, lots of people use Chrome.

In fact, lots of people that are not web designers and developers use Chrome.

I think it's the most popular browser in the world at this point.

Definitely worth using. It's super-duper fast. It's just a fantastic browser. I highly recommend it.

The last question we're going to do here is, "I don't know HTML, just not the semantic 5 updates." Okay.

"Curious as to if you use any of the new Adobe programs for web development, like Edge Code, Inspect, or Reflow, and why."

No, I actually don't use any of those programs at all.

I actually prefer to just use—

Well, the text editor that I use day to day is Sublime Text 2.

We use that at Treehouse quite a lot. It's a really great text editor.

It's pretty inexpensive and so it's not too difficult to get started with.

I like a pretty vanilla text editor. I don't like to have something with too many bells and whistles.

So Sublime Text works great for me.

Edge Code, Inspect, and Reflow I haven't played with as much,

but I'm sure they're all great tools to use too.

As long as you're coding all the stuff by hand, so to speak,

or I guess that's kind of the phrase that people use to describe it,

as long as you're writing all of the code yourself, then it's totally okay.

And even if you're using generators like the one that I used earlier on to generate the gradient,

as long as you understand what's going on there, it's totally okay to use stuff like that

because it actually just speeds up your workflow.

You're able to create a gradient really quickly, and then you can just go ahead and make adjustments as needed.

I prefer to work that way.

I'm sure there's going to be a lot of up-and-coming web designers and developers

that will prefer to use those other tools,

but you should try to code by hand as much as you can.

So that's pretty much it.

This was just a Livestream test. Hopefully you all enjoyed it.

We may do more stuff like this in the future.

But if you'd like to learn more about web design, web development, mobile, business, and so much more,

be sure to check us out at TeamTreehouse.com.

I'm Nick Pettit. I'm @nickrp on Twitter.

Thanks so much for watching, and we'll see you real soon.