You've already started watching Episode 22: Explaining CSS and Landing Pages
In this episode of The Treehouse Show, Nick Pettit (@nickrp) and Jason Seifer (@jseifer) talk about Explaining CSS, Landing Pages.
-
0:00
>>I'm Nick Pettit. >>I'm Jason Seifer.
-
0:03
>>And you're watching the Treehouse Show, your weekly dose of Internet,
-
0:06
where we talk about all things web design, web development, and more.
-
0:10
>>In this episode, we'll be talking about explaining CSS,
-
0:13
JavaScript charts, and landing pages.
-
0:16
>>Last week, I was out due to a bizarre faux hawk incident.
-
0:21
I don't really want to go into the details.
-
0:23
It was pretty gnarly.
-
0:25
It's a little emotional, and fortunately, my faux hawk has grown back.
-
0:29
>>I'm just glad everything's okay.
-
0:36
[The Treehouse Show]
-
0:40
First up is CSS Explain,
-
0:43
which is this nifty little web site
-
0:46
where you can go ahead and type in a CSS selector.
-
0:50
So I'm going to use the example that they have here
-
0:52
of Li.active strong
-
0:59
and just below, it will tell me what kind of CSS selector it is,
-
1:04
so in this case, it's tag selector,
-
1:07
and I have to say this really slowly.
-
1:09
It also tells you the CSS selector specificity.
-
1:15
>>There's a tough one to get right.
-
1:18
>>It is, but it's a pretty nifty tool.
-
1:20
A lot of times, when you're creating a lot of CSS,
-
1:22
it can be a little difficult
-
1:24
knowing how strong a selector is,
-
1:26
what type of selector you're actually using,
-
1:28
and what it's going to select on the page,
-
1:30
and I like this tool,
-
1:32
because sometimes, if you're not specific enough,
-
1:34
it will tell you that the selector is actually universal,
-
1:36
so this is pretty good
-
1:38
if you're trying to debug CSS
-
1:40
and you just want to make sure that
-
1:42
you're typing in the right thing.
-
1:44
It's a good sanity check.
-
1:46
>>Yeah, this actually works off of the W3C CSS specificity specification.
-
1:53
>>Sounds pretty official. >>Yeah, I just wanted to say all that,
-
1:56
because that was probably the most difficult thing I've done all day.
-
1:59
(laughter)
-
2:01
Next up, we have something called xCharts.
-
2:03
xCharts is a D3 based library
-
2:06
for making charts in JavaScript.
-
2:08
It uses the D3 JS library
-
2:12
for manipulating HTML, CSS, and SVG
-
2:16
so these charts are going to be scalable.
-
2:18
Now the charts are actually really, really pretty
-
2:22
and easy to use on the web site.
-
2:24
On the demo, they have just a regular bar chart
-
2:27
as soon as you go in.
-
2:29
You can also make line charts,
-
2:31
and there's a ton of different examples;
-
2:33
bar charts, multi-series bar charts, line charts.
-
2:36
And in addition to just being able to make charts and make them look well,
-
2:39
they have a ton of different methods and events
-
2:43
that you can use when creating these charts in JavaScript.
-
2:46
So really, really nice plugin.
-
2:49
Very, very easy to use,
-
2:51
and we will have a link to this in the show notes
-
2:53
at YouTube.com/gotreehouse.
-
2:56
>>Pretty nifty.
-
2:58
Next up is Lorem Pixel.
-
3:01
So you've heard of Lorem Ipsum Text, right? That's the text that you use
-
3:04
that doesn't really mean anything; it kind of looks like Latin,
-
3:07
but it's not. It's just gibberish.
-
3:09
>>I just use that for placeholders, mainly, when creating--
-
3:12
>>Exactly, so when you're designing in the browser,
-
3:14
sometimes we'll use Lorem Ipsum Text
-
3:17
to go ahead and hold the place of where real text would normally be.
-
3:22
Well, Lorem Pixel does the same thing but for images.
-
3:26
So let's say that
-
3:29
you had an image that was
-
3:32
going to be 935 pixels by 393.
-
3:38
That's very specific,
-
3:40
and I want this to be a picture of, say, nature.
-
3:44
I can go ahead and click that I want this to be a color image.
-
3:48
And it will go ahead and generate that for me.
-
3:52
And then it will load up this nice picture of nature
-
3:56
at exactly the size that I specified.
-
3:59
Pretty amazing.
-
4:01
>>That is beautiful picture of nature. >> It is a really nice picture of nature.
-
4:04
But it's pretty useful.
-
4:06
Designing in the browser is obviously a very popular technique,
-
4:10
so this is pretty cool that you can just go ahead and drop and placeholder images.
-
4:14
It's always best, actually, to try and use real content
-
4:18
whenever possible, especially with text,
-
4:20
because you never know
-
4:22
how long or short text is actually going to be,
-
4:25
so if you have real content, you should use that,
-
4:27
but that's not always possible
-
4:29
and in those cases, a tool like this is really useful.
-
4:32
>>That's great.
-
4:34
You know, we've talked about placeholder images before,
-
4:36
but they basically just specified the size
-
4:38
or it was like a gradient picture,
-
4:40
but having something that is an actually picture
-
4:43
that goes along with your content is very beneficial.
-
4:46
>>Yeah. It makes it a little more realistic.
-
4:48
>>Next up, we've got the Node Beginner Book.
-
4:51
This is a free and paid book
-
4:54
that you can get on the Internet,
-
4:57
which tells you all about node.js.
-
5:00
So right now, if you want to just go online and read it for free, you can.
-
5:03
You can also buy a bundle to get a PDF and ePub version
-
5:07
with free updates.
-
5:09
This is a great book that goes through everything
-
5:12
that you need to get up and running with node.js.
-
5:16
Shows you how to build a Hello World application,
-
5:19
even go through building HTTP servers
-
5:22
and has a great introduction to JavaScript, as well.
-
5:25
I'm not going to get into everything that this book goes over
-
5:29
because it's really long, as you can tell
-
5:31
from all this scrolling.
-
5:33
>>I was hoping you were going to read the entire book to me right now.
-
5:35
>> (laughter) That's going to be the extended episode of the Treehouse Show.
-
5:38
I'll read all of this. >>I'll look forward to it.
-
5:40
>>But no, it's a great book,
-
5:42
so go ahead and check that out.
-
5:44
>>Pretty nifty.
-
5:46
Next up is a really cool blog post
-
5:49
and it's a 50-point checklist for creating the ultimate landing page,
-
5:54
and we're going to look at all 50 points, one at a time, right now.
-
5:59
First up is using the checklist,
-
6:02
so we're already off to a great start; we're using this checklist right now.
-
6:05
We'll just go over a couple of these points here
-
6:08
and basically, they ask just really good questions about landing pages.
-
6:13
Landing pages, of course, being for marketing purposes.
-
6:16
You know, it's something that you would link on, say, Twitter or social media channels
-
6:22
and it would send your users to a specific page
-
6:25
that has, say, a call to action
-
6:28
where you would go ahead and sign up or learn more about the product.
-
6:31
So some of these questions are things like
-
6:33
does your landing page headline match the message on your ads?
-
6:38
So, for example, if you had some ads that had particular marketing messaging,
-
6:42
you'd want to make sure
-
6:44
that when a user clicks on that,
-
6:46
they're taken to a landing page where the messaging matches that
-
6:50
and you have consistent brand messaging
-
6:52
so that they know that, okay,
-
6:54
that ad I just clicked on is linked to this thing that I'm looking at now.
-
6:58
Is your landing page messaging focused on a single purpose?
-
7:03
So is it focused?
-
7:07
Another one here is do you have a simple secondary description to enhance the headline?
-
7:12
So all sorts of really cool quick sanity checks.
-
7:16
Does this make sense?
-
7:18
And it helps you to look at your land pages from a couple of different perspectives.
-
7:22
>>It's probably going to be really good
-
7:24
if you're not too experienced creating landing pages
-
7:27
or maybe it's one of your first few tries.
-
7:29
>>Yeah, exactly. If you don't have a really good gut feel for whether or not
-
7:32
a landing page is good, this will help you run down a couple of things
-
7:35
that might you might not have considered.
-
7:37
>>That's awesome. Next up, we have a project called AlertifyJS.
-
7:42
This is billed as an unobtrusive and customizable JavaScript notification system.
-
7:47
Now it offers a few different pieces of functionality
-
7:50
with dialogues, kind of modal dialogues
-
7:53
letting you dismiss messages
-
7:56
or enter some information,
-
7:58
click cancel or OK,
-
8:00
and then if you look on the bottom right of the screen,
-
8:02
you can see that it'll actually tell me
-
8:04
when I click cancel.
-
8:06
This is also going to be really useful
-
8:08
when you want to have custom log messages.
-
8:11
You can see as I'm clicking the different kinds,
-
8:13
they just roll in on the bottom.
-
8:15
And this is going to be something that's really useful
-
8:17
when you are debugging your applications,
-
8:20
say, in development.
-
8:23
You could, of course, use the console.log functionality
-
8:25
that's built into most of the different browsers these days,
-
8:29
or you could use this library maybe to--
-
8:32
you know, if you only need to display a little bit of information.
-
8:34
But yeah, it's a great project.
-
8:37
It would also be really useful maybe for giving your users messages
-
8:40
as they're using your application.
-
8:42
But yeah, great project
-
8:44
and you know, once again, we'll have a link to that in the show notes for AlertifyJS.
-
8:48
>>Sweet.
-
8:50
Next up is Bootsnipp.
-
8:52
This is the last thing we're covering today.
-
8:54
If I just go ahead and click on Snipps here,
-
8:59
you get this really nice gallery of design patterns
-
9:03
that you can use in a Bootstrap project.
-
9:07
So say, for example, that you wanted to go ahead and create a search bar,
-
9:11
click on View for that,
-
9:14
and right here, they have all of the code that you need
-
9:17
to go ahead and put together in style that search bar.
-
9:21
There's a couple of other common ones here,
-
9:23
such as sign-up form, a 1-month calendar,
-
9:27
and right here,
-
9:29
they have one for vacation rentals,
-
9:32
which Jason, that would be really good
-
9:34
for the timesharing website that you wanted to tell me all about.
-
9:37
>>Yeah, you definitely want to get in on the ground floor of that one.
-
9:40
>>Yeah. Okay, cool.
-
9:42
Well, I'm looking forward to that.
-
9:44
>>I'll have to check out Bootsnipp, so this is just for Twitter Bootstrap,
-
9:48
or does it work with Zero Foundation,
-
9:52
I would suppose if it's called Bootsnipp, it's Bootstrap-based?
-
9:55
>>It's probably--yeah, specific to Bootstrap.
-
9:58
>>All right, sounds good.
-
10:00
(laughter) So that's all we got for this episode.
-
10:03
>>Yup, that's it. Who are you on Twitter?
-
10:05
>>I'm @NickRP.
-
10:07
>>And I am @JSeifer.
-
10:09
Thanks so much for tuning into this episode of The Treehouse Show.
-
10:11
If you want more information on anything we talked about,
-
10:14
check out our show notes
-
10:16
at Youtube.com/gotreehouse.
-
10:19
>>And of course, if you'd like to see more videos like this one,
-
10:21
you can check us out at
-
10:23
TeamTreehouse.com.
-
10:25
Thanks so much for watching, and we'll see you nextw eek.
-
10:27
[The Treehouse Show]
-
10:33
[Treehouseā¢]
-
10:35
If you'd like to see more advanced videos and tutorials like this one,
-
10:38
go to TeamTreehouse.com
-
10:40
and start learning for free.
-
10:42
[?Electronic music?]
You need to sign up for Treehouse in order to download course files.
Sign up