Explaining CSS, Landing Pages | Treehouse Show Ep. 22

treehouseShow22

In this episode of The Treehouse Show, Nick Pettit (@nickrp) and Jason Seifer (@jseifer) talk about explaining CSS, charts, and landing pages.

Here are the links for the week:
CSS Explain
https://github.com/josh/css-explain

xCharts
http://tenxer.github.com/xcharts/

Lorem Pixel
http://lorempixel.com

The Node Beginner Book
http://www.nodebeginner.org

A 50-Point Checklist For Creating The Ultimate Landing Page
http://unbounce.com/landing-pages/checklist/

alertifyjs
http://fabien-d.github.com/alertify.js/

Bootsnipp
http://bootsnipp.com

Video Transcripts

Nick: I’m Nick Pettit.

Jason: I’m Jason Seifer.

Nick: And you’re watching the Treehouse Show, your weekly dose of
internets. Where we talk about all things web design, web
development, and more.

Jason: In this episode we’ll be talking about explaining CSS, Java
Script charts, and landing pages.

Nick: Last week I was out due to a bizzarre fauxhawk incident. I don’t
really want to go in to the details, it was pretty gnarly, a
little emotional, and fortunately my fauxhawk’s grown back.

Jason: Just glad everything’s okay.

Nick: You smell really nice. First up is CSS Explain, which is this nifty
little website 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.

Jason: That is a tough one to get right.

Nick: 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. I like this
tool because sometimes if you’re not specific enough it will
tell you that the selector is actually universal. 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.

Jason: Yeah, this actually works off of the W3C’s CSS Specificity
Specification.

Nick: Sounds pretty official.

Jason: Yeah, I just wanted to say all that because that was probably
the most difficult thing I’ve done all day. Next up we have
something called X Charts. X Charts is a D3 based library for
making charts in JavaScript. It uses the D3JS library for
manipulating HMTL, CSS, and SVG so these charts are going to be
scalable. The charts are actually really, really pretty and easy
to use on the website. 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. 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 and very, very
easy to use. We will have a link to this in the show notes at
youtube.com/gotreehouse.

Nick: That’s pretty nifty. Next up is Lorem Pixel, so you’ve hear of Lorem
Ipsum text, 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.

Jason: They just use that for placeholders mainly, when they’re
creating…

Nick: Exactly. So, when you’re designing in the browser sometimes you’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. 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. Then it will load up this nice picture of
nature at exactly the size that I specified. Pretty amazing.

Jason: That is a beautiful picture of nature.

Nick: 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 in
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.

Jason: That’s great. We’ve talked about placeholder images before but
they basically just specified the size or it was a gradient
picture. Having something that is an actual picture that goes
along with your content is very beneficial.

Nick: Yeah, it makes it a little more realistic.

Jason: Next up we’ve got the Node Beginner Book. This is a free and
pay 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 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. It shows you how to build a Hello World application, it
even goes 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.

Nick: I was hoping you were going to read the entirety of the book to me
right now.

Jason: It’s going to be the extended episode of the Treehouse Show.
I’ll read all of this.

Nick: I’m look forward to it.

Jason: But no, it’s a great book so go ahead and check that out.

Nick: Pretty nifty. Next up is a really cool blog post. It’s a 50 point
check list for creating the ultimate landing page. We’re going
to look at all 50 points, one at a time, right now.

Jason: Awesome.

Nick: First up is using the checklist. So we’re already off to a greats
start. We’re using this checklist right now. we’ll just go over
a couple of these points here and basically they ask really good
questions about landing pages; landing pages, of course being
for marketing purposes. Something that you would link on twitter
or social media channels and it would send your users to a
specific page that has a call to action. Where you would go
ahead and sign up or learn more about the product.
Some of these questions are things like “Does your landing page
headline match the message on your ads?” For example, if you had
some ads that had particular marketing messaging you want to
make sure that when a user clicks on that, they’re taken to a
landing page where the messaging matches that. You have
consistent brand messaging so they know that 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, you
know, 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? It helps
you to look at your landing pages from a couple different
perspectives.

Jason: That’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.

Nick: Yeah, exactly. If you don’t have a really good gut feeling for
whether or not a landing page is good this will help you run
down a couple of things that you might not have considered.

Jason: That’s awesome. Next up we have a project called alertifyjs.
This is billed as a unobtrusive and customizable JavaScript
notification system. It offers a few different pieces of
functionality with dialogues, modal dialogues, letting you
dismiss messages or enter some information, click cancel or
Okay. Then, if you look on the bottom right of the screen you
can see that it will 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. This is going to be something
that’s really useful when you are debugging your applications in
development. You could, of course, use the console.log
functionality that’s built in to most of the different browsers
these days or you could use this library if you only need to
display a little information. It’s a great project it would also
be very useful for giving your users messages as they’re using
your application. Yeah, great project and once again we’ll have
a link to that in the show notes for alterifyjs.

Nick: Sweet. Next up is Bootsnipp, and this is going to be 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. 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 and style that search bar. There’s a
couple of other common ones here such as sign up form, a one
month calendar, and right here they have one for vacation
rentals which, Jason, that would be really good for the time
sharing website that you wanted to tell me all about.

Jason: Yeah. You definitely want to get in on the ground floor of that
one.

Nick: Okay, cool, well I’m looking forward to that.

Jason: I’ll have to check out Bootsnipp. So this is just for twitter
Bootstrap or does it work with, I suppose that since it’s called
Bootsnipp it’s Bootstrap based?

Nick: It’s probably specific to Bootstrap.

Jason: Sounds good. So that’s all we’ve got for this episode.

Nick: Yep, that’s it.

Jason: Who are you on twitter?

Nick: I’m @nickrp

Jason: And I am @jseifer. Thanks so much for tuning into this episode
of The Treehouse Show, if you want more information on anything
that we talked about check out our show note at
youtube.com/gotreehouse.

Nick: 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 ya next week.

If you’d like to see more advanced videos and tutorials like this one go to
teamtreehouse.com and start learning for free.

Free Workshops

Watch one of our expert, full-length teaching videos. Choose from either HTML, CSS or Wordpress.

Start learning

Treehouse

Our mission is to bring affordable Technology education to people everywhere, in order to help them achieve their dreams and change the world.

Comments

Comments are closed.