1 00:00:00,000 --> 00:00:03,990 [Nick Pettit - @nickrp] Hey everybody, I'm Nick Pettit, @nickrp on Twitter, 2 00:00:03,990 --> 00:00:10,650 and today at Treehouse we're doing a special live edition of our show Treehouse Reviews, 3 00:00:10,650 --> 00:00:15,240 the show where you submit websites to us and we review the designs, 4 00:00:15,240 --> 00:00:19,510 front-end code, overall business concept, and stuff like that. 5 00:00:19,510 --> 00:00:22,620 We're going to be looking at a bunch of websites today. 6 00:00:22,620 --> 00:00:24,310 There were quite a few submissions. 7 00:00:24,310 --> 00:00:26,400 I'm going to be looking at 8 of them. 8 00:00:26,400 --> 00:00:28,660 I hope that we can get to all of them. 9 00:00:28,660 --> 00:00:31,250 I'm going to try to keep this to around an hour. 10 00:00:31,250 --> 00:00:35,680 If we don't get to your website, I'm super sorry. We will try to do it next time. 11 00:00:35,680 --> 00:00:42,100 But without further ado, let's go ahead and get into these first couple websites here. 12 00:00:42,100 --> 00:00:46,140 I am using Trello today to organize all of these. 13 00:00:46,140 --> 00:00:48,840 That way I don't have these websites up in my email 14 00:00:48,840 --> 00:00:53,040 and I won't be sabotaged by my co-worker Jason Seifer. 15 00:00:53,040 --> 00:00:56,040 Here we have a submission from Evan. 16 00:00:56,040 --> 00:01:00,910 Evan says, "This is the homepage for my freelance design brand." 17 00:01:00,910 --> 00:01:05,120 "The goal was to create a site that was simple but informative, 18 00:01:05,120 --> 00:01:09,830 providing enough information to inspire potential clients to contact me." 19 00:01:09,830 --> 00:01:15,490 "Any feedback (theory, design, business, layout) would be greatly appreciated." 20 00:01:15,490 --> 00:01:19,700 Well, I can help you out in theory because I have a theoretical degree in web design. 21 00:01:19,700 --> 00:01:23,820 All right. Let's go ahead and jump into this website from Evan here. 22 00:01:23,820 --> 00:01:29,270 The first thing I notice is that it has a pretty nice-looking design. 23 00:01:29,270 --> 00:01:32,480 I really like the blue and red here. 24 00:01:32,480 --> 00:01:35,340 I like the use of diagonal lines. 25 00:01:35,340 --> 00:01:39,700 I think that this logo is a little bit difficult to comprehend. 26 00:01:39,700 --> 00:01:45,810 I'm not sure if I'm supposed to read it clockwise or counterclockwise or across. 27 00:01:45,810 --> 00:01:50,960 I mean, I know that this person's name is Evan, so I know it should be E-V-A and N, 28 00:01:50,960 --> 00:01:53,500 but that's a little bit confusing. 29 00:01:53,500 --> 00:02:00,400 So in considering that logo mark, I would probably think about actually redesigning it. 30 00:02:00,400 --> 00:02:06,390 This is a really cool design, so that's kind of tough because it's so integrated at a pervasive level. 31 00:02:06,390 --> 00:02:10,970 But that would be the first thing that I would think about changing here. 32 00:02:10,970 --> 00:02:17,500 Also I think this bar at the top is a little bit intense. 33 00:02:17,500 --> 00:02:21,460 I'm actually going to switch to full screen here so we can see this a little bit better. 34 00:02:21,460 --> 00:02:26,260 This green kind of clashes not so much with the blue but actually the red 35 00:02:26,260 --> 00:02:30,070 because red is the complementary color to green. 36 00:02:30,070 --> 00:02:33,630 So it looks a little bit too obnoxious. 37 00:02:33,630 --> 00:02:38,440 If we just scroll down the page a little bit and look at what the site looks like without that bar, 38 00:02:38,440 --> 00:02:42,930 I think this is much more impactful and looks a lot nicer. 39 00:02:42,930 --> 00:02:46,280 I think the typography here is a little bit strange. 40 00:02:46,280 --> 00:02:49,210 Freelance Web Design in Columbus, Ohio. 41 00:02:49,210 --> 00:02:52,170 I like that Web Design is highlighted here, 42 00:02:52,170 --> 00:02:58,190 but I think there's probably a little bit of a better way to possibly do that. 43 00:02:58,190 --> 00:03:03,920 Maybe not with the blue color but maybe with a different font or something. 44 00:03:03,920 --> 00:03:05,580 I'm not really sure. 45 00:03:05,580 --> 00:03:09,840 I like that it's highlighted; I just don't like the way that it's highlighted. 46 00:03:09,840 --> 00:03:14,570 If we scroll down a little bit further, we have an icon of a coffee cup here. 47 00:03:14,570 --> 00:03:19,340 I guess that means Evan likes coffee. I'm not really sure exactly. 48 00:03:19,340 --> 00:03:21,380 But it's a nice-looking icon. 49 00:03:21,380 --> 00:03:25,080 And then we have Skills and Services. 50 00:03:25,080 --> 00:03:30,630 Oh! And he actually has a pronunciation of Evan. The X is silent. 51 00:03:30,630 --> 00:03:35,200 So it's Evan or Evan [pronounces name Ee-van]. I assume it's Evan. 52 00:03:35,200 --> 00:03:36,180 All right. 53 00:03:36,180 --> 00:03:38,660 Skills and Services. Oh, okay. 54 00:03:38,660 --> 00:03:44,430 I was actually going to talk about the contrast here on the type, 55 00:03:44,430 --> 00:03:49,950 but it looks like if you scroll down the page further, these bars fill in. 56 00:03:49,950 --> 00:03:54,600 Let's refresh the page and scroll down again so you can see that again. 57 00:03:54,600 --> 00:03:56,660 There. Those bars fill in. 58 00:03:56,660 --> 00:04:01,430 So that makes the contrast between the background and the skills a little bit better. 59 00:04:01,430 --> 00:04:04,020 I'm going to refresh one more time, though, just so you can see 60 00:04:04,020 --> 00:04:08,080 how without those bars there the contrast actually isn't that good. 61 00:04:08,080 --> 00:04:14,280 One tip when you are building websites is to actually look at your page in black and white. 62 00:04:14,280 --> 00:04:17,079 That helps you test the contrast of the page, 63 00:04:17,079 --> 00:04:20,839 because humans are actually better at perceiving changes in lightness and darkness 64 00:04:20,839 --> 00:04:23,810 than they are at perceiving changes in color. 65 00:04:23,810 --> 00:04:26,410 This is actually how a lot of compression technologies work. 66 00:04:26,410 --> 00:04:30,360 They get rid of some of the detail in color, 67 00:04:30,360 --> 00:04:33,930 but they keep more detail in the changes in lightness and darkness, 68 00:04:33,930 --> 00:04:40,680 so it tricks your eye into thinking that it's a highly detailed uncompressed image when it's not. 69 00:04:40,680 --> 00:04:44,620 But in this case, yeah, you should definitely look at the website in black and white 70 00:04:44,620 --> 00:04:50,540 because that's going to reveal all sorts of issues with contrast on any website, 71 00:04:50,540 --> 00:04:52,510 not just this one in particular. 72 00:04:52,510 --> 00:04:56,350 But without those bars there, the contrast isn't that good. 73 00:04:56,350 --> 00:05:00,180 And even with those bars there, it is still a little bit hard to see. 74 00:05:00,180 --> 00:05:05,420 In terms of the overall concept of this, I'm not sure that I really like that either. 75 00:05:05,420 --> 00:05:09,760 I'm really tearing into Evan here. I apologize, Evan. He looks like a really nice guy. 76 00:05:09,760 --> 00:05:14,960 But I think that at least some of these should be filled in all the way 77 00:05:14,960 --> 00:05:20,240 so that Evan can say, "Yes, I am definitely an expert in these things." 78 00:05:20,240 --> 00:05:25,870 "I know some about this stuff and maybe less about MySQL." 79 00:05:25,870 --> 00:05:30,240 But even then I think you should probably get rid of the bars altogether 80 00:05:30,240 --> 00:05:34,270 and just say in an ordered list, "These are my skills." 81 00:05:34,270 --> 00:05:38,310 "I know HTML, CSS, jQuery, PHP, and MySQL." 82 00:05:38,310 --> 00:05:42,870 And it might be assumed that the things that are first you might know the best 83 00:05:42,870 --> 00:05:46,860 and the things that are last maybe you don't know as well. 84 00:05:47,770 --> 00:05:51,070 I'm not going to read the copy on Services. 85 00:05:51,070 --> 00:05:56,830 Copy is definitely an important part of design, but I'm trying to move a little bit quickly here. 86 00:05:56,830 --> 00:06:01,660 Recent evxan Designs. Remember, the X is silent. 87 00:06:01,660 --> 00:06:07,120 It looks like there's one design here in the portfolio. 88 00:06:07,120 --> 00:06:09,540 I'm not going to take a look at that design, 89 00:06:09,540 --> 00:06:13,360 but judging the overall look of the portfolio here, it looks nice. 90 00:06:13,360 --> 00:06:18,530 It's simple. I think it might be better if that were maybe closer to the top. 91 00:06:18,530 --> 00:06:21,700 I assume that by clicking this navigation here it will actually scroll. 92 00:06:21,700 --> 00:06:23,660 Yeah, that is indeed what it does. 93 00:06:23,660 --> 00:06:31,230 So that provides you a quick way to get to it, but I would actually try putting your design first 94 00:06:31,230 --> 00:06:34,790 and then maybe more about you further down 95 00:06:34,790 --> 00:06:38,270 because people are here to see your work. 96 00:06:38,270 --> 00:06:45,180 And of course you should probably try to fill out your portfolio with a little bit more than one thing. 97 00:06:45,180 --> 00:06:50,300 So dig deep. I'm sure there is some awesome stuff that you've created that just isn't there. 98 00:06:50,300 --> 00:06:55,040 And then down here at the bottom Evan has a contact form 99 00:06:55,040 --> 00:07:00,380 where you type in your name, email address, and then you have to solve a math problem to prevent spam. 100 00:07:00,380 --> 00:07:02,660 That's not a bad way to do it. 101 00:07:02,660 --> 00:07:05,900 I prefer actually simpler CAPTCHAs like this 102 00:07:05,900 --> 00:07:12,760 where you don't actually have to type in some really funky-looking letters and numbers. 103 00:07:12,760 --> 00:07:19,960 Overall, I'm here to critique this website and I'm here to critique the rest of these websites, 104 00:07:19,960 --> 00:07:21,820 but I think this looks pretty good. 105 00:07:21,820 --> 00:07:26,980 It just needs a couple of tweaks here and there and it could be a stronger design. 106 00:07:26,980 --> 00:07:30,940 But it already looks pretty good. So good job, Evan. 107 00:07:32,010 --> 00:07:36,130 Moving on, I'm going to move Evan over to Done here, 108 00:07:36,130 --> 00:07:38,240 and next up is Jeremy. 109 00:07:38,240 --> 00:07:41,870 Jeremy didn't really send much text in his email, 110 00:07:41,870 --> 00:07:46,160 but I'm going to go ahead and open up this website. 111 00:07:46,160 --> 00:07:53,390 I don't speak this language. I think it's Swedish. I think I saw on his email that he was Swedish. 112 00:07:53,390 --> 00:07:56,940 I apologize if, Jeremy, you are not Swedish. 113 00:07:56,940 --> 00:08:00,400 This is a pretty basic website. 114 00:08:00,400 --> 00:08:05,060 It's just an image here, you've got some Lorem Ipsum text, 115 00:08:05,060 --> 00:08:11,120 and then over here you have this little sidebar menu. 116 00:08:11,120 --> 00:08:17,320 I actually like this design pattern here of using these sidebar menus. 117 00:08:17,320 --> 00:08:21,630 It's much more common on mobile devices, but you're starting to see it pop up on websites, 118 00:08:21,630 --> 00:08:23,550 and I don't think it's bad. 119 00:08:23,550 --> 00:08:28,240 I mean, I don't like that it hides the navigation all the time, 120 00:08:28,240 --> 00:08:31,820 but as this design pattern starts to become more common, 121 00:08:31,820 --> 00:08:40,039 I think this could pick up a little bit more and actually be something that people get used to. 122 00:08:40,039 --> 00:08:43,500 Something I didn't do on Evan's site but I'm going to do here 123 00:08:43,500 --> 00:08:48,890 is I'm actually going to come out of full screen here and I want to test the responsiveness of the site. 124 00:08:48,890 --> 00:08:51,960 That's kind of what I was expecting to happen. 125 00:08:51,960 --> 00:08:58,290 It looks like it responds quite nicely, so this will look good on mobile devices. 126 00:08:58,290 --> 00:09:02,570 Let me bring up Evan's site again to check on that. 127 00:09:02,570 --> 00:09:07,240 Hey, look at that. He's got very similar 3-bar navigation here. 128 00:09:07,240 --> 00:09:09,700 It doesn't come up on the side, it just drops down, 129 00:09:09,700 --> 00:09:12,020 but it's using the same iconography. 130 00:09:12,020 --> 00:09:16,370 It looks like Evan's site responds quite nicely as well. 131 00:09:16,370 --> 00:09:19,580 I am going to be checking every website for that 132 00:09:19,580 --> 00:09:24,120 because actually, we are at this amazing inflection point 133 00:09:24,120 --> 00:09:26,230 or we're coming up on this inflection point in history 134 00:09:26,230 --> 00:09:31,420 where there's actually going to be more people browsing the Web on mobile devices 135 00:09:31,420 --> 00:09:34,490 than there are on desktop computers. 136 00:09:34,490 --> 00:09:40,570 I know that's kind of hard to believe. It's kind of hard to imagine that. But that's the reality. 137 00:09:40,570 --> 00:09:43,550 There's going to be more people browsing the Web on mobile devices. 138 00:09:43,550 --> 00:09:49,260 So you really do need to think about your website in terms of a mobile experience first 139 00:09:49,260 --> 00:09:55,740 rather than thinking about it as a desktop website that you try to scale down to mobile devices. 140 00:09:55,740 --> 00:09:57,950 Just something to keep in mind. 141 00:09:57,950 --> 00:10:04,250 Overall, it looks like this project from Jeremy is in progress here still, 142 00:10:04,250 --> 00:10:08,860 so there's really not a whole lot to say, but it looks like a good start. 143 00:10:08,860 --> 00:10:12,370 Let's go ahead and move on. 144 00:10:12,370 --> 00:10:16,140 I'm going to move Jeremy over to Done here, 145 00:10:16,140 --> 00:10:19,810 and let's look at this website from Scott. 146 00:10:19,810 --> 00:10:27,250 Scott says, "I'd love feedback on this little web app I built last year as my first Rails app." 147 00:10:27,250 --> 00:10:30,680 "I'm going to do a refresh of it with some new features soon." 148 00:10:30,680 --> 00:10:34,770 "Would love your thoughts on how I can improve front-end code, signup flow, 149 00:10:34,770 --> 00:10:38,950 and maybe features you'd be interested in seeing." 150 00:10:38,950 --> 00:10:45,810 Okay. So we're going to look at front-end code, signup flow, and feature suggestions. 151 00:10:45,810 --> 00:10:47,580 Let's see if we can do that. 152 00:10:47,580 --> 00:10:51,260 It looks like this app is called PicDigest, 153 00:10:51,260 --> 00:10:53,800 and it says, "Make sure they never miss a moment." 154 00:10:53,800 --> 00:10:59,910 "Send your Instagram and Facebook photos to loved ones in a single daily email." 155 00:10:59,910 --> 00:11:01,370 Oh, that's really nice. 156 00:11:01,370 --> 00:11:06,160 So you can sign up your mom or your grandma or all your loved ones 157 00:11:06,160 --> 00:11:11,160 and you can send them your Instagram and Facebook photos, 158 00:11:11,160 --> 00:11:15,550 and that's especially nice if they're not actually engaged in those social networks. 159 00:11:15,550 --> 00:11:21,450 For example, I know my mom follows me on Facebook and likes all of my stuff that my girlfriend posts, 160 00:11:21,450 --> 00:11:23,260 but she doesn't follow me on Instagram. 161 00:11:23,260 --> 00:11:25,120 In fact, I don't think she's even on Instagram. 162 00:11:25,120 --> 00:11:27,490 So maybe I should use this. 163 00:11:27,490 --> 00:11:30,530 Just scrolling down looking at some of the marketing here, 164 00:11:30,530 --> 00:11:38,580 it looks like PicDigest sends some really nice HTML emails here with some photos. 165 00:11:38,580 --> 00:11:42,060 It looks like there's a baby in a trucker hat there. 166 00:11:42,060 --> 00:11:45,980 Then there's some more descriptive text about what PicDigest does. 167 00:11:45,980 --> 00:11:52,160 PicDigest automatically sends your photos from FB and Instagram in one single email, 168 00:11:52,160 --> 00:11:57,190 and it's perfect for making sure mom and grandpa see the pics you post of your kids. 169 00:11:57,190 --> 00:11:59,020 Hey, just like I was saying. 170 00:11:59,020 --> 00:12:02,300 This is actually pretty good so far. 171 00:12:02,300 --> 00:12:05,830 The name of the app is really good, PicDigest, 172 00:12:05,830 --> 00:12:09,600 so that you know exactly what this is going to do, 173 00:12:09,600 --> 00:12:14,390 or at least you are able to start building that mental model right away just by hearing the name. 174 00:12:14,390 --> 00:12:18,640 You have the same domain name, PicDigest, so that's great as well. 175 00:12:18,640 --> 00:12:22,380 And then the descriptive text is really, really good. 176 00:12:22,380 --> 00:12:26,490 In one sentence I was able to figure out what PicDigest does, 177 00:12:26,490 --> 00:12:31,180 and I was even able to build that exact same mental model that you suggested: 178 00:12:31,180 --> 00:12:34,030 sending these pictures to my mom or to my grandparents. 179 00:12:34,030 --> 00:12:36,410 So that's pretty cool. 180 00:12:36,410 --> 00:12:38,940 You can learn more about PicDigest. 181 00:12:38,940 --> 00:12:42,450 But we are going to look at the signup flow. 182 00:12:42,450 --> 00:12:44,920 Let's go ahead and sign in. 183 00:12:44,920 --> 00:12:49,920 I can sign in with Instagram or Facebook. Hmm. 184 00:12:49,920 --> 00:12:53,620 I think I'm going to sign in with Facebook. 185 00:12:53,620 --> 00:13:00,330 All right. "PicDigest will receive the following info: your public profile, friends list, email address and photos." 186 00:13:00,330 --> 00:13:02,710 Okay. That's fine with me. 187 00:13:02,710 --> 00:13:07,330 And it looks like Facebook is doing some authentication here. 188 00:13:07,330 --> 00:13:09,490 We're almost there. 189 00:13:09,490 --> 00:13:12,110 "Add someone to get your photos." Okay. 190 00:13:12,110 --> 00:13:23,320 I'm just going to add myself and I'm going to add my best bud, Jason, 191 00:13:23,320 --> 00:13:25,560 and I'm going to add these recipients. 192 00:13:25,560 --> 00:13:29,730 So now Jason is going to get a daily digest of all of my Facebook photos. 193 00:13:29,730 --> 00:13:33,030 I'm sure he'll be very happy to see that in his inbox. 194 00:13:33,030 --> 00:13:35,310 All right. So what happens next? 195 00:13:35,310 --> 00:13:40,390 "From now on, nick@teamtreehouse.com and 1 other person will receive an email each morning 196 00:13:40,390 --> 00:13:42,500 with the photos you post to Facebook." 197 00:13:42,500 --> 00:13:50,710 Aha! Here's the upgrade. "Upgrade for $2 a month at any time during the 30-day free trial to keep the photos flowing." 198 00:13:50,710 --> 00:13:56,120 That's a pretty modest price. That's not too bad if you just want to keep sending these emails. 199 00:13:56,120 --> 00:13:58,930 I think that's a fair price for what it does. 200 00:13:58,930 --> 00:14:02,430 And then you can be social. You can follow PicDigest on Twitter. 201 00:14:02,430 --> 00:14:06,780 You can read the PicDigest blog. Continue to your profile. Okay. 202 00:14:06,780 --> 00:14:11,050 Just judging the signup flow here, I think the Continue to your profile 203 00:14:11,050 --> 00:14:12,620 should be a little bit more prominent. 204 00:14:12,620 --> 00:14:15,920 But that's okay. That's not too bad. 205 00:14:15,920 --> 00:14:22,190 Here's all of my personal information. I can upgrade, I can cancel. 206 00:14:22,190 --> 00:14:27,230 I actually don't want Jason to get all of my Facebook photos. 207 00:14:27,230 --> 00:14:31,630 He can see them all already anyway, so I'm going to cancel this account 208 00:14:31,630 --> 00:14:33,880 and see how easy it is to cancel. 209 00:14:33,880 --> 00:14:37,100 Wow! Hey, look at that. That was super simple. 210 00:14:37,100 --> 00:14:42,140 It's usually much more difficult to cancel stuff online. 211 00:14:42,140 --> 00:14:46,040 So that's really, really good that you can just do it in one click. I really like that. 212 00:14:46,040 --> 00:14:50,200 Signup flow looks great to me. 213 00:14:50,200 --> 00:14:53,640 I honestly don't have a whole lot to say about this app. 214 00:14:53,640 --> 00:14:55,930 I think it's pretty good. 215 00:14:55,930 --> 00:14:59,040 Let's look at some of the front-end code here. 216 00:14:59,040 --> 00:15:05,100 I'm going to hit Command-Alt-U on my Mac to view the source. 217 00:15:05,100 --> 00:15:12,710 You of course can go to View, Developer, View Source in Google Chrome. 218 00:15:12,710 --> 00:15:20,370 Just looking at the front-end code, it looks like they're probably using HTML5 Boilerplate here 219 00:15:20,370 --> 00:15:25,900 just judging by some of the classes and meta tags that we're seeing there. 220 00:15:25,900 --> 00:15:31,620 Actually, one way to check if they're using Boilerplate is to highlight and see if it comes up in pink text. 221 00:15:31,620 --> 00:15:33,970 It doesn't look like they're doing that, though. 222 00:15:33,970 --> 00:15:36,590 Maybe they changed the highlight color. 223 00:15:36,590 --> 00:15:43,460 But I don't know. I mean, I'm just scrolling through the code pretty quickly here. 224 00:15:43,460 --> 00:15:48,850 It looks like we've got a header element. 225 00:15:50,290 --> 00:15:55,950 I think this code is pretty difficult to read just because it's not indented properly. 226 00:15:55,950 --> 00:16:00,210 So that might be the first suggestion here. 227 00:16:00,210 --> 00:16:04,770 It's actually kind of hard to see what code is here without properly indenting it. 228 00:16:04,770 --> 00:16:07,790 I don't think I'm going to dig into the front-end code 229 00:16:07,790 --> 00:16:10,790 because we do need to move on here. 230 00:16:10,790 --> 00:16:13,070 But I think PicDigest is cool. 231 00:16:13,070 --> 00:16:17,650 If I had to give any suggestions for features, 232 00:16:17,650 --> 00:16:23,280 I might just say maybe consider including other social networks. 233 00:16:23,280 --> 00:16:28,500 Facebook and Instagram are cool, but maybe include something like Flickr. 234 00:16:28,500 --> 00:16:32,210 I know a lot of people that post a lot of photos there 235 00:16:32,210 --> 00:16:35,170 and just other social networks. I don't know. I think it's pretty good. 236 00:16:35,170 --> 00:16:37,450 I actually don't have a whole lot to say. 237 00:16:37,450 --> 00:16:39,110 So let's move on. 238 00:16:39,110 --> 00:16:42,540 This website is from—oh, man, I'm going to say this name wrong. 239 00:16:42,540 --> 00:16:47,260 I think it's Khemraj. 240 00:16:47,260 --> 00:16:55,690 He says, "Hi Nick, can you be kind enough to review my website and the link for the website is right here. Thanks." 241 00:16:55,690 --> 00:16:57,070 All right. Let's check it out. 242 00:16:57,070 --> 00:17:00,550 Ooh, one thing I did not do on PicDigest. Is it responsive? 243 00:17:00,550 --> 00:17:04,119 Oh, oh no. Oh, there it is. 244 00:17:04,119 --> 00:17:07,240 So actually, I do have a suggestion for PicDigest. 245 00:17:07,240 --> 00:17:12,349 You should probably include a few more breakpoints in your media queries there 246 00:17:12,349 --> 00:17:15,210 because it looks like right now there's only one breakpoint. Okay. 247 00:17:15,210 --> 00:17:18,210 Sorry. I will try to remember to do that. 248 00:17:18,210 --> 00:17:21,210 Let's do that to start out here. 249 00:17:21,210 --> 00:17:25,030 It looks like this website is actually quite responsive. 250 00:17:25,030 --> 00:17:33,580 That's pretty nice. It looks like the navigation here turns into, once again, that little 3-bar line. 251 00:17:33,580 --> 00:17:37,920 I don't know how the whole world picked up on that, but everyone is using it. 252 00:17:37,920 --> 00:17:45,550 This text kind of condenses. It removes a photo here that might not look too good on mobile devices. 253 00:17:45,550 --> 00:17:48,610 So that's nice. 254 00:17:48,610 --> 00:17:55,100 The first thing I'm seeing here is this text against this full screen photo. 255 00:17:55,100 --> 00:18:02,880 I'm on a Retina MacBook Pro, which is not uncommon but it's also not common at the same time. 256 00:18:02,880 --> 00:18:06,250 Actually, that's a terrible sentence. 257 00:18:06,250 --> 00:18:09,790 What I'm trying to say is there are some people using Retina devices, 258 00:18:09,790 --> 00:18:12,890 but it's not too common yet. 259 00:18:12,890 --> 00:18:20,110 I think eventually, though, really every device will have a high-resolution display. 260 00:18:20,110 --> 00:18:26,780 So it's probably a good idea to update this photo with a higher resolution version, 261 00:18:26,780 --> 00:18:32,560 which could be a little bit difficult to do because it is a full screen photo. 262 00:18:32,560 --> 00:18:37,220 When you have an edge-to-edge photo like that, it might be a little bit hard 263 00:18:37,220 --> 00:18:42,220 to put one that's even larger at 2x resolution because you want to save bandwidth. 264 00:18:42,220 --> 00:18:48,520 One trick that you can do with those really large photos is that you can put them at a high resolution 265 00:18:48,520 --> 00:18:51,850 but get away with a ton of compression on them. 266 00:18:51,850 --> 00:18:54,700 So if you're exporting this from Photoshop or something, 267 00:18:54,700 --> 00:18:58,650 you can actually put 20% or 30% compression on it, 268 00:18:58,650 --> 00:19:05,790 which is actually quite high, rather than exporting it at 80% to 100% or something. 269 00:19:05,790 --> 00:19:09,180 You can put tons of compression on these high-resolution images 270 00:19:09,180 --> 00:19:13,060 because when they get shrunk down you actually can't see that they're highly compressed, 271 00:19:13,060 --> 00:19:17,030 and the net result is images that are much, much smaller. 272 00:19:17,030 --> 00:19:23,230 I actually have a photo on my website that's pretty high res and it's highly compressed, 273 00:19:23,230 --> 00:19:26,460 but you can't tell. It looks really sharp on Retina displays. 274 00:19:26,460 --> 00:19:28,890 So a little tip there. 275 00:19:28,890 --> 00:19:33,650 I think the text here is kind of difficult to read against this photo. 276 00:19:33,650 --> 00:19:39,700 I'm not really sure how it could be fixed for this particular photo 277 00:19:39,700 --> 00:19:44,610 because there's all sorts of different levels of contrast here. 278 00:19:44,610 --> 00:19:51,710 There's bright areas, there's a few middle grays here, but there's not any dark areas, 279 00:19:51,710 --> 00:19:58,770 and I think you would really need a dark area of the photo to put this white text against 280 00:19:58,770 --> 00:20:03,780 or a really bright area of the photo to put black text against. 281 00:20:03,780 --> 00:20:14,100 I'm going to take a chance here and open up Automatic.com— 282 00:20:14,100 --> 00:20:17,370 there we go—because I think they do this really well. 283 00:20:17,370 --> 00:20:24,380 They have these nice full screen photos, but you can see they have this white text against a fairly dark background. 284 00:20:24,380 --> 00:20:28,640 It's not super dark but it's dark enough that this white text shows up. 285 00:20:28,640 --> 00:20:31,180 They do this—yeah. 286 00:20:31,180 --> 00:20:35,620 This is a super dark background, and it actually works really well there. 287 00:20:35,620 --> 00:20:39,550 But the product itself is highlighted quite nicely. 288 00:20:39,550 --> 00:20:41,660 So something to think about there. 289 00:20:41,660 --> 00:20:44,920 I don't want to spend too much more time talking about that. 290 00:20:44,920 --> 00:20:48,870 When I scroll down here, it looks like there's some parallax scrolling. 291 00:20:48,870 --> 00:20:56,750 I think this particular implementation of parallaxing is kind of strange 292 00:20:56,750 --> 00:21:02,380 just because, gosh, it's hard to even describe what is going on here. 293 00:21:02,380 --> 00:21:08,980 So when I scroll down, the photo stays in place 294 00:21:08,980 --> 00:21:13,360 but other stuff comes up on top of it 295 00:21:13,360 --> 00:21:17,200 and then the text kind of fades behind. 296 00:21:17,200 --> 00:21:22,250 I think it would actually be better maybe if that text was just fixed, 297 00:21:22,250 --> 00:21:25,030 kind of like the rest of the site here. 298 00:21:25,030 --> 00:21:28,400 Let's take another chance and open up the inspector. 299 00:21:28,400 --> 00:21:36,810 Let's see if we can change the positioning on this. 300 00:21:36,810 --> 00:21:41,940 There's the banner, and it has— 301 00:21:41,940 --> 00:21:46,960 Does that have the background on it? Whoa, there's a lot of containers here. 302 00:21:48,260 --> 00:21:51,080 Yeah, I can't quite tell what's going on here, 303 00:21:51,080 --> 00:21:54,080 so we're not going to try to change the positioning there. 304 00:21:54,080 --> 00:21:57,960 But I would just try to make it fixed like the rest of the page here 305 00:21:57,960 --> 00:22:00,370 because it's kind of strange fading behind there. 306 00:22:00,370 --> 00:22:01,940 So then we scroll down. 307 00:22:01,940 --> 00:22:06,060 Remember this is a portfolio site, so we get to Recent Work. 308 00:22:06,060 --> 00:22:10,780 It looks like there's a news site that got put together here. 309 00:22:10,780 --> 00:22:16,440 I actually like this because even though it looks like it's the only item in this portfolio, 310 00:22:16,440 --> 00:22:18,470 let me click on Portfolio and see what happens here. 311 00:22:18,470 --> 00:22:20,390 Oh! No, it's not. Interesting. 312 00:22:20,390 --> 00:22:23,230 So there actually are different pages here. 313 00:22:23,230 --> 00:22:27,000 I kind of assumed that these would just actually scroll down. 314 00:22:27,000 --> 00:22:33,550 But I like this because it just shows one piece of work. 315 00:22:33,550 --> 00:22:42,020 It's really easy to look at and you're not distracted by tons and tons of tiny thumbnails of portfolio pieces. 316 00:22:42,020 --> 00:22:45,970 The portfolio is kind of small, though, so there's not a whole lot of benefit 317 00:22:45,970 --> 00:22:47,970 of actually clicking through to Portfolio. 318 00:22:47,970 --> 00:22:52,640 So it might not be a bad idea to just have these 2 pieces right there on the homepage 319 00:22:52,640 --> 00:22:55,370 and just roll it into a single page. 320 00:22:55,370 --> 00:22:57,320 Something to think about there. 321 00:22:57,320 --> 00:23:02,550 Of course he is displaying all of his Treehouse badges here, so that's pretty awesome. 322 00:23:02,550 --> 00:23:06,540 Again, you can go to TeamTreehouse.com/live 323 00:23:06,540 --> 00:23:10,910 if you'd like to sign up for Treehouse and start earning badges. 324 00:23:10,910 --> 00:23:14,280 And then down here we have some social links. 325 00:23:14,280 --> 00:23:16,280 This is interesting. 326 00:23:16,280 --> 00:23:23,230 I think the white color here looks pretty nice against the green background. It stands out well. 327 00:23:23,230 --> 00:23:30,710 But when I hover over, I would really expect those to just change into a slightly different color, 328 00:23:30,710 --> 00:23:34,790 maybe kind of a gray tone or something against this green 329 00:23:34,790 --> 00:23:37,430 or maybe a darker green. 330 00:23:37,430 --> 00:23:41,750 Right now they are changing into a completely different outline. 331 00:23:41,750 --> 00:23:46,410 Well, actually only the Twitter icon is changing to a different outline. 332 00:23:46,410 --> 00:23:53,570 The colors are really difficult to see against this green, so that might be something to change there. 333 00:23:53,570 --> 00:23:56,750 And here we have red and green right up against one another. 334 00:23:56,750 --> 00:23:58,680 Those are complementary colors, 335 00:23:58,680 --> 00:24:03,620 but when you put 2 complements together, they do tend to look pretty harsh. 336 00:24:03,620 --> 00:24:07,640 They can vibrate along harder edges there. 337 00:24:07,640 --> 00:24:10,930 So I'd probably change that. 338 00:24:10,930 --> 00:24:14,040 But other than that, it looks pretty good. 339 00:24:14,040 --> 00:24:16,050 It looks like a portfolio website to me. 340 00:24:16,050 --> 00:24:20,240 I like that the recent work is right up front. So good job on that one. 341 00:24:20,240 --> 00:24:28,780 All right. Let's move on. Here's another name that I'm probably not going to pronounce right, so I apologize. 342 00:24:28,780 --> 00:24:33,700 I think it's Syrmatenia. 343 00:24:33,700 --> 00:24:37,760 They have sent in a link here to their website. 344 00:24:37,760 --> 00:24:40,400 They say that they are a web and graphic designer. 345 00:24:40,400 --> 00:24:43,330 So it looks like this is a portfolio website once again. 346 00:24:43,330 --> 00:24:45,990 Here is the Portfolio link. 347 00:24:45,990 --> 00:24:52,140 They say, "Hello, I am Syrmatenia a junior web and graphic designer from Greece." 348 00:24:52,140 --> 00:24:58,240 "I come from Thessaloniki city and I am currently looking for a job." 349 00:24:58,240 --> 00:25:00,950 And you can view their portfolio. That's nice. 350 00:25:00,950 --> 00:25:03,820 Here's some selected projects from their portfolio. 351 00:25:03,820 --> 00:25:06,070 Again, I like that the work is just right up front. 352 00:25:06,070 --> 00:25:08,490 It's really easy to check it out. 353 00:25:08,490 --> 00:25:12,540 And then we have some skills listed out. 354 00:25:12,540 --> 00:25:14,280 This is kind of what I was talking about earlier. 355 00:25:14,280 --> 00:25:21,900 I like that the skills are just listed in a list here rather than having those bars filling in 356 00:25:21,900 --> 00:25:25,800 and kind of showing the level of skill in each one. 357 00:25:25,800 --> 00:25:31,150 I just assume that, well, this person is probably better at PHP 358 00:25:31,150 --> 00:25:37,130 than they are at Flash, although they do say, "Basic Knowledge," so maybe not. I'm not sure. 359 00:25:37,130 --> 00:25:41,210 But that's nice. 360 00:25:41,210 --> 00:25:44,130 Down here we have a little menu, some social media links, 361 00:25:44,130 --> 00:25:47,490 and here again, just like I was talking about on the previous site, 362 00:25:47,490 --> 00:25:52,410 just changing the color slightly is actually what you'd probably want to do there, 363 00:25:52,410 --> 00:25:56,140 not actually changing the color and the outline entirely. 364 00:25:56,140 --> 00:25:57,860 So that's really nice. 365 00:25:57,860 --> 00:26:02,110 We can go back to the top there, and let's take a look at some of these pages. 366 00:26:02,110 --> 00:26:04,930 I'm going to go to About Me. 367 00:26:04,930 --> 00:26:07,960 That's a lovely About Me page. 368 00:26:07,960 --> 00:26:12,290 "You are on the right page if you want to learn more information about me." 369 00:26:12,290 --> 00:26:14,520 Hey! That's great. 370 00:26:14,520 --> 00:26:17,260 One thing I didn't mention on one of the previous websites— 371 00:26:17,260 --> 00:26:20,800 actually, I think it was PicDigest—and I'm noticing it here as well, 372 00:26:20,800 --> 00:26:27,090 you want to pay attention to the line breaks in your typography. 373 00:26:27,090 --> 00:26:30,620 We just have one word here breaking down to the next line. 374 00:26:30,620 --> 00:26:34,980 Just by adjusting the font size or even adjusting the copy 375 00:26:34,980 --> 00:26:39,430 you could have that on one line and it would look probably a lot cleaner. 376 00:26:39,430 --> 00:26:43,210 So I'm going to hack this in the inspector, 377 00:26:43,210 --> 00:26:49,450 and I'm just going to change the copy here so you can see what I'm talking about. 378 00:26:51,930 --> 00:26:58,670 I'm going to say, "Hi, here's where you can learn more about me!" 379 00:26:58,670 --> 00:27:06,270 All right. So we've changed that and now we don't have that word breaking down to the next line. 380 00:27:06,270 --> 00:27:08,960 That looks a little bit nicer. 381 00:27:08,960 --> 00:27:15,360 She lists out her education, professional experience, distinctions, and hobbies. 382 00:27:15,360 --> 00:27:18,170 That's cool. 383 00:27:18,170 --> 00:27:21,050 Let's go ahead and jump over to the portfolio. 384 00:27:21,050 --> 00:27:25,900 It looks like there's quite a bit of portfolio work here. 385 00:27:25,900 --> 00:27:33,430 I guess I can filter by web design, graphic design, and then videos. 386 00:27:33,430 --> 00:27:37,150 That's cool. 387 00:27:37,150 --> 00:27:42,950 I think I'd try to actually limit your portfolio a little bit more 388 00:27:42,950 --> 00:27:46,510 just to a few selected pieces that you feel really strongly about. 389 00:27:46,510 --> 00:27:51,840 And I'd also try to align your portfolio with your expertise. 390 00:27:51,840 --> 00:27:58,000 It doesn't really look like you're offering any kind of video services here, 391 00:27:58,000 --> 00:28:00,550 at least that I can see, 392 00:28:00,550 --> 00:28:05,760 so I think it is a little bit strange to be including video work in your portfolio. 393 00:28:05,760 --> 00:28:07,900 I guess it does say just, "For Fun" there, 394 00:28:07,900 --> 00:28:12,270 but it doesn't really belong in a portfolio. 395 00:28:12,270 --> 00:28:15,930 You can definitely put that on your YouTube account or something like that, 396 00:28:15,930 --> 00:28:17,860 which is linked right here. Hey, look at that. 397 00:28:17,860 --> 00:28:22,290 So overall, I think it looks pretty decent. 398 00:28:22,290 --> 00:28:26,640 I think the typography is actually a little bit large here, 399 00:28:26,640 --> 00:28:30,770 particularly in the navigation and in some of the headers. 400 00:28:30,770 --> 00:28:32,650 I would try to tone that down a little bit. 401 00:28:32,650 --> 00:28:36,640 I would also try to adjust the contrast of some of the typography 402 00:28:36,640 --> 00:28:42,460 just to highlight things a little bit more clearly. 403 00:28:42,460 --> 00:28:48,510 Maybe Skills & Expertise here or this listing of skills 404 00:28:48,510 --> 00:28:54,290 could actually use maybe a slightly different color gray rather than just using pure black for everything. 405 00:28:54,290 --> 00:29:02,780 If we change the size of this, it looks like it is indeed responsive, so good job there. 406 00:29:02,780 --> 00:29:08,810 It looks like everybody knew that I was going to be checking for that on every website, so that's good. 407 00:29:08,810 --> 00:29:11,970 Overall, it looks pretty nice. 408 00:29:11,970 --> 00:29:17,270 Let's move on to Rafael. 409 00:29:17,270 --> 00:29:23,190 It is currently 12:30 Eastern Standard Time, and we've gone through exactly half. 410 00:29:23,190 --> 00:29:26,340 Look at that. Wow! We are perfectly on schedule. 411 00:29:26,340 --> 00:29:34,580 Rafael says, "It's Rafael. I have won a 2-year scholarship with you guys—" Oh, that's wonderful! 412 00:29:34,580 --> 00:29:36,590 I am glad to hear you're using Treehouse. 413 00:29:36,590 --> 00:29:40,850 "—and I am now building my own startup." Wow! That's really cool. 414 00:29:40,850 --> 00:29:45,990 "I almost finished the front-end development and I would really like to see how Nick is going to review it." 415 00:29:45,990 --> 00:29:51,160 "You can check the project at the demo URL," here. 416 00:29:51,160 --> 00:29:58,110 "The project name is 'El Fostan' and it's the Arabic word for 'The Dress.'" 417 00:29:58,110 --> 00:30:03,140 "It is an Egyptian dress search engine." Wow! That is super specific. 418 00:30:03,140 --> 00:30:09,820 I can't think of an English dress search engine. It's cool that there is one for the Egyptian market, though. 419 00:30:09,820 --> 00:30:16,120 This website is in Arabic, and it just so happens that I actually don't speak Arabic, 420 00:30:16,120 --> 00:30:18,920 so I am going to try translating this. 421 00:30:18,920 --> 00:30:21,690 Actually, I'm not going to click that button just yet 422 00:30:21,690 --> 00:30:32,020 because one really cool way that you can look at a design is by not having the text in your native language. 423 00:30:32,020 --> 00:30:35,110 So that's why designers may sometimes use Lorem Ipsum text 424 00:30:35,110 --> 00:30:37,750 so you can pay a little bit more attention to the design. 425 00:30:37,750 --> 00:30:39,500 But this will actually do the same thing. 426 00:30:39,500 --> 00:30:42,310 I can just look at the design without having to read the text 427 00:30:42,310 --> 00:30:48,340 and just judge it purely on the shapes and composition and colors here. 428 00:30:48,340 --> 00:30:53,400 First impression is that this header is a little bit too large. 429 00:30:53,400 --> 00:30:57,300 I'd actually like to see the website start kind of like here 430 00:30:57,300 --> 00:31:00,380 because this looks like top-level navigation here. 431 00:31:00,380 --> 00:31:03,590 It looks like there's some sort of description about the website. 432 00:31:03,590 --> 00:31:09,200 And then I assume this is where you would actually start the search for your dresses. 433 00:31:09,200 --> 00:31:12,270 That looks pretty nice. 434 00:31:12,270 --> 00:31:17,050 I like the full screen photo here. It looks pretty nice on my Retina display. 435 00:31:17,050 --> 00:31:20,620 I'm just going to increase the brightness here so I can see this a little bit better. 436 00:31:20,620 --> 00:31:26,290 This photo looks fairly sharp on this display. 437 00:31:26,290 --> 00:31:29,690 And I do like that the dark background is here. 438 00:31:29,690 --> 00:31:32,950 That helps the white text to stand out. 439 00:31:32,950 --> 00:31:43,100 There is a little bit of a white background down here that's not contrasting well with this white text, 440 00:31:43,100 --> 00:31:50,000 so I wonder if we can move this photo down just a little bit to get more of that dark in there. 441 00:31:50,000 --> 00:31:51,800 But still, it looks pretty good. 442 00:31:51,800 --> 00:31:57,580 There's a drop shadow on it, which I assume is using the text-shadow property. 443 00:31:57,580 --> 00:32:01,970 Let's go ahead and see if it is. 444 00:32:01,970 --> 00:32:10,650 And maybe I have to go deeper or higher up. 445 00:32:10,650 --> 00:32:14,500 Huh. I can't quite tell. 446 00:32:14,500 --> 00:32:18,720 But yeah, it looks like it's using text-shadow. So that's cool. 447 00:32:18,720 --> 00:32:21,750 Let's scroll down a little bit more here. 448 00:32:21,750 --> 00:32:28,640 I assume this is where you would actually look at maybe popular dresses or something. 449 00:32:28,640 --> 00:32:33,040 Again, I don't speak Arabic. I'm not sure what these numbers are supposed to be. 450 00:32:33,040 --> 00:32:36,650 Maybe that's a price or maybe that's how many likes this has gotten, 451 00:32:36,650 --> 00:32:42,730 although there are some social stats down there, so maybe not. I'm not sure. 452 00:32:42,730 --> 00:32:45,350 We'll translate it in just a second and look. 453 00:32:45,350 --> 00:32:50,080 But yeah, overall, this site looks pretty nice. 454 00:32:50,080 --> 00:32:54,360 It looks like it's still under construction here and kind of missing a couple of assets. 455 00:32:54,360 --> 00:32:58,260 Down here there's a site map, and then you can click to go back to the top. 456 00:32:58,260 --> 00:33:02,870 I'm going to try resizing this to see if it responds, 457 00:33:02,870 --> 00:33:05,330 and it doesn't look like it does. 458 00:33:05,330 --> 00:33:11,540 So that would be another suggestion is to make sure that this website is responsive 459 00:33:11,540 --> 00:33:17,200 because people are browsing the Web on mobile devices more than ever— 460 00:33:17,200 --> 00:33:21,130 in fact, even more so than they do on desktops. 461 00:33:21,130 --> 00:33:22,890 So that's important. 462 00:33:22,890 --> 00:33:30,460 Let's translate this, and we're going to see how well Google is able to translate Arabic to English. 463 00:33:30,460 --> 00:33:37,480 It looks like we have Accessories, hand. So far, not too great. 464 00:33:37,480 --> 00:33:43,840 Not the fault of the website. Probably just a bad translation from Google. 465 00:33:43,840 --> 00:33:46,160 Make Up Artist, Photographers. 466 00:33:46,160 --> 00:33:49,650 Maybe you can search for makeup artists and photographers here. 467 00:33:49,650 --> 00:33:55,040 Under Dresses we can search for wedding dresses, dresses for engagements, 468 00:33:55,040 --> 00:33:58,020 and an evening dress. 469 00:33:58,020 --> 00:34:03,910 And then okay, right. So this is the search where you can select the type of dress. 470 00:34:03,910 --> 00:34:11,010 And then, oh, I guess this is the region of Egypt, I assume, 471 00:34:11,010 --> 00:34:16,429 where you would select where you might want to pick up your dress. 472 00:34:16,429 --> 00:34:18,020 So that's cool. 473 00:34:18,020 --> 00:34:21,070 Let's just see what happens when we hit Search here. 474 00:34:21,070 --> 00:34:26,159 Google has translated this, and it looks like this is still under construction, 475 00:34:26,159 --> 00:34:30,770 so it's just using the same asset for every single dress. 476 00:34:30,770 --> 00:34:33,630 But I assume this is where the dresses would come up. 477 00:34:33,630 --> 00:34:37,110 And hey, look, those are prices. That was a good guess. 478 00:34:37,110 --> 00:34:41,870 You can buy or rent these. That's pretty cool. 479 00:34:41,870 --> 00:34:44,949 It looks like there's some filters over here on the right side. 480 00:34:44,949 --> 00:34:49,900 One thing to keep in mind is that this is an Arabic website, 481 00:34:49,900 --> 00:34:53,610 so all of the text is read from right to left, 482 00:34:53,610 --> 00:34:58,560 and that's why you're seeing the navigation over here on the right side 483 00:34:58,560 --> 00:35:01,020 and these filters over here on the right side. 484 00:35:01,020 --> 00:35:03,480 Normally that type of stuff would be over on the left, 485 00:35:03,480 --> 00:35:06,650 but for this website it makes sense. 486 00:35:06,650 --> 00:35:08,920 And then this is really interesting. 487 00:35:08,920 --> 00:35:14,490 I actually did not know this about languages that are read from right to left, 488 00:35:14,490 --> 00:35:20,930 but I guess the pagination would also be reversed for what I'm used to. 489 00:35:20,930 --> 00:35:24,110 So it goes from 1 to 6 here, 490 00:35:24,110 --> 00:35:27,310 and you can search through those. 491 00:35:27,310 --> 00:35:29,710 Pretty cool site. 492 00:35:29,710 --> 00:35:33,620 I mean, I don't have a whole lot to say. The design does look really nice. 493 00:35:33,620 --> 00:35:38,690 I can click and go back to the homepage. Can I? 494 00:35:40,740 --> 00:35:44,790 Not quite, so maybe that part is still under construction. 495 00:35:44,790 --> 00:35:48,960 Oops. Excuse me. Let's see if we can go back there. There we go. 496 00:35:49,570 --> 00:35:56,630 Again, two suggestions here would just be to make this part the top of the page. 497 00:35:56,630 --> 00:36:00,420 I think this large header is kind of unnecessary. 498 00:36:00,420 --> 00:36:06,290 And then I would also make sure that this website is responsive. 499 00:36:06,290 --> 00:36:12,350 Really cool site. I've never seen an Egyptian dress search engine until today. 500 00:36:12,350 --> 00:36:20,710 Moving on, this person's name is Samiullah. [struggles to pronounce name] I'm really sorry. 501 00:36:20,710 --> 00:36:23,940 We're just going to call him Khan because I know how to say that. 502 00:36:23,940 --> 00:36:28,820 "I'd be happy if the following two links were reviews. Thanks." 503 00:36:28,820 --> 00:36:32,860 Ooh, we get to review 2 websites from Khan. 504 00:36:32,860 --> 00:36:36,160 I'm going to look at this first one. 505 00:36:36,160 --> 00:36:46,470 This first one is called Code Engineers, and it's a joint venture of Code Engineers and Isolify. 506 00:36:46,470 --> 00:36:53,580 They are everywhere. They provide hosting services through world's top hosters. 507 00:36:53,580 --> 00:36:57,500 There's advertisements that are not here. 508 00:36:57,500 --> 00:37:03,310 Wow. I think this is a website where I can purchase hosting. 509 00:37:03,310 --> 00:37:08,790 But I guess that would be my first suggestion is to actually try to make it a little bit more clear 510 00:37:08,790 --> 00:37:12,540 as to what this website is actually for. 511 00:37:12,540 --> 00:37:15,970 Some kind of header at the top would really help that out. 512 00:37:15,970 --> 00:37:22,760 If I open up the dress search engine again, you can see that there's nice clear text here up at the top 513 00:37:22,760 --> 00:37:28,110 that if I spoke Arabic I assume would describe what this site is about. 514 00:37:28,110 --> 00:37:31,470 We've seen that in a couple of other websites that we've reviewed already. 515 00:37:31,470 --> 00:37:41,830 So some sort of text that just really says in very plain language what this site does would be super helpful. 516 00:37:41,830 --> 00:37:45,980 For example, here it says, "We Provide Powerful Business Solutions." 517 00:37:45,980 --> 00:37:50,490 I don't know what that means. There's lots of things that businesses need. 518 00:37:50,490 --> 00:37:57,220 I think the design here actually looks kind of dated. 519 00:37:57,220 --> 00:38:02,170 This patterned background is a little bit harsh, 520 00:38:02,170 --> 00:38:05,910 and then I don't really like the colors here. 521 00:38:05,910 --> 00:38:10,510 I feel like it could be a little bit more of a pleasing color palette. 522 00:38:10,510 --> 00:38:14,920 I guess it's good that the contact information is up at the top here. 523 00:38:14,920 --> 00:38:21,070 That's good because it is often difficult to find the contact information on some websites, believe it or not. 524 00:38:21,070 --> 00:38:30,560 Overall, yeah, I would maybe try to rethink this website with a framework like Bootstrap 525 00:38:30,560 --> 00:38:39,250 because when you use a framework, it's really easy not only to get started right away and code up things really fast 526 00:38:39,250 --> 00:38:44,190 and do them well in a kind of battle-tested environment, 527 00:38:44,190 --> 00:38:48,370 but it also helps you with design because all of the margins and padding 528 00:38:48,370 --> 00:38:53,350 and colors and everything is kind of already done for you 529 00:38:53,350 --> 00:38:59,180 and you can just tweak that and build on top of it and customize it for your own needs. 530 00:38:59,180 --> 00:39:04,140 That's good because if you don't have a whole lot of experience creating designs, 531 00:39:04,140 --> 00:39:11,560 it can help keep you within certain constraints, which is a good thing and can help you learn. 532 00:39:11,560 --> 00:39:14,560 Let's look at this next website here. 533 00:39:14,560 --> 00:39:19,370 This is called Gurus of IT at GurusOfIT.com. 534 00:39:19,370 --> 00:39:23,900 They have affordable solutions, and they're gurus of information technology. Look at that. 535 00:39:23,900 --> 00:39:27,940 "We design astonishing websites." Okay. 536 00:39:27,940 --> 00:39:35,120 This is a little bit better because it actually says what they do. 537 00:39:35,120 --> 00:39:41,360 I guess this is some sort of web design agency. 538 00:39:41,360 --> 00:39:47,980 Here they list their services: Domain Registration, Web Hosting, Website Designing, 539 00:39:47,980 --> 00:39:52,730 and Internet Marketing using SEO. 540 00:39:52,730 --> 00:39:58,740 I think the biggest problem with this website is that it's very cluttered. 541 00:39:58,740 --> 00:40:04,400 There's just a lot of stuff on the page, and there's not a whole lot of space in between each element. 542 00:40:04,400 --> 00:40:10,510 If everything were spaced out a little bit more, it might be a little bit easier to parse 543 00:40:10,510 --> 00:40:14,720 and quickly scan the website to understand what it's about, 544 00:40:14,720 --> 00:40:16,370 because immediately I looked up here. 545 00:40:16,370 --> 00:40:20,680 I didn't even see this until later on, "We design astonishing websites." 546 00:40:20,680 --> 00:40:25,440 I also think these animations play way too fast. 547 00:40:25,440 --> 00:40:31,880 I would like a little bit more time to see what each one of these websites looks like 548 00:40:31,880 --> 00:40:36,900 and then maybe give a little bit of time for them to scroll smoothly, 549 00:40:36,900 --> 00:40:40,100 maybe use some sort of carousel here. 550 00:40:40,100 --> 00:40:43,910 In fact, I'm just going to go ahead and open up Bootstrap here. 551 00:40:43,910 --> 00:40:46,040 Let's see. GetBootstrap.com. 552 00:40:46,040 --> 00:40:53,660 I think they have a carousel component which would actually be perfect for this particular situation. 553 00:40:53,660 --> 00:40:57,090 Can I not scroll here? Whoa, what's going on? 554 00:40:57,090 --> 00:41:02,370 I'm just going to try to search for carousel. That's not working. 555 00:41:02,370 --> 00:41:04,550 Maybe it's under JavaScript. 556 00:41:04,550 --> 00:41:07,590 Yeah, there it is, Carousel. 557 00:41:07,590 --> 00:41:10,770 They actually already have this carousel built. 558 00:41:10,770 --> 00:41:15,570 Again, if you use Bootstrap, you can take advantage of all of the nice spacing 559 00:41:15,570 --> 00:41:17,770 and colors that they already have set up. 560 00:41:17,770 --> 00:41:19,850 And they have these really great components, 561 00:41:19,850 --> 00:41:25,180 so you could put this super nice carousel in place of this, 562 00:41:25,180 --> 00:41:28,080 which I think would look a lot nicer. 563 00:41:28,080 --> 00:41:30,410 Let's check the responsiveness. No. 564 00:41:30,410 --> 00:41:37,880 Again, if you're going to be creating websites, you've got to make them work for mobile devices. 565 00:41:37,880 --> 00:41:40,890 Let's move on. 566 00:41:40,890 --> 00:41:43,990 It looks like we're about 75% of the way through, 567 00:41:43,990 --> 00:41:49,160 and it's 12:43, so we're doing pretty well on time here. 568 00:41:49,160 --> 00:41:52,220 I'm going to open up this one from Duncan. 569 00:41:52,220 --> 00:41:58,360 Duncan says, "Please could you review my latest project on your Treehouse Reviews Livestream." 570 00:41:58,360 --> 00:42:00,630 Hey, you're in luck. We're going to do it. 571 00:42:00,630 --> 00:42:07,680 It says, "It's a rebrand and new website for rock band The Thinking Men." 572 00:42:07,680 --> 00:42:12,790 It looks like we have a website here for a rock band called The Thinking Men. 573 00:42:12,790 --> 00:42:15,270 They've got a nice big YouTube video here. 574 00:42:15,270 --> 00:42:19,820 Just go ahead and click it. I don't think we're going to get audio here, but that's okay. 575 00:42:19,820 --> 00:42:26,170 It looks like the player controls aren't present, but that's all right. 576 00:42:26,170 --> 00:42:32,910 There's a nice video there. I can get an idea of what the band is all about. That's pretty cool. 577 00:42:32,910 --> 00:42:36,530 If I scroll down I can see the latest news about the band. 578 00:42:36,530 --> 00:42:42,930 One thing I'm noticing right away here is that this typography is just a little bit too tall and skinny 579 00:42:42,930 --> 00:42:47,090 and the letters are spaced too close together. 580 00:42:47,090 --> 00:42:49,580 So I would try to adjust that a little bit. 581 00:42:49,580 --> 00:42:54,360 This typography is very readable, so that looks good. 582 00:42:54,360 --> 00:43:00,660 But it's kind of difficult to see exactly what each one of these are saying. 583 00:43:00,660 --> 00:43:07,450 I have to put in a little bit of work to read each word, which kind of slows down the scannability of the site. 584 00:43:07,450 --> 00:43:09,350 Same thing for the header here. 585 00:43:09,350 --> 00:43:15,350 I think this font is just a little bit too tall and too bold and the letters are too close together. 586 00:43:15,350 --> 00:43:18,530 It feels a little bit cramped. 587 00:43:18,530 --> 00:43:22,710 But overall, so far, so good. It looks pretty nice. 588 00:43:22,710 --> 00:43:26,340 I think that's my only piece of criticism so far. 589 00:43:26,340 --> 00:43:30,580 Let's see. Forthcoming Shows, gig dates coming soon. 590 00:43:30,580 --> 00:43:32,990 So I guess they don't have any upcoming shows. 591 00:43:32,990 --> 00:43:38,760 And hey, look, they have embedded some audio clips here from SoundCloud. 592 00:43:38,760 --> 00:43:43,160 SoundCloud is a place where you can upload audio samples. 593 00:43:43,160 --> 00:43:49,120 It's kind of like the YouTube of audio, I guess, without video is one way to describe it. 594 00:43:49,120 --> 00:43:54,920 We can play these and hear some music from this band. So that's cool. 595 00:43:54,920 --> 00:43:59,700 Then you can buy their music, you can buy tickets to their shows, 596 00:43:59,700 --> 00:44:01,900 and you can also buy merchandise. 597 00:44:01,900 --> 00:44:09,270 I think this is great. I think this is really all that I would want out of a band website. 598 00:44:09,270 --> 00:44:15,270 If I don't know anything about the band, it's cool to see this music video right up front, 599 00:44:15,270 --> 00:44:20,150 and then I can just scroll down and pretty quickly listen to some more of their music. 600 00:44:20,150 --> 00:44:25,860 And if I really, really like this band I can scroll down even further and purchase. 601 00:44:25,860 --> 00:44:33,720 That's cool that I get a sample up front before I actually have to commit to buying anything. 602 00:44:33,720 --> 00:44:37,530 I think the order of elements is good here. 603 00:44:37,530 --> 00:44:40,000 Let's check the responsiveness. Oh, man. 604 00:44:40,000 --> 00:44:44,140 I actually did not think this website was going to be responsive for some reason, 605 00:44:44,140 --> 00:44:50,100 but I was incorrect. It is responsive and it responds quite well. 606 00:44:50,100 --> 00:44:55,910 Usually when you have embedded elements like this, like these clips from SoundCloud, 607 00:44:55,910 --> 00:44:59,660 they don't always respond very well. 608 00:44:59,660 --> 00:45:03,770 I'm not really sure specifically if SoundCloud has this built in or if they did it themselves, 609 00:45:03,770 --> 00:45:05,700 but yeah, good job. 610 00:45:05,700 --> 00:45:10,390 It looks like a really great responsive website that is well suited to scrolling 611 00:45:10,390 --> 00:45:14,470 on a mobile device in portrait view. 612 00:45:14,470 --> 00:45:18,590 I'm just going to click around to a couple of other pages here. 613 00:45:18,590 --> 00:45:23,500 It looks like a website to me. 614 00:45:23,500 --> 00:45:28,730 I like these full screen photos to give me more of a sense of the band. 615 00:45:28,730 --> 00:45:32,900 When I click on About, I can see all the different people that are in the band. 616 00:45:32,900 --> 00:45:36,730 Again, this typography isn't very readable. 617 00:45:36,730 --> 00:45:39,170 I'd pick a different font here. 618 00:45:39,170 --> 00:45:43,870 I understand why you would want to use a script font here 619 00:45:43,870 --> 00:45:49,580 just to give it this handwritten look, which is kind of cool, 620 00:45:49,580 --> 00:45:57,170 but I would try to go for a script font that's a little bit more readable. 621 00:45:57,170 --> 00:45:58,900 There's quite a few of them out there. 622 00:45:58,900 --> 00:46:04,320 In fact, if we go over to Google.com/fonts, 623 00:46:04,320 --> 00:46:09,210 you can find lots and lots of free web fonts. 624 00:46:09,210 --> 00:46:13,540 They're pretty good and they're really easy to include in your website. 625 00:46:13,540 --> 00:46:17,470 All you have to do is click on Quick-use here. 626 00:46:17,470 --> 00:46:19,520 There it is right there. 627 00:46:19,520 --> 00:46:23,010 You can add this style sheet to your website, 628 00:46:23,010 --> 00:46:28,930 and then you can copy and paste font-family here and use the font 629 00:46:28,930 --> 00:46:31,230 once you've included the style sheet. 630 00:46:31,230 --> 00:46:38,670 Pretty cool. I love using Google Fonts, so that might be a place to look for different pieces of typography. 631 00:46:38,670 --> 00:46:42,380 Overall, it looks really cool. 632 00:46:42,380 --> 00:46:46,580 I think the color scheme is good, I think the use of texture is actually quite nice. 633 00:46:46,580 --> 00:46:48,510 You don't see that on too many websites these days 634 00:46:48,510 --> 00:46:52,110 just because everybody is going to flat design. 635 00:46:52,110 --> 00:46:55,320 So I like to see something just a little bit different. 636 00:46:55,320 --> 00:46:59,480 Texture is actually becoming a way to distinguish yourself a little bit more. 637 00:46:59,480 --> 00:47:03,610 Let's move on. Great website, Duncan. I really like it. 638 00:47:03,610 --> 00:47:05,470 We're going to move on to Adam. 639 00:47:05,470 --> 00:47:11,810 Adam says, "I would really appreciate feedback. Learned all my coding knowledge from Treehouse." 640 00:47:11,810 --> 00:47:13,930 Oh, that is just wonderful. 641 00:47:13,930 --> 00:47:20,140 Of course if you want to sign up for Treehouse, be sure to go to TeamTreehouse.com/live 642 00:47:20,140 --> 00:47:24,180 and you can go ahead and start learning today. 643 00:47:24,180 --> 00:47:26,190 Pretty cool. 644 00:47:26,190 --> 00:47:29,860 Let's jump into Adam's website here. 645 00:47:29,860 --> 00:47:31,980 It's called Find Your Crave. 646 00:47:31,980 --> 00:47:40,020 Just by looking at the URL and the name of the site, I assume this is a site about food. 647 00:47:40,020 --> 00:47:42,570 And indeed it is. 648 00:47:42,570 --> 00:47:45,390 You've got some pictures of food here. 649 00:47:45,390 --> 00:47:48,860 I think it's to find restaurants. 650 00:47:48,860 --> 00:47:53,340 It kind of looks like it's like Yelp or something like that. 651 00:47:53,340 --> 00:47:56,140 Let's read some of the copy here and learn more about it. 652 00:47:56,140 --> 00:48:01,080 "Connect with local restaurants and the food around you on FYC." 653 00:48:01,080 --> 00:48:03,370 That's Find Your Crave. 654 00:48:03,370 --> 00:48:09,170 "People use FYC to find specials, menus, and much more to satisfy their crave." 655 00:48:09,170 --> 00:48:14,410 "FYC is your best restaurant information guide. Specials. Menus. Photos. Just for your craves." 656 00:48:14,410 --> 00:48:22,720 Okay. Right away here I think the UI is a little bit confusing. 657 00:48:22,720 --> 00:48:27,070 Whoa. Can I actually not even click this button? Okay. 658 00:48:27,070 --> 00:48:30,600 It says, "Get Started" here and this looks like a button that I can click, 659 00:48:30,600 --> 00:48:34,100 but it's actually not. It's just text there. 660 00:48:34,100 --> 00:48:39,660 So if that is supposed to be a button, it should definitely be linked. 661 00:48:39,660 --> 00:48:43,770 If it's not supposed to be a button, then it probably shouldn't look like a button. 662 00:48:43,770 --> 00:48:49,270 Up here it looks like we can choose our city. 663 00:48:49,270 --> 00:48:51,960 This looks pretty strange on a desktop. 664 00:48:51,960 --> 00:48:58,820 I assume if we size this down to a mobile size that it would look a little bit better. 665 00:48:58,820 --> 00:49:04,980 But that probably needs some cleanup on the desktop to take more advantage of this larger canvas. 666 00:49:04,980 --> 00:49:09,930 I think a good way to organize this might just be by letter 667 00:49:09,930 --> 00:49:15,750 or even just allowing me to pick in a drop-down menu right when I click on that. 668 00:49:15,750 --> 00:49:22,270 But if you scroll down here, it doesn't look like they have any places in Florida 669 00:49:22,270 --> 00:49:28,190 that I could relate to, but that's okay. Let's see. 670 00:49:28,190 --> 00:49:33,590 Have I been to any of these cities? I'm sure I've been to at least one of them. 671 00:49:33,590 --> 00:49:40,940 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. 672 00:49:40,940 --> 00:49:48,750 We have Sioux Falls here, some restaurants. 673 00:49:48,750 --> 00:49:53,750 We can click on All Places, Special Offers, Photo Gallery, or Menu Items. 674 00:49:53,750 --> 00:50:03,620 I assume if I click on All Places it will show me all of the restaurants for that particular city. 675 00:50:03,620 --> 00:50:07,730 That looks like what it's showing me. 676 00:50:07,730 --> 00:50:11,160 Then I click on Special Offers so I can get special offers for the city. 677 00:50:11,160 --> 00:50:15,710 Okay. This UI is starting to make a little bit more sense here. 678 00:50:16,710 --> 00:50:25,370 Some menu items. That's kind of a strange but interesting way to browse food in an area. 679 00:50:25,370 --> 00:50:29,880 I guess if you don't actually want to browse the restaurants necessarily 680 00:50:29,880 --> 00:50:34,930 and just kind of want to see if you can get a particular dish at any of these restaurants, 681 00:50:34,930 --> 00:50:36,570 that's kind of a neat way to browse. 682 00:50:36,570 --> 00:50:38,290 Then there's a photo gallery 683 00:50:38,290 --> 00:50:44,010 So if you just want to browse in this Pinterest look and style, that's cool. 684 00:50:44,010 --> 00:50:48,860 But again, I think the UI here is really confusing. 685 00:50:48,860 --> 00:50:54,500 When I see this text box here, I assume automatically that I should be typing in 686 00:50:54,500 --> 00:51:01,690 something like Chinese food or burgers or whatever, 687 00:51:01,690 --> 00:51:05,070 but that's actually a place where I'm supposed to type in my email address 688 00:51:05,070 --> 00:51:09,910 to get a weekly report about this city, 689 00:51:09,910 --> 00:51:14,680 whereas I'm supposed to click on these things to actually get information about the city. 690 00:51:14,680 --> 00:51:17,060 And then there's this button here again. 691 00:51:17,060 --> 00:51:19,400 So kind of strange over here. 692 00:51:19,400 --> 00:51:23,400 I almost feel like this should just be a single search box 693 00:51:23,400 --> 00:51:29,400 that's super easy for me to just say, "I want to get this kind of food," or something. 694 00:51:29,400 --> 00:51:32,970 They have some featured locations down here. That's kind of interesting. 695 00:51:32,970 --> 00:51:39,460 From a business perspective, you might be able to get restaurants to actually pay you to be featured. 696 00:51:39,460 --> 00:51:42,100 I'm wondering if that's actually already going on. 697 00:51:42,100 --> 00:51:46,590 Hey, there's Advertise down here, so yeah, I assume that's what's happening here. 698 00:51:46,590 --> 00:51:48,990 Interesting way to monetize. That's cool. 699 00:51:48,990 --> 00:51:54,410 I think the color scheme is just way too close to Yelp, though, 700 00:51:54,410 --> 00:52:00,330 because Yelp does some pretty similar things and they use red, white, and black 701 00:52:00,330 --> 00:52:02,250 just like Find Your Crave. 702 00:52:02,250 --> 00:52:07,010 So if you are going to create something that is so similar to Yelp, 703 00:52:07,010 --> 00:52:10,850 you really need to find a way to distinguish yourself, 704 00:52:10,850 --> 00:52:16,110 and one of the strongest ways to do that is with a different color scheme. 705 00:52:16,110 --> 00:52:20,060 So definitely something to think about there. 706 00:52:20,060 --> 00:52:23,850 Let's check the responsiveness here. Looks pretty decent. 707 00:52:23,850 --> 00:52:30,160 Yeah, actually, this is kind of what I would expect to see out of this particular website on a mobile view. 708 00:52:30,160 --> 00:52:33,480 That looks good. 709 00:52:33,480 --> 00:52:35,450 But overall, it's a cool idea. 710 00:52:35,450 --> 00:52:39,630 I really like the concept of being able to browse by menu items. 711 00:52:39,630 --> 00:52:44,880 So something to explore further there. 712 00:52:44,880 --> 00:52:51,260 All right. Let's move on to our very last website here from Keith. 713 00:52:51,260 --> 00:52:54,000 Wow. Keith wrote quite a lot here. 714 00:52:55,310 --> 00:53:00,500 Keith says, "This is my personal site. I'm not trying to freelance." 715 00:53:00,500 --> 00:53:05,580 "The site is intended as an online resume and blog while I look for a job in the industry." 716 00:53:05,580 --> 00:53:09,370 "I would love feedback on all aspects of the site: design (I'm no designer)—" 717 00:53:09,370 --> 00:53:12,000 Hey, that's okay. I'll give you some tips. 718 00:53:12,000 --> 00:53:15,860 "—content, responsive principles, CSS, HTML, WordPress, whatever you want to critique." 719 00:53:15,860 --> 00:53:20,670 "I added a Work Project overview of the site itself." 720 00:53:20,670 --> 00:53:26,690 "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. 721 00:53:26,690 --> 00:53:32,620 And then he says, "I haven't built any other custom WordPress themes 722 00:53:32,620 --> 00:53:35,020 so I wanted to show that I can." 723 00:53:35,020 --> 00:53:40,470 "This is a custom theme I created from the info I learned from Zac Gordon's WordPress videos." 724 00:53:40,470 --> 00:53:42,770 Hey, that's really cool. 725 00:53:42,770 --> 00:53:46,090 Again, you can check us out at TeamTreehouse.com/live. 726 00:53:46,090 --> 00:53:52,840 And when you sign up you can watch Zac's videos, where he teaches you how to make custom WordPress themes. 727 00:53:52,840 --> 00:53:54,690 I assume that's what Keith did. 728 00:53:54,690 --> 00:53:57,050 Let's go ahead and take a look at Keith's website here. 729 00:53:57,050 --> 00:54:01,580 Were there 2 separate URLs there? No. Those were the same. 730 00:54:01,580 --> 00:54:06,970 So I guess the work overview must be in here. 731 00:54:08,780 --> 00:54:11,820 Not quite sure what Keith meant by that. 732 00:54:11,820 --> 00:54:16,400 First impressions, I really like the look of this website. 733 00:54:16,400 --> 00:54:20,180 I think the navigation is a little bit huge here. 734 00:54:20,180 --> 00:54:23,650 I do like that it's large and nice and clickable, 735 00:54:23,650 --> 00:54:28,360 but it's still pretty large for a desktop display, 736 00:54:28,360 --> 00:54:32,690 and it really pushes down your name here, which, because this is your website, 737 00:54:32,690 --> 00:54:36,830 that's the most important part—to have your name right there up at the top. 738 00:54:36,830 --> 00:54:38,470 So something to think about there. 739 00:54:38,470 --> 00:54:44,280 Maybe you could actually put your name up here and then move this navigation over here to the right side 740 00:54:44,280 --> 00:54:46,730 and then have people click on it there. 741 00:54:46,730 --> 00:54:49,630 That might be a way to consolidate a couple things here. 742 00:54:49,630 --> 00:54:54,490 Keith is a husband and father, tech enthusiast, web developer and he says, 743 00:54:54,490 --> 00:54:56,300 "I'm a back-end developer." 744 00:54:56,300 --> 00:55:00,790 Keith, you should feel really good about this design because it looks pretty decent. 745 00:55:00,790 --> 00:55:06,050 It definitely looks like you have more design skills than you're giving yourself credit for. 746 00:55:06,050 --> 00:55:07,620 So good job. 747 00:55:07,620 --> 00:55:11,300 He says, "I currently use PHP with CodeIgniter or WordPress." 748 00:55:11,300 --> 00:55:17,220 "I tend to view projects from a macro perspective where I work back from the business model or goal." 749 00:55:17,220 --> 00:55:21,920 That's always a good idea. "I live in Oregon with my lovely wife and our daughter." 750 00:55:21,920 --> 00:55:25,920 Let's check out some of these pages here. 751 00:55:25,920 --> 00:55:28,240 Let's look at the Contact page first. 752 00:55:28,240 --> 00:55:30,660 Whoa! Those are super huge social icons. 753 00:55:30,660 --> 00:55:34,390 Those are probably the largest social icons I've ever seen. 754 00:55:34,390 --> 00:55:38,850 But I mean, that's cool. I don't know. I guess it gets the point across. 755 00:55:38,850 --> 00:55:47,290 I can click on his email right here, I can go to his LinkedIn, his Google+ or his Twitter. 756 00:55:47,290 --> 00:55:50,860 I don't know. What more would you need on a contact page? 757 00:55:50,860 --> 00:55:52,770 I guess a contact form. 758 00:55:52,770 --> 00:55:55,620 It might be good to actually spell out your email address here 759 00:55:55,620 --> 00:56:00,130 because some people don't actually like to use the Mail To link. 760 00:56:00,130 --> 00:56:03,140 You can see it down here at the bottom when I hover over it. 761 00:56:03,140 --> 00:56:05,980 It says "Mail To" and that's his email address. 762 00:56:05,980 --> 00:56:10,850 But it might be good to actually spell out your email address on the page 763 00:56:10,850 --> 00:56:16,200 just in case people want to copy and paste it into an app like Gmail. 764 00:56:16,200 --> 00:56:20,350 But that's interesting. 765 00:56:20,350 --> 00:56:23,020 That's kind of a cool way to do a Contact page. 766 00:56:23,020 --> 00:56:27,170 Here we have Keith's blog. He has some recent blog posts here. 767 00:56:27,170 --> 00:56:29,940 Looks super simple. It's a really nice-looking blog. 768 00:56:29,940 --> 00:56:32,900 It doesn't look too cluttered. So I think that looks nice. 769 00:56:32,900 --> 00:56:37,890 I think I would actually reverse these columns because the information over on the right here 770 00:56:37,890 --> 00:56:40,890 is actually more important than what's over here on the left. 771 00:56:40,890 --> 00:56:45,270 And because English is read left to right, unlike Arabic, 772 00:56:45,270 --> 00:56:49,050 it would be good to have the more important information over on the left-hand side. 773 00:56:49,050 --> 00:56:51,550 So maybe flip those columns around. 774 00:56:51,550 --> 00:56:54,770 If we click on Work, just hovering over Work here— 775 00:56:54,770 --> 00:56:58,260 actually hovering over all of the navigation items, you can see over on the right side 776 00:56:58,260 --> 00:57:04,390 that it tells me what the navigation item is beyond just the iconography. 777 00:57:04,390 --> 00:57:10,680 I think I'd like this yellow color to stand out a little bit more against the gray background. 778 00:57:10,680 --> 00:57:15,040 So if you can somehow make that work, maybe make the background a little bit darker, 779 00:57:15,040 --> 00:57:20,210 maybe make the yellow a slightly different color, or maybe just pick a different color here altogether, 780 00:57:20,210 --> 00:57:23,730 it might be a little bit easier to see that. 781 00:57:23,730 --> 00:57:30,730 Alternatively, you could actually just put the navigation items right down here at the bottom. 782 00:57:30,730 --> 00:57:38,560 But if we scroll down here, we have this one personal project that Keith put together, 783 00:57:38,560 --> 00:57:41,970 built with PHP & CodeIgniter. 784 00:57:41,970 --> 00:57:47,840 It looks like a portfolio page to me. 785 00:57:47,840 --> 00:57:50,470 One thing that I would suggest here if it's— 786 00:57:50,470 --> 00:57:53,750 Oh! Actually, wait. There's a Next button. 787 00:57:54,960 --> 00:57:56,540 Oh, okay. 788 00:57:56,540 --> 00:58:01,920 I think that's what Keith meant when he said that he's included this site in his work. 789 00:58:01,920 --> 00:58:05,030 So there's a piece of criticism. 790 00:58:05,030 --> 00:58:09,470 I totally missed that Next button and barely just caught it. 791 00:58:09,470 --> 00:58:13,590 So it might be better to actually present your work in some kind of gallery here 792 00:58:13,590 --> 00:58:16,310 and then when you click on each piece of work, 793 00:58:16,310 --> 00:58:21,830 it brings you to the page that tells you more detail about the project. 794 00:58:21,830 --> 00:58:24,410 So something to think about there. 795 00:58:24,410 --> 00:58:31,240 But if we just scroll through here, it looks like this portfolio is pretty well filled out 796 00:58:31,240 --> 00:58:34,370 with some cool-looking PHP projects. 797 00:58:34,370 --> 00:58:35,920 Good job on that. 798 00:58:35,920 --> 00:58:38,490 Again, I think if you just organize them a little bit better here, 799 00:58:38,490 --> 00:58:43,700 it would be easier to see what you've worked on. 800 00:58:43,700 --> 00:58:48,330 Let's check the responsiveness. Hey! Good job, Keith. Look at that. Wow! 801 00:58:48,330 --> 00:58:53,380 You know, this menu actually looks great on mobile. 802 00:58:53,380 --> 00:58:57,890 I actually like this better than the desktop version of the site. 803 00:58:57,890 --> 00:58:59,740 That's pretty cool. 804 00:58:59,740 --> 00:59:05,180 I wonder if you could almost bring this style menu, just because there's 4 nav items, 805 00:59:05,180 --> 00:59:09,910 if you could bring that over here somehow and then have your name up here. 806 00:59:09,910 --> 00:59:12,850 I don't know. Maybe just something to think about. 807 00:59:12,850 --> 00:59:16,350 But it looks good. It looks like this site responds well. 808 00:59:16,350 --> 00:59:20,990 I really like the bright colors, and I think Keith did a great job. 809 00:59:20,990 --> 00:59:28,680 Look at that. It is 1:00 p.m. That's exactly one hour. That was perfect, ladies and gentlemen. 810 00:59:28,680 --> 00:59:31,070 We're going to go to some Q&A now. 811 00:59:31,070 --> 00:59:35,090 Again, Chris Zabriskie is moderating the chat over on YouTube, 812 00:59:35,090 --> 00:59:44,140 and hopefully he has a couple of questions here for me in the chat. 813 00:59:44,140 --> 00:59:51,560 He says, "A couple of people have submitted stuff on YouTube if we have time." 814 00:59:53,310 --> 00:59:56,860 Sure. Let's go ahead and just do a couple more here. 815 00:59:56,860 --> 01:00:02,880 But while I'm doing these 2 websites, go ahead and try to come up with a couple questions for me. 816 01:00:02,880 --> 01:00:10,920 I can answer pretty much anything you want about HTML, CSS, design, UX, web business, 817 01:00:10,920 --> 01:00:17,840 how to get started in web design—with Treehouse of course, right?—really anything you want. 818 01:00:17,840 --> 01:00:20,100 So feel free to ask me anything. 819 01:00:20,100 --> 01:00:26,300 We'll probably do Q&A for 10 or 15 minutes before we wrap up here. 820 01:00:26,300 --> 01:00:30,620 Let's look at these other 2 websites. 821 01:00:30,620 --> 01:00:36,730 Let's look at SmartRocket.com.br. 822 01:00:36,730 --> 01:00:43,270 Oh, man. Okay. It looks like I actually lost Wi-Fi over here on my iPad. 823 01:00:43,270 --> 01:00:46,660 So maybe there are some questions that Chris is submitting. 824 01:00:46,660 --> 01:00:51,750 I'll go ahead and reconnect. 825 01:00:51,750 --> 01:00:55,820 Hopefully there are some questions in there. 826 01:00:55,820 --> 01:01:00,030 We'll review some stuff while we're waiting, though. 827 01:01:00,030 --> 01:01:01,540 Okay. 828 01:01:03,670 --> 01:01:06,060 There we go. Okay. All right. 829 01:01:06,060 --> 01:01:10,830 Let's take a look at this website. It's at SmartRocket.com.br. 830 01:01:10,830 --> 01:01:14,180 It says, "We're Smart Rocket //Web & Mobile.' 831 01:01:14,180 --> 01:01:20,050 "We design, create, deliver, and maintain IT solutions including Mobile Apps and Web Systems." 832 01:01:20,050 --> 01:01:22,420 Whoa! What is a web system? 833 01:01:22,420 --> 01:01:26,450 "We take the time to understand your needs to deliver the best solution 834 01:01:26,450 --> 01:01:28,450 with the technology that is most suited to your needs." 835 01:01:28,450 --> 01:01:34,630 Oh my gosh. When I scroll down the page, these triangles start spinning. 836 01:01:34,630 --> 01:01:37,310 Look at that. That is so trippy. 837 01:01:38,770 --> 01:01:42,490 I've got to say, though, I'm kind of making a joke out of this 838 01:01:42,490 --> 01:01:45,920 but I do like this design overall. 839 01:01:45,920 --> 01:01:49,320 The strong diagonals in this triangle are really cool, 840 01:01:49,320 --> 01:01:52,080 and you actually don't see that a whole lot in web design 841 01:01:52,080 --> 01:01:57,860 just because everything on the page is usually in a square or rectangular box. 842 01:01:57,860 --> 01:02:00,460 So it's nice to see something a little bit different there. 843 01:02:00,460 --> 01:02:05,140 I like the really strong contrast of black and white. That's a really bold choice. 844 01:02:05,140 --> 01:02:08,160 A lot of times when you make a black and white website it can tend to look pretty plain, 845 01:02:08,160 --> 01:02:09,930 but this actually looks quite nice. 846 01:02:09,930 --> 01:02:16,500 Scroll down to Our Work. Oh, look at those beautiful, shiny devices. 847 01:02:16,500 --> 01:02:20,410 What Do We Do? You can learn more about what they do. 848 01:02:20,410 --> 01:02:25,720 And How We Work. You can see their process for putting together sites. 849 01:02:25,720 --> 01:02:27,360 And then you can go ahead and contact them. 850 01:02:27,360 --> 01:02:30,010 Pretty simple site. 851 01:02:30,010 --> 01:02:34,600 I guess there's a menu here that will scroll down to those particular parts of the site. 852 01:02:37,530 --> 01:02:39,960 Yeah. I guess I don't really have a whole lot to say. 853 01:02:39,960 --> 01:02:43,830 It's a great-looking site. Let's check the responsiveness. 854 01:02:43,830 --> 01:02:47,630 I kind of figured it would respond really nicely, just like this. 855 01:02:47,630 --> 01:02:50,580 I'm actually curious how these triangles are being put together 856 01:02:50,580 --> 01:02:55,640 because I noticed a little bit of aliasing along the bottom here, 857 01:02:55,640 --> 01:02:59,360 which suggests to me that this is actually a rotated element. 858 01:02:59,360 --> 01:03:02,990 So let's hover over here. 859 01:03:05,130 --> 01:03:07,470 Let's see. 860 01:03:07,470 --> 01:03:12,610 How are they doing this? Is that just a background? 861 01:03:13,370 --> 01:03:15,240 Overlay. 862 01:03:16,690 --> 01:03:20,370 I'm sure I could figure it out, but I can't quite dig into it right now. 863 01:03:20,370 --> 01:03:25,490 But that's, yeah, a really cool design. 864 01:03:25,490 --> 01:03:30,340 Okay. Let's look at this one other website. 865 01:03:30,340 --> 01:03:32,330 It looks like there are some questions rolling in, 866 01:03:32,330 --> 01:03:36,350 so I'll give a little bit more time for more questions to come in. 867 01:03:36,350 --> 01:03:44,340 Let's look at this website from Julian-Thomas.com. 868 01:03:46,050 --> 01:03:50,090 This is a website for personal training. 869 01:03:50,090 --> 01:03:53,120 "Julian Thomas, Elite Personal Training." 870 01:03:53,120 --> 01:03:55,240 Wow! That's really cool. 871 01:03:55,240 --> 01:03:59,100 I really like the look of this site, that nice full screen photo. 872 01:03:59,100 --> 01:04:02,570 Again, when using full screen photos with white text on top, 873 01:04:02,570 --> 01:04:07,220 the full screen photo really should have a darker background, which this one does. 874 01:04:07,220 --> 01:04:11,430 You can see the white text looks really crispy there. 875 01:04:11,430 --> 01:04:15,490 Up here he's got some navigation links. 876 01:04:15,490 --> 01:04:18,630 Yeah, first impression, I think this is a great-looking website. 877 01:04:18,630 --> 01:04:21,570 It tells me right away what the website is about. 878 01:04:21,570 --> 01:04:25,950 "A New Breed. Julian Thomas is a Team Great Britain Sprinter 879 01:04:25,950 --> 01:04:31,840 "that specializes in functional mobility and development training, 880 01:04:31,840 --> 01:04:36,700 the same training used in Olympic level athletics." Wow! That's pretty impressive. 881 01:04:36,700 --> 01:04:42,340 So I guess these are all the different types of training that he offers. 882 01:04:42,340 --> 01:04:45,530 Gosh, this is a great website. 883 01:04:45,530 --> 01:04:51,000 Pretty pricey training here, but hey, if you're going to give me Olympic level training, 884 01:04:51,000 --> 01:04:52,960 that's kind of what I would expect. 885 01:04:52,960 --> 01:05:00,810 Looking at this website, I bet it responds great. Yep. Super awesome. 886 01:05:00,810 --> 01:05:05,510 Don't have a whole lot of critique to give here because it's just a great-looking site. 887 01:05:05,510 --> 01:05:07,800 So good job on that. 888 01:05:07,800 --> 01:05:11,380 All right. Let's take a couple questions. 889 01:05:11,380 --> 01:05:15,490 Our first question is from Kurt and he says, "Nick, have you been working out?" 890 01:05:15,490 --> 01:05:19,940 Well, I have not been working out with Julian, but yes, I have been working out at the gym. 891 01:05:19,940 --> 01:05:26,400 I use this really cool app called Fitness Buddy to help me put together different weightlifting routines. 892 01:05:26,400 --> 01:05:28,750 Working on that. 893 01:05:28,750 --> 01:05:34,630 Rodrigo asks, "Is WebGL and CSS 3D Transforms something worth learning?" 894 01:05:34,630 --> 01:05:37,780 "Because it sure will take some time for me." 895 01:05:37,780 --> 01:05:42,140 "I have 40% knowledge of CSS right now." 896 01:05:42,140 --> 01:05:48,120 I don't have 100% of CSS knowledge, but I feel pretty confident that yes, 897 01:05:48,120 --> 01:05:51,410 WebGL and 3D Transforms are something worth learning. 898 01:05:51,410 --> 01:05:56,280 This is actually something that I've been tweeting about and writing about quite a bit lately. 899 01:05:56,280 --> 01:06:02,390 So if you don't mind, I'd like to show you a couple things that I've been working on lately. 900 01:06:02,390 --> 01:06:11,190 If I go to Blog.TeamTreehouse.com, I recently wrote a post— 901 01:06:11,190 --> 01:06:16,940 actually, I wrote 2 different posts here. I'll bring both of them up and then summarize them for you. 902 01:06:19,420 --> 01:06:25,780 In this earlier post I said, "3D in the Browser: WebGL versus CSS 3D Transforms." 903 01:06:25,780 --> 01:06:29,850 This looks like exactly the thing that you're looking for. 904 01:06:29,850 --> 01:06:37,010 CSS 3D Transforms are good for doing small, simple transforms. 905 01:06:37,010 --> 01:06:41,020 If you just want to kind of adjust a couple elements slightly 906 01:06:41,020 --> 01:06:45,440 or maybe make a Trello card-looking interface, 907 01:06:45,440 --> 01:06:49,180 kind of like flip back and forth from the edit view to the show view, 908 01:06:49,180 --> 01:06:52,990 simple stuff like that is fine because all you're really doing 909 01:06:52,990 --> 01:06:56,660 is adjusting the look of the page. 910 01:06:56,660 --> 01:06:59,890 You're not actually adjusting the semantics. 911 01:06:59,890 --> 01:07:08,250 The problem with CSS 3D Transforms is that a lot of people will try to store geometry in the DOM, 912 01:07:08,250 --> 01:07:10,480 or the Document Object Model. 913 01:07:10,480 --> 01:07:14,510 I actually think the DOM is a terrible place to store geometry like that 914 01:07:14,510 --> 01:07:16,880 because it's totally non-semantic. 915 01:07:16,880 --> 01:07:23,190 The DOM is really a pretty heavy and expensive place computationally to store geometry, 916 01:07:23,190 --> 01:07:30,000 and it just doesn't make sense when there's other options available like WebGL. 917 01:07:30,000 --> 01:07:34,570 What is WebGL? WebGL is web graphics language. 918 01:07:34,570 --> 01:07:39,850 Over in this other post I wrote an introduction to three.js, 919 01:07:39,850 --> 01:07:43,770 which is actually a framework built on top of WebGL. 920 01:07:43,770 --> 01:07:46,550 I made the Treehouse logo in 3D. 921 01:07:46,550 --> 01:07:50,290 I'm going to click on this, and you can see the demo here. 922 01:07:50,290 --> 01:08:00,160 When I scroll around with my mouse, you can see that we've got this 3D-looking Treehouse logo here. 923 01:08:00,160 --> 01:08:06,570 I think WebGL is really just this amazing browser technology, 924 01:08:06,570 --> 01:08:09,000 and not a whole lot of people are talking about it yet. 925 01:08:09,000 --> 01:08:12,450 It's supported in Firefox, Safari, and Google Chrome. 926 01:08:12,450 --> 01:08:17,620 It will be supported in Internet Explorer 11, which is the upcoming release of Internet Explorer. 927 01:08:17,620 --> 01:08:19,779 It's not supported on mobile devices just yet, 928 01:08:19,779 --> 01:08:22,950 but I have to imagine that support is coming soon. 929 01:08:22,950 --> 01:08:30,170 In fact, I'm really curious if iOS 7 and the new iPhone will support that 930 01:08:30,170 --> 01:08:33,800 because they talked about how so graphically powerful it is. 931 01:08:33,800 --> 01:08:35,880 We will have to see. 932 01:08:35,880 --> 01:08:41,410 One practical use for WebGL might actually be to create a product gallery. 933 01:08:41,410 --> 01:08:47,180 For example, on the new marketing page for the new iPhone that was just announced yesterday, 934 01:08:47,180 --> 01:08:52,640 you could have this gallery where you could browse an iPhone in 3D 935 01:08:52,640 --> 01:08:55,550 and rotate it in 3D space and actually look at it. 936 01:08:55,550 --> 01:08:58,529 This might be really good for higher-priced items as well. 937 01:08:58,529 --> 01:09:01,620 You're going to be spending a lot more time putting together the models, 938 01:09:01,620 --> 01:09:04,720 but again, you're selling a higher-priced item. 939 01:09:04,720 --> 01:09:11,910 For example, a car. It would be really great to browse in 3D, open the car doors, look inside, and that sort of thing. 940 01:09:11,910 --> 01:09:15,189 So I think it's totally worth learning. Yes. 941 01:09:15,189 --> 01:09:18,899 We do teach CSS 3D Transforms on Treehouse right now. 942 01:09:18,899 --> 01:09:23,279 We don't teach WebGL yet, but I'm really getting into it 943 01:09:23,279 --> 01:09:26,859 and so there may be a course in the future. We will see. 944 01:09:26,859 --> 01:09:30,680 Another question says, "What do you think?" 945 01:09:30,680 --> 01:09:40,790 "Would anyone know about JavaScript to try to get minimal viable job as JavaScript dev?" Oh, okay. 946 01:09:40,790 --> 01:09:44,600 Basically, what's the minimum amount of JavaScript you need to know 947 01:09:44,600 --> 01:09:47,460 to get a job as a JavaScript developer? 948 01:09:49,029 --> 01:09:55,330 I'm not sure that it's worth specializing specifically in just JavaScript. 949 01:09:55,330 --> 01:10:00,250 You're going to need to know the rest of the browser environment, like HTML, CSS. 950 01:10:00,250 --> 01:10:03,810 You're probably going to need to know how to work with databases as well. 951 01:10:03,810 --> 01:10:06,930 As you get into more advanced JavaScript, you do things like AJAX, 952 01:10:06,930 --> 01:10:13,250 you get into maybe node.js, which is a totally different thing. 953 01:10:13,250 --> 01:10:17,540 But the minimum amount of JavaScript is actually quite a lot. 954 01:10:17,540 --> 01:10:23,070 You actually do need to know JavaScript pretty well to be able to call yourself a JavaScript developer 955 01:10:23,070 --> 01:10:28,190 because JavaScript is notoriously kind of a strange language, 956 01:10:28,190 --> 01:10:30,960 mainly just because of the browser environment, 957 01:10:30,960 --> 01:10:33,040 but it also has a lot of quirks to it as well. 958 01:10:33,040 --> 01:10:36,880 It's really worth learning JavaScript very, very well. 959 01:10:36,880 --> 01:10:43,270 A lot of people will just try to learn jQuery and not actually learn JavaScript on its own, 960 01:10:43,270 --> 01:10:49,300 which that's a good way to start, that's a good way to first get into it is just doing jQuery. 961 01:10:49,300 --> 01:10:52,160 It simplifies a lot of things, like DOM selections, for you. 962 01:10:52,160 --> 01:10:56,170 But it's really worth learning JavaScript properly 963 01:10:56,170 --> 01:11:00,760 and it's really worth diversifying your skills and learning about different JavaScript frameworks 964 01:11:00,760 --> 01:11:03,330 and just getting into other things. 965 01:11:03,330 --> 01:11:10,850 It's worth learning. We teach all that stuff at Treehouse, which of course you can check out at TeamTreehouse.com/live. 966 01:11:10,850 --> 01:11:14,240 Next question is from Keith. 967 01:11:14,240 --> 01:11:20,370 He says, "Are there any business issues with trying to pick up freelance 968 01:11:20,370 --> 01:11:25,260 while working as a designer for an internal only corporate website?" 969 01:11:25,260 --> 01:11:30,170 I actually was wondering this at a previous job I worked at, 970 01:11:30,170 --> 01:11:34,290 and I just went and talked to my employer and they were totally okay with it. 971 01:11:34,290 --> 01:11:40,270 I think in that particular situation it kind of depends on your contractual obligations, 972 01:11:40,270 --> 01:11:45,890 local, state, or federal laws wherever you live. 973 01:11:45,890 --> 01:11:49,150 But other than that, I think the best thing you could do 974 01:11:49,150 --> 01:11:51,860 is probably just talk to the person that's employing you 975 01:11:51,860 --> 01:11:55,280 and see if they're okay with you doing freelance work. 976 01:11:55,280 --> 01:11:57,920 Don't try to fly under the radar and do it. 977 01:11:57,920 --> 01:12:00,310 If they don't allow it and that's what you want to do, 978 01:12:00,310 --> 01:12:04,980 then maybe try finding another job or go ahead and do it anyway 979 01:12:04,980 --> 01:12:08,170 and maybe your freelance gig will pay off for you. 980 01:12:08,170 --> 01:12:12,050 Anyway, not legal advice. Not a lawyer. 981 01:12:12,050 --> 01:12:17,380 Joshua says, "Most companies want a portfolio or proof of skills 982 01:12:17,380 --> 01:12:20,720 other than just what you state on a CV." 983 01:12:20,720 --> 01:12:26,990 "How would you recommend getting those first few sites under your belt to use in a portfolio?" 984 01:12:26,990 --> 01:12:29,380 That's a really good question. 985 01:12:29,380 --> 01:12:31,800 There's a couple of things you can do to keep yourself busy. 986 01:12:31,800 --> 01:12:34,980 One, you can create a personal website. 987 01:12:34,980 --> 01:12:39,230 You can just create a website for yourself, like create your portfolio, 988 01:12:39,230 --> 01:12:43,230 and it's totally cool to include your own portfolio in your portfolio. 989 01:12:43,230 --> 01:12:46,000 I mean, it is a website that you made. 990 01:12:46,000 --> 01:12:49,630 But beyond that, you can try looking locally. 991 01:12:49,630 --> 01:12:52,750 So if there's maybe some local bands that you like, 992 01:12:52,750 --> 01:12:57,690 they probably need a website because they can't really afford to get a good one. 993 01:12:57,690 --> 01:13:02,700 But if you have those skills, they'd be happy to let you create a website for them. 994 01:13:02,700 --> 01:13:05,420 You can do the same thing for all sorts of local businesses. 995 01:13:05,420 --> 01:13:09,140 That might be something to think about. 996 01:13:09,140 --> 01:13:15,570 Really, there's other things you can do too that will contribute to the web design community. 997 01:13:15,570 --> 01:13:21,250 For example, you could put together some kind of cool piece of JavaScript 998 01:13:21,250 --> 01:13:28,340 or a CSS framework or maybe you can put together a blogging platform. 999 01:13:28,340 --> 01:13:31,580 Whatever it is, it doesn't have to be that complex. 1000 01:13:31,580 --> 01:13:35,420 It can actually just be kind of for fun, basically. 1001 01:13:35,420 --> 01:13:39,250 You have to just do it. 1002 01:13:39,250 --> 01:13:43,440 You just have to get going and create those websites. 1003 01:13:43,440 --> 01:13:47,090 If you want to do something in more of a practical setting, though, 1004 01:13:47,090 --> 01:13:51,340 I would look at local businesses because everybody needs a website. 1005 01:13:51,340 --> 01:13:57,320 You could even just ask friends if they want you to put together personal websites for them to get started. 1006 01:13:58,270 --> 01:14:01,490 Last one. Oh. No. We've got 2 more. 1007 01:14:01,490 --> 01:14:04,710 Oh. No, I'm sorry. This is the last question. Okay. 1008 01:14:04,710 --> 01:14:09,350 The question is, "Tearing my hair out over Google Web Font rendering." 1009 01:14:09,350 --> 01:14:14,750 "Any tips on how to avoid faux bold?" 1010 01:14:14,750 --> 01:14:20,910 I am actually not sure what you're talking about. 1011 01:14:20,910 --> 01:14:25,720 But if we head over to Google.com/fonts, 1012 01:14:25,720 --> 01:14:33,310 this is Google Web Fonts, you can either use the Quick-use here 1013 01:14:33,310 --> 01:14:35,630 or you can add something to your collection. 1014 01:14:35,630 --> 01:14:39,960 When you use Quick-use, they do give you styling options here. 1015 01:14:39,960 --> 01:14:44,730 You can check off if you want normal, bold, or ultra-bold. 1016 01:14:44,730 --> 01:14:47,860 If there's some kind of bolding that's happening, 1017 01:14:47,860 --> 01:14:53,630 it might just be that you have one of these selected that you don't really need. 1018 01:14:53,630 --> 01:14:56,140 That might be a place to look. 1019 01:14:56,140 --> 01:15:00,200 Again, not quite sure what is being addressed there, 1020 01:15:00,200 --> 01:15:03,470 but hopefully that answered your question. 1021 01:15:03,470 --> 01:15:06,170 Or maybe we could just pick another font. That might work too. 1022 01:15:06,170 --> 01:15:08,780 That's it for today. 1023 01:15:08,780 --> 01:15:17,340 Again, this was Treehouse Reviews, which is from TeamTreehouse.com/live. 1024 01:15:17,340 --> 01:15:23,710 You can check us out and learn all about web design, web development, mobile, business and so much more. 1025 01:15:23,710 --> 01:15:27,910 I'm Nick Pettit. You can follow me on Twitter at @nickrp. 1026 01:15:27,910 --> 01:15:30,800 That's it. We'll see you real soon.