[Nick Pettit - @nickrp] Hey everybody, I'm Nick Pettit, @nickrp on Twitter,

and today at Treehouse we're doing a special live edition of our show Treehouse Reviews,

the show where you submit websites to us and we review the designs,

front-end code, overall business concept, and stuff like that.

We're going to be looking at a bunch of websites today.

There were quite a few submissions.

I'm going to be looking at 8 of them.

I hope that we can get to all of them.

I'm going to try to keep this to around an hour.

If we don't get to your website, I'm super sorry. We will try to do it next time.

But without further ado, let's go ahead and get into these first couple websites here.

I am using Trello today to organize all of these.

That way I don't have these websites up in my email

and I won't be sabotaged by my co-worker Jason Seifer.

Here we have a submission from Evan.

Evan says, "This is the homepage for my freelance design brand."

"The goal was to create a site that was simple but informative,

providing enough information to inspire potential clients to contact me."

"Any feedback (theory, design, business, layout) would be greatly appreciated."

Well, I can help you out in theory because I have a theoretical degree in web design.

All right. Let's go ahead and jump into this website from Evan here.

The first thing I notice is that it has a pretty nice-looking design.

I really like the blue and red here.

I like the use of diagonal lines.

I think that this logo is a little bit difficult to comprehend.

I'm not sure if I'm supposed to read it clockwise or counterclockwise or across.

I mean, I know that this person's name is Evan, so I know it should be E-V-A and N,

but that's a little bit confusing.

So in considering that logo mark, I would probably think about actually redesigning it.

This is a really cool design, so that's kind of tough because it's so integrated at a pervasive level.

But that would be the first thing that I would think about changing here.

Also I think this bar at the top is a little bit intense.

I'm actually going to switch to full screen here so we can see this a little bit better.

This green kind of clashes not so much with the blue but actually the red

because red is the complementary color to green.

So it looks a little bit too obnoxious.

If we just scroll down the page a little bit and look at what the site looks like without that bar,

I think this is much more impactful and looks a lot nicer.

I think the typography here is a little bit strange.

Freelance Web Design in Columbus, Ohio.

I like that Web Design is highlighted here,

but I think there's probably a little bit of a better way to possibly do that.

Maybe not with the blue color but maybe with a different font or something.

I'm not really sure.

I like that it's highlighted; I just don't like the way that it's highlighted.

If we scroll down a little bit further, we have an icon of a coffee cup here.

I guess that means Evan likes coffee. I'm not really sure exactly.

But it's a nice-looking icon.

And then we have Skills and Services.

Oh! And he actually has a pronunciation of Evan. The X is silent.

So it's Evan or Evan [pronounces name Ee-van]. I assume it's Evan.

All right.

Skills and Services. Oh, okay.

I was actually going to talk about the contrast here on the type,

but it looks like if you scroll down the page further, these bars fill in.

Let's refresh the page and scroll down again so you can see that again.

There. Those bars fill in.

So that makes the contrast between the background and the skills a little bit better.

I'm going to refresh one more time, though, just so you can see

how without those bars there the contrast actually isn't that good.

One tip when you are building websites is to actually look at your page in black and white.

That helps you test the contrast of the page,

because humans are actually better at perceiving changes in lightness and darkness

than they are at perceiving changes in color.

This is actually how a lot of compression technologies work.

They get rid of some of the detail in color,

but they keep more detail in the changes in lightness and darkness,

so it tricks your eye into thinking that it's a highly detailed uncompressed image when it's not.

But in this case, yeah, you should definitely look at the website in black and white

because that's going to reveal all sorts of issues with contrast on any website,

not just this one in particular.

But without those bars there, the contrast isn't that good.

And even with those bars there, it is still a little bit hard to see.

In terms of the overall concept of this, I'm not sure that I really like that either.

I'm really tearing into Evan here. I apologize, Evan. He looks like a really nice guy.

But I think that at least some of these should be filled in all the way

so that Evan can say, "Yes, I am definitely an expert in these things."

"I know some about this stuff and maybe less about MySQL."

But even then I think you should probably get rid of the bars altogether

and just say in an ordered list, "These are my skills."

"I know HTML, CSS, jQuery, PHP, and MySQL."

And it might be assumed that the things that are first you might know the best

and the things that are last maybe you don't know as well.

I'm not going to read the copy on Services.

Copy is definitely an important part of design, but I'm trying to move a little bit quickly here.

Recent evxan Designs. Remember, the X is silent.

It looks like there's one design here in the portfolio.

I'm not going to take a look at that design,

but judging the overall look of the portfolio here, it looks nice.

It's simple. I think it might be better if that were maybe closer to the top.

I assume that by clicking this navigation here it will actually scroll.

Yeah, that is indeed what it does.

So that provides you a quick way to get to it, but I would actually try putting your design first

and then maybe more about you further down

because people are here to see your work.

And of course you should probably try to fill out your portfolio with a little bit more than one thing.

So dig deep. I'm sure there is some awesome stuff that you've created that just isn't there.

And then down here at the bottom Evan has a contact form

where you type in your name, email address, and then you have to solve a math problem to prevent spam.

That's not a bad way to do it.

I prefer actually simpler CAPTCHAs like this

where you don't actually have to type in some really funky-looking letters and numbers.

Overall, I'm here to critique this website and I'm here to critique the rest of these websites,

but I think this looks pretty good.

It just needs a couple of tweaks here and there and it could be a stronger design.

But it already looks pretty good. So good job, Evan.

Moving on, I'm going to move Evan over to Done here,

and next up is Jeremy.

Jeremy didn't really send much text in his email,

but I'm going to go ahead and open up this website.

I don't speak this language. I think it's Swedish. I think I saw on his email that he was Swedish.

I apologize if, Jeremy, you are not Swedish.

This is a pretty basic website.

It's just an image here, you've got some Lorem Ipsum text,

and then over here you have this little sidebar menu.

I actually like this design pattern here of using these sidebar menus.

It's much more common on mobile devices, but you're starting to see it pop up on websites,

and I don't think it's bad.

I mean, I don't like that it hides the navigation all the time,

but as this design pattern starts to become more common,

I think this could pick up a little bit more and actually be something that people get used to.

Something I didn't do on Evan's site but I'm going to do here

is I'm actually going to come out of full screen here and I want to test the responsiveness of the site.

That's kind of what I was expecting to happen.

It looks like it responds quite nicely, so this will look good on mobile devices.

Let me bring up Evan's site again to check on that.

Hey, look at that. He's got very similar 3-bar navigation here.

It doesn't come up on the side, it just drops down,

but it's using the same iconography.

It looks like Evan's site responds quite nicely as well.

I am going to be checking every website for that

because actually, we are at this amazing inflection point

or we're coming up on this inflection point in history

where there's actually going to be more people browsing the Web on mobile devices

than there are on desktop computers.

I know that's kind of hard to believe. It's kind of hard to imagine that. But that's the reality.

There's going to be more people browsing the Web on mobile devices.

So you really do need to think about your website in terms of a mobile experience first

rather than thinking about it as a desktop website that you try to scale down to mobile devices.

Just something to keep in mind.

Overall, it looks like this project from Jeremy is in progress here still,

so there's really not a whole lot to say, but it looks like a good start.

Let's go ahead and move on.

I'm going to move Jeremy over to Done here,

and let's look at this website from Scott.

Scott says, "I'd love feedback on this little web app I built last year as my first Rails app."

"I'm going to do a refresh of it with some new features soon."

"Would love your thoughts on how I can improve front-end code, signup flow,

and maybe features you'd be interested in seeing."

Okay. So we're going to look at front-end code, signup flow, and feature suggestions.

Let's see if we can do that.

It looks like this app is called PicDigest,

and it says, "Make sure they never miss a moment."

"Send your Instagram and Facebook photos to loved ones in a single daily email."

Oh, that's really nice.

So you can sign up your mom or your grandma or all your loved ones

and you can send them your Instagram and Facebook photos,

and that's especially nice if they're not actually engaged in those social networks.

For example, I know my mom follows me on Facebook and likes all of my stuff that my girlfriend posts,

but she doesn't follow me on Instagram.

In fact, I don't think she's even on Instagram.

So maybe I should use this.

Just scrolling down looking at some of the marketing here,

it looks like PicDigest sends some really nice HTML emails here with some photos.

It looks like there's a baby in a trucker hat there.

Then there's some more descriptive text about what PicDigest does.

PicDigest automatically sends your photos from FB and Instagram in one single email,

and it's perfect for making sure mom and grandpa see the pics you post of your kids.

Hey, just like I was saying.

This is actually pretty good so far.

The name of the app is really good, PicDigest,

so that you know exactly what this is going to do,

or at least you are able to start building that mental model right away just by hearing the name.

You have the same domain name, PicDigest, so that's great as well.

And then the descriptive text is really, really good.

In one sentence I was able to figure out what PicDigest does,

and I was even able to build that exact same mental model that you suggested:

sending these pictures to my mom or to my grandparents.

So that's pretty cool.

You can learn more about PicDigest.

But we are going to look at the signup flow.

Let's go ahead and sign in.

I can sign in with Instagram or Facebook. Hmm.

I think I'm going to sign in with Facebook.

All right. "PicDigest will receive the following info: your public profile, friends list, email address and photos."

Okay. That's fine with me.

And it looks like Facebook is doing some authentication here.

We're almost there.

"Add someone to get your photos." Okay.

I'm just going to add myself and I'm going to add my best bud, Jason,

and I'm going to add these recipients.

So now Jason is going to get a daily digest of all of my Facebook photos.

I'm sure he'll be very happy to see that in his inbox.

All right. So what happens next?

"From now on, nick@teamtreehouse.com and 1 other person will receive an email each morning

with the photos you post to Facebook."

Aha! Here's the upgrade. "Upgrade for $2 a month at any time during the 30-day free trial to keep the photos flowing."

That's a pretty modest price. That's not too bad if you just want to keep sending these emails.

I think that's a fair price for what it does.

And then you can be social. You can follow PicDigest on Twitter.

You can read the PicDigest blog. Continue to your profile. Okay.

Just judging the signup flow here, I think the Continue to your profile

should be a little bit more prominent.

But that's okay. That's not too bad.

Here's all of my personal information. I can upgrade, I can cancel.

I actually don't want Jason to get all of my Facebook photos.

He can see them all already anyway, so I'm going to cancel this account

and see how easy it is to cancel.

Wow! Hey, look at that. That was super simple.

It's usually much more difficult to cancel stuff online.

So that's really, really good that you can just do it in one click. I really like that.

Signup flow looks great to me.

I honestly don't have a whole lot to say about this app.

I think it's pretty good.

Let's look at some of the front-end code here.

I'm going to hit Command-Alt-U on my Mac to view the source.

You of course can go to View, Developer, View Source in Google Chrome.

Just looking at the front-end code, it looks like they're probably using HTML5 Boilerplate here

just judging by some of the classes and meta tags that we're seeing there.

Actually, one way to check if they're using Boilerplate is to highlight and see if it comes up in pink text.

It doesn't look like they're doing that, though.

Maybe they changed the highlight color.

But I don't know. I mean, I'm just scrolling through the code pretty quickly here.

It looks like we've got a header element.

I think this code is pretty difficult to read just because it's not indented properly.

So that might be the first suggestion here.

It's actually kind of hard to see what code is here without properly indenting it.

I don't think I'm going to dig into the front-end code

because we do need to move on here.

But I think PicDigest is cool.

If I had to give any suggestions for features,

I might just say maybe consider including other social networks.

Facebook and Instagram are cool, but maybe include something like Flickr.

I know a lot of people that post a lot of photos there

and just other social networks. I don't know. I think it's pretty good.

I actually don't have a whole lot to say.

So let's move on.

This website is from—oh, man, I'm going to say this name wrong.

I think it's Khemraj.

He says, "Hi Nick, can you be kind enough to review my website and the link for the website is right here. Thanks."

All right. Let's check it out.

Ooh, one thing I did not do on PicDigest. Is it responsive?

Oh, oh no. Oh, there it is.

So actually, I do have a suggestion for PicDigest.

You should probably include a few more breakpoints in your media queries there

because it looks like right now there's only one breakpoint. Okay.

Sorry. I will try to remember to do that.

Let's do that to start out here.

It looks like this website is actually quite responsive.

That's pretty nice. It looks like the navigation here turns into, once again, that little 3-bar line.

I don't know how the whole world picked up on that, but everyone is using it.

This text kind of condenses. It removes a photo here that might not look too good on mobile devices.

So that's nice.

The first thing I'm seeing here is this text against this full screen photo.

I'm on a Retina MacBook Pro, which is not uncommon but it's also not common at the same time.

Actually, that's a terrible sentence.

What I'm trying to say is there are some people using Retina devices,

but it's not too common yet.

I think eventually, though, really every device will have a high-resolution display.

So it's probably a good idea to update this photo with a higher resolution version,

which could be a little bit difficult to do because it is a full screen photo.

When you have an edge-to-edge photo like that, it might be a little bit hard

to put one that's even larger at 2x resolution because you want to save bandwidth.

One trick that you can do with those really large photos is that you can put them at a high resolution

but get away with a ton of compression on them.

So if you're exporting this from Photoshop or something,

you can actually put 20% or 30% compression on it,

which is actually quite high, rather than exporting it at 80% to 100% or something.

You can put tons of compression on these high-resolution images

because when they get shrunk down you actually can't see that they're highly compressed,

and the net result is images that are much, much smaller.

I actually have a photo on my website that's pretty high res and it's highly compressed,

but you can't tell. It looks really sharp on Retina displays.

So a little tip there.

I think the text here is kind of difficult to read against this photo.

I'm not really sure how it could be fixed for this particular photo

because there's all sorts of different levels of contrast here.

There's bright areas, there's a few middle grays here, but there's not any dark areas,

and I think you would really need a dark area of the photo to put this white text against

or a really bright area of the photo to put black text against.

I'm going to take a chance here and open up Automatic.com—

there we go—because I think they do this really well.

They have these nice full screen photos, but you can see they have this white text against a fairly dark background.

It's not super dark but it's dark enough that this white text shows up.

They do this—yeah.

This is a super dark background, and it actually works really well there.

But the product itself is highlighted quite nicely.

So something to think about there.

I don't want to spend too much more time talking about that.

When I scroll down here, it looks like there's some parallax scrolling.

I think this particular implementation of parallaxing is kind of strange

just because, gosh, it's hard to even describe what is going on here.

So when I scroll down, the photo stays in place

but other stuff comes up on top of it

and then the text kind of fades behind.

I think it would actually be better maybe if that text was just fixed,

kind of like the rest of the site here.

Let's take another chance and open up the inspector.

Let's see if we can change the positioning on this.

There's the banner, and it has—

Does that have the background on it? Whoa, there's a lot of containers here.

Yeah, I can't quite tell what's going on here,

so we're not going to try to change the positioning there.

But I would just try to make it fixed like the rest of the page here

because it's kind of strange fading behind there.

So then we scroll down.

Remember this is a portfolio site, so we get to Recent Work.

It looks like there's a news site that got put together here.

I actually like this because even though it looks like it's the only item in this portfolio,

let me click on Portfolio and see what happens here.

Oh! No, it's not. Interesting.

So there actually are different pages here.

I kind of assumed that these would just actually scroll down.

But I like this because it just shows one piece of work.

It's really easy to look at and you're not distracted by tons and tons of tiny thumbnails of portfolio pieces.

The portfolio is kind of small, though, so there's not a whole lot of benefit

of actually clicking through to Portfolio.

So it might not be a bad idea to just have these 2 pieces right there on the homepage

and just roll it into a single page.

Something to think about there.

Of course he is displaying all of his Treehouse badges here, so that's pretty awesome.

Again, you can go to TeamTreehouse.com/live

if you'd like to sign up for Treehouse and start earning badges.

And then down here we have some social links.

This is interesting.

I think the white color here looks pretty nice against the green background. It stands out well.

But when I hover over, I would really expect those to just change into a slightly different color,

maybe kind of a gray tone or something against this green

or maybe a darker green.

Right now they are changing into a completely different outline.

Well, actually only the Twitter icon is changing to a different outline.

The colors are really difficult to see against this green, so that might be something to change there.

And here we have red and green right up against one another.

Those are complementary colors,

but when you put 2 complements together, they do tend to look pretty harsh.

They can vibrate along harder edges there.

So I'd probably change that.

But other than that, it looks pretty good.

It looks like a portfolio website to me.

I like that the recent work is right up front. So good job on that one.

All right. Let's move on. Here's another name that I'm probably not going to pronounce right, so I apologize.

I think it's Syrmatenia.

They have sent in a link here to their website.

They say that they are a web and graphic designer.

So it looks like this is a portfolio website once again.

Here is the Portfolio link.

They say, "Hello, I am Syrmatenia a junior web and graphic designer from Greece."

"I come from Thessaloniki city and I am currently looking for a job."

And you can view their portfolio. That's nice.

Here's some selected projects from their portfolio.

Again, I like that the work is just right up front.

It's really easy to check it out.

And then we have some skills listed out.

This is kind of what I was talking about earlier.

I like that the skills are just listed in a list here rather than having those bars filling in

and kind of showing the level of skill in each one.

I just assume that, well, this person is probably better at PHP

than they are at Flash, although they do say, "Basic Knowledge," so maybe not. I'm not sure.

But that's nice.

Down here we have a little menu, some social media links,

and here again, just like I was talking about on the previous site,

just changing the color slightly is actually what you'd probably want to do there,

not actually changing the color and the outline entirely.

So that's really nice.

We can go back to the top there, and let's take a look at some of these pages.

I'm going to go to About Me.

That's a lovely About Me page.

"You are on the right page if you want to learn more information about me."

Hey! That's great.

One thing I didn't mention on one of the previous websites—

actually, I think it was PicDigest—and I'm noticing it here as well,

you want to pay attention to the line breaks in your typography.

We just have one word here breaking down to the next line.

Just by adjusting the font size or even adjusting the copy

you could have that on one line and it would look probably a lot cleaner.

So I'm going to hack this in the inspector,

and I'm just going to change the copy here so you can see what I'm talking about.

I'm going to say, "Hi, here's where you can learn more about me!"

All right. So we've changed that and now we don't have that word breaking down to the next line.

That looks a little bit nicer.

She lists out her education, professional experience, distinctions, and hobbies.

That's cool.

Let's go ahead and jump over to the portfolio.

It looks like there's quite a bit of portfolio work here.

I guess I can filter by web design, graphic design, and then videos.

That's cool.

I think I'd try to actually limit your portfolio a little bit more

just to a few selected pieces that you feel really strongly about.

And I'd also try to align your portfolio with your expertise.

It doesn't really look like you're offering any kind of video services here,

at least that I can see,

so I think it is a little bit strange to be including video work in your portfolio.

I guess it does say just, "For Fun" there,

but it doesn't really belong in a portfolio.

You can definitely put that on your YouTube account or something like that,

which is linked right here. Hey, look at that.

So overall, I think it looks pretty decent.

I think the typography is actually a little bit large here,

particularly in the navigation and in some of the headers.

I would try to tone that down a little bit.

I would also try to adjust the contrast of some of the typography

just to highlight things a little bit more clearly.

Maybe Skills & Expertise here or this listing of skills

could actually use maybe a slightly different color gray rather than just using pure black for everything.

If we change the size of this, it looks like it is indeed responsive, so good job there.

It looks like everybody knew that I was going to be checking for that on every website, so that's good.

Overall, it looks pretty nice.

Let's move on to Rafael.

It is currently 12:30 Eastern Standard Time, and we've gone through exactly half.

Look at that. Wow! We are perfectly on schedule.

Rafael says, "It's Rafael. I have won a 2-year scholarship with you guys—" Oh, that's wonderful!

I am glad to hear you're using Treehouse.

"—and I am now building my own startup." Wow! That's really cool.

"I almost finished the front-end development and I would really like to see how Nick is going to review it."

"You can check the project at the demo URL," here.

"The project name is 'El Fostan' and it's the Arabic word for 'The Dress.'"

"It is an Egyptian dress search engine." Wow! That is super specific.

I can't think of an English dress search engine. It's cool that there is one for the Egyptian market, though.

This website is in Arabic, and it just so happens that I actually don't speak Arabic,

so I am going to try translating this.

Actually, I'm not going to click that button just yet

because one really cool way that you can look at a design is by not having the text in your native language.

So that's why designers may sometimes use Lorem Ipsum text

so you can pay a little bit more attention to the design.

But this will actually do the same thing.

I can just look at the design without having to read the text

and just judge it purely on the shapes and composition and colors here.

First impression is that this header is a little bit too large.

I'd actually like to see the website start kind of like here

because this looks like top-level navigation here.

It looks like there's some sort of description about the website.

And then I assume this is where you would actually start the search for your dresses.

That looks pretty nice.

I like the full screen photo here. It looks pretty nice on my Retina display.

I'm just going to increase the brightness here so I can see this a little bit better.

This photo looks fairly sharp on this display.

And I do like that the dark background is here.

That helps the white text to stand out.

There is a little bit of a white background down here that's not contrasting well with this white text,

so I wonder if we can move this photo down just a little bit to get more of that dark in there.

But still, it looks pretty good.

There's a drop shadow on it, which I assume is using the text-shadow property.

Let's go ahead and see if it is.

And maybe I have to go deeper or higher up.

Huh. I can't quite tell.

But yeah, it looks like it's using text-shadow. So that's cool.

Let's scroll down a little bit more here.

I assume this is where you would actually look at maybe popular dresses or something.

Again, I don't speak Arabic. I'm not sure what these numbers are supposed to be.

Maybe that's a price or maybe that's how many likes this has gotten,

although there are some social stats down there, so maybe not. I'm not sure.

We'll translate it in just a second and look.

But yeah, overall, this site looks pretty nice.

It looks like it's still under construction here and kind of missing a couple of assets.

Down here there's a site map, and then you can click to go back to the top.

I'm going to try resizing this to see if it responds,

and it doesn't look like it does.

So that would be another suggestion is to make sure that this website is responsive

because people are browsing the Web on mobile devices more than ever—

in fact, even more so than they do on desktops.

So that's important.

Let's translate this, and we're going to see how well Google is able to translate Arabic to English.

It looks like we have Accessories, hand. So far, not too great.

Not the fault of the website. Probably just a bad translation from Google.

Make Up Artist, Photographers.

Maybe you can search for makeup artists and photographers here.

Under Dresses we can search for wedding dresses, dresses for engagements,

and an evening dress.

And then okay, right. So this is the search where you can select the type of dress.

And then, oh, I guess this is the region of Egypt, I assume,

where you would select where you might want to pick up your dress.

So that's cool.

Let's just see what happens when we hit Search here.

Google has translated this, and it looks like this is still under construction,

so it's just using the same asset for every single dress.

But I assume this is where the dresses would come up.

And hey, look, those are prices. That was a good guess.

You can buy or rent these. That's pretty cool.

It looks like there's some filters over here on the right side.

One thing to keep in mind is that this is an Arabic website,

so all of the text is read from right to left,

and that's why you're seeing the navigation over here on the right side

and these filters over here on the right side.

Normally that type of stuff would be over on the left,

but for this website it makes sense.

And then this is really interesting.

I actually did not know this about languages that are read from right to left,

but I guess the pagination would also be reversed for what I'm used to.

So it goes from 1 to 6 here,

and you can search through those.

Pretty cool site.

I mean, I don't have a whole lot to say. The design does look really nice.

I can click and go back to the homepage. Can I?

Not quite, so maybe that part is still under construction.

Oops. Excuse me. Let's see if we can go back there. There we go.

Again, two suggestions here would just be to make this part the top of the page.

I think this large header is kind of unnecessary.

And then I would also make sure that this website is responsive.

Really cool site. I've never seen an Egyptian dress search engine until today.

Moving on, this person's name is Samiullah. [struggles to pronounce name] I'm really sorry.

We're just going to call him Khan because I know how to say that.

"I'd be happy if the following two links were reviews. Thanks."

Ooh, we get to review 2 websites from Khan.

I'm going to look at this first one.

This first one is called Code Engineers, and it's a joint venture of Code Engineers and Isolify.

They are everywhere. They provide hosting services through world's top hosters.

There's advertisements that are not here.

Wow. I think this is a website where I can purchase hosting.

But I guess that would be my first suggestion is to actually try to make it a little bit more clear

as to what this website is actually for.

Some kind of header at the top would really help that out.

If I open up the dress search engine again, you can see that there's nice clear text here up at the top

that if I spoke Arabic I assume would describe what this site is about.

We've seen that in a couple of other websites that we've reviewed already.

So some sort of text that just really says in very plain language what this site does would be super helpful.

For example, here it says, "We Provide Powerful Business Solutions."

I don't know what that means. There's lots of things that businesses need.

I think the design here actually looks kind of dated.

This patterned background is a little bit harsh,

and then I don't really like the colors here.

I feel like it could be a little bit more of a pleasing color palette.

I guess it's good that the contact information is up at the top here.

That's good because it is often difficult to find the contact information on some websites, believe it or not.

Overall, yeah, I would maybe try to rethink this website with a framework like Bootstrap

because when you use a framework, it's really easy not only to get started right away and code up things really fast

and do them well in a kind of battle-tested environment,

but it also helps you with design because all of the margins and padding

and colors and everything is kind of already done for you

and you can just tweak that and build on top of it and customize it for your own needs.

That's good because if you don't have a whole lot of experience creating designs,

it can help keep you within certain constraints, which is a good thing and can help you learn.

Let's look at this next website here.

This is called Gurus of IT at GurusOfIT.com.

They have affordable solutions, and they're gurus of information technology. Look at that.

"We design astonishing websites." Okay.

This is a little bit better because it actually says what they do.

I guess this is some sort of web design agency.

Here they list their services: Domain Registration, Web Hosting, Website Designing,

and Internet Marketing using SEO.

I think the biggest problem with this website is that it's very cluttered.

There's just a lot of stuff on the page, and there's not a whole lot of space in between each element.

If everything were spaced out a little bit more, it might be a little bit easier to parse

and quickly scan the website to understand what it's about,

because immediately I looked up here.

I didn't even see this until later on, "We design astonishing websites."

I also think these animations play way too fast.

I would like a little bit more time to see what each one of these websites looks like

and then maybe give a little bit of time for them to scroll smoothly,

maybe use some sort of carousel here.

In fact, I'm just going to go ahead and open up Bootstrap here.

Let's see. GetBootstrap.com.

I think they have a carousel component which would actually be perfect for this particular situation.

Can I not scroll here? Whoa, what's going on?

I'm just going to try to search for carousel. That's not working.

Maybe it's under JavaScript.

Yeah, there it is, Carousel.

They actually already have this carousel built.

Again, if you use Bootstrap, you can take advantage of all of the nice spacing

and colors that they already have set up.

And they have these really great components,

so you could put this super nice carousel in place of this,

which I think would look a lot nicer.

Let's check the responsiveness. No.

Again, if you're going to be creating websites, you've got to make them work for mobile devices.

Let's move on.

It looks like we're about 75% of the way through,

and it's 12:43, so we're doing pretty well on time here.

I'm going to open up this one from Duncan.

Duncan says, "Please could you review my latest project on your Treehouse Reviews Livestream."

Hey, you're in luck. We're going to do it.

It says, "It's a rebrand and new website for rock band The Thinking Men."

It looks like we have a website here for a rock band called The Thinking Men.

They've got a nice big YouTube video here.

Just go ahead and click it. I don't think we're going to get audio here, but that's okay.

It looks like the player controls aren't present, but that's all right.

There's a nice video there. I can get an idea of what the band is all about. That's pretty cool.

If I scroll down I can see the latest news about the band.

One thing I'm noticing right away here is that this typography is just a little bit too tall and skinny

and the letters are spaced too close together.

So I would try to adjust that a little bit.

This typography is very readable, so that looks good.

But it's kind of difficult to see exactly what each one of these are saying.

I have to put in a little bit of work to read each word, which kind of slows down the scannability of the site.

Same thing for the header here.

I think this font is just a little bit too tall and too bold and the letters are too close together.

It feels a little bit cramped.

But overall, so far, so good. It looks pretty nice.

I think that's my only piece of criticism so far.

Let's see. Forthcoming Shows, gig dates coming soon.

So I guess they don't have any upcoming shows.

And hey, look, they have embedded some audio clips here from SoundCloud.

SoundCloud is a place where you can upload audio samples.

It's kind of like the YouTube of audio, I guess, without video is one way to describe it.

We can play these and hear some music from this band. So that's cool.

Then you can buy their music, you can buy tickets to their shows,

and you can also buy merchandise.

I think this is great. I think this is really all that I would want out of a band website.

If I don't know anything about the band, it's cool to see this music video right up front,

and then I can just scroll down and pretty quickly listen to some more of their music.

And if I really, really like this band I can scroll down even further and purchase.

That's cool that I get a sample up front before I actually have to commit to buying anything.

I think the order of elements is good here.

Let's check the responsiveness. Oh, man.

I actually did not think this website was going to be responsive for some reason,

but I was incorrect. It is responsive and it responds quite well.

Usually when you have embedded elements like this, like these clips from SoundCloud,

they don't always respond very well.

I'm not really sure specifically if SoundCloud has this built in or if they did it themselves,

but yeah, good job.

It looks like a really great responsive website that is well suited to scrolling

on a mobile device in portrait view.

I'm just going to click around to a couple of other pages here.

It looks like a website to me.

I like these full screen photos to give me more of a sense of the band.

When I click on About, I can see all the different people that are in the band.

Again, this typography isn't very readable.

I'd pick a different font here.

I understand why you would want to use a script font here

just to give it this handwritten look, which is kind of cool,

but I would try to go for a script font that's a little bit more readable.

There's quite a few of them out there.

In fact, if we go over to Google.com/fonts,

you can find lots and lots of free web fonts.

They're pretty good and they're really easy to include in your website.

All you have to do is click on Quick-use here.

There it is right there.

You can add this style sheet to your website,

and then you can copy and paste font-family here and use the font

once you've included the style sheet.

Pretty cool. I love using Google Fonts, so that might be a place to look for different pieces of typography.

Overall, it looks really cool.

I think the color scheme is good, I think the use of texture is actually quite nice.

You don't see that on too many websites these days

just because everybody is going to flat design.

So I like to see something just a little bit different.

Texture is actually becoming a way to distinguish yourself a little bit more.

Let's move on. Great website, Duncan. I really like it.

We're going to move on to Adam.

Adam says, "I would really appreciate feedback. Learned all my coding knowledge from Treehouse."

Oh, that is just wonderful.

Of course if you want to sign up for Treehouse, be sure to go to TeamTreehouse.com/live

and you can go ahead and start learning today.

Pretty cool.

Let's jump into Adam's website here.

It's called Find Your Crave.

Just by looking at the URL and the name of the site, I assume this is a site about food.

And indeed it is.

You've got some pictures of food here.

I think it's to find restaurants.

It kind of looks like it's like Yelp or something like that.

Let's read some of the copy here and learn more about it.

"Connect with local restaurants and the food around you on FYC."

That's Find Your Crave.

"People use FYC to find specials, menus, and much more to satisfy their crave."

"FYC is your best restaurant information guide. Specials. Menus. Photos. Just for your craves."

Okay. Right away here I think the UI is a little bit confusing.

Whoa. Can I actually not even click this button? Okay.

It says, "Get Started" here and this looks like a button that I can click,

but it's actually not. It's just text there.

So if that is supposed to be a button, it should definitely be linked.

If it's not supposed to be a button, then it probably shouldn't look like a button.

Up here it looks like we can choose our city.

This looks pretty strange on a desktop.

I assume if we size this down to a mobile size that it would look a little bit better.

But that probably needs some cleanup on the desktop to take more advantage of this larger canvas.

I think a good way to organize this might just be by letter

or even just allowing me to pick in a drop-down menu right when I click on that.

But if you scroll down here, it doesn't look like they have any places in Florida

that I could relate to, but that's okay. Let's see.

Have I been to any of these cities? I'm sure I've been to at least one of them.

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.

We have Sioux Falls here, some restaurants.

We can click on All Places, Special Offers, Photo Gallery, or Menu Items.

I assume if I click on All Places it will show me all of the restaurants for that particular city.

That looks like what it's showing me.

Then I click on Special Offers so I can get special offers for the city.

Okay. This UI is starting to make a little bit more sense here.

Some menu items. That's kind of a strange but interesting way to browse food in an area.

I guess if you don't actually want to browse the restaurants necessarily

and just kind of want to see if you can get a particular dish at any of these restaurants,

that's kind of a neat way to browse.

Then there's a photo gallery

So if you just want to browse in this Pinterest look and style, that's cool.

But again, I think the UI here is really confusing.

When I see this text box here, I assume automatically that I should be typing in

something like Chinese food or burgers or whatever,

but that's actually a place where I'm supposed to type in my email address

to get a weekly report about this city,

whereas I'm supposed to click on these things to actually get information about the city.

And then there's this button here again.

So kind of strange over here.

I almost feel like this should just be a single search box

that's super easy for me to just say, "I want to get this kind of food," or something.

They have some featured locations down here. That's kind of interesting.

From a business perspective, you might be able to get restaurants to actually pay you to be featured.

I'm wondering if that's actually already going on.

Hey, there's Advertise down here, so yeah, I assume that's what's happening here.

Interesting way to monetize. That's cool.

I think the color scheme is just way too close to Yelp, though,

because Yelp does some pretty similar things and they use red, white, and black

just like Find Your Crave.

So if you are going to create something that is so similar to Yelp,

you really need to find a way to distinguish yourself,

and one of the strongest ways to do that is with a different color scheme.

So definitely something to think about there.

Let's check the responsiveness here. Looks pretty decent.

Yeah, actually, this is kind of what I would expect to see out of this particular website on a mobile view.

That looks good.

But overall, it's a cool idea.

I really like the concept of being able to browse by menu items.

So something to explore further there.

All right. Let's move on to our very last website here from Keith.

Wow. Keith wrote quite a lot here.

Keith says, "This is my personal site. I'm not trying to freelance."

"The site is intended as an online resume and blog while I look for a job in the industry."

"I would love feedback on all aspects of the site: design (I'm no designer)—"

Hey, that's okay. I'll give you some tips.

"—content, responsive principles, CSS, HTML, WordPress, whatever you want to critique."

"I added a Work Project overview of the site itself."

"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.

And then he says, "I haven't built any other custom WordPress themes

so I wanted to show that I can."

"This is a custom theme I created from the info I learned from Zac Gordon's WordPress videos."

Hey, that's really cool.

Again, you can check us out at TeamTreehouse.com/live.

And when you sign up you can watch Zac's videos, where he teaches you how to make custom WordPress themes.

I assume that's what Keith did.

Let's go ahead and take a look at Keith's website here.

Were there 2 separate URLs there? No. Those were the same.

So I guess the work overview must be in here.

Not quite sure what Keith meant by that.

First impressions, I really like the look of this website.

I think the navigation is a little bit huge here.

I do like that it's large and nice and clickable,

but it's still pretty large for a desktop display,

and it really pushes down your name here, which, because this is your website,

that's the most important part—to have your name right there up at the top.

So something to think about there.

Maybe you could actually put your name up here and then move this navigation over here to the right side

and then have people click on it there.

That might be a way to consolidate a couple things here.

Keith is a husband and father, tech enthusiast, web developer and he says,

"I'm a back-end developer."

Keith, you should feel really good about this design because it looks pretty decent.

It definitely looks like you have more design skills than you're giving yourself credit for.

So good job.

He says, "I currently use PHP with CodeIgniter or WordPress."

"I tend to view projects from a macro perspective where I work back from the business model or goal."

That's always a good idea. "I live in Oregon with my lovely wife and our daughter."

Let's check out some of these pages here.

Let's look at the Contact page first.

Whoa! Those are super huge social icons.

Those are probably the largest social icons I've ever seen.

But I mean, that's cool. I don't know. I guess it gets the point across.

I can click on his email right here, I can go to his LinkedIn, his Google+ or his Twitter.

I don't know. What more would you need on a contact page?

I guess a contact form.

It might be good to actually spell out your email address here

because some people don't actually like to use the Mail To link.

You can see it down here at the bottom when I hover over it.

It says "Mail To" and that's his email address.

But it might be good to actually spell out your email address on the page

just in case people want to copy and paste it into an app like Gmail.

But that's interesting.

That's kind of a cool way to do a Contact page.

Here we have Keith's blog. He has some recent blog posts here.

Looks super simple. It's a really nice-looking blog.

It doesn't look too cluttered. So I think that looks nice.

I think I would actually reverse these columns because the information over on the right here

is actually more important than what's over here on the left.

And because English is read left to right, unlike Arabic,

it would be good to have the more important information over on the left-hand side.

So maybe flip those columns around.

If we click on Work, just hovering over Work here—

actually hovering over all of the navigation items, you can see over on the right side

that it tells me what the navigation item is beyond just the iconography.

I think I'd like this yellow color to stand out a little bit more against the gray background.

So if you can somehow make that work, maybe make the background a little bit darker,

maybe make the yellow a slightly different color, or maybe just pick a different color here altogether,

it might be a little bit easier to see that.

Alternatively, you could actually just put the navigation items right down here at the bottom.

But if we scroll down here, we have this one personal project that Keith put together,

built with PHP & CodeIgniter.

It looks like a portfolio page to me.

One thing that I would suggest here if it's—

Oh! Actually, wait. There's a Next button.

Oh, okay.

I think that's what Keith meant when he said that he's included this site in his work.

So there's a piece of criticism.

I totally missed that Next button and barely just caught it.

So it might be better to actually present your work in some kind of gallery here

and then when you click on each piece of work,

it brings you to the page that tells you more detail about the project.

So something to think about there.

But if we just scroll through here, it looks like this portfolio is pretty well filled out

with some cool-looking PHP projects.

Good job on that.

Again, I think if you just organize them a little bit better here,

it would be easier to see what you've worked on.

Let's check the responsiveness. Hey! Good job, Keith. Look at that. Wow!

You know, this menu actually looks great on mobile.

I actually like this better than the desktop version of the site.

That's pretty cool.

I wonder if you could almost bring this style menu, just because there's 4 nav items,

if you could bring that over here somehow and then have your name up here.

I don't know. Maybe just something to think about.

But it looks good. It looks like this site responds well.

I really like the bright colors, and I think Keith did a great job.

Look at that. It is 1:00 p.m. That's exactly one hour. That was perfect, ladies and gentlemen.

We're going to go to some Q&A now.

Again, Chris Zabriskie is moderating the chat over on YouTube,

and hopefully he has a couple of questions here for me in the chat.

He says, "A couple of people have submitted stuff on YouTube if we have time."

Sure. Let's go ahead and just do a couple more here.

But while I'm doing these 2 websites, go ahead and try to come up with a couple questions for me.

I can answer pretty much anything you want about HTML, CSS, design, UX, web business,

how to get started in web design—with Treehouse of course, right?—really anything you want.

So feel free to ask me anything.

We'll probably do Q&A for 10 or 15 minutes before we wrap up here.

Let's look at these other 2 websites.

Let's look at SmartRocket.com.br.

Oh, man. Okay. It looks like I actually lost Wi-Fi over here on my iPad.

So maybe there are some questions that Chris is submitting.

I'll go ahead and reconnect.

Hopefully there are some questions in there.

We'll review some stuff while we're waiting, though.

Okay.

There we go. Okay. All right.

Let's take a look at this website. It's at SmartRocket.com.br.

It says, "We're Smart Rocket //Web & Mobile.'

"We design, create, deliver, and maintain IT solutions including Mobile Apps and Web Systems."

Whoa! What is a web system?

"We take the time to understand your needs to deliver the best solution

with the technology that is most suited to your needs."

Oh my gosh. When I scroll down the page, these triangles start spinning.

Look at that. That is so trippy.

I've got to say, though, I'm kind of making a joke out of this

but I do like this design overall.

The strong diagonals in this triangle are really cool,

and you actually don't see that a whole lot in web design

just because everything on the page is usually in a square or rectangular box.

So it's nice to see something a little bit different there.

I like the really strong contrast of black and white. That's a really bold choice.

A lot of times when you make a black and white website it can tend to look pretty plain,

but this actually looks quite nice.

Scroll down to Our Work. Oh, look at those beautiful, shiny devices.

What Do We Do? You can learn more about what they do.

And How We Work. You can see their process for putting together sites.

And then you can go ahead and contact them.

Pretty simple site.

I guess there's a menu here that will scroll down to those particular parts of the site.

Yeah. I guess I don't really have a whole lot to say.

It's a great-looking site. Let's check the responsiveness.

I kind of figured it would respond really nicely, just like this.

I'm actually curious how these triangles are being put together

because I noticed a little bit of aliasing along the bottom here,

which suggests to me that this is actually a rotated element.

So let's hover over here.

Let's see.

How are they doing this? Is that just a background?

Overlay.

I'm sure I could figure it out, but I can't quite dig into it right now.

But that's, yeah, a really cool design.

Okay. Let's look at this one other website.

It looks like there are some questions rolling in,

so I'll give a little bit more time for more questions to come in.

Let's look at this website from Julian-Thomas.com.

This is a website for personal training.

"Julian Thomas, Elite Personal Training."

Wow! That's really cool.

I really like the look of this site, that nice full screen photo.

Again, when using full screen photos with white text on top,

the full screen photo really should have a darker background, which this one does.

You can see the white text looks really crispy there.

Up here he's got some navigation links.

Yeah, first impression, I think this is a great-looking website.

It tells me right away what the website is about.

"A New Breed. Julian Thomas is a Team Great Britain Sprinter

"that specializes in functional mobility and development training,

the same training used in Olympic level athletics." Wow! That's pretty impressive.

So I guess these are all the different types of training that he offers.

Gosh, this is a great website.

Pretty pricey training here, but hey, if you're going to give me Olympic level training,

that's kind of what I would expect.

Looking at this website, I bet it responds great. Yep. Super awesome.

Don't have a whole lot of critique to give here because it's just a great-looking site.

So good job on that.

All right. Let's take a couple questions.

Our first question is from Kurt and he says, "Nick, have you been working out?"

Well, I have not been working out with Julian, but yes, I have been working out at the gym.

I use this really cool app called Fitness Buddy to help me put together different weightlifting routines.

Working on that.

Rodrigo asks, "Is WebGL and CSS 3D Transforms something worth learning?"

"Because it sure will take some time for me."

"I have 40% knowledge of CSS right now."

I don't have 100% of CSS knowledge, but I feel pretty confident that yes,

WebGL and 3D Transforms are something worth learning.

This is actually something that I've been tweeting about and writing about quite a bit lately.

So if you don't mind, I'd like to show you a couple things that I've been working on lately.

If I go to Blog.TeamTreehouse.com, I recently wrote a post—

actually, I wrote 2 different posts here. I'll bring both of them up and then summarize them for you.

In this earlier post I said, "3D in the Browser: WebGL versus CSS 3D Transforms."

This looks like exactly the thing that you're looking for.

CSS 3D Transforms are good for doing small, simple transforms.

If you just want to kind of adjust a couple elements slightly

or maybe make a Trello card-looking interface,

kind of like flip back and forth from the edit view to the show view,

simple stuff like that is fine because all you're really doing

is adjusting the look of the page.

You're not actually adjusting the semantics.

The problem with CSS 3D Transforms is that a lot of people will try to store geometry in the DOM,

or the Document Object Model.

I actually think the DOM is a terrible place to store geometry like that

because it's totally non-semantic.

The DOM is really a pretty heavy and expensive place computationally to store geometry,

and it just doesn't make sense when there's other options available like WebGL.

What is WebGL? WebGL is web graphics language.

Over in this other post I wrote an introduction to three.js,

which is actually a framework built on top of WebGL.

I made the Treehouse logo in 3D.

I'm going to click on this, and you can see the demo here.

When I scroll around with my mouse, you can see that we've got this 3D-looking Treehouse logo here.

I think WebGL is really just this amazing browser technology,

and not a whole lot of people are talking about it yet.

It's supported in Firefox, Safari, and Google Chrome.

It will be supported in Internet Explorer 11, which is the upcoming release of Internet Explorer.

It's not supported on mobile devices just yet,

but I have to imagine that support is coming soon.

In fact, I'm really curious if iOS 7 and the new iPhone will support that

because they talked about how so graphically powerful it is.

We will have to see.

One practical use for WebGL might actually be to create a product gallery.

For example, on the new marketing page for the new iPhone that was just announced yesterday,

you could have this gallery where you could browse an iPhone in 3D

and rotate it in 3D space and actually look at it.

This might be really good for higher-priced items as well.

You're going to be spending a lot more time putting together the models,

but again, you're selling a higher-priced item.

For example, a car. It would be really great to browse in 3D, open the car doors, look inside, and that sort of thing.

So I think it's totally worth learning. Yes.

We do teach CSS 3D Transforms on Treehouse right now.

We don't teach WebGL yet, but I'm really getting into it

and so there may be a course in the future. We will see.

Another question says, "What do you think?"

"Would anyone know about JavaScript to try to get minimal viable job as JavaScript dev?" Oh, okay.

Basically, what's the minimum amount of JavaScript you need to know

to get a job as a JavaScript developer?

I'm not sure that it's worth specializing specifically in just JavaScript.

You're going to need to know the rest of the browser environment, like HTML, CSS.

You're probably going to need to know how to work with databases as well.

As you get into more advanced JavaScript, you do things like AJAX,

you get into maybe node.js, which is a totally different thing.

But the minimum amount of JavaScript is actually quite a lot.

You actually do need to know JavaScript pretty well to be able to call yourself a JavaScript developer

because JavaScript is notoriously kind of a strange language,

mainly just because of the browser environment,

but it also has a lot of quirks to it as well.

It's really worth learning JavaScript very, very well.

A lot of people will just try to learn jQuery and not actually learn JavaScript on its own,

which that's a good way to start, that's a good way to first get into it is just doing jQuery.

It simplifies a lot of things, like DOM selections, for you.

But it's really worth learning JavaScript properly

and it's really worth diversifying your skills and learning about different JavaScript frameworks

and just getting into other things.

It's worth learning. We teach all that stuff at Treehouse, which of course you can check out at TeamTreehouse.com/live.

Next question is from Keith.

He says, "Are there any business issues with trying to pick up freelance

while working as a designer for an internal only corporate website?"

I actually was wondering this at a previous job I worked at,

and I just went and talked to my employer and they were totally okay with it.

I think in that particular situation it kind of depends on your contractual obligations,

local, state, or federal laws wherever you live.

But other than that, I think the best thing you could do

is probably just talk to the person that's employing you

and see if they're okay with you doing freelance work.

Don't try to fly under the radar and do it.

If they don't allow it and that's what you want to do,

then maybe try finding another job or go ahead and do it anyway

and maybe your freelance gig will pay off for you.

Anyway, not legal advice. Not a lawyer.

Joshua says, "Most companies want a portfolio or proof of skills

other than just what you state on a CV."

"How would you recommend getting those first few sites under your belt to use in a portfolio?"

That's a really good question.

There's a couple of things you can do to keep yourself busy.

One, you can create a personal website.

You can just create a website for yourself, like create your portfolio,

and it's totally cool to include your own portfolio in your portfolio.

I mean, it is a website that you made.

But beyond that, you can try looking locally.

So if there's maybe some local bands that you like,

they probably need a website because they can't really afford to get a good one.

But if you have those skills, they'd be happy to let you create a website for them.

You can do the same thing for all sorts of local businesses.

That might be something to think about.

Really, there's other things you can do too that will contribute to the web design community.

For example, you could put together some kind of cool piece of JavaScript

or a CSS framework or maybe you can put together a blogging platform.

Whatever it is, it doesn't have to be that complex.

It can actually just be kind of for fun, basically.

You have to just do it.

You just have to get going and create those websites.

If you want to do something in more of a practical setting, though,

I would look at local businesses because everybody needs a website.

You could even just ask friends if they want you to put together personal websites for them to get started.

Last one. Oh. No. We've got 2 more.

Oh. No, I'm sorry. This is the last question. Okay.

The question is, "Tearing my hair out over Google Web Font rendering."

"Any tips on how to avoid faux bold?"

I am actually not sure what you're talking about.

But if we head over to Google.com/fonts,

this is Google Web Fonts, you can either use the Quick-use here

or you can add something to your collection.

When you use Quick-use, they do give you styling options here.

You can check off if you want normal, bold, or ultra-bold.

If there's some kind of bolding that's happening,

it might just be that you have one of these selected that you don't really need.

That might be a place to look.

Again, not quite sure what is being addressed there,

but hopefully that answered your question.

Or maybe we could just pick another font. That might work too.

That's it for today.

Again, this was Treehouse Reviews, which is from TeamTreehouse.com/live.

You can check us out and learn all about web design, web development, mobile, business and so much more.

I'm Nick Pettit. You can follow me on Twitter at @nickrp.

That's it. We'll see you real soon.