Episode 6: Responsive Design, Layout, and Color Theory

[Nick Pettit - @nickrp] Hey everybody, I'm Nick Pettit, @nickrp on Twitter, 0:00 and today at Treehouse we're doing a special live edition of our show Treehouse Reviews, 0:03 the show where you submit websites to us and we review the designs, 0:10 front-end code, overall business concept, and stuff like that. 0:15 We're going to be looking at a bunch of websites today. 0:19 There were quite a few submissions. 0:22 I'm going to be looking at 8 of them. 0:24 I hope that we can get to all of them. 0:26 I'm going to try to keep this to around an hour. 0:28 If we don't get to your website, I'm super sorry. We will try to do it next time. 0:31 But without further ado, let's go ahead and get into these first couple websites here. 0:35 I am using Trello today to organize all of these. 0:42 That way I don't have these websites up in my email 0:46 and I won't be sabotaged by my co-worker Jason Seifer. 0:48 Here we have a submission from Evan. 0:53 Evan says, "This is the homepage for my freelance design brand." 0:56 "The goal was to create a site that was simple but informative, 1:00 providing enough information to inspire potential clients to contact me." 1:05 "Any feedback (theory, design, business, layout) would be greatly appreciated." 1:09 Well, I can help you out in theory because I have a theoretical degree in web design. 1:15 All right. Let's go ahead and jump into this website from Evan here. 1:19 The first thing I notice is that it has a pretty nice-looking design. 1:23 I really like the blue and red here. 1:29 I like the use of diagonal lines. 1:32 I think that this logo is a little bit difficult to comprehend. 1:35 I'm not sure if I'm supposed to read it clockwise or counterclockwise or across. 1:39 I mean, I know that this person's name is Evan, so I know it should be E-V-A and N, 1:45 but that's a little bit confusing. 1:50 So in considering that logo mark, I would probably think about actually redesigning it. 1:53 This is a really cool design, so that's kind of tough because it's so integrated at a pervasive level. 2:00 But that would be the first thing that I would think about changing here. 2:06 Also I think this bar at the top is a little bit intense. 2:10 I'm actually going to switch to full screen here so we can see this a little bit better. 2:17 This green kind of clashes not so much with the blue but actually the red 2:21 because red is the complementary color to green. 2:26 So it looks a little bit too obnoxious. 2:30 If we just scroll down the page a little bit and look at what the site looks like without that bar, 2:33 I think this is much more impactful and looks a lot nicer. 2:38 I think the typography here is a little bit strange. 2:42 Freelance Web Design in Columbus, Ohio. 2:46 I like that Web Design is highlighted here, 2:49 but I think there's probably a little bit of a better way to possibly do that. 2:52 Maybe not with the blue color but maybe with a different font or something. 2:58 I'm not really sure. 3:03 I like that it's highlighted; I just don't like the way that it's highlighted. 3:05 If we scroll down a little bit further, we have an icon of a coffee cup here. 3:09 I guess that means Evan likes coffee. I'm not really sure exactly. 3:14 But it's a nice-looking icon. 3:19 And then we have Skills and Services. 3:21 Oh! And he actually has a pronunciation of Evan. The X is silent. 3:25 So it's Evan or Evan [pronounces name Ee-van]. I assume it's Evan. 3:30 All right. 3:35 Skills and Services. Oh, okay. 3:36 I was actually going to talk about the contrast here on the type, 3:38 but it looks like if you scroll down the page further, these bars fill in. 3:44 Let's refresh the page and scroll down again so you can see that again. 3:49 There. Those bars fill in. 3:54 So that makes the contrast between the background and the skills a little bit better. 3:56 I'm going to refresh one more time, though, just so you can see 4:01 how without those bars there the contrast actually isn't that good. 4:04 One tip when you are building websites is to actually look at your page in black and white. 4:08 That helps you test the contrast of the page, 4:14 because humans are actually better at perceiving changes in lightness and darkness 4:17 than they are at perceiving changes in color. 4:20 This is actually how a lot of compression technologies work. 4:23 They get rid of some of the detail in color, 4:26 but they keep more detail in the changes in lightness and darkness, 4:30 so it tricks your eye into thinking that it's a highly detailed uncompressed image when it's not. 4:33 But in this case, yeah, you should definitely look at the website in black and white 4:40 because that's going to reveal all sorts of issues with contrast on any website, 4:44 not just this one in particular. 4:50 But without those bars there, the contrast isn't that good. 4:52 And even with those bars there, it is still a little bit hard to see. 4:56 In terms of the overall concept of this, I'm not sure that I really like that either. 5:00 I'm really tearing into Evan here. I apologize, Evan. He looks like a really nice guy. 5:05 But I think that at least some of these should be filled in all the way 5:09 so that Evan can say, "Yes, I am definitely an expert in these things." 5:14 "I know some about this stuff and maybe less about MySQL." 5:20 But even then I think you should probably get rid of the bars altogether 5:25 and just say in an ordered list, "These are my skills." 5:30 "I know HTML, CSS, jQuery, PHP, and MySQL." 5:34 And it might be assumed that the things that are first you might know the best 5:38 and the things that are last maybe you don't know as well. 5:42 I'm not going to read the copy on Services. 5:47 Copy is definitely an important part of design, but I'm trying to move a little bit quickly here. 5:51 Recent evxan Designs. Remember, the X is silent. 5:56 It looks like there's one design here in the portfolio. 6:01 I'm not going to take a look at that design, 6:07 but judging the overall look of the portfolio here, it looks nice. 6:09 It's simple. I think it might be better if that were maybe closer to the top. 6:13 I assume that by clicking this navigation here it will actually scroll. 6:18 Yeah, that is indeed what it does. 6:21 So that provides you a quick way to get to it, but I would actually try putting your design first 6:23 and then maybe more about you further down 6:31 because people are here to see your work. 6:34 And of course you should probably try to fill out your portfolio with a little bit more than one thing. 6:38 So dig deep. I'm sure there is some awesome stuff that you've created that just isn't there. 6:45 And then down here at the bottom Evan has a contact form 6:50 where you type in your name, email address, and then you have to solve a math problem to prevent spam. 6:55 That's not a bad way to do it. 7:00 I prefer actually simpler CAPTCHAs like this 7:02 where you don't actually have to type in some really funky-looking letters and numbers. 7:05 Overall, I'm here to critique this website and I'm here to critique the rest of these websites, 7:12 but I think this looks pretty good. 7:19 It just needs a couple of tweaks here and there and it could be a stronger design. 7:21 But it already looks pretty good. So good job, Evan. 7:26 Moving on, I'm going to move Evan over to Done here, 7:32 and next up is Jeremy. 7:36 Jeremy didn't really send much text in his email, 7:38 but I'm going to go ahead and open up this website. 7:41 I don't speak this language. I think it's Swedish. I think I saw on his email that he was Swedish. 7:46 I apologize if, Jeremy, you are not Swedish. 7:53 This is a pretty basic website. 7:56 It's just an image here, you've got some Lorem Ipsum text, 8:00 and then over here you have this little sidebar menu. 8:05 I actually like this design pattern here of using these sidebar menus. 8:11 It's much more common on mobile devices, but you're starting to see it pop up on websites, 8:17 and I don't think it's bad. 8:21 I mean, I don't like that it hides the navigation all the time, 8:23 but as this design pattern starts to become more common, 8:28 I think this could pick up a little bit more and actually be something that people get used to. 8:31 Something I didn't do on Evan's site but I'm going to do here 8:40 is I'm actually going to come out of full screen here and I want to test the responsiveness of the site. 8:43 That's kind of what I was expecting to happen. 8:48 It looks like it responds quite nicely, so this will look good on mobile devices. 8:51 Let me bring up Evan's site again to check on that. 8:58 Hey, look at that. He's got very similar 3-bar navigation here. 9:02 It doesn't come up on the side, it just drops down, 9:07 but it's using the same iconography. 9:09 It looks like Evan's site responds quite nicely as well. 9:12 I am going to be checking every website for that 9:16 because actually, we are at this amazing inflection point 9:19 or we're coming up on this inflection point in history 9:24 where there's actually going to be more people browsing the Web on mobile devices 9:26 than there are on desktop computers. 9:31 I know that's kind of hard to believe. It's kind of hard to imagine that. But that's the reality. 9:34 There's going to be more people browsing the Web on mobile devices. 9:40 So you really do need to think about your website in terms of a mobile experience first 9:43 rather than thinking about it as a desktop website that you try to scale down to mobile devices. 9:49 Just something to keep in mind. 9:55 Overall, it looks like this project from Jeremy is in progress here still, 9:57 so there's really not a whole lot to say, but it looks like a good start. 10:04 Let's go ahead and move on. 10:08 I'm going to move Jeremy over to Done here, 10:12 and let's look at this website from Scott. 10:16 Scott says, "I'd love feedback on this little web app I built last year as my first Rails app." 10:19 "I'm going to do a refresh of it with some new features soon." 10:27 "Would love your thoughts on how I can improve front-end code, signup flow, 10:30 and maybe features you'd be interested in seeing." 10:34 Okay. So we're going to look at front-end code, signup flow, and feature suggestions. 10:38 Let's see if we can do that. 10:45 It looks like this app is called PicDigest, 10:47 and it says, "Make sure they never miss a moment." 10:51 "Send your Instagram and Facebook photos to loved ones in a single daily email." 10:53 Oh, that's really nice. 10:59 So you can sign up your mom or your grandma or all your loved ones 11:01 and you can send them your Instagram and Facebook photos, 11:06 and that's especially nice if they're not actually engaged in those social networks. 11:11 For example, I know my mom follows me on Facebook and likes all of my stuff that my girlfriend posts, 11:15 but she doesn't follow me on Instagram. 11:21 In fact, I don't think she's even on Instagram. 11:23 So maybe I should use this. 11:25 Just scrolling down looking at some of the marketing here, 11:27 it looks like PicDigest sends some really nice HTML emails here with some photos. 11:30 It looks like there's a baby in a trucker hat there. 11:38 Then there's some more descriptive text about what PicDigest does. 11:42 PicDigest automatically sends your photos from FB and Instagram in one single email, 11:45 and it's perfect for making sure mom and grandpa see the pics you post of your kids. 11:52 Hey, just like I was saying. 11:57 This is actually pretty good so far. 11:59 The name of the app is really good, PicDigest, 12:02 so that you know exactly what this is going to do, 12:05 or at least you are able to start building that mental model right away just by hearing the name. 12:09 You have the same domain name, PicDigest, so that's great as well. 12:14 And then the descriptive text is really, really good. 12:18 In one sentence I was able to figure out what PicDigest does, 12:22 and I was even able to build that exact same mental model that you suggested: 12:26 sending these pictures to my mom or to my grandparents. 12:31 So that's pretty cool. 12:34 You can learn more about PicDigest. 12:36 But we are going to look at the signup flow. 12:38 Let's go ahead and sign in. 12:42 I can sign in with Instagram or Facebook. Hmm. 12:44 I think I'm going to sign in with Facebook. 12:49 All right. "PicDigest will receive the following info: your public profile, friends list, email address and photos." 12:53 Okay. That's fine with me. 13:00 And it looks like Facebook is doing some authentication here. 13:02 We're almost there. 13:07 "Add someone to get your photos." Okay. 13:09 I'm just going to add myself and I'm going to add my best bud, Jason, 13:12 and I'm going to add these recipients. 13:23 So now Jason is going to get a daily digest of all of my Facebook photos. 13:25 I'm sure he'll be very happy to see that in his inbox. 13:29 All right. So what happens next? 13:33 "From now on, nick@teamtreehouse.com and 1 other person will receive an email each morning 13:35 with the photos you post to Facebook." 13:40 Aha! Here's the upgrade. "Upgrade for $2 a month at any time during the 30-day free trial to keep the photos flowing." 13:42 That's a pretty modest price. That's not too bad if you just want to keep sending these emails. 13:50 I think that's a fair price for what it does. 13:56 And then you can be social. You can follow PicDigest on Twitter. 13:58 You can read the PicDigest blog. Continue to your profile. Okay. 14:02 Just judging the signup flow here, I think the Continue to your profile 14:06 should be a little bit more prominent. 14:11 But that's okay. That's not too bad. 14:12 Here's all of my personal information. I can upgrade, I can cancel. 14:15 I actually don't want Jason to get all of my Facebook photos. 14:22 He can see them all already anyway, so I'm going to cancel this account 14:27 and see how easy it is to cancel. 14:31 Wow! Hey, look at that. That was super simple. 14:33 It's usually much more difficult to cancel stuff online. 14:37 So that's really, really good that you can just do it in one click. I really like that. 14:42 Signup flow looks great to me. 14:46 I honestly don't have a whole lot to say about this app. 14:50 I think it's pretty good. 14:53 Let's look at some of the front-end code here. 14:55 I'm going to hit Command-Alt-U on my Mac to view the source. 14:59 You of course can go to View, Developer, View Source in Google Chrome. 15:05 Just looking at the front-end code, it looks like they're probably using HTML5 Boilerplate here 15:12 just judging by some of the classes and meta tags that we're seeing there. 15:20 Actually, one way to check if they're using Boilerplate is to highlight and see if it comes up in pink text. 15:25 It doesn't look like they're doing that, though. 15:31 Maybe they changed the highlight color. 15:33 But I don't know. I mean, I'm just scrolling through the code pretty quickly here. 15:36 It looks like we've got a header element. 15:43 I think this code is pretty difficult to read just because it's not indented properly. 15:50 So that might be the first suggestion here. 15:55 It's actually kind of hard to see what code is here without properly indenting it. 16:00 I don't think I'm going to dig into the front-end code 16:04 because we do need to move on here. 16:07 But I think PicDigest is cool. 16:10 If I had to give any suggestions for features, 16:13 I might just say maybe consider including other social networks. 16:17 Facebook and Instagram are cool, but maybe include something like Flickr. 16:23 I know a lot of people that post a lot of photos there 16:28 and just other social networks. I don't know. I think it's pretty good. 16:32 I actually don't have a whole lot to say. 16:35 So let's move on. 16:37 This website is from—oh, man, I'm going to say this name wrong. 16:39 I think it's Khemraj. 16:42 He says, "Hi Nick, can you be kind enough to review my website and the link for the website is right here. Thanks." 16:47 All right. Let's check it out. 16:55 Ooh, one thing I did not do on PicDigest. Is it responsive? 16:57 Oh, oh no. Oh, there it is. 17:00 So actually, I do have a suggestion for PicDigest. 17:04 You should probably include a few more breakpoints in your media queries there 17:07 because it looks like right now there's only one breakpoint. Okay. 17:12 Sorry. I will try to remember to do that. 17:15 Let's do that to start out here. 17:18 It looks like this website is actually quite responsive. 17:21 That's pretty nice. It looks like the navigation here turns into, once again, that little 3-bar line. 17:25 I don't know how the whole world picked up on that, but everyone is using it. 17:33 This text kind of condenses. It removes a photo here that might not look too good on mobile devices. 17:37 So that's nice. 17:45 The first thing I'm seeing here is this text against this full screen photo. 17:48 I'm on a Retina MacBook Pro, which is not uncommon but it's also not common at the same time. 17:55 Actually, that's a terrible sentence. 18:02 What I'm trying to say is there are some people using Retina devices, 18:06 but it's not too common yet. 18:09 I think eventually, though, really every device will have a high-resolution display. 18:12 So it's probably a good idea to update this photo with a higher resolution version, 18:20 which could be a little bit difficult to do because it is a full screen photo. 18:26 When you have an edge-to-edge photo like that, it might be a little bit hard 18:32 to put one that's even larger at 2x resolution because you want to save bandwidth. 18:37 One trick that you can do with those really large photos is that you can put them at a high resolution 18:42 but get away with a ton of compression on them. 18:48 So if you're exporting this from Photoshop or something, 18:51 you can actually put 20% or 30% compression on it, 18:54 which is actually quite high, rather than exporting it at 80% to 100% or something. 18:58 You can put tons of compression on these high-resolution images 19:05 because when they get shrunk down you actually can't see that they're highly compressed, 19:09 and the net result is images that are much, much smaller. 19:13 I actually have a photo on my website that's pretty high res and it's highly compressed, 19:17 but you can't tell. It looks really sharp on Retina displays. 19:23 So a little tip there. 19:26 I think the text here is kind of difficult to read against this photo. 19:28 I'm not really sure how it could be fixed for this particular photo 19:33 because there's all sorts of different levels of contrast here. 19:39 There's bright areas, there's a few middle grays here, but there's not any dark areas, 19:44 and I think you would really need a dark area of the photo to put this white text against 19:51 or a really bright area of the photo to put black text against. 19:58 I'm going to take a chance here and open up Automatic.com— 20:03 there we go—because I think they do this really well. 20:14 They have these nice full screen photos, but you can see they have this white text against a fairly dark background. 20:17 It's not super dark but it's dark enough that this white text shows up. 20:24 They do this—yeah. 20:28 This is a super dark background, and it actually works really well there. 20:31 But the product itself is highlighted quite nicely. 20:35 So something to think about there. 20:39 I don't want to spend too much more time talking about that. 20:41 When I scroll down here, it looks like there's some parallax scrolling. 20:44 I think this particular implementation of parallaxing is kind of strange 20:48 just because, gosh, it's hard to even describe what is going on here. 20:56 So when I scroll down, the photo stays in place 21:02 but other stuff comes up on top of it 21:08 and then the text kind of fades behind. 21:13 I think it would actually be better maybe if that text was just fixed, 21:17 kind of like the rest of the site here. 21:22 Let's take another chance and open up the inspector. 21:25 Let's see if we can change the positioning on this. 21:28 There's the banner, and it has— 21:36 Does that have the background on it? Whoa, there's a lot of containers here. 21:41 Yeah, I can't quite tell what's going on here, 21:48 so we're not going to try to change the positioning there. 21:51 But I would just try to make it fixed like the rest of the page here 21:54 because it's kind of strange fading behind there. 21:57 So then we scroll down. 22:00 Remember this is a portfolio site, so we get to Recent Work. 22:01 It looks like there's a news site that got put together here. 22:06 I actually like this because even though it looks like it's the only item in this portfolio, 22:10 let me click on Portfolio and see what happens here. 22:16 Oh! No, it's not. Interesting. 22:18 So there actually are different pages here. 22:20 I kind of assumed that these would just actually scroll down. 22:23 But I like this because it just shows one piece of work. 22:27 It's really easy to look at and you're not distracted by tons and tons of tiny thumbnails of portfolio pieces. 22:33 The portfolio is kind of small, though, so there's not a whole lot of benefit 22:42 of actually clicking through to Portfolio. 22:45 So it might not be a bad idea to just have these 2 pieces right there on the homepage 22:47 and just roll it into a single page. 22:52 Something to think about there. 22:55 Of course he is displaying all of his Treehouse badges here, so that's pretty awesome. 22:57 Again, you can go to TeamTreehouse.com/live 23:02 if you'd like to sign up for Treehouse and start earning badges. 23:06 And then down here we have some social links. 23:10 This is interesting. 23:14 I think the white color here looks pretty nice against the green background. It stands out well. 23:16 But when I hover over, I would really expect those to just change into a slightly different color, 23:23 maybe kind of a gray tone or something against this green 23:30 or maybe a darker green. 23:34 Right now they are changing into a completely different outline. 23:37 Well, actually only the Twitter icon is changing to a different outline. 23:41 The colors are really difficult to see against this green, so that might be something to change there. 23:46 And here we have red and green right up against one another. 23:53 Those are complementary colors, 23:56 but when you put 2 complements together, they do tend to look pretty harsh. 23:58 They can vibrate along harder edges there. 24:03 So I'd probably change that. 24:07 But other than that, it looks pretty good. 24:10 It looks like a portfolio website to me. 24:14 I like that the recent work is right up front. So good job on that one. 24:16 All right. Let's move on. Here's another name that I'm probably not going to pronounce right, so I apologize. 24:20 I think it's Syrmatenia. 24:28 They have sent in a link here to their website. 24:33 They say that they are a web and graphic designer. 24:37 So it looks like this is a portfolio website once again. 24:40 Here is the Portfolio link. 24:43 They say, "Hello, I am Syrmatenia a junior web and graphic designer from Greece." 24:45 "I come from Thessaloniki city and I am currently looking for a job." 24:52 And you can view their portfolio. That's nice. 24:58 Here's some selected projects from their portfolio. 25:00 Again, I like that the work is just right up front. 25:03 It's really easy to check it out. 25:06 And then we have some skills listed out. 25:08 This is kind of what I was talking about earlier. 25:12 I like that the skills are just listed in a list here rather than having those bars filling in 25:14 and kind of showing the level of skill in each one. 25:21 I just assume that, well, this person is probably better at PHP 25:25 than they are at Flash, although they do say, "Basic Knowledge," so maybe not. I'm not sure. 25:31 But that's nice. 25:37 Down here we have a little menu, some social media links, 25:41 and here again, just like I was talking about on the previous site, 25:44 just changing the color slightly is actually what you'd probably want to do there, 25:47 not actually changing the color and the outline entirely. 25:52 So that's really nice. 25:56 We can go back to the top there, and let's take a look at some of these pages. 25:57 I'm going to go to About Me. 26:02 That's a lovely About Me page. 26:04 "You are on the right page if you want to learn more information about me." 26:07 Hey! That's great. 26:12 One thing I didn't mention on one of the previous websites— 26:14 actually, I think it was PicDigest—and I'm noticing it here as well, 26:17 you want to pay attention to the line breaks in your typography. 26:20 We just have one word here breaking down to the next line. 26:27 Just by adjusting the font size or even adjusting the copy 26:30 you could have that on one line and it would look probably a lot cleaner. 26:34 So I'm going to hack this in the inspector, 26:39 and I'm just going to change the copy here so you can see what I'm talking about. 26:43 I'm going to say, "Hi, here's where you can learn more about me!" 26:51 All right. So we've changed that and now we don't have that word breaking down to the next line. 26:58 That looks a little bit nicer. 27:06 She lists out her education, professional experience, distinctions, and hobbies. 27:08 That's cool. 27:15 Let's go ahead and jump over to the portfolio. 27:18 It looks like there's quite a bit of portfolio work here. 27:21 I guess I can filter by web design, graphic design, and then videos. 27:25 That's cool. 27:33 I think I'd try to actually limit your portfolio a little bit more 27:37 just to a few selected pieces that you feel really strongly about. 27:42 And I'd also try to align your portfolio with your expertise. 27:46 It doesn't really look like you're offering any kind of video services here, 27:51 at least that I can see, 27:58 so I think it is a little bit strange to be including video work in your portfolio. 28:00 I guess it does say just, "For Fun" there, 28:05 but it doesn't really belong in a portfolio. 28:07 You can definitely put that on your YouTube account or something like that, 28:12 which is linked right here. Hey, look at that. 28:15 So overall, I think it looks pretty decent. 28:17 I think the typography is actually a little bit large here, 28:22 particularly in the navigation and in some of the headers. 28:26 I would try to tone that down a little bit. 28:30 I would also try to adjust the contrast of some of the typography 28:32 just to highlight things a little bit more clearly. 28:36 Maybe Skills & Expertise here or this listing of skills 28:42 could actually use maybe a slightly different color gray rather than just using pure black for everything. 28:48 If we change the size of this, it looks like it is indeed responsive, so good job there. 28:54 It looks like everybody knew that I was going to be checking for that on every website, so that's good. 29:02 Overall, it looks pretty nice. 29:08 Let's move on to Rafael. 29:11 It is currently 12:30 Eastern Standard Time, and we've gone through exactly half. 29:17 Look at that. Wow! We are perfectly on schedule. 29:23 Rafael says, "It's Rafael. I have won a 2-year scholarship with you guys—" Oh, that's wonderful! 29:26 I am glad to hear you're using Treehouse. 29:34 "—and I am now building my own startup." Wow! That's really cool. 29:36 "I almost finished the front-end development and I would really like to see how Nick is going to review it." 29:40 "You can check the project at the demo URL," here. 29:45 "The project name is 'El Fostan' and it's the Arabic word for 'The Dress.'" 29:51 "It is an Egyptian dress search engine." Wow! That is super specific. 29:58 I can't think of an English dress search engine. It's cool that there is one for the Egyptian market, though. 30:03 This website is in Arabic, and it just so happens that I actually don't speak Arabic, 30:09 so I am going to try translating this. 30:16 Actually, I'm not going to click that button just yet 30:18 because one really cool way that you can look at a design is by not having the text in your native language. 30:21 So that's why designers may sometimes use Lorem Ipsum text 30:32 so you can pay a little bit more attention to the design. 30:35 But this will actually do the same thing. 30:37 I can just look at the design without having to read the text 30:39 and just judge it purely on the shapes and composition and colors here. 30:42 First impression is that this header is a little bit too large. 30:48 I'd actually like to see the website start kind of like here 30:53 because this looks like top-level navigation here. 30:57 It looks like there's some sort of description about the website. 31:00 And then I assume this is where you would actually start the search for your dresses. 31:03 That looks pretty nice. 31:09 I like the full screen photo here. It looks pretty nice on my Retina display. 31:12 I'm just going to increase the brightness here so I can see this a little bit better. 31:17 This photo looks fairly sharp on this display. 31:20 And I do like that the dark background is here. 31:26 That helps the white text to stand out. 31:29 There is a little bit of a white background down here that's not contrasting well with this white text, 31:32 so I wonder if we can move this photo down just a little bit to get more of that dark in there. 31:43 But still, it looks pretty good. 31:50 There's a drop shadow on it, which I assume is using the text-shadow property. 31:51 Let's go ahead and see if it is. 31:57 And maybe I have to go deeper or higher up. 32:01 Huh. I can't quite tell. 32:10 But yeah, it looks like it's using text-shadow. So that's cool. 32:14 Let's scroll down a little bit more here. 32:18 I assume this is where you would actually look at maybe popular dresses or something. 32:21 Again, I don't speak Arabic. I'm not sure what these numbers are supposed to be. 32:28 Maybe that's a price or maybe that's how many likes this has gotten, 32:33 although there are some social stats down there, so maybe not. I'm not sure. 32:36 We'll translate it in just a second and look. 32:42 But yeah, overall, this site looks pretty nice. 32:45 It looks like it's still under construction here and kind of missing a couple of assets. 32:50 Down here there's a site map, and then you can click to go back to the top. 32:54 I'm going to try resizing this to see if it responds, 32:58 and it doesn't look like it does. 33:02 So that would be another suggestion is to make sure that this website is responsive 33:05 because people are browsing the Web on mobile devices more than ever— 33:11 in fact, even more so than they do on desktops. 33:17 So that's important. 33:21 Let's translate this, and we're going to see how well Google is able to translate Arabic to English. 33:22 It looks like we have Accessories, hand. So far, not too great. 33:30 Not the fault of the website. Probably just a bad translation from Google. 33:37 Make Up Artist, Photographers. 33:43 Maybe you can search for makeup artists and photographers here. 33:46 Under Dresses we can search for wedding dresses, dresses for engagements, 33:49 and an evening dress. 33:55 And then okay, right. So this is the search where you can select the type of dress. 33:58 And then, oh, I guess this is the region of Egypt, I assume, 34:03 where you would select where you might want to pick up your dress. 34:11 So that's cool. 34:16 Let's just see what happens when we hit Search here. 34:18 Google has translated this, and it looks like this is still under construction, 34:21 so it's just using the same asset for every single dress. 34:26 But I assume this is where the dresses would come up. 34:30 And hey, look, those are prices. That was a good guess. 34:33 You can buy or rent these. That's pretty cool. 34:37 It looks like there's some filters over here on the right side. 34:41 One thing to keep in mind is that this is an Arabic website, 34:44 so all of the text is read from right to left, 34:49 and that's why you're seeing the navigation over here on the right side 34:53 and these filters over here on the right side. 34:58 Normally that type of stuff would be over on the left, 35:01 but for this website it makes sense. 35:03 And then this is really interesting. 35:06 I actually did not know this about languages that are read from right to left, 35:08 but I guess the pagination would also be reversed for what I'm used to. 35:14 So it goes from 1 to 6 here, 35:20 and you can search through those. 35:24 Pretty cool site. 35:27 I mean, I don't have a whole lot to say. The design does look really nice. 35:29 I can click and go back to the homepage. Can I? 35:33 Not quite, so maybe that part is still under construction. 35:40 Oops. Excuse me. Let's see if we can go back there. There we go. 35:44 Again, two suggestions here would just be to make this part the top of the page. 35:49 I think this large header is kind of unnecessary. 35:56 And then I would also make sure that this website is responsive. 36:00 Really cool site. I've never seen an Egyptian dress search engine until today. 36:06 Moving on, this person's name is Samiullah. [struggles to pronounce name] I'm really sorry. 36:12 We're just going to call him Khan because I know how to say that. 36:20 "I'd be happy if the following two links were reviews. Thanks." 36:23 Ooh, we get to review 2 websites from Khan. 36:28 I'm going to look at this first one. 36:32 This first one is called Code Engineers, and it's a joint venture of Code Engineers and Isolify. 36:36 They are everywhere. They provide hosting services through world's top hosters. 36:46 There's advertisements that are not here. 36:53 Wow. I think this is a website where I can purchase hosting. 36:57 But I guess that would be my first suggestion is to actually try to make it a little bit more clear 37:03 as to what this website is actually for. 37:08 Some kind of header at the top would really help that out. 37:12 If I open up the dress search engine again, you can see that there's nice clear text here up at the top 37:15 that if I spoke Arabic I assume would describe what this site is about. 37:22 We've seen that in a couple of other websites that we've reviewed already. 37:28 So some sort of text that just really says in very plain language what this site does would be super helpful. 37:31 For example, here it says, "We Provide Powerful Business Solutions." 37:41 I don't know what that means. There's lots of things that businesses need. 37:45 I think the design here actually looks kind of dated. 37:50 This patterned background is a little bit harsh, 37:57 and then I don't really like the colors here. 38:02 I feel like it could be a little bit more of a pleasing color palette. 38:05 I guess it's good that the contact information is up at the top here. 38:10 That's good because it is often difficult to find the contact information on some websites, believe it or not. 38:14 Overall, yeah, I would maybe try to rethink this website with a framework like Bootstrap 38:21 because when you use a framework, it's really easy not only to get started right away and code up things really fast 38:30 and do them well in a kind of battle-tested environment, 38:39 but it also helps you with design because all of the margins and padding 38:44 and colors and everything is kind of already done for you 38:48 and you can just tweak that and build on top of it and customize it for your own needs. 38:53 That's good because if you don't have a whole lot of experience creating designs, 38:59 it can help keep you within certain constraints, which is a good thing and can help you learn. 39:04 Let's look at this next website here. 39:11 This is called Gurus of IT at GurusOfIT.com. 39:14 They have affordable solutions, and they're gurus of information technology. Look at that. 39:19 "We design astonishing websites." Okay. 39:23 This is a little bit better because it actually says what they do. 39:27 I guess this is some sort of web design agency. 39:35 Here they list their services: Domain Registration, Web Hosting, Website Designing, 39:41 and Internet Marketing using SEO. 39:47 I think the biggest problem with this website is that it's very cluttered. 39:52 There's just a lot of stuff on the page, and there's not a whole lot of space in between each element. 39:58 If everything were spaced out a little bit more, it might be a little bit easier to parse 40:04 and quickly scan the website to understand what it's about, 40:10 because immediately I looked up here. 40:14 I didn't even see this until later on, "We design astonishing websites." 40:16 I also think these animations play way too fast. 40:20 I would like a little bit more time to see what each one of these websites looks like 40:25 and then maybe give a little bit of time for them to scroll smoothly, 40:31 maybe use some sort of carousel here. 40:36 In fact, I'm just going to go ahead and open up Bootstrap here. 40:40 Let's see. GetBootstrap.com. 40:43 I think they have a carousel component which would actually be perfect for this particular situation. 40:46 Can I not scroll here? Whoa, what's going on? 40:53 I'm just going to try to search for carousel. That's not working. 40:57 Maybe it's under JavaScript. 41:02 Yeah, there it is, Carousel. 41:04 They actually already have this carousel built. 41:07 Again, if you use Bootstrap, you can take advantage of all of the nice spacing 41:10 and colors that they already have set up. 41:15 And they have these really great components, 41:17 so you could put this super nice carousel in place of this, 41:19 which I think would look a lot nicer. 41:25 Let's check the responsiveness. No. 41:28 Again, if you're going to be creating websites, you've got to make them work for mobile devices. 41:30 Let's move on. 41:37 It looks like we're about 75% of the way through, 41:40 and it's 12:43, so we're doing pretty well on time here. 41:43 I'm going to open up this one from Duncan. 41:49 Duncan says, "Please could you review my latest project on your Treehouse Reviews Livestream." 41:52 Hey, you're in luck. We're going to do it. 41:58 It says, "It's a rebrand and new website for rock band The Thinking Men." 42:00 It looks like we have a website here for a rock band called The Thinking Men. 42:07 They've got a nice big YouTube video here. 42:12 Just go ahead and click it. I don't think we're going to get audio here, but that's okay. 42:15 It looks like the player controls aren't present, but that's all right. 42:19 There's a nice video there. I can get an idea of what the band is all about. That's pretty cool. 42:26 If I scroll down I can see the latest news about the band. 42:32 One thing I'm noticing right away here is that this typography is just a little bit too tall and skinny 42:36 and the letters are spaced too close together. 42:42 So I would try to adjust that a little bit. 42:47 This typography is very readable, so that looks good. 42:49 But it's kind of difficult to see exactly what each one of these are saying. 42:54 I have to put in a little bit of work to read each word, which kind of slows down the scannability of the site. 43:00 Same thing for the header here. 43:07 I think this font is just a little bit too tall and too bold and the letters are too close together. 43:09 It feels a little bit cramped. 43:15 But overall, so far, so good. It looks pretty nice. 43:18 I think that's my only piece of criticism so far. 43:22 Let's see. Forthcoming Shows, gig dates coming soon. 43:26 So I guess they don't have any upcoming shows. 43:30 And hey, look, they have embedded some audio clips here from SoundCloud. 43:32 SoundCloud is a place where you can upload audio samples. 43:38 It's kind of like the YouTube of audio, I guess, without video is one way to describe it. 43:43 We can play these and hear some music from this band. So that's cool. 43:49 Then you can buy their music, you can buy tickets to their shows, 43:54 and you can also buy merchandise. 43:59 I think this is great. I think this is really all that I would want out of a band website. 44:01 If I don't know anything about the band, it's cool to see this music video right up front, 44:09 and then I can just scroll down and pretty quickly listen to some more of their music. 44:15 And if I really, really like this band I can scroll down even further and purchase. 44:20 That's cool that I get a sample up front before I actually have to commit to buying anything. 44:25 I think the order of elements is good here. 44:33 Let's check the responsiveness. Oh, man. 44:37 I actually did not think this website was going to be responsive for some reason, 44:40 but I was incorrect. It is responsive and it responds quite well. 44:44 Usually when you have embedded elements like this, like these clips from SoundCloud, 44:50 they don't always respond very well. 44:55 I'm not really sure specifically if SoundCloud has this built in or if they did it themselves, 44:59 but yeah, good job. 45:03 It looks like a really great responsive website that is well suited to scrolling 45:05 on a mobile device in portrait view. 45:10 I'm just going to click around to a couple of other pages here. 45:14 It looks like a website to me. 45:18 I like these full screen photos to give me more of a sense of the band. 45:23 When I click on About, I can see all the different people that are in the band. 45:28 Again, this typography isn't very readable. 45:32 I'd pick a different font here. 45:36 I understand why you would want to use a script font here 45:39 just to give it this handwritten look, which is kind of cool, 45:43 but I would try to go for a script font that's a little bit more readable. 45:49 There's quite a few of them out there. 45:57 In fact, if we go over to Google.com/fonts, 45:58 you can find lots and lots of free web fonts. 46:04 They're pretty good and they're really easy to include in your website. 46:09 All you have to do is click on Quick-use here. 46:13 There it is right there. 46:17 You can add this style sheet to your website, 46:19 and then you can copy and paste font-family here and use the font 46:23 once you've included the style sheet. 46:28 Pretty cool. I love using Google Fonts, so that might be a place to look for different pieces of typography. 46:31 Overall, it looks really cool. 46:38 I think the color scheme is good, I think the use of texture is actually quite nice. 46:42 You don't see that on too many websites these days 46:46 just because everybody is going to flat design. 46:48 So I like to see something just a little bit different. 46:52 Texture is actually becoming a way to distinguish yourself a little bit more. 46:55 Let's move on. Great website, Duncan. I really like it. 46:59 We're going to move on to Adam. 47:03 Adam says, "I would really appreciate feedback. Learned all my coding knowledge from Treehouse." 47:05 Oh, that is just wonderful. 47:11 Of course if you want to sign up for Treehouse, be sure to go to TeamTreehouse.com/live 47:13 and you can go ahead and start learning today. 47:20 Pretty cool. 47:24 Let's jump into Adam's website here. 47:26 It's called Find Your Crave. 47:29 Just by looking at the URL and the name of the site, I assume this is a site about food. 47:31 And indeed it is. 47:40 You've got some pictures of food here. 47:42 I think it's to find restaurants. 47:45 It kind of looks like it's like Yelp or something like that. 47:48 Let's read some of the copy here and learn more about it. 47:53 "Connect with local restaurants and the food around you on FYC." 47:56 That's Find Your Crave. 48:01 "People use FYC to find specials, menus, and much more to satisfy their crave." 48:03 "FYC is your best restaurant information guide. Specials. Menus. Photos. Just for your craves." 48:09 Okay. Right away here I think the UI is a little bit confusing. 48:14 Whoa. Can I actually not even click this button? Okay. 48:22 It says, "Get Started" here and this looks like a button that I can click, 48:27 but it's actually not. It's just text there. 48:30 So if that is supposed to be a button, it should definitely be linked. 48:34 If it's not supposed to be a button, then it probably shouldn't look like a button. 48:39 Up here it looks like we can choose our city. 48:43 This looks pretty strange on a desktop. 48:49 I assume if we size this down to a mobile size that it would look a little bit better. 48:51 But that probably needs some cleanup on the desktop to take more advantage of this larger canvas. 48:58 I think a good way to organize this might just be by letter 49:04 or even just allowing me to pick in a drop-down menu right when I click on that. 49:09 But if you scroll down here, it doesn't look like they have any places in Florida 49:15 that I could relate to, but that's okay. Let's see. 49:22 Have I been to any of these cities? I'm sure I've been to at least one of them. 49:28 Wow. I don't think so. I'm not familiar with any of these places, so I can't type in a restaurant that I might know. 49:33 We have Sioux Falls here, some restaurants. 49:40 We can click on All Places, Special Offers, Photo Gallery, or Menu Items. 49:48 I assume if I click on All Places it will show me all of the restaurants for that particular city. 49:53 That looks like what it's showing me. 50:03 Then I click on Special Offers so I can get special offers for the city. 50:07 Okay. This UI is starting to make a little bit more sense here. 50:11 Some menu items. That's kind of a strange but interesting way to browse food in an area. 50:16 I guess if you don't actually want to browse the restaurants necessarily 50:25 and just kind of want to see if you can get a particular dish at any of these restaurants, 50:29 that's kind of a neat way to browse. 50:34 Then there's a photo gallery 50:36 So if you just want to browse in this Pinterest look and style, that's cool. 50:38 But again, I think the UI here is really confusing. 50:44 When I see this text box here, I assume automatically that I should be typing in 50:48 something like Chinese food or burgers or whatever, 50:54 but that's actually a place where I'm supposed to type in my email address 51:01 to get a weekly report about this city, 51:05 whereas I'm supposed to click on these things to actually get information about the city. 51:09 And then there's this button here again. 51:14 So kind of strange over here. 51:17 I almost feel like this should just be a single search box 51:19 that's super easy for me to just say, "I want to get this kind of food," or something. 51:23 They have some featured locations down here. That's kind of interesting. 51:29 From a business perspective, you might be able to get restaurants to actually pay you to be featured. 51:32 I'm wondering if that's actually already going on. 51:39 Hey, there's Advertise down here, so yeah, I assume that's what's happening here. 51:42 Interesting way to monetize. That's cool. 51:46 I think the color scheme is just way too close to Yelp, though, 51:48 because Yelp does some pretty similar things and they use red, white, and black 51:54 just like Find Your Crave. 52:00 So if you are going to create something that is so similar to Yelp, 52:02 you really need to find a way to distinguish yourself, 52:07 and one of the strongest ways to do that is with a different color scheme. 52:10 So definitely something to think about there. 52:16 Let's check the responsiveness here. Looks pretty decent. 52:20 Yeah, actually, this is kind of what I would expect to see out of this particular website on a mobile view. 52:23 That looks good. 52:30 But overall, it's a cool idea. 52:33 I really like the concept of being able to browse by menu items. 52:35 So something to explore further there. 52:39 All right. Let's move on to our very last website here from Keith. 52:44 Wow. Keith wrote quite a lot here. 52:51 Keith says, "This is my personal site. I'm not trying to freelance." 52:55 "The site is intended as an online resume and blog while I look for a job in the industry." 53:00 "I would love feedback on all aspects of the site: design (I'm no designer)—" 53:05 Hey, that's okay. I'll give you some tips. 53:09 "—content, responsive principles, CSS, HTML, WordPress, whatever you want to critique." 53:12 "I added a Work Project overview of the site itself." 53:15 "Is that too weird?" I don't know. I don't know what a Work Project overview of the site itself is, but we're going to find out. 53:20 And then he says, "I haven't built any other custom WordPress themes 53:26 so I wanted to show that I can." 53:32 "This is a custom theme I created from the info I learned from Zac Gordon's WordPress videos." 53:35 Hey, that's really cool. 53:40 Again, you can check us out at TeamTreehouse.com/live. 53:42 And when you sign up you can watch Zac's videos, where he teaches you how to make custom WordPress themes. 53:46 I assume that's what Keith did. 53:52 Let's go ahead and take a look at Keith's website here. 53:54 Were there 2 separate URLs there? No. Those were the same. 53:57 So I guess the work overview must be in here. 54:01 Not quite sure what Keith meant by that. 54:08 First impressions, I really like the look of this website. 54:11 I think the navigation is a little bit huge here. 54:16 I do like that it's large and nice and clickable, 54:20 but it's still pretty large for a desktop display, 54:23 and it really pushes down your name here, which, because this is your website, 54:28 that's the most important part—to have your name right there up at the top. 54:32 So something to think about there. 54:36 Maybe you could actually put your name up here and then move this navigation over here to the right side 54:38 and then have people click on it there. 54:44 That might be a way to consolidate a couple things here. 54:46 Keith is a husband and father, tech enthusiast, web developer and he says, 54:49 "I'm a back-end developer." 54:54 Keith, you should feel really good about this design because it looks pretty decent. 54:56 It definitely looks like you have more design skills than you're giving yourself credit for. 55:00 So good job. 55:06 He says, "I currently use PHP with CodeIgniter or WordPress." 55:07 "I tend to view projects from a macro perspective where I work back from the business model or goal." 55:11 That's always a good idea. "I live in Oregon with my lovely wife and our daughter." 55:17 Let's check out some of these pages here. 55:21 Let's look at the Contact page first. 55:25 Whoa! Those are super huge social icons. 55:28 Those are probably the largest social icons I've ever seen. 55:30 But I mean, that's cool. I don't know. I guess it gets the point across. 55:34 I can click on his email right here, I can go to his LinkedIn, his Google+ or his Twitter. 55:38 I don't know. What more would you need on a contact page? 55:47 I guess a contact form. 55:50 It might be good to actually spell out your email address here 55:52 because some people don't actually like to use the Mail To link. 55:55 You can see it down here at the bottom when I hover over it. 56:00 It says "Mail To" and that's his email address. 56:03 But it might be good to actually spell out your email address on the page 56:05 just in case people want to copy and paste it into an app like Gmail. 56:10 But that's interesting. 56:16 That's kind of a cool way to do a Contact page. 56:20 Here we have Keith's blog. He has some recent blog posts here. 56:23 Looks super simple. It's a really nice-looking blog. 56:27 It doesn't look too cluttered. So I think that looks nice. 56:29 I think I would actually reverse these columns because the information over on the right here 56:32 is actually more important than what's over here on the left. 56:37 And because English is read left to right, unlike Arabic, 56:40 it would be good to have the more important information over on the left-hand side. 56:45 So maybe flip those columns around. 56:49 If we click on Work, just hovering over Work here— 56:51 actually hovering over all of the navigation items, you can see over on the right side 56:54 that it tells me what the navigation item is beyond just the iconography. 56:58 I think I'd like this yellow color to stand out a little bit more against the gray background. 57:04 So if you can somehow make that work, maybe make the background a little bit darker, 57:10 maybe make the yellow a slightly different color, or maybe just pick a different color here altogether, 57:15 it might be a little bit easier to see that. 57:20 Alternatively, you could actually just put the navigation items right down here at the bottom. 57:23 But if we scroll down here, we have this one personal project that Keith put together, 57:30 built with PHP & CodeIgniter. 57:38 It looks like a portfolio page to me. 57:41 One thing that I would suggest here if it's— 57:47 Oh! Actually, wait. There's a Next button. 57:50 Oh, okay. 57:54 I think that's what Keith meant when he said that he's included this site in his work. 57:56 So there's a piece of criticism. 58:01 I totally missed that Next button and barely just caught it. 58:05 So it might be better to actually present your work in some kind of gallery here 58:09 and then when you click on each piece of work, 58:13 it brings you to the page that tells you more detail about the project. 58:16 So something to think about there. 58:21 But if we just scroll through here, it looks like this portfolio is pretty well filled out 58:24 with some cool-looking PHP projects. 58:31 Good job on that. 58:34 Again, I think if you just organize them a little bit better here, 58:35 it would be easier to see what you've worked on. 58:38 Let's check the responsiveness. Hey! Good job, Keith. Look at that. Wow! 58:43 You know, this menu actually looks great on mobile. 58:48 I actually like this better than the desktop version of the site. 58:53 That's pretty cool. 58:57 I wonder if you could almost bring this style menu, just because there's 4 nav items, 58:59 if you could bring that over here somehow and then have your name up here. 59:05 I don't know. Maybe just something to think about. 59:09 But it looks good. It looks like this site responds well. 59:12 I really like the bright colors, and I think Keith did a great job. 59:16 Look at that. It is 1:00 p.m. That's exactly one hour. That was perfect, ladies and gentlemen. 59:20 We're going to go to some Q&A now. 59:28 Again, Chris Zabriskie is moderating the chat over on YouTube, 59:31 and hopefully he has a couple of questions here for me in the chat. 59:35 He says, "A couple of people have submitted stuff on YouTube if we have time." 59:44 Sure. Let's go ahead and just do a couple more here. 59:53 But while I'm doing these 2 websites, go ahead and try to come up with a couple questions for me. 59:56 I can answer pretty much anything you want about HTML, CSS, design, UX, web business, 1:00:02 how to get started in web design—with Treehouse of course, right?—really anything you want. 1:00:10 So feel free to ask me anything. 1:00:17 We'll probably do Q&A for 10 or 15 minutes before we wrap up here. 1:00:20 Let's look at these other 2 websites. 1:00:26 Let's look at SmartRocket.com.br. 1:00:30 Oh, man. Okay. It looks like I actually lost Wi-Fi over here on my iPad. 1:00:36 So maybe there are some questions that Chris is submitting. 1:00:43 I'll go ahead and reconnect. 1:00:46 Hopefully there are some questions in there. 1:00:51 We'll review some stuff while we're waiting, though. 1:00:55 Okay. 1:01:00 There we go. Okay. All right. 1:01:03 Let's take a look at this website. It's at SmartRocket.com.br. 1:01:06 It says, "We're Smart Rocket //Web & Mobile.' 1:01:10 "We design, create, deliver, and maintain IT solutions including Mobile Apps and Web Systems." 1:01:14 Whoa! What is a web system? 1:01:20 "We take the time to understand your needs to deliver the best solution 1:01:22 with the technology that is most suited to your needs." 1:01:26 Oh my gosh. When I scroll down the page, these triangles start spinning. 1:01:28 Look at that. That is so trippy. 1:01:34 I've got to say, though, I'm kind of making a joke out of this 1:01:38 but I do like this design overall. 1:01:42 The strong diagonals in this triangle are really cool, 1:01:45 and you actually don't see that a whole lot in web design 1:01:49 just because everything on the page is usually in a square or rectangular box. 1:01:52 So it's nice to see something a little bit different there. 1:01:57 I like the really strong contrast of black and white. That's a really bold choice. 1:02:00 A lot of times when you make a black and white website it can tend to look pretty plain, 1:02:05 but this actually looks quite nice. 1:02:08 Scroll down to Our Work. Oh, look at those beautiful, shiny devices. 1:02:09 What Do We Do? You can learn more about what they do. 1:02:16 And How We Work. You can see their process for putting together sites. 1:02:20 And then you can go ahead and contact them. 1:02:25 Pretty simple site. 1:02:27 I guess there's a menu here that will scroll down to those particular parts of the site. 1:02:30 Yeah. I guess I don't really have a whole lot to say. 1:02:37 It's a great-looking site. Let's check the responsiveness. 1:02:39 I kind of figured it would respond really nicely, just like this. 1:02:43 I'm actually curious how these triangles are being put together 1:02:47 because I noticed a little bit of aliasing along the bottom here, 1:02:50 which suggests to me that this is actually a rotated element. 1:02:55 So let's hover over here. 1:02:59 Let's see. 1:03:05 How are they doing this? Is that just a background? 1:03:07 Overlay. 1:03:13 I'm sure I could figure it out, but I can't quite dig into it right now. 1:03:16 But that's, yeah, a really cool design. 1:03:20 Okay. Let's look at this one other website. 1:03:25 It looks like there are some questions rolling in, 1:03:30 so I'll give a little bit more time for more questions to come in. 1:03:32 Let's look at this website from Julian-Thomas.com. 1:03:36 This is a website for personal training. 1:03:46 "Julian Thomas, Elite Personal Training." 1:03:50 Wow! That's really cool. 1:03:53 I really like the look of this site, that nice full screen photo. 1:03:55 Again, when using full screen photos with white text on top, 1:03:59 the full screen photo really should have a darker background, which this one does. 1:04:02 You can see the white text looks really crispy there. 1:04:07 Up here he's got some navigation links. 1:04:11 Yeah, first impression, I think this is a great-looking website. 1:04:15 It tells me right away what the website is about. 1:04:18 "A New Breed. Julian Thomas is a Team Great Britain Sprinter 1:04:21 "that specializes in functional mobility and development training, 1:04:25 the same training used in Olympic level athletics." Wow! That's pretty impressive. 1:04:31 So I guess these are all the different types of training that he offers. 1:04:36 Gosh, this is a great website. 1:04:42 Pretty pricey training here, but hey, if you're going to give me Olympic level training, 1:04:45 that's kind of what I would expect. 1:04:51 Looking at this website, I bet it responds great. Yep. Super awesome. 1:04:52 Don't have a whole lot of critique to give here because it's just a great-looking site. 1:05:00 So good job on that. 1:05:05 All right. Let's take a couple questions. 1:05:07 Our first question is from Kurt and he says, "Nick, have you been working out?" 1:05:11 Well, I have not been working out with Julian, but yes, I have been working out at the gym. 1:05:15 I use this really cool app called Fitness Buddy to help me put together different weightlifting routines. 1:05:19 Working on that. 1:05:26 Rodrigo asks, "Is WebGL and CSS 3D Transforms something worth learning?" 1:05:28 "Because it sure will take some time for me." 1:05:34 "I have 40% knowledge of CSS right now." 1:05:37 I don't have 100% of CSS knowledge, but I feel pretty confident that yes, 1:05:42 WebGL and 3D Transforms are something worth learning. 1:05:48 This is actually something that I've been tweeting about and writing about quite a bit lately. 1:05:51 So if you don't mind, I'd like to show you a couple things that I've been working on lately. 1:05:56 If I go to Blog.TeamTreehouse.com, I recently wrote a post— 1:06:02 actually, I wrote 2 different posts here. I'll bring both of them up and then summarize them for you. 1:06:11 In this earlier post I said, "3D in the Browser: WebGL versus CSS 3D Transforms." 1:06:19 This looks like exactly the thing that you're looking for. 1:06:25 CSS 3D Transforms are good for doing small, simple transforms. 1:06:29 If you just want to kind of adjust a couple elements slightly 1:06:37 or maybe make a Trello card-looking interface, 1:06:41 kind of like flip back and forth from the edit view to the show view, 1:06:45 simple stuff like that is fine because all you're really doing 1:06:49 is adjusting the look of the page. 1:06:52 You're not actually adjusting the semantics. 1:06:56 The problem with CSS 3D Transforms is that a lot of people will try to store geometry in the DOM, 1:06:59 or the Document Object Model. 1:07:08 I actually think the DOM is a terrible place to store geometry like that 1:07:10 because it's totally non-semantic. 1:07:14 The DOM is really a pretty heavy and expensive place computationally to store geometry, 1:07:16 and it just doesn't make sense when there's other options available like WebGL. 1:07:23 What is WebGL? WebGL is web graphics language. 1:07:30 Over in this other post I wrote an introduction to three.js, 1:07:34 which is actually a framework built on top of WebGL. 1:07:39 I made the Treehouse logo in 3D. 1:07:43 I'm going to click on this, and you can see the demo here. 1:07:46 When I scroll around with my mouse, you can see that we've got this 3D-looking Treehouse logo here. 1:07:50 I think WebGL is really just this amazing browser technology, 1:08:00 and not a whole lot of people are talking about it yet. 1:08:06 It's supported in Firefox, Safari, and Google Chrome. 1:08:09 It will be supported in Internet Explorer 11, which is the upcoming release of Internet Explorer. 1:08:12 It's not supported on mobile devices just yet, 1:08:17 but I have to imagine that support is coming soon. 1:08:19 In fact, I'm really curious if iOS 7 and the new iPhone will support that 1:08:22 because they talked about how so graphically powerful it is. 1:08:30 We will have to see. 1:08:33 One practical use for WebGL might actually be to create a product gallery. 1:08:35 For example, on the new marketing page for the new iPhone that was just announced yesterday, 1:08:41 you could have this gallery where you could browse an iPhone in 3D 1:08:47 and rotate it in 3D space and actually look at it. 1:08:52 This might be really good for higher-priced items as well. 1:08:55 You're going to be spending a lot more time putting together the models, 1:08:58 but again, you're selling a higher-priced item. 1:09:01 For example, a car. It would be really great to browse in 3D, open the car doors, look inside, and that sort of thing. 1:09:04 So I think it's totally worth learning. Yes. 1:09:11 We do teach CSS 3D Transforms on Treehouse right now. 1:09:15 We don't teach WebGL yet, but I'm really getting into it 1:09:18 and so there may be a course in the future. We will see. 1:09:23 Another question says, "What do you think?" 1:09:26 "Would anyone know about JavaScript to try to get minimal viable job as JavaScript dev?" Oh, okay. 1:09:30 Basically, what's the minimum amount of JavaScript you need to know 1:09:40 to get a job as a JavaScript developer? 1:09:44 I'm not sure that it's worth specializing specifically in just JavaScript. 1:09:49 You're going to need to know the rest of the browser environment, like HTML, CSS. 1:09:55 You're probably going to need to know how to work with databases as well. 1:10:00 As you get into more advanced JavaScript, you do things like AJAX, 1:10:03 you get into maybe node.js, which is a totally different thing. 1:10:06 But the minimum amount of JavaScript is actually quite a lot. 1:10:13 You actually do need to know JavaScript pretty well to be able to call yourself a JavaScript developer 1:10:17 because JavaScript is notoriously kind of a strange language, 1:10:23 mainly just because of the browser environment, 1:10:28 but it also has a lot of quirks to it as well. 1:10:30 It's really worth learning JavaScript very, very well. 1:10:33 A lot of people will just try to learn jQuery and not actually learn JavaScript on its own, 1:10:36 which that's a good way to start, that's a good way to first get into it is just doing jQuery. 1:10:43 It simplifies a lot of things, like DOM selections, for you. 1:10:49 But it's really worth learning JavaScript properly 1:10:52 and it's really worth diversifying your skills and learning about different JavaScript frameworks 1:10:56 and just getting into other things. 1:11:00 It's worth learning. We teach all that stuff at Treehouse, which of course you can check out at TeamTreehouse.com/live. 1:11:03 Next question is from Keith. 1:11:10 He says, "Are there any business issues with trying to pick up freelance 1:11:14 while working as a designer for an internal only corporate website?" 1:11:20 I actually was wondering this at a previous job I worked at, 1:11:25 and I just went and talked to my employer and they were totally okay with it. 1:11:30 I think in that particular situation it kind of depends on your contractual obligations, 1:11:34 local, state, or federal laws wherever you live. 1:11:40 But other than that, I think the best thing you could do 1:11:45 is probably just talk to the person that's employing you 1:11:49 and see if they're okay with you doing freelance work. 1:11:51 Don't try to fly under the radar and do it. 1:11:55 If they don't allow it and that's what you want to do, 1:11:57 then maybe try finding another job or go ahead and do it anyway 1:12:00 and maybe your freelance gig will pay off for you. 1:12:04 Anyway, not legal advice. Not a lawyer. 1:12:08 Joshua says, "Most companies want a portfolio or proof of skills 1:12:12 other than just what you state on a CV." 1:12:17 "How would you recommend getting those first few sites under your belt to use in a portfolio?" 1:12:20 That's a really good question. 1:12:26 There's a couple of things you can do to keep yourself busy. 1:12:29 One, you can create a personal website. 1:12:31 You can just create a website for yourself, like create your portfolio, 1:12:34 and it's totally cool to include your own portfolio in your portfolio. 1:12:39 I mean, it is a website that you made. 1:12:43 But beyond that, you can try looking locally. 1:12:46 So if there's maybe some local bands that you like, 1:12:49 they probably need a website because they can't really afford to get a good one. 1:12:52 But if you have those skills, they'd be happy to let you create a website for them. 1:12:57 You can do the same thing for all sorts of local businesses. 1:13:02 That might be something to think about. 1:13:05 Really, there's other things you can do too that will contribute to the web design community. 1:13:09 For example, you could put together some kind of cool piece of JavaScript 1:13:15 or a CSS framework or maybe you can put together a blogging platform. 1:13:21 Whatever it is, it doesn't have to be that complex. 1:13:28 It can actually just be kind of for fun, basically. 1:13:31 You have to just do it. 1:13:35 You just have to get going and create those websites. 1:13:39 If you want to do something in more of a practical setting, though, 1:13:43 I would look at local businesses because everybody needs a website. 1:13:47 You could even just ask friends if they want you to put together personal websites for them to get started. 1:13:51 Last one. Oh. No. We've got 2 more. 1:13:58 Oh. No, I'm sorry. This is the last question. Okay. 1:14:01 The question is, "Tearing my hair out over Google Web Font rendering." 1:14:04 "Any tips on how to avoid faux bold?" 1:14:09 I am actually not sure what you're talking about. 1:14:14 But if we head over to Google.com/fonts, 1:14:20 this is Google Web Fonts, you can either use the Quick-use here 1:14:25 or you can add something to your collection. 1:14:33 When you use Quick-use, they do give you styling options here. 1:14:35 You can check off if you want normal, bold, or ultra-bold. 1:14:39 If there's some kind of bolding that's happening, 1:14:44 it might just be that you have one of these selected that you don't really need. 1:14:47 That might be a place to look. 1:14:53 Again, not quite sure what is being addressed there, 1:14:56 but hopefully that answered your question. 1:15:00 Or maybe we could just pick another font. That might work too. 1:15:03 That's it for today. 1:15:06 Again, this was Treehouse Reviews, which is from TeamTreehouse.com/live. 1:15:08 You can check us out and learn all about web design, web development, mobile, business and so much more. 1:15:17 I'm Nick Pettit. You can follow me on Twitter at @nickrp. 1:15:23 That's it. We'll see you real soon. 1:15:27