This month I had the privilege to attend Zoe Rooney’s GDI PSD to HTML workshop. Lots of really good changes in my professional life right now, one of them being a new job in the city of Brotherly Love. I have been wrapping my head around Object Oriented CSS (here is  agreat intro from Smashing Magazine, SASS, git workflows and more. Also, been having a lot  of fun grabbing some random PSDS from around the web and converting the into HTML, CSS and some jQuery.
Working Projects are all on gitHub
- Faux site Occassionette https://github.com/cassking/occassionette-psd-to-html-pixel-perfect
- Faux Webshop site https://github.com/cassking/blueSite-psd-to-html
- Faux Webshop site with working jQuery slideshow https://github.com/cassking/JQueryVersion-blueSite-psd-to-html
The only way to get comfortable with CSS transforms, contained floats, the magic of  ‘overflow:hidden’ and other great tricks is to simply sit down, spend a few hours and just do it. Spend as many hours as you can (10,000 to achieve mastery 🙂  ) You will learn most from your mistakes as endless googling for answers eventually gets you to where you want to be in your layout….and a few great “aha!” moments.
Here are some resources for you to peek at if you want to begin hitting some PSD to HTML practice on your own:
- http://www.noupe.com/how-tos/30-elaborate-tutorials-to-teach-you-psd-to-html-conversion-73513.html
- http://demo.tutorialzine.com/2011/06/beautiful-portfolio-html5-jquery/
- http://www.designer-daily.com/tutorial-how-to-code-your-psd-into-a-html-css-layout-15632
- http://www.designzzz.com/search/?q=website+psd
- http://tutorialzine.com/2010/02/html5-css3-website-template/
Finally, I would like to thank two amazing developers, Zoe and Cat for always taking the patient time to answer my questions withhelpful hints along the way.
