>>I'm Nick Pettit. >>I'm Jason Seifer.

>>And you're watching the Treehouse Show, your weekly dose of Internet,

where we talk about all things web design, web development, and more.

>>In this episode, we'll be talking about explaining CSS,

JavaScript charts, and landing pages.

>>Last week, I was out due to a bizarre faux hawk incident.

I don't really want to go into the details.

It was pretty gnarly.

It's a little emotional, and fortunately, my faux hawk has grown back.

>>I'm just glad everything's okay.

[The Treehouse Show]

First up is CSS Explain,

which is this nifty little web site

where you can go ahead and type in a CSS selector.

So I'm going to use the example that they have here

of Li.active strong

and just below, it will tell me what kind of CSS selector it is,

so in this case, it's tag selector,

and I have to say this really slowly.

It also tells you the CSS selector specificity.

>>There's a tough one to get right.

>>It is, but it's a pretty nifty tool.

A lot of times, when you're creating a lot of CSS,

it can be a little difficult

knowing how strong a selector is,

what type of selector you're actually using,

and what it's going to select on the page,

and I like this tool,

because sometimes, if you're not specific enough,

it will tell you that the selector is actually universal,

so this is pretty good

if you're trying to debug CSS

and you just want to make sure that

you're typing in the right thing.

It's a good sanity check.

>>Yeah, this actually works off of the W3C CSS specificity specification.

>>Sounds pretty official. >>Yeah, I just wanted to say all that,

because that was probably the most difficult thing I've done all day.

(laughter)

Next up, we have something called xCharts.

xCharts is a D3 based library

for making charts in JavaScript.

It uses the D3 JS library

for manipulating HTML, CSS, and SVG

so these charts are going to be scalable.

Now the charts are actually really, really pretty

and easy to use on the web site.

On the demo, they have just a regular bar chart

as soon as you go in.

You can also make line charts,

and there's a ton of different examples;

bar charts, multi-series bar charts, line charts.

And in addition to just being able to make charts and make them look well,

they have a ton of different methods and events

that you can use when creating these charts in JavaScript.

So really, really nice plugin.

Very, very easy to use,

and we will have a link to this in the show notes

at YouTube.com/gotreehouse.

>>Pretty nifty.

Next up is Lorem Pixel.

So you've heard of Lorem Ipsum Text, right? That's the text that you use

that doesn't really mean anything; it kind of looks like Latin,

but it's not. It's just gibberish.

>>I just use that for placeholders, mainly, when creating--

>>Exactly, so when you're designing in the browser,

sometimes we'll use Lorem Ipsum Text

to go ahead and hold the place of where real text would normally be.

Well, Lorem Pixel does the same thing but for images.

So let's say that

you had an image that was

going to be 935 pixels by 393.

That's very specific,

and I want this to be a picture of, say, nature.

I can go ahead and click that I want this to be a color image.

And it will go ahead and generate that for me.

And then it will load up this nice picture of nature

at exactly the size that I specified.

Pretty amazing.

>>That is beautiful picture of nature. >> It is a really nice picture of nature.

But it's pretty useful.

Designing in the browser is obviously a very popular technique,

so this is pretty cool that you can just go ahead and drop and placeholder images.

It's always best, actually, to try and use real content

whenever possible, especially with text,

because you never know

how long or short text is actually going to be,

so if you have real content, you should use that,

but that's not always possible

and in those cases, a tool like this is really useful.

>>That's great.

You know, we've talked about placeholder images before,

but they basically just specified the size

or it was like a gradient picture,

but having something that is an actually picture

that goes along with your content is very beneficial.

>>Yeah. It makes it a little more realistic.

>>Next up, we've got the Node Beginner Book.

This is a free and paid book

that you can get on the Internet,

which tells you all about node.js.

So right now, if you want to just go online and read it for free, you can.

You can also buy a bundle to get a PDF and ePub version

with free updates.

This is a great book that goes through everything

that you need to get up and running with node.js.

Shows you how to build a Hello World application,

even go through building HTTP servers

and has a great introduction to JavaScript, as well.

I'm not going to get into everything that this book goes over

because it's really long, as you can tell

from all this scrolling.

>>I was hoping you were going to read the entire book to me right now.

>> (laughter) That's going to be the extended episode of the Treehouse Show.

I'll read all of this. >>I'll look forward to it.

>>But no, it's a great book,

so go ahead and check that out.

>>Pretty nifty.

Next up is a really cool blog post

and it's a 50-point checklist for creating the ultimate landing page,

and we're going to look at all 50 points, one at a time, right now.

First up is using the checklist,

so we're already off to a great start; we're using this checklist right now.

We'll just go over a couple of these points here

and basically, they ask just really good questions about landing pages.

Landing pages, of course, being for marketing purposes.

You know, it's something that you would link on, say, Twitter or social media channels

and it would send your users to a specific page

that has, say, a call to action

where you would go ahead and sign up or learn more about the product.

So some of these questions are things like

does your landing page headline match the message on your ads?

So, for example, if you had some ads that had particular marketing messaging,

you'd want to make sure

that when a user clicks on that,

they're taken to a landing page where the messaging matches that

and you have consistent brand messaging

so that they know that, okay,

that ad I just clicked on is linked to this thing that I'm looking at now.

Is your landing page messaging focused on a single purpose?

So is it focused?

Another one here is do you have a simple secondary description to enhance the headline?

So all sorts of really cool quick sanity checks.

Does this make sense?

And it helps you to look at your land pages from a couple of different perspectives.

>>It's probably going to be really good

if you're not too experienced creating landing pages

or maybe it's one of your first few tries.

>>Yeah, exactly. If you don't have a really good gut feel for whether or not

a landing page is good, this will help you run down a couple of things

that might you might not have considered.

>>That's awesome. Next up, we have a project called AlertifyJS.

This is billed as an unobtrusive and customizable JavaScript notification system.

Now it offers a few different pieces of functionality

with dialogues, kind of modal dialogues

letting you dismiss messages

or enter some information,

click cancel or OK,

and then if you look on the bottom right of the screen,

you can see that it'll actually tell me

when I click cancel.

This is also going to be really useful

when you want to have custom log messages.

You can see as I'm clicking the different kinds,

they just roll in on the bottom.

And this is going to be something that's really useful

when you are debugging your applications,

say, in development.

You could, of course, use the console.log functionality

that's built into most of the different browsers these days,

or you could use this library maybe to--

you know, if you only need to display a little bit of information.

But yeah, it's a great project.

It would also be really useful maybe for giving your users messages

as they're using your application.

But yeah, great project

and you know, once again, we'll have a link to that in the show notes for AlertifyJS.

>>Sweet.

Next up is Bootsnipp.

This is the last thing we're covering today.

If I just go ahead and click on Snipps here,

you get this really nice gallery of design patterns

that you can use in a Bootstrap project.

So say, for example, that you wanted to go ahead and create a search bar,

click on View for that,

and right here, they have all of the code that you need

to go ahead and put together in style that search bar.

There's a couple of other common ones here,

such as sign-up form, a 1-month calendar,

and right here,

they have one for vacation rentals,

which Jason, that would be really good

for the timesharing website that you wanted to tell me all about.

>>Yeah, you definitely want to get in on the ground floor of that one.

>>Yeah. Okay, cool.

Well, I'm looking forward to that.

>>I'll have to check out Bootsnipp, so this is just for Twitter Bootstrap,

or does it work with Zero Foundation,

I would suppose if it's called Bootsnipp, it's Bootstrap-based?

>>It's probably--yeah, specific to Bootstrap.

>>All right, sounds good.

(laughter) So that's all we got for this episode.

>>Yup, that's it. Who are you on Twitter?

>>I'm @NickRP.

>>And I am @JSeifer.

Thanks so much for tuning into this episode of The Treehouse Show.

If you want more information on anything we talked about,

check out our show notes

at Youtube.com/gotreehouse.

>>And of course, if you'd like to see more videos like this one,

you can check us out at

TeamTreehouse.com.

Thanks so much for watching, and we'll see you nextw eek.

[The Treehouse Show]

[Treehouse™]

If you'd like to see more advanced videos and tutorials like this one,

go to TeamTreehouse.com

and start learning for free.

[?Electronic music?]