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: