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
Episode 2: Creating the Perfect Portfolio
11:54 with TreehouseIn 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.
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 upRelated 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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up