⚡ CYBER NOVEMBER SALE ⚡ 50% off any plan for 6 months, exclusive to new subscribers.

Join the Treehouse affiliate program and earn 25% recurring commission!

Well done!

You have completed Treehouse Reviews!

Sign up for Treehouse Back to Library

Preview

Sign up for Treehouse Continue

Episode 2: Creating the Perfect Portfolio

11:54 with Treehouse

In this episode, Mat, Pasan and Amit review two Treehouse member websites. The first website is a personal portfolio and the second is a site for a photographer/artist.

Speaker's Notes
Questions?
Video Transcript
Downloads
Workspaces

Websites reviewed in this episode:

Ricardo Diaz - http://ricardodiazdesign.com
Anton Moritz - http://byamandaml.se

Websites referred to in this episode:

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

treeviews 0:02

Welcome to treeviews--the show where Treehouse members 0:05

submit their work, and a panel of Treehouse teachers offers feedback. 0:08

Here is today's panel. 0:12

Hi there, I'm Pasan. >>I'm Mat. >>I'm Amit. 0:14

Welcome to Treeviews. 0:16

In today's show we have two websites that we are going to review. 0:18

The first website is by Ricardo Diaz, and it is ricardodiazdesign.com. 0:21

So Mat, why don't you take it away with design. 0:27

Sure thing Amit. 0:29

When we load up the page you notice a real slick animation at the top. 0:31

I'm really liking that, Ricardo--very cool. 0:36

Also, I'm really liking the color combinations that you used, 0:38

and the fact that you used web fonts 0:41

However, I would structure the content just a little bit differently. 0:43

I'll show you with a mock up that I did for you. 0:46

Mock--perfect. 0:48

As you can see, I've moved the logo all the way to the left 0:51

and the nav to the top middle right. 0:54

The reason for that is if you wanted to add in a new navigation tab. 0:57

Say, services, it's very easy to add. 1:01

Also, I've changed the font up a little bit, 1:04

and I've used a hierarchy font for the top called Stint extended bold, 1:06

which you can find at Google web fonts. 1:11

Also, I changed your content copy to Ariel. 1:13

As we go down the page I've restructured the content just a little bit. 1:18

So, it will condense the page just a little bit more, 1:22

where we have Developer, Designer, Services, and Hours. 1:25

Now when we go back over to the site, and we go to the About Me section, 1:31

what you're going to want to do to, 1:37

again with the fonts, keep those consistent. 1:39

Also, when you're doing a grid format layout 1:42

you're going to want to make sure everything is lined up correctly. 1:45

So, with the sidebar, you can how this line over here 1:49

doesn't exactly line up with the column on the left. 1:52

You're going to want to make sure that lines up. 1:55

Keep your look consistent throughout the site. 1:57

Pasan, you want to take a look at the content? 1:59

Sure, man. 2:02

Okay, Amit, if you can scroll all the way up top, and go to the My Work page. 2:04

Ricardo, I really like how you have your testimonials lower down on the page. 2:07

It really showcases your work and how your clients are happy with you. 2:10

Amit, scroll back up to the top. 2:15

Go to the About Me page. 2:17

I also like how you've listed your Treehouse badges--70 badges. 2:20

Great job, man. 2:24

All right, the overall content is great, but it's a little confusing. 2:27

Now, if you go back to the home page-- 2:29

There we go. 2:33

You'll see that first up, when you land on the page, 2:35

this is what you see right when you land. 2:37

It says Web Design in bold. 2:39

That makes me think you're a web designer, 2:41

but then when you scroll lower down the page--right here. 2:43

Now I know you said that you liked this developer-designer breakup, 2:46

but for me it's a little confusing. 2:49

So, on top it said you're a web designer, 2:51

but right there it says you'd rather be a developer. 2:54

So, what would you like to be more, right? 2:57

So, kind of stay consistent. 3:00

If you go to your Skills page--I'm sorry on your About page, 3:02

You know you have your graph of your skills. 3:05

Let this speak for you. 3:07

Let people see what you're good at, 3:10

and that will show whether you're a developer or a designer. 3:12

Then go back to the Home page, Amit. 3:14

So, going back with the inconsistent--not inconsistent really, 3:17

but it doesn't really flow really well. 3:21

So, what you want to do is you want to highlight the services you offer-- 3:23

going back to whether you want design or development. 3:26

You want to highlight the services higher up on the page. 3:29

On your current website if you scroll down, that's hidden in the footer. 3:32

Right--keep scrolling Amit. 3:36

So, what you offer is hidden in the footer, and that's hard for people to see. 3:39

So, if you go to the redesign that Mat has done, he's pulled that up right there. 3:41

There you go. 3:46

He's pulled that up higher up the page. 3:48

So you know people land there, 3:51

and they see really quick that you have development higher up. 3:53

Again, you know, you want to keep that consistent so it doesn't throw people off. 3:56

Finally I don't understand the purpose of Hours. 3:59

Are you an agency? 4:02

Do you work--do people have to come into your office? 4:04

Can they only contact you during business hours? 4:06

You want to make that clear. 4:09

If you're doing this by yourself, 4:11

make sure that people can get to you all times of the day. 4:13

You want as much work as you can get. 4:16

So, that's--other than that you've done a great job. 4:18

I love how you've inserted snippets of your personality in there. 4:20

So, content--great job. 4:23

Amit, do you want to take it off with the code? 4:25

Oh, yes--absolutely. 4:27

Firstly I would really like to commend you on using HTML5 and CSS3. 4:28

As you can see that awesome animation that you've done at the top, 4:33

that's done using CSS3 animation. 4:35

So, great work, Ricardo--awesome, really. 4:38

The next thing that I would like to point at is that since you are using HTML5, 4:42

you're using a lot of section tags. 4:47

I notice that you weren't really quite sure where to use section tags, 4:50

so you've kind of used it all over the place. 4:54

You probably want to stay away from using section tags 4:57

as wrappers to create columns or 5:00

just wrappers around different content like your social icons. 5:02

So, I would stay away from doing that. 5:07

There's a really good article on when 5:09

and when not to use section tags. 5:11

They have a lot of do's and don'ts 5:13

So, I really really recommend going over that article and taking a look at it. 5:15

So, do look at the article. 5:20

The other thing that was jumping at me was that you used browser detection. 5:22

In this day and age you probably want to stay clear of browser detection, 5:28

because you don't really know which browsers have what features. 5:31

You really want to use feature detection. 5:36

That's where modernizer comes in. 5:38

Modernizer is this great Javascript library that allow you to detect features 5:40

rather than make it vendor specific. 5:45

Finally I noticed that you were using something called Hyphenate. 5:48

I noticed that a lot of that text was static, 5:54

so the use of Hyphenate was not really clear. 5:57

I mean, since the text is static 6:00

you could really just put in the hyphens yourself. 6:03

If you were doing a responsive design, then Hyphenate makes more sense 6:06

because that's exactly what it does. 6:10

It responds to the text as it becomes smaller or larger. 6:13

So it makes more sense--here it's kind of overkill. 6:16

Other than that, really great design job and really good site. 6:19

Overall, good coding. 6:24

Ricardo, thanks for submitting your site. 6:26

Finally I want to know what Dion thinks of your site. 6:29

Hey Dion, what do you think of Ricardo's site, man? 6:32

That's what we thought too--you loved the site. 6:42

Our next website has been submitted by Anton Maritz. 6:46

Anton created his very first website for his sister. 6:49

What a nice brother you are. 6:52

So, Mat why don't you kick it off with design for us. 6:55

Absolutley, Amit. 6:57

When we first open up Anton's page we'll notice it's very minimal, 6:59

which I like--it's perfect. 7:02

We've got the logo at the top, navigation directly below it, 7:04

and then the content for the site directly underneath that. 7:08

Perfect--we can see exactly what the site's about--Amanda's art. 7:11

Then when we go to the Art section we can see the wide variety of her work. 7:16

Perfect. 7:20

Moving forward to the About page we'll see a brief bio of Amanda 7:22

and a nice photo of her. 7:26

Then on the Contact page we'll see a nice form 7:29

so that we can send Amanda a message. 7:31

Like the last website, I've restructured the content just a little bit. 7:33

For the Home page, I thought it would be great if we could take those images 7:38

and make them scale full size in the background. 7:42

This will allow the site to be responsive on all devices. 7:45

Then on the bottom left we have the logo 7:48

and the navigation directly below that/ 7:51

Moving forward on the Art page, again we want to make this site responsive 7:54

and fluid, so we take the thumbnails, and we make them larger. 7:58

Then, on the About page, I've done a dual column 8:03

with her image on the left and the text on the right. 8:07

On the Contact page, the same thing: 8:10

content on the left, form on the right. 8:13

Pasan, can we take a look at the content? 8:17

Sure--now Anton, you've done a great job. 8:19

I mean the website is focused; it's minimal. 8:22

We know exactly what it's about. 8:24

There are a very few minor changes we want to make. 8:26

So, first off--you know you have your photography link there. 8:29

You don't want to have an empty text--like just static text over there. 8:32

If you do want to show that there's photographs coming 8:36

and it's under construction, put one or two photos and say, 8:38

"Hey, they're more coming up," 8:42

or just do away with it completely. 8:44

You don't--this is a good website, 8:47

and you don't want people to see that it's not quite all the way done yet. 8:49

So, going back to the Home page 8:51

we know exactly what the website is about. 8:54

It's about art, 8:56

but I don't know if whether your sister wants to sell her art 8:58

or if she just wants to display her art. 9:01

So, first, if she's only displaying her art, make sure you have copywrite notices 9:04

or at least a watermark on the image. 9:09

If--Amit, just go ahead and right click. 9:12

I can save this image onto my desktop and just steal it. 9:14

It's super easy--so make sure you protect her assets. 9:16

Then you want to--on the Art page, 9:19

I noticed you use a plug-in to make the image pop out. 9:22

It can be simple if you want to sell the art to just include a price in there 9:26

and a message on the website saying, "Hey, if you want to buy the art 9:30

go to the Contact page and just send me a message." 9:34

You know, overall you've done a very good job. 9:37

It's focused. 9:39

So just make these minor changes, and you should be good to go. 9:41

So, Amit, why don't you take it off with the code 9:43

Absolutely--Anton, if this is your very first site, you have done an amazing job. 9:45

If I look at the markup--man, that's a really good markup. 9:50

You've also commented the markup really well. 9:53

I like the indentation. 9:56

You've done an awesome job. 9:58

So, I really love it. 10:00

A few things that I want to talk about-- 10:02

the first thing is that you loaded Good web fonts, which is great. 10:04

I noticed that you loaded the Good web fonts after you loaded your CSS. 10:07

You probably want to do it prior to loading your CSS 10:11

so that when the CSS does load it knows what fonts to load. 10:15

That's one of the things--the other thing is that when 10:20

you go to the Art section and you click on an image 10:22

the images load from right to left instead of left to right. 10:25

As you can see the arrow is here to the left, 10:30

and there is no arrow to the right. 10:33

I'm sure that's a very quick fix, and you can fix that very easily. 10:35

Finally on the Contact page 10:39

I noticed that you have no validation what so ever. 10:42

So, if I click on the send button it just automatically sends you the email 10:45

or the Contact form's details. 10:51

You probably want to add validation there, 10:53

and it's very easy to add validation using jQuery. 10:56

You can look up several different tutorials online, 10:59

and it's very simple to add that validation. 11:02

Plus, it will challenge you to take that website to the next level. 11:05

Well. overall I think you've done a great job. 11:10

If this is your first website--good job, man. 11:12

Hey, Dion, what do you think of Anton's website? 11:15

Well, he likes it. 11:26

Yeah, he loves it--he loves every website, 11:28

and we love Dion. 11:30

Well, thank you for watching. 11:32

Unfortunately that's all the time we have for today's show, 11:34

but we will be having more episodes, and we might get to 11:37

some of the submissions in future episodes. 11:39

That's it for today's show--I'm Amit. 11:43

I'm Pasan, >>I'm Mat. >> This was Treeviews 11:45

If you'd like your work reviewed on our next episode, 11:48

drop us a line at treeviews@teamtreehouse.com 11:50

You need to sign up for Treehouse in order to download course files.

Sign up

You need to sign up for Treehouse in order to set up Workspace

Sign up