Episode 22: Explaining CSS and Landing Pages

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