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

CSS

Posted by Mona Jalal
Mona Jalal
4,302 Points

Looking for general advices for improving my website appearance

I am on the job hunt so I am looking for general advices for making my website look better, please provide specific advice like on which page which type of suggestion you have or which tools you think I should use? Also which fonts is it suggested to use for professional website? Recently I heard about Google Font but was unsure if I should go with it or if there are better options.

http://monajalal.github.io/

Thanks a lot!

3 Answers

jason chan
jason chan
31,009 Points
jason chan
jason chan
31,009 Points

I would suggest a wireframe. Basically on piece of paper create a blueprint and then make the page look like that blueprint.

Trying copying things you like from other websites and apply to yours.

I also recommend finishing the web design track here at team treehouse.

Mark Wilkowske
PLUS
Mark Wilkowske
Courses Plus Student 18,131 Points
Mark Wilkowske
Mark Wilkowske
Courses Plus Student 18,131 Points

Hey Mona, your content is more interesting to me than the style!

In general, learn to make it easy to change things, like fonts, so develop an override stylesheet and put in it the things you want to target: Bootstrap and fontawesome, media queries. Try a couple different override files. Lato and Montseratt are popular Google fonts.

Specifically: Each page - maybe replace jumbotron with something that doesn't use so much vertical space. It could be sticky too.

navbar-nav - any .nav-item I click should have the active class so I can know I am on that particular page. In mobile view maybe try a button group for this navigation?

Home page - be sure the bottom copy can be seen in all views. Should your name be in a plain <h1>?

FireFox Responsive Design View - I'm looking at your site in it.

Add a footer to the site so users can be sure they see everything.

Mona Jalal
Mona Jalal
4,302 Points

Thanks for the comments. So if I want to watch some of the courses or tracks in TreeHouse which ones would you suggest? I have only tested in Chrome. I will test it in other browsers soonly. Thanks for the feedback. I did some minor changes if you want to have a look http://monajalal.github.io/ I added m-b-2 is that good in terms of footer or can you show me some visual examples/links to the footer you have in mind?

Mark Wilkowske
PLUS
Mark Wilkowske
Courses Plus Student 18,131 Points
Mark Wilkowske
Mark Wilkowske
Courses Plus Student 18,131 Points

Sorry I wasn't clearer about a footer which is important mainly, for the content that is put in it. Some sites repeat the global navigation in the footer so that the user can navigate the site without having to scroll back to the top of a page.

Some good suggestions can be found here: https://www.orbitmedia.com/blog/website-footer-design-best-practices/. I would go with putting the social icons in a footer - that way they aren't next to the main navigation tempting people to go to their own FB instead of finding out all about you.

I took most, if not all, of the Responsive courses and CSS Layout and Frameworks courses and completed the Front End Web Development track.