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

Design

Vincent Wong
Vincent Wong
3,330 Points
Posted by Vincent Wong
Vincent Wong
3,330 Points

Would love some critique on my Webpage!

Hi Guys,

So I've been through most of the HTML & CSS videos and absolutely love it. I decided to find a local diner and tried my best to redesign their website in my spare time.

It's pretty plain and static but I was wondering if you guys could critique the website I made (functionally & aesthetically).

I'm sure there's plenty of room for improvement (esp. the Nav Bar when it's on smaller screens- it just takes up too much space and I'm not sure what I can do with just HTML & CSS atm)

Here it is: http://www.wingyuwong.com/soda_rock/index.html

From Australia, with much love

4 Answers

Richard Wentford
Richard Wentford
19,730 Points

This is a quality site. On the 'contact us' page, maybe a map, giving a visual representation of where it is. Maybe Google maps or just a non-interactive picture.

I've checked how it looks in chrome on windows how it looks when the screen is reduced below 1250px width some sections get hidden of screen.

Maybe have some nav options hide when screen is below 660px or so, such as functions and gallery. Keeping it to just the essential parts.

Great first site though. Keep up the great work.

Vincent Wong
Vincent Wong
3,330 Points
Vincent Wong
Vincent Wong
3,330 Points

Thanks heaps, that's really encouraging. the google maps thing is a great idea, I'll google how to do that now haha

Joel Encinas
Joel Encinas
9,683 Points
Joel Encinas
Joel Encinas
9,683 Points

Hi Vicent

I think you should go to a single page layout, 'cause there's no much info overall, also since it is a diner try to include some photos of their food, don't include the prices, and add the possibility to share the dish (photo & info) via Facebook or social media, to show off the quality of the restaurant. In the Parties and functions try to make more visible the packages, design attractive price tables (there're lots of examples out there just google it for inspiration). Including a Facebook link in every page is a Must.

If you change it to single page website, you could include everything, the user will have all the info just by scrolling down, in the case of the gallery you can put the most attractive photos and include a See more!! button or something like that links to a full gallery. You could also add a footer for the contact details, such as address, phone, email, Facebook, Twitter, etc. Remember that social media has a huge weight for being a successful business.

That was about functionality, now about design, if this is a retro diner you should go for a retro design, so try to make it that way (also there're lots of things for inspiration). But is very important that you preserve the businesses colors since they´re part of the brand identity.

PS: if you've already pass all the CSS courses, then you should be able to make some cool css animations and transitions to make the site more attractive :D!...

Hope it helps!

Vincent Wong
Vincent Wong
3,330 Points
Vincent Wong
Vincent Wong
3,330 Points

Thanks heaps Joel, I'll try implementing these suggestions now. I tried finding some pictures of their dishes but there really wasn't much (surprising since it is a restaurant after all haha)

garrycohen
garrycohen
13,914 Points
garrycohen
garrycohen
13,914 Points

I think it's a nice design, however I have only viewed it on my iphone..

I think your content on the contact page could do with some left and right margin as the text displays right up against the screen edge when viewing on a screen this size..

And also reducing the facebook link shown by removing the http:// as this also overlaps the screen size slightly on mobile devices...

Vincent Wong
Vincent Wong
3,330 Points
Vincent Wong
Vincent Wong
3,330 Points

Thanks for the feedback Gary! Yeah you're absolutely right, gotta fix up some spacing issues- I'll get onto that

Hannah McPhee
Hannah McPhee
1,785 Points
Hannah McPhee
Hannah McPhee
1,785 Points

I think the red against blue nav text is quite harsh to look at. Apart from that, I think the site is really fresh and pleasing to the eye :)