Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

General Discussion

Shawn Shaligram
Shawn Shaligram
6,973 Points
Posted by Shawn Shaligram
Shawn Shaligram
6,973 Points

Feedback on personal project

Hi everyone,

I recently finished working on a side project to further improve my HTML and CSS skills. To do this, I built a website for a fictitious coffee shop in New York City. I would love your feedback on the site's overall typography, design, layout,etc.

The site is hosted through GitHub pages -- http://shaligramk.github.io/Kaffee/

Please take a look and let me know what you think!

Thanks, Shawn

7 Answers

Calvin Bramlett
Calvin Bramlett
13,748 Points
Calvin Bramlett
Calvin Bramlett
13,748 Points

It looks like you're mixing serif and sans serif fonts throughout the website. It's best if you go with one way or another. I would also look at your header. For example when you go to the menu page the first thing you see is your logo and the coffee image. If you had your logo smaller and higher up on the website you would give the page a little more room. You want to reduce the amount of work the user has to do to find what they're looking for. Other than that I really like the simple feel it has. The store is pretty nice.

The next thing I would work on is making it responsive. It's super easy to do and there is a course on how to do it on treehouse

Tom Bedford
Tom Bedford
15,645 Points
Tom Bedford
Tom Bedford
15,645 Points

I don't think it's necessary to stick exclusively to either serif or sans-serif fonts in a design. There is an interesting article on Smashing Magazine about combining typefaces.

Calvin Bramlett
Calvin Bramlett
13,748 Points

I agree. It's not necessary, but I believe it's a better practice. There are times when mixing them are okay but I don't really think so in this instance. On the home page the logo in sans serif. The tagline is a serif font and then the address below it is sans serif. It's just going back and forth. In the article you provided it's showing how to combine typefaces with headings and paragraphs, which I think is fine. I could also see it if you hand an article written in a serif font and inside the article there was a pull quote. The pull quote could be sans serif and it would look awesome.

Patrick Cooney
Patrick Cooney
12,216 Points
Patrick Cooney
Patrick Cooney
12,216 Points

There is absolutely no reason not to use serif and sans-serif together. Go look at an old book. Odds are the titles will be in sans-serif fonts and the text body will be serif. Serifs increase readability by helping you follow the line. The problem these days is people don't learn the history of design and why things are the way they are.

Sam Lillicrap
Sam Lillicrap
12,127 Points
Sam Lillicrap
Sam Lillicrap
12,127 Points

I also disagree about using sans serif and serif together. They can look really awesome together, either with titles in serif and body text in sans serif or vice versa. It really depends on the typefaces you choose on whether they look good together and give off the same vibe/feel.

Adam Fichman
Adam Fichman
9,502 Points

I completely disagree. Mixing and matching fonts can really bring a design to life when done well and I think it was done pretty well here.

The next thing I would work on is making it responsive. It's super easy to do Eh...I wouldn't say it's super easy to do. It's actually quite difficult to make a site fully responsive and be device agnostic. Getting a basic fluid site going is fairly simple yes, but making it truly responsive? Not so much.

But Shawn Shaligram, you've got a great start here. As a simple, made up project it's great. If you wanted to go into more depth with it, yes making it responsive would be a good next step. I also wouldn't mind seeing a more detailed item page when I click on an item.

Mike Fondario
Mike Fondario
11,286 Points
Mike Fondario
Mike Fondario
11,286 Points

Very new to this, but I loved the design and layout. Well done.

Patrick McClellan
Patrick McClellan
4,198 Points
Patrick McClellan
Patrick McClellan
4,198 Points

I like what you have done and where you are headed. I would add a link to get back to the top of the page without having scroll on each page and between your "Menu" items simply for convenience. Keep up the good work.

Sebastian Wilson
Sebastian Wilson
15,710 Points
Sebastian Wilson
Sebastian Wilson
15,710 Points

Nice. Are you using some sort of device detection, you could display different quality background images as that background image might take a while to download on a mobile device.

CSS for Larger screens (850 pixels and up).

@media only screen and (min-width: 850px) { html { background: url(/images/yourBackgroundImage.jpg) no-repeat fixed center top; } }

Shawn Shaligram
Shawn Shaligram
6,973 Points
Shawn Shaligram
Shawn Shaligram
6,973 Points

Thank you all for your feedback. I have made some initial changes, most notably, in regards to typography, spacing and layout. I still have to work on RWD though.

Side note: The more CSS I write, the more I think I should learning and using SASS in my projects. Thoughts ?

Thanks again, Shawn

Adam Fichman
Adam Fichman
9,502 Points

I personally wouldn't worry about SASS until you get a really good grasp on CSS. Just my two cents.

Gary Mann
Gary Mann
8,639 Points
Gary Mann
Gary Mann
8,639 Points

Shawn,

You did a really nice job, and I bet you learned a lot, and/or ingrained what you had learned. The cool thing is that you'll be able to keep learning with this (or ingraining) when you put in some interactivity, think about making it more responsive, etc..

The background picture and the opacity of the #hero section on the front page are almost really nice. I say "almost" though because the photographer focused on the coffee cup, yet the site blocks the focus of the picture leaving just the blurry background. This may not matter for your learning curve here, but I found it disconcerting. (I DON'T know much about photography, but) In a real project, the same photographer could take a pic from the same angle with the purpose of creating a background picture.

Minor major mistake, I think there's a spelling error on the front page. Is it 'Kaffe' or 'Kaffee'.

I'm not sure but If it were me, I'd play with using the same opacity on the black header of the menu page, etc. as you used on the home page.

When you learn more, you might play with other ways to display the other pages besides having the user scroll down the page. In the meantime, you might play with different styling to have the nav bar stay put while the user scrolls down the menu page, etc..

Just some thoughts; hope it helps, Gary

izspired
izspired
4,833 Points
izspired
izspired
4,833 Points

Great job so far...

Very clean layout. Great background picture.

Overall, the warm colours give off a comforting vibe and the straight edges/lines give a sense of modernity.

If I had to nitpick something, it would be the alignment of the menu titles and their description on the "Menu" page. Maybe have them aligned together to keep the visual line going down along the page. Other than that, I love the direction you're taking it. Keep it up :)