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

Robert Niemczewski
Robert Niemczewski
4,560 Points
Posted by Robert Niemczewski
Robert Niemczewski
4,560 Points

Final design of new portfolio - now time for HTML5/CSS3 - questions!

Hello everybody,

So I took some time off to read articles and new tutorials on designing and photoshop and this is what I came out with:

http://t0ms0nsdesign.com/final.jpg

So the next step is to transfer the PSD to html5/css and I need some advices on couple things!

1.for the menu ( navigation ) buttons should I cut them out of the psd or use css3 for round corners?

  1. contact form - I suppose to use the css3 for the shadows and round corners also?
  2. the portfolio that I created with the four examples has a rectangle with an 25% fill in it over the picture so it could match the whole theme, now I want to create an option when a user hovers on it to show the real colors (meaning no rectangle on it)
  3. for the social icons I want the hover option to show the real colors of facebook, twitter, and google+ - should I use CSS Sprites for that?
  4. I want the whole page to be responsive - when coding should I code it in the html5/css3 first and then create a responsive versions? (never worked with responsive)

I know I am asking a lot of questions, but any feedback will be greatly appreciate it, also what you think overall of the design?

Thank you so much!

2 Answers

Cameron Jenkinson
Cameron Jenkinson
985 Points
Cameron Jenkinson
Cameron Jenkinson
985 Points

I like the design, did you do a first mock-up via photoshop?

  1. It is probably best to first implement an unordered list give it a class name of class="nav" (Which you can style later on) then wrap <a> link around <li>.

So it would look like

< ul class="nav > < a href="#somepage" ><li >About</li ></a> </ul >

For CSS styling on the buttons - Look around on some websites you like and if you see a button you like the look of you can get some inspiration from that style, you can even look at the CSS used on the element using 'inspect element' via google chrome.

  1. Yeah, again browse around for inspiration

  2. This would be a case of changing the css element clas, individually by ID. Say you wanted all 4 different colours then you would do it via id portfolio item 1 though 4. But if they're named class="portoflio-item" then you can style all of them, for your needs using the CSS using :hover i.e when the pointer hovers over the portfolio item then it will change according to what you set, in your case it would be background-color #chosencolor;.

  3. This is would be applying the id selector then setting the right CSS for each element, I am guessing they will be an achor link for html but would need to be given a specific ID so they don't mess around with your other anchor links. Then you can style each one according to the relevant color schemes.

  4. Take a look at the responsive design library in Treehouse, I am still learning it so can't give you the best advice on this question.

Hope this helps,

Cam

Robert Niemczewski
Robert Niemczewski
4,560 Points
Robert Niemczewski
Robert Niemczewski
4,560 Points

Thank you!

Glad you like it.

This is what I think I will do.

For the buttons there is a website that allows you to create them with rounded corners and shadows. For the portfolio I think I will either create seperate classes as you said, or just play with oppacity. Same thing will go for the social icons

Any more suggestions?

For