1 00:00:00,260 --> 00:00:02,010 I'm Nick Pettit. >> I'm Jason Seifer. 2 00:00:02,010 --> 00:00:04,310 >> And you're watching The Treehouse Show your weekly dose of 3 00:00:04,310 --> 00:00:08,290 internets where we talk about things web designed, web development and more. 4 00:00:08,290 --> 00:00:12,150 >> In this episode, we'll be talking about responsive design, rich content 5 00:00:12,150 --> 00:00:16,674 editing, Git and Github, Nick's lack of a faux hawk and more. 6 00:00:16,674 --> 00:00:18,554 >> Let's check it out. 7 00:00:18,554 --> 00:00:23,303 [MUSIC] 8 00:00:23,303 --> 00:00:28,073 First up, is a knowledge hub for responsive web design. 9 00:00:28,073 --> 00:00:31,073 Now, if you're not familiar with responsive web design, 10 00:00:31,073 --> 00:00:33,413 just start back at episode one of The Treehouse 11 00:00:33,413 --> 00:00:35,393 Show and watch all the way up to this 12 00:00:35,393 --> 00:00:38,100 episode, and you'll get a little bit of an idea. 13 00:00:38,100 --> 00:00:40,270 >> It maybe started episode ten, those first 14 00:00:40,270 --> 00:00:41,890 few were a little rough around the edges. 15 00:00:41,890 --> 00:00:44,120 >> That's probably good advice. 16 00:00:44,120 --> 00:00:46,280 But basically, responsive web design is just a 17 00:00:46,280 --> 00:00:48,780 technique that allows you to take a single codebase. 18 00:00:48,780 --> 00:00:54,400 And make it work for multiple screen resolutions, desktops, tablets, 19 00:00:54,400 --> 00:00:59,080 iPhones, iPads, other phones, smart watches, all that sorta stuff. 20 00:01:00,110 --> 00:01:02,530 But there's a lot to know and so the 21 00:01:02,530 --> 00:01:07,890 Knowledge Hub for Responsive Design attempts to organize it all. 22 00:01:07,890 --> 00:01:09,010 So this is pretty cool. 23 00:01:09,010 --> 00:01:12,160 There's a couple definitions and by a couple, I mean just one. 24 00:01:12,160 --> 00:01:13,800 What is responsive web design? 25 00:01:13,800 --> 00:01:14,300 Boom. 26 00:01:15,680 --> 00:01:18,260 There's a couple of examples and inspirations. 27 00:01:18,260 --> 00:01:20,400 So I'll go ahead and click on that. 28 00:01:20,400 --> 00:01:24,510 Responsive Design Galleries, look at that. Isn't that pinteresting? 29 00:01:24,510 --> 00:01:29,650 We're gonna click on Core Concepts here. Tutorials and Tools. 30 00:01:29,650 --> 00:01:33,290 Responsive Design Tutorials, wow, look at that big long list. 31 00:01:33,290 --> 00:01:36,390 Right there is the Beginner's Guide to Responsive Web Design. 32 00:01:36,390 --> 00:01:38,910 Which is an article that you can find 33 00:01:38,910 --> 00:01:40,120 on the Treehouse Blog. >> Wow. 34 00:01:40,120 --> 00:01:40,620 >> Look at that. 35 00:01:40,620 --> 00:01:42,810 We've come full circle. >> Wow, how about that? 36 00:01:42,810 --> 00:01:47,090 >> But it's, it's really a, a pretty cool resource lot's of 37 00:01:47,090 --> 00:01:50,130 cool stuff to check out there so be sure to take a look. 38 00:01:50,130 --> 00:01:53,910 >> Yeah, we, you know, we talk about a lot of responsive web design on this 39 00:01:53,910 --> 00:01:58,270 show so it's nice to have that packaged up as a, as a good resource for people. 40 00:01:58,270 --> 00:01:58,770 Definitely. 41 00:01:58,770 --> 00:02:01,030 >> Next up, we have a project called Sir Trevor. 42 00:02:01,030 --> 00:02:03,920 Sir Trevor is a rich content editor 43 00:02:03,920 --> 00:02:06,440 for the web. And it's actually pretty cool. 44 00:02:06,440 --> 00:02:08,580 >> So let's take a look at how it works. 45 00:02:08,580 --> 00:02:13,270 So let's see if we see any example here, it says, oh hello, I'm Sir Trevor. 46 00:02:13,270 --> 00:02:15,060 Create some new blocks and see what I can do. 47 00:02:15,060 --> 00:02:17,020 Well that's not very interesting, is it? 48 00:02:17,020 --> 00:02:18,890 Well, it looks like I can type text right in here. 49 00:02:20,760 --> 00:02:21,190 Look at that. 50 00:02:21,190 --> 00:02:22,800 And then Sir Trevor edits it. 51 00:02:22,800 --> 00:02:24,810 Now if you have some text here. 52 00:02:24,810 --> 00:02:29,070 You can actually make it bold, italicized, make it a, a link, or, or something 53 00:02:29,070 --> 00:02:29,450 like that. 54 00:02:29,450 --> 00:02:33,680 Now what's really interesting about this is, you can add more text areas, 55 00:02:33,680 --> 00:02:38,380 you can add lists, videos, block quotes, tons of, tons of different things. 56 00:02:38,380 --> 00:02:43,260 You can reorder the different text areas on here and you 57 00:02:43,260 --> 00:02:47,585 can also embed YouTube videos, delete these things, all that, yeah. 58 00:02:47,585 --> 00:02:49,180 Okay, get that out of there. 59 00:02:49,180 --> 00:02:53,776 So let's go back up here and say a little bit about how it works. 60 00:02:53,776 --> 00:02:58,725 To install Sir Trevor, it's really really easy, just use 61 00:02:58,725 --> 00:03:02,960 bower included right on there, initialize it all you need to 62 00:03:02,960 --> 00:03:06,630 do is give it this class name to initialize it 63 00:03:06,630 --> 00:03:11,070 and then this will turn that in to a new script. 64 00:03:11,070 --> 00:03:16,680 So, once you set this up, the output is actually scored in JSON. 65 00:03:16,680 --> 00:03:18,670 So, really really easy use, 66 00:03:18,670 --> 00:03:22,220 just that give this little data key right here. 67 00:03:22,220 --> 00:03:26,100 Tells the type it is, and then what is actually going on inside. 68 00:03:26,100 --> 00:03:29,220 Now, as you might expect from any project we cover here on the show, 69 00:03:29,220 --> 00:03:33,170 it's very, very easy to use, and there's tons of different options to extend it. 70 00:03:33,170 --> 00:03:35,430 So, if you need to allow your users to edit 71 00:03:35,430 --> 00:03:38,330 rich content on your site, I recommend checking out Sir Trevor. 72 00:03:39,450 --> 00:03:40,350 >> Very cool stuff. 73 00:03:40,350 --> 00:03:44,230 Well, Jason is my absolute favorite 74 00:03:44,230 --> 00:03:47,186 data format. >> Oh, stop it, you. 75 00:03:47,186 --> 00:03:51,280 >> Next up is CSS3 icons. 76 00:03:51,280 --> 00:03:54,340 I don't know why they're calling them CSS3 icons, 77 00:03:54,340 --> 00:03:57,650 because there's actually 200 of them and they're still counting. 78 00:03:57,650 --> 00:03:59,240 There's more than three. 79 00:03:59,240 --> 00:04:02,790 If you look here, you can go ahead and click on each one of these icons, and it. 80 00:04:02,790 --> 00:04:05,250 >> And it, it's referring to the version of CSS that they're using. 81 00:04:05,250 --> 00:04:09,800 >> Oh, that makes more sense. Thanks for point that out Jason. 82 00:04:09,800 --> 00:04:10,270 >> No problem. 83 00:04:10,270 --> 00:04:12,110 >> I wouldn't have known that otherwise. 84 00:04:12,110 --> 00:04:13,210 >> Got your back. 85 00:04:13,210 --> 00:04:14,380 >> If you click on one of these icons, it 86 00:04:14,380 --> 00:04:20,190 will show you how to recreate them in CSS and HTML. 87 00:04:20,190 --> 00:04:26,130 For each one of these, they're using no more than two span tags, which I think 88 00:04:26,130 --> 00:04:31,440 it's what it says somewhere down here. Can go ahead and take a look at that. 89 00:04:31,440 --> 00:04:34,980 But in this example, looks like they're just using one span tag so that's cool. 90 00:04:36,040 --> 00:04:37,090 Why would you want to do this? 91 00:04:37,090 --> 00:04:44,370 Well it, allows you to load up these icons a little bit faster in some cases. 92 00:04:44,370 --> 00:04:47,620 And also potentially reduce http requests because 93 00:04:47,620 --> 00:04:51,030 you're only loading up CSS and HTML. 94 00:04:51,030 --> 00:04:54,070 So that's pretty cool, they have quite a few of them here. 95 00:04:54,070 --> 00:04:55,980 You can go ahead and browse the gallery 96 00:04:55,980 --> 00:05:00,030 and use whatever ones are suitable for your project. 97 00:05:00,030 --> 00:05:01,060 >> I like a lot of these. 98 00:05:01,060 --> 00:05:05,850 >> One thing to keep in mind is that browser compatibility is a little 99 00:05:05,850 --> 00:05:10,855 bit rough for Internet Explorer. They do give you browser compatibility, 100 00:05:10,855 --> 00:05:16,340 for each individual individual icon but for many of them 101 00:05:16,340 --> 00:05:22,010 it only supports IE 9 and up, which is the latest version of Internet Explorer. 102 00:05:22,010 --> 00:05:26,250 A lot of people are still using Internet Explorer 8 and there's even some people 103 00:05:26,250 --> 00:05:29,620 still on 7, so that is something to be aware of. 104 00:05:29,620 --> 00:05:31,590 But, pretty cool icons. 105 00:05:31,590 --> 00:05:33,270 Definitely be sure to check those out. 106 00:05:33,270 --> 00:05:33,870 >> Yeah, it's nice. 107 00:05:33,870 --> 00:05:36,710 I like the walk through, that you can actually see how they're made. 108 00:05:36,710 --> 00:05:37,220 >> Yep. 109 00:05:37,220 --> 00:05:38,660 >> Next up, we have a really nice list 110 00:05:38,660 --> 00:05:43,170 of Git and Github resources put together by Kevin Suttle. 111 00:05:43,170 --> 00:05:45,370 This is gonna take you all the way from a 112 00:05:45,370 --> 00:05:49,520 novice Git user, all the way to an advanced user. 113 00:05:49,520 --> 00:05:51,590 So really really good walk-throughs 114 00:05:51,590 --> 00:05:57,090 from the simple guide to Git, thinking like a Git, learning Git branching. 115 00:05:58,130 --> 00:06:00,920 There's a, a nice video on the site, a 116 00:06:00,920 --> 00:06:03,960 little walkthrough about how to deploy with Git and Github. 117 00:06:03,960 --> 00:06:07,530 As well as a little round of round 118 00:06:07,530 --> 00:06:12,240 up of books, ebooks, articles, and some different tools. 119 00:06:12,240 --> 00:06:16,620 Now this kinda goes really nicely with the Git foundations course 120 00:06:16,620 --> 00:06:17,860 Treehouse recently released. 121 00:06:17,860 --> 00:06:20,650 So, we'll have a link to both of those in the show notes, which you 122 00:06:20,650 --> 00:06:24,260 can check out at youtube.com/gotreehouse or search 123 00:06:24,260 --> 00:06:26,429 for us in iTunes at The Treehouse Show. 124 00:06:27,770 --> 00:06:28,690 >> Pretty awesome. 125 00:06:28,690 --> 00:06:31,561 Well, next up, we're gonna learn how to make Squircles. 126 00:06:31,561 --> 00:06:32,240 >> [LAUGH]. 127 00:06:32,240 --> 00:06:35,480 >> Like you find in iOS 7 using CSS 3. 128 00:06:35,480 --> 00:06:38,010 Now, you might be wondering what the heck is a squircle? 129 00:06:38,010 --> 00:06:38,130 >> It's a. 130 00:06:38,130 --> 00:06:40,000 >> At least that was my first question. 131 00:06:40,000 --> 00:06:41,180 >> It's a Pokemon, right? >> Yeah, 132 00:06:41,180 --> 00:06:42,330 yeah. Exactly. 133 00:06:43,620 --> 00:06:43,730 no. 134 00:06:43,730 --> 00:06:45,915 >> It's really hard to keep a straight face while saying that. 135 00:06:45,915 --> 00:06:50,800 >> [LAUGH] A squircle is a mix between a 136 00:06:50,800 --> 00:06:55,920 square and a circle. So one thing that you might 137 00:06:55,920 --> 00:07:01,240 note, have noted in iOS 7 is that the icons are not just 138 00:07:01,240 --> 00:07:06,320 rounded, rounded squares. They actually have this little, 139 00:07:07,570 --> 00:07:12,140 bowing around the, the edges as well as the corners. 140 00:07:12,140 --> 00:07:14,330 So, to do this. 141 00:07:14,330 --> 00:07:15,500 >> Now when you say bowing, you're referring 142 00:07:15,500 --> 00:07:17,400 to the shape and not the plane, right? 143 00:07:17,400 --> 00:07:20,270 >> That's correct. But both are aerodynamic. 144 00:07:20,270 --> 00:07:22,190 If you look here though they're, they're actually 145 00:07:22,190 --> 00:07:25,030 combining two different shapes to make this happen. 146 00:07:25,030 --> 00:07:27,240 So they're they're overlapping. 147 00:07:28,580 --> 00:07:32,780 Kind of a square shape here. They're rounding the corners off and then 148 00:07:32,780 --> 00:07:38,050 they're adding the circular shape To make it come out on the edges, just like that. 149 00:07:39,870 --> 00:07:44,110 In this walkthrough, you can actually play the code back, that's pretty cool, or 150 00:07:44,110 --> 00:07:48,140 you can just go ahead and view the code to see how it works. 151 00:07:48,140 --> 00:07:54,410 As you can see here, we have some anchor elements along some elements inside. 152 00:07:54,410 --> 00:07:58,000 And they're styling those actually 153 00:07:58,000 --> 00:08:02,740 using pseudo elements here, so you have the icon inside, and then there's 154 00:08:02,740 --> 00:08:06,379 the anchor and then the anchor has the before and after pseudo elements. 155 00:08:08,230 --> 00:08:12,080 And they are transforming those, they are clipping them. 156 00:08:12,080 --> 00:08:13,200 Oops. Excuse me. 157 00:08:13,200 --> 00:08:18,230 And they are also rounding them using the border radius property. 158 00:08:18,230 --> 00:08:19,630 So pretty cool. 159 00:08:19,630 --> 00:08:23,790 Definitely check that out if you want to emulate the 160 00:08:23,790 --> 00:08:28,610 look of the icons in iOS 7, using CSS 3. >> Squircles. 161 00:08:28,610 --> 00:08:32,130 Next up, we have a project called Happy Rhino, which 162 00:08:32,130 --> 00:08:37,090 lets you build large, client side applications in a structured way. 163 00:08:37,090 --> 00:08:38,550 This is a pretty interesting project. 164 00:08:38,550 --> 00:08:44,470 It's kinda similar to Backbone JS and its format and what it allows you to do. 165 00:08:44,470 --> 00:08:48,980 Not quite as heavy or feature rich. But let's check it out a little bit 166 00:08:48,980 --> 00:08:49,490 on here. 167 00:08:49,490 --> 00:08:54,940 There's as you can see, already a few sites using happyrhino.js. 168 00:08:54,940 --> 00:08:57,930 This is installed using NPM. 169 00:08:57,930 --> 00:09:00,110 And it gives you just a really nice 170 00:09:00,110 --> 00:09:03,600 structure for building these bigger client side applications. 171 00:09:03,600 --> 00:09:05,800 Client side applications are getting larger and larger and 172 00:09:05,800 --> 00:09:08,350 as you know, they do more and more things. 173 00:09:08,350 --> 00:09:10,930 So, it gives you kind of everything you would expect. 174 00:09:10,930 --> 00:09:15,400 Gives you a way to create classes do different templating. 175 00:09:15,400 --> 00:09:19,680 Gives you models, collections and even a router. 176 00:09:19,680 --> 00:09:21,840 So, tons of different stuff here. 177 00:09:21,840 --> 00:09:24,850 Not really anything that we can go in depth on, 178 00:09:24,850 --> 00:09:27,400 on the show, but I really recommend checking this out. 179 00:09:27,400 --> 00:09:32,810 It's an interesting take on the whole client side Javascript library thing. 180 00:09:32,810 --> 00:09:33,610 But it looks pretty neat. 181 00:09:35,810 --> 00:09:36,430 >> Pretty cool. 182 00:09:36,430 --> 00:09:43,310 Well, next up we have a really cool project called FullScreenMario.com. 183 00:09:43,310 --> 00:09:48,500 It's basically Super Mario Brothers implemented in HTML5 in the browser. 184 00:09:48,500 --> 00:09:50,480 >> And I, I would like to, to note 185 00:09:50,480 --> 00:09:54,140 that we were strong-armed on Twitter into covering this. 186 00:09:54,140 --> 00:09:56,040 Somebody said that they would no longer tune in 187 00:09:56,040 --> 00:09:58,600 if we didn't cover this, so here you go. 188 00:09:58,600 --> 00:09:59,250 >> This just for you. 189 00:09:59,250 --> 00:10:01,380 >> You, you win. >> So 190 00:10:01,380 --> 00:10:03,610 it's, it's exactly what you'd expect. 191 00:10:03,610 --> 00:10:07,050 You can go ahead and and move Mario around here. 192 00:10:07,050 --> 00:10:09,700 You can go ahead and jump and oh, look at that. 193 00:10:09,700 --> 00:10:13,000 We're gonna get this this mushroom here. >> You gonna take the warp zone? 194 00:10:13,000 --> 00:10:14,020 >> There we go. 195 00:10:14,020 --> 00:10:17,770 Nah, nah I, I like to stick the, the scenic route. 196 00:10:17,770 --> 00:10:21,210 But anyway, it, it works just like the real game. 197 00:10:21,210 --> 00:10:24,690 It's, it's pretty cool and the thing 198 00:10:24,690 --> 00:10:27,040 that's really cool about it though, is that 199 00:10:27,040 --> 00:10:30,100 it's all open source on GitHub. 200 00:10:30,100 --> 00:10:32,660 Now there's a couple things I'd like to point out first. 201 00:10:33,700 --> 00:10:37,590 You can go ahead and use their level editor 202 00:10:37,590 --> 00:10:41,530 here, this, you can actually make your own levels. 203 00:10:41,530 --> 00:10:44,800 So if you don't want to jump into the code or anything [COUGH] 204 00:10:44,800 --> 00:10:48,578 you can just go ahead and plan out a couple levels out of here. 205 00:10:48,578 --> 00:10:49,350 >> That's awesome. 206 00:10:49,350 --> 00:10:52,560 >> And drop in, drop in some pipes 207 00:10:52,560 --> 00:10:56,470 like that, I'm probably doing this wrong but you get the idea. 208 00:10:56,470 --> 00:10:57,268 Pretty cool stuff. 209 00:10:57,268 --> 00:11:01,710 Now on Github like I said this is all open source. 210 00:11:01,710 --> 00:11:07,060 You can go ahead and look at all the code that was used to put this together. 211 00:11:07,060 --> 00:11:10,840 And they also tell you a couple of things about how to do power 212 00:11:10,840 --> 00:11:16,930 ups, how to add things into the world, have a shift maps and so on. 213 00:11:16,930 --> 00:11:17,600 Now, I think 214 00:11:17,600 --> 00:11:23,010 this is really a pretty amazing project because it is open source. 215 00:11:24,210 --> 00:11:27,240 That means that you can go ahead and fort, the project on GitHub 216 00:11:27,240 --> 00:11:31,620 and may be go ahead and make your own original games out of it. 217 00:11:31,620 --> 00:11:35,570 You know all the code is there that would need to make a basic platform of game. 218 00:11:35,570 --> 00:11:39,930 You could replace the, the art assets, you could add your own music, 219 00:11:39,930 --> 00:11:42,560 >> Could you replace Mario and Luigi with Nick and Jason? 220 00:11:42,560 --> 00:11:42,840 >> Yeah. 221 00:11:42,840 --> 00:11:46,920 I mean, if somebody would like to do that, we. 222 00:11:46,920 --> 00:11:49,495 Would most definitely feature on the show, so 223 00:11:49,495 --> 00:11:51,030 >> [SOUND] >> Please make that happen for us. 224 00:11:51,030 --> 00:11:51,730 >> Yeah. >> Please. 225 00:11:51,730 --> 00:11:52,780 >> What more can you ask for? 226 00:11:52,780 --> 00:11:53,240 >> Yeah. 227 00:11:53,240 --> 00:11:55,480 >> Next up, we have a product called Polymer. 228 00:11:55,480 --> 00:11:59,320 Polymer is touted as a new type of library for the web. 229 00:11:59,320 --> 00:12:01,440 Built on top of web components and designed 230 00:12:01,440 --> 00:12:05,280 to leverage the evolving web platform on modern browsers. 231 00:12:05,280 --> 00:12:06,760 >> Wow. >> Yeah. 232 00:12:06,760 --> 00:12:08,210 So what does all that mean? 233 00:12:08,210 --> 00:12:10,650 >> Well, it just basically means the Internet. 234 00:12:10,650 --> 00:12:11,520 >> Yeah, the Internet. 235 00:12:11,520 --> 00:12:12,940 >> Yeah. >> No, so it does. 236 00:12:12,940 --> 00:12:15,720 You and I talk a lot about the different HTML 5 237 00:12:15,720 --> 00:12:18,880 features, and even things that are up and coming in HTML 5. 238 00:12:18,880 --> 00:12:22,080 But, you can't always use that with older browsers, you 239 00:12:22,080 --> 00:12:25,040 know, because some of that stuff is really cutting edge. 240 00:12:25,040 --> 00:12:27,930 So what Polymer does is gives you a set of polyfills 241 00:12:27,930 --> 00:12:31,930 to use all these things with older browsers and legacy browsers. 242 00:12:31,930 --> 00:12:33,250 Which is wonderful, because you won't have 243 00:12:33,250 --> 00:12:35,700 to update your code so much as these features 244 00:12:35,700 --> 00:12:38,040 are more and more widespread and able to be used. 245 00:12:38,040 --> 00:12:41,600 >> And the really cool thing about this is that as the browsers start to 246 00:12:41,600 --> 00:12:44,080 support this stuff, it will use the native 247 00:12:44,080 --> 00:12:46,200 feature for them instead of using a polyfill. 248 00:12:46,200 --> 00:12:46,710 >> Yeah. 249 00:12:46,710 --> 00:12:49,320 Now did you say on the site that it's a 250 00:12:49,320 --> 00:12:52,480 little bit early not quite ready for production, you see that. 251 00:12:52,480 --> 00:12:55,120 But I do recommend following along with it. 252 00:12:55,120 --> 00:12:58,170 Now, it, it's really cool, you know, easy to download, 253 00:12:58,170 --> 00:12:59,950 kind of shows you an architectural 254 00:12:59,950 --> 00:13:02,700 diagram, who cares, don't understand it, whatever. 255 00:13:02,700 --> 00:13:05,690 But it's very, very easy to download and get started. 256 00:13:05,690 --> 00:13:06,230 Look at that. 257 00:13:06,230 --> 00:13:09,990 Download the ZIP. Install and, and boom. 258 00:13:09,990 --> 00:13:12,080 Test your environment. 259 00:13:12,080 --> 00:13:14,910 anyway. Very, very easy to get started as well. 260 00:13:14,910 --> 00:13:19,820 You, all you need to do, include the Polymer script, and that's it. 261 00:13:19,820 --> 00:13:22,850 Look at that. Created your own component right there. 262 00:13:22,850 --> 00:13:23,510 So they've 263 00:13:23,510 --> 00:13:25,330 got just a ton of different options. 264 00:13:25,330 --> 00:13:27,660 We've covered a lot of the things here on the show before. 265 00:13:27,660 --> 00:13:32,230 Things like using the shadow DOM, HTML templating, different things like that. 266 00:13:32,230 --> 00:13:35,700 Now this is a library that we'll let you actually be able to use them. 267 00:13:35,700 --> 00:13:38,260 So definitely something to keep in mind. 268 00:13:38,260 --> 00:13:39,130 >> Very cool stuff. 269 00:13:39,130 --> 00:13:41,410 >> Yeah, so I think that's about all we've got for today, Nick. 270 00:13:41,410 --> 00:13:42,240 Who are you on twitter? 271 00:13:42,240 --> 00:13:43,390 >> I'm @nickrp 272 00:13:43,390 --> 00:13:44,660 >> And I am @jseifer. 273 00:13:44,660 --> 00:13:47,250 For more information on anything we talked about today, 274 00:13:47,250 --> 00:13:50,900 make sure to check out the show notes at youtube.com/gotreehouse. 275 00:13:50,900 --> 00:13:55,520 Or search for, search for us on iTunes on The Treehouse Show. 276 00:13:55,520 --> 00:13:58,050 >> And of course, if you'd like to see more videos like this 277 00:13:58,050 --> 00:14:00,710 one about web design, web development, mobile 278 00:14:00,710 --> 00:14:04,710 development, business, design, and so much more. 279 00:14:04,710 --> 00:14:08,790 Be sure to check us out at teamtreehouse.com. 280 00:14:08,790 --> 00:14:11,514 Thanks for watching and we'll see you next week. 281 00:14:11,514 --> 00:14:19,064 [MUSIC] 282 00:14:19,064 --> 00:14:22,049 >> It's cool how we didn't say anything about the faux hawk.