1 00:00:00,000 --> 00:00:03,330 >>I'm Nick Pettit. >>I'm Jason Seifer. 2 00:00:03,330 --> 00:00:06,630 >>And you're watching the Treehouse Show, your weekly dose of Internet, 3 00:00:06,630 --> 00:00:10,120 where we talk about all things web design, web development, and more. 4 00:00:10,120 --> 00:00:13,570 >>In this episode, we'll be talking about explaining CSS, 5 00:00:13,570 --> 00:00:16,640 JavaScript charts, and landing pages. 6 00:00:16,640 --> 00:00:21,110 >>Last week, I was out due to a bizarre faux hawk incident. 7 00:00:21,110 --> 00:00:23,810 I don't really want to go into the details. 8 00:00:23,810 --> 00:00:25,670 It was pretty gnarly. 9 00:00:25,670 --> 00:00:29,490 It's a little emotional, and fortunately, my faux hawk has grown back. 10 00:00:29,490 --> 00:00:31,860 >>I'm just glad everything's okay. 11 00:00:36,660 --> 00:00:40,730 [The Treehouse Show] 12 00:00:40,730 --> 00:00:43,800 First up is CSS Explain, 13 00:00:43,800 --> 00:00:46,410 which is this nifty little web site 14 00:00:46,410 --> 00:00:50,340 where you can go ahead and type in a CSS selector. 15 00:00:50,340 --> 00:00:52,830 So I'm going to use the example that they have here 16 00:00:52,830 --> 00:00:59,250 of Li.active strong 17 00:00:59,250 --> 00:01:04,370 and just below, it will tell me what kind of CSS selector it is, 18 00:01:04,370 --> 00:01:07,210 so in this case, it's tag selector, 19 00:01:07,210 --> 00:01:09,960 and I have to say this really slowly. 20 00:01:09,960 --> 00:01:15,680 It also tells you the CSS selector specificity. 21 00:01:15,680 --> 00:01:18,150 >>There's a tough one to get right. 22 00:01:18,150 --> 00:01:20,340 >>It is, but it's a pretty nifty tool. 23 00:01:20,340 --> 00:01:22,340 A lot of times, when you're creating a lot of CSS, 24 00:01:22,340 --> 00:01:24,200 it can be a little difficult 25 00:01:24,200 --> 00:01:26,110 knowing how strong a selector is, 26 00:01:26,110 --> 00:01:28,480 what type of selector you're actually using, 27 00:01:28,480 --> 00:01:30,350 and what it's going to select on the page, 28 00:01:30,350 --> 00:01:32,210 and I like this tool, 29 00:01:32,210 --> 00:01:34,350 because sometimes, if you're not specific enough, 30 00:01:34,350 --> 00:01:36,770 it will tell you that the selector is actually universal, 31 00:01:36,770 --> 00:01:38,580 so this is pretty good 32 00:01:38,580 --> 00:01:40,680 if you're trying to debug CSS 33 00:01:40,680 --> 00:01:42,490 and you just want to make sure that 34 00:01:42,490 --> 00:01:44,360 you're typing in the right thing. 35 00:01:44,360 --> 00:01:46,360 It's a good sanity check. 36 00:01:46,360 --> 00:01:53,660 >>Yeah, this actually works off of the W3C CSS specificity specification. 37 00:01:53,660 --> 00:01:56,130 >>Sounds pretty official. >>Yeah, I just wanted to say all that, 38 00:01:56,130 --> 00:01:59,300 because that was probably the most difficult thing I've done all day. 39 00:01:59,300 --> 00:02:01,340 (laughter) 40 00:02:01,340 --> 00:02:03,670 Next up, we have something called xCharts. 41 00:02:03,670 --> 00:02:06,050 xCharts is a D3 based library 42 00:02:06,050 --> 00:02:08,509 for making charts in JavaScript. 43 00:02:08,509 --> 00:02:12,890 It uses the D3 JS library 44 00:02:12,890 --> 00:02:16,330 for manipulating HTML, CSS, and SVG 45 00:02:16,330 --> 00:02:18,800 so these charts are going to be scalable. 46 00:02:18,800 --> 00:02:22,200 Now the charts are actually really, really pretty 47 00:02:22,200 --> 00:02:24,760 and easy to use on the web site. 48 00:02:24,760 --> 00:02:27,900 On the demo, they have just a regular bar chart 49 00:02:27,900 --> 00:02:29,230 as soon as you go in. 50 00:02:29,230 --> 00:02:31,970 You can also make line charts, 51 00:02:31,970 --> 00:02:33,460 and there's a ton of different examples; 52 00:02:33,460 --> 00:02:36,910 bar charts, multi-series bar charts, line charts. 53 00:02:36,910 --> 00:02:39,740 And in addition to just being able to make charts and make them look well, 54 00:02:39,740 --> 00:02:43,440 they have a ton of different methods and events 55 00:02:43,440 --> 00:02:46,660 that you can use when creating these charts in JavaScript. 56 00:02:46,660 --> 00:02:49,310 So really, really nice plugin. 57 00:02:49,310 --> 00:02:51,360 Very, very easy to use, 58 00:02:51,360 --> 00:02:53,170 and we will have a link to this in the show notes 59 00:02:53,170 --> 00:02:56,340 at YouTube.com/gotreehouse. 60 00:02:56,340 --> 00:02:58,480 >>Pretty nifty. 61 00:02:58,480 --> 00:03:01,040 Next up is Lorem Pixel. 62 00:03:01,040 --> 00:03:04,320 So you've heard of Lorem Ipsum Text, right? That's the text that you use 63 00:03:04,320 --> 00:03:07,210 that doesn't really mean anything; it kind of looks like Latin, 64 00:03:07,210 --> 00:03:09,770 but it's not. It's just gibberish. 65 00:03:09,770 --> 00:03:12,650 >>I just use that for placeholders, mainly, when creating-- 66 00:03:12,650 --> 00:03:14,930 >>Exactly, so when you're designing in the browser, 67 00:03:14,930 --> 00:03:17,660 sometimes we'll use Lorem Ipsum Text 68 00:03:17,660 --> 00:03:22,780 to go ahead and hold the place of where real text would normally be. 69 00:03:22,780 --> 00:03:26,920 Well, Lorem Pixel does the same thing but for images. 70 00:03:26,920 --> 00:03:29,200 So let's say that 71 00:03:29,200 --> 00:03:32,320 you had an image that was 72 00:03:32,320 --> 00:03:38,160 going to be 935 pixels by 393. 73 00:03:38,160 --> 00:03:40,300 That's very specific, 74 00:03:40,300 --> 00:03:44,260 and I want this to be a picture of, say, nature. 75 00:03:44,260 --> 00:03:48,520 I can go ahead and click that I want this to be a color image. 76 00:03:48,520 --> 00:03:52,100 And it will go ahead and generate that for me. 77 00:03:52,100 --> 00:03:56,100 And then it will load up this nice picture of nature 78 00:03:56,100 --> 00:03:59,450 at exactly the size that I specified. 79 00:03:59,450 --> 00:04:01,130 Pretty amazing. 80 00:04:01,130 --> 00:04:04,340 >>That is beautiful picture of nature. >> It is a really nice picture of nature. 81 00:04:04,340 --> 00:04:06,760 But it's pretty useful. 82 00:04:06,760 --> 00:04:10,580 Designing in the browser is obviously a very popular technique, 83 00:04:10,580 --> 00:04:14,440 so this is pretty cool that you can just go ahead and drop and placeholder images. 84 00:04:14,440 --> 00:04:18,209 It's always best, actually, to try and use real content 85 00:04:18,209 --> 00:04:20,680 whenever possible, especially with text, 86 00:04:20,680 --> 00:04:22,680 because you never know 87 00:04:22,680 --> 00:04:25,980 how long or short text is actually going to be, 88 00:04:25,980 --> 00:04:27,660 so if you have real content, you should use that, 89 00:04:27,660 --> 00:04:29,570 but that's not always possible 90 00:04:29,570 --> 00:04:32,550 and in those cases, a tool like this is really useful. 91 00:04:32,550 --> 00:04:34,500 >>That's great. 92 00:04:34,500 --> 00:04:36,320 You know, we've talked about placeholder images before, 93 00:04:36,320 --> 00:04:38,600 but they basically just specified the size 94 00:04:38,600 --> 00:04:40,600 or it was like a gradient picture, 95 00:04:40,600 --> 00:04:43,440 but having something that is an actually picture 96 00:04:43,440 --> 00:04:46,190 that goes along with your content is very beneficial. 97 00:04:46,190 --> 00:04:48,370 >>Yeah. It makes it a little more realistic. 98 00:04:48,370 --> 00:04:51,680 >>Next up, we've got the Node Beginner Book. 99 00:04:51,680 --> 00:04:54,380 This is a free and paid book 100 00:04:54,380 --> 00:04:57,540 that you can get on the Internet, 101 00:04:57,540 --> 00:05:00,380 which tells you all about node.js. 102 00:05:00,380 --> 00:05:03,590 So right now, if you want to just go online and read it for free, you can. 103 00:05:03,590 --> 00:05:07,920 You can also buy a bundle to get a PDF and ePub version 104 00:05:07,920 --> 00:05:09,600 with free updates. 105 00:05:09,600 --> 00:05:12,620 This is a great book that goes through everything 106 00:05:12,620 --> 00:05:16,490 that you need to get up and running with node.js. 107 00:05:16,490 --> 00:05:19,370 Shows you how to build a Hello World application, 108 00:05:19,370 --> 00:05:22,280 even go through building HTTP servers 109 00:05:22,280 --> 00:05:25,870 and has a great introduction to JavaScript, as well. 110 00:05:25,870 --> 00:05:29,400 I'm not going to get into everything that this book goes over 111 00:05:29,400 --> 00:05:31,450 because it's really long, as you can tell 112 00:05:31,450 --> 00:05:33,310 from all this scrolling. 113 00:05:33,310 --> 00:05:35,690 >>I was hoping you were going to read the entire book to me right now. 114 00:05:35,690 --> 00:05:38,690 >> (laughter) That's going to be the extended episode of the Treehouse Show. 115 00:05:38,690 --> 00:05:40,530 I'll read all of this. >>I'll look forward to it. 116 00:05:40,530 --> 00:05:42,850 >>But no, it's a great book, 117 00:05:42,850 --> 00:05:44,440 so go ahead and check that out. 118 00:05:44,440 --> 00:05:46,300 >>Pretty nifty. 119 00:05:46,300 --> 00:05:49,140 Next up is a really cool blog post 120 00:05:49,140 --> 00:05:54,770 and it's a 50-point checklist for creating the ultimate landing page, 121 00:05:54,770 --> 00:05:58,120 and we're going to look at all 50 points, one at a time, right now. 122 00:05:59,980 --> 00:06:02,170 First up is using the checklist, 123 00:06:02,170 --> 00:06:05,660 so we're already off to a great start; we're using this checklist right now. 124 00:06:05,660 --> 00:06:08,780 We'll just go over a couple of these points here 125 00:06:08,780 --> 00:06:13,300 and basically, they ask just really good questions about landing pages. 126 00:06:13,300 --> 00:06:16,970 Landing pages, of course, being for marketing purposes. 127 00:06:16,970 --> 00:06:22,000 You know, it's something that you would link on, say, Twitter or social media channels 128 00:06:22,000 --> 00:06:25,280 and it would send your users to a specific page 129 00:06:25,280 --> 00:06:28,070 that has, say, a call to action 130 00:06:28,070 --> 00:06:31,980 where you would go ahead and sign up or learn more about the product. 131 00:06:31,980 --> 00:06:33,840 So some of these questions are things like 132 00:06:33,840 --> 00:06:38,080 does your landing page headline match the message on your ads? 133 00:06:38,080 --> 00:06:42,990 So, for example, if you had some ads that had particular marketing messaging, 134 00:06:42,990 --> 00:06:44,990 you'd want to make sure 135 00:06:44,990 --> 00:06:46,390 that when a user clicks on that, 136 00:06:46,390 --> 00:06:50,160 they're taken to a landing page where the messaging matches that 137 00:06:50,160 --> 00:06:52,810 and you have consistent brand messaging 138 00:06:52,810 --> 00:06:54,670 so that they know that, okay, 139 00:06:54,670 --> 00:06:58,720 that ad I just clicked on is linked to this thing that I'm looking at now. 140 00:06:58,720 --> 00:07:03,980 Is your landing page messaging focused on a single purpose? 141 00:07:03,980 --> 00:07:07,750 So is it focused? 142 00:07:07,750 --> 00:07:12,270 Another one here is do you have a simple secondary description to enhance the headline? 143 00:07:12,270 --> 00:07:16,600 So all sorts of really cool quick sanity checks. 144 00:07:16,600 --> 00:07:18,550 Does this make sense? 145 00:07:18,550 --> 00:07:22,690 And it helps you to look at your land pages from a couple of different perspectives. 146 00:07:22,690 --> 00:07:24,860 >>It's probably going to be really good 147 00:07:24,860 --> 00:07:27,140 if you're not too experienced creating landing pages 148 00:07:27,140 --> 00:07:29,140 or maybe it's one of your first few tries. 149 00:07:29,140 --> 00:07:32,310 >>Yeah, exactly. If you don't have a really good gut feel for whether or not 150 00:07:32,310 --> 00:07:35,470 a landing page is good, this will help you run down a couple of things 151 00:07:35,470 --> 00:07:37,540 that might you might not have considered. 152 00:07:37,540 --> 00:07:42,010 >>That's awesome. Next up, we have a project called AlertifyJS. 153 00:07:42,010 --> 00:07:47,320 This is billed as an unobtrusive and customizable JavaScript notification system. 154 00:07:47,320 --> 00:07:50,620 Now it offers a few different pieces of functionality 155 00:07:50,620 --> 00:07:53,880 with dialogues, kind of modal dialogues 156 00:07:53,880 --> 00:07:56,390 letting you dismiss messages 157 00:07:56,390 --> 00:07:58,490 or enter some information, 158 00:07:58,490 --> 00:08:00,400 click cancel or OK, 159 00:08:00,400 --> 00:08:02,400 and then if you look on the bottom right of the screen, 160 00:08:02,400 --> 00:08:04,310 you can see that it'll actually tell me 161 00:08:04,310 --> 00:08:06,490 when I click cancel. 162 00:08:06,490 --> 00:08:08,400 This is also going to be really useful 163 00:08:08,400 --> 00:08:11,710 when you want to have custom log messages. 164 00:08:11,710 --> 00:08:13,150 You can see as I'm clicking the different kinds, 165 00:08:13,150 --> 00:08:15,310 they just roll in on the bottom. 166 00:08:15,310 --> 00:08:17,460 And this is going to be something that's really useful 167 00:08:17,460 --> 00:08:20,460 when you are debugging your applications, 168 00:08:20,460 --> 00:08:23,410 say, in development. 169 00:08:23,410 --> 00:08:25,880 You could, of course, use the console.log functionality 170 00:08:25,880 --> 00:08:29,370 that's built into most of the different browsers these days, 171 00:08:29,370 --> 00:08:32,020 or you could use this library maybe to-- 172 00:08:32,020 --> 00:08:34,770 you know, if you only need to display a little bit of information. 173 00:08:34,770 --> 00:08:37,559 But yeah, it's a great project. 174 00:08:37,559 --> 00:08:40,169 It would also be really useful maybe for giving your users messages 175 00:08:40,169 --> 00:08:42,500 as they're using your application. 176 00:08:42,500 --> 00:08:44,400 But yeah, great project 177 00:08:44,400 --> 00:08:48,970 and you know, once again, we'll have a link to that in the show notes for AlertifyJS. 178 00:08:48,970 --> 00:08:50,640 >>Sweet. 179 00:08:50,640 --> 00:08:52,460 Next up is Bootsnipp. 180 00:08:52,460 --> 00:08:54,690 This is the last thing we're covering today. 181 00:08:54,690 --> 00:08:59,250 If I just go ahead and click on Snipps here, 182 00:08:59,250 --> 00:09:03,160 you get this really nice gallery of design patterns 183 00:09:03,160 --> 00:09:07,120 that you can use in a Bootstrap project. 184 00:09:07,120 --> 00:09:11,730 So say, for example, that you wanted to go ahead and create a search bar, 185 00:09:11,730 --> 00:09:14,240 click on View for that, 186 00:09:14,240 --> 00:09:17,590 and right here, they have all of the code that you need 187 00:09:17,590 --> 00:09:21,940 to go ahead and put together in style that search bar. 188 00:09:21,940 --> 00:09:23,900 There's a couple of other common ones here, 189 00:09:23,900 --> 00:09:27,990 such as sign-up form, a 1-month calendar, 190 00:09:27,990 --> 00:09:29,480 and right here, 191 00:09:29,480 --> 00:09:32,230 they have one for vacation rentals, 192 00:09:32,230 --> 00:09:34,020 which Jason, that would be really good 193 00:09:34,020 --> 00:09:37,470 for the timesharing website that you wanted to tell me all about. 194 00:09:37,470 --> 00:09:40,260 >>Yeah, you definitely want to get in on the ground floor of that one. 195 00:09:40,260 --> 00:09:42,260 >>Yeah. Okay, cool. 196 00:09:42,260 --> 00:09:44,030 Well, I'm looking forward to that. 197 00:09:44,030 --> 00:09:48,170 >>I'll have to check out Bootsnipp, so this is just for Twitter Bootstrap, 198 00:09:48,170 --> 00:09:52,550 or does it work with Zero Foundation, 199 00:09:52,550 --> 00:09:55,290 I would suppose if it's called Bootsnipp, it's Bootstrap-based? 200 00:09:55,290 --> 00:09:58,690 >>It's probably--yeah, specific to Bootstrap. 201 00:09:58,690 --> 00:10:00,550 >>All right, sounds good. 202 00:10:00,550 --> 00:10:03,390 (laughter) So that's all we got for this episode. 203 00:10:03,390 --> 00:10:05,560 >>Yup, that's it. Who are you on Twitter? 204 00:10:05,560 --> 00:10:07,470 >>I'm @NickRP. 205 00:10:07,470 --> 00:10:09,160 >>And I am @JSeifer. 206 00:10:09,160 --> 00:10:11,630 Thanks so much for tuning into this episode of The Treehouse Show. 207 00:10:11,630 --> 00:10:14,240 If you want more information on anything we talked about, 208 00:10:14,240 --> 00:10:16,250 check out our show notes 209 00:10:16,250 --> 00:10:19,220 at Youtube.com/gotreehouse. 210 00:10:19,220 --> 00:10:21,030 >>And of course, if you'd like to see more videos like this one, 211 00:10:21,030 --> 00:10:23,410 you can check us out at 212 00:10:23,410 --> 00:10:25,320 TeamTreehouse.com. 213 00:10:25,320 --> 00:10:27,780 Thanks so much for watching, and we'll see you nextw eek. 214 00:10:27,780 --> 00:10:31,370 [The Treehouse Show] 215 00:10:33,550 --> 00:10:35,280 [Treehouseā„¢] 216 00:10:35,280 --> 00:10:38,300 If you'd like to see more advanced videos and tutorials like this one, 217 00:10:38,300 --> 00:10:40,950 go to TeamTreehouse.com 218 00:10:40,950 --> 00:10:42,400 and start learning for free. 219 00:10:42,400 --> 00:11:02,300 [?Electronic music?]