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