{"id":763,"date":"2013-08-29T15:44:07","date_gmt":"2013-08-29T22:44:07","guid":{"rendered":"http:\/\/www.cassandraking.net\/wordpressapp\/?p=763"},"modified":"2013-08-29T15:53:04","modified_gmt":"2013-08-29T22:53:04","slug":"psd-to-html-and-the-art-of-the-css-reset-and-gladwells-10000-hours-to-mastery","status":"publish","type":"post","link":"https:\/\/www.cassandraking.net\/wordpressapp\/psd-to-html-and-the-art-of-the-css-reset-and-gladwells-10000-hours-to-mastery\/","title":{"rendered":"PSD to HTML, the art of the CSS reset and Gladwell&#8217;s 10,000 hours  to mastery"},"content":{"rendered":"<p><a href=\"http:\/\/www.cassandraking.net\/wordpressapp\/wp-content\/uploads\/2013\/08\/Screen-Shot-2013-08-29-at-6.40.09-PM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignright size-medium wp-image-765\" alt=\"Occassionette site\" src=\"http:\/\/www.cassandraking.net\/wordpressapp\/wp-content\/uploads\/2013\/08\/Screen-Shot-2013-08-29-at-6.40.09-PM-300x278.png\" width=\"300\" height=\"278\" srcset=\"https:\/\/www.cassandraking.net\/wordpressapp\/wp-content\/uploads\/2013\/08\/Screen-Shot-2013-08-29-at-6.40.09-PM-300x278.png 300w, https:\/\/www.cassandraking.net\/wordpressapp\/wp-content\/uploads\/2013\/08\/Screen-Shot-2013-08-29-at-6.40.09-PM-1024x952.png 1024w, https:\/\/www.cassandraking.net\/wordpressapp\/wp-content\/uploads\/2013\/08\/Screen-Shot-2013-08-29-at-6.40.09-PM.png 1169w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>This month I had the privilege to attend <a href=\"http:\/\/zoerooney.com\/blog\/everything\/girl-develop-it-photoshop-for-web-design-and-psd-to-html-project-recaps\/\">Zoe Rooney&#8217;s GDI PSD to HTML workshop<\/a>. 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 \u00c2\u00a0agreat intro from <a href=\"http:\/\/coding.smashingmagazine.com\/2011\/12\/12\/an-introduction-to-object-oriented-css-oocss\/\">Smashing Magazine<\/a>, SASS, git workflows and more. Also, been having a lot \u00c2\u00a0of fun grabbing some random PSDS from around the web and converting the into HTML, CSS and some jQuery.<\/p>\n<p><strong>Working Projects are all on gitHub<\/strong><\/p>\n<ul>\n<li><strong>Faux site Occassionette<\/strong>\u00c2\u00a0<a href=\"https:\/\/github.com\/cassking\/occassionette-psd-to-html-pixel-perfect\">https:\/\/github.com\/cassking\/occassionette-psd-to-html-pixel-perfect<\/a><\/li>\n<li><strong>Faux Webshop site<\/strong>\u00c2\u00a0<a href=\"https:\/\/github.com\/cassking\/blueSite-psd-to-html\">https:\/\/github.com\/cassking\/blueSite-psd-to-html<\/a><\/li>\n<li><strong>Faux Webshop site with working jQuery slideshow<\/strong>\u00c2\u00a0<a href=\"https:\/\/github.com\/cassking\/JQueryVersion-blueSite-psd-to-html\">https:\/\/github.com\/cassking\/JQueryVersion-blueSite-psd-to-html<\/a><\/li>\n<\/ul>\n<p>The only way to get comfortable with CSS transforms, contained floats, the magic of \u00c2\u00a0&#8216;overflow:hidden&#8217; and other great tricks is to simply sit down, spend a few hours and just do it. Spend as many hours as you can (<a href=\"http:\/\/www.theatlanticwire.com\/entertainment\/2013\/08\/malcolm-gladwell-defends-disputed-10000-hours-rule\/68624\/\">10,000 to achieve mastery<\/a> \ud83d\ude42 \u00c2\u00a0 ) You will learn most from your mistakes as endless googling for answers eventually gets you to where you want to be in your layout&#8230;.and a few great &#8220;aha!&#8221; moments.<\/p>\n<p><strong>Here are some resources for you to peek at if you want to begin hitting some PSD to HTML practice on your own:<\/strong><\/p>\n<ul>\n<li><a href=\"http:\/\/www.noupe.com\/how-tos\/30-elaborate-tutorials-to-teach-you-psd-to-html-conversion-73513.html\">http:\/\/www.noupe.com\/how-tos\/30-elaborate-tutorials-to-teach-you-psd-to-html-conversion-73513.html<\/a><\/li>\n<li><a href=\"http:\/\/demo.tutorialzine.com\/2011\/06\/beautiful-portfolio-html5-jquery\/\">http:\/\/demo.tutorialzine.com\/2011\/06\/beautiful-portfolio-html5-jquery\/<\/a><\/li>\n<li><a href=\"http:\/\/www.designer-daily.com\/tutorial-how-to-code-your-psd-into-a-html-css-layout-15632\">http:\/\/www.designer-daily.com\/tutorial-how-to-code-your-psd-into-a-html-css-layout-15632<\/a><\/li>\n<li><a href=\"http:\/\/www.designzzz.com\/search\/?q=website+psd\">http:\/\/www.designzzz.com\/search\/?q=website+psd<\/a><\/li>\n<li><a href=\"http:\/\/tutorialzine.com\/2010\/02\/html5-css3-website-template\/\">http:\/\/tutorialzine.com\/2010\/02\/html5-css3-website-template\/<\/a><\/li>\n<\/ul>\n<p>Finally, I would like to thank two amazing developers,\u00c2\u00a0<a href=\"https:\/\/twitter.com\/zoe_rooney\">Zoe<\/a> and <a href=\"https:\/\/twitter.com\/cfarm\">Cat<\/a> for always taking the patient time to answer my questions withhelpful hints along the way.<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This month I had the privilege to attend Zoe Rooney&#8217;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 \u00c2\u00a0agreat intro from Smashing [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"footnotes":""},"categories":[29,5,134,114,138,24,28],"tags":[158,157,163,124,277,162,156,159,164,160,161],"_links":{"self":[{"href":"https:\/\/www.cassandraking.net\/wordpressapp\/wp-json\/wp\/v2\/posts\/763"}],"collection":[{"href":"https:\/\/www.cassandraking.net\/wordpressapp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cassandraking.net\/wordpressapp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cassandraking.net\/wordpressapp\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cassandraking.net\/wordpressapp\/wp-json\/wp\/v2\/comments?post=763"}],"version-history":[{"count":4,"href":"https:\/\/www.cassandraking.net\/wordpressapp\/wp-json\/wp\/v2\/posts\/763\/revisions"}],"predecessor-version":[{"id":767,"href":"https:\/\/www.cassandraking.net\/wordpressapp\/wp-json\/wp\/v2\/posts\/763\/revisions\/767"}],"wp:attachment":[{"href":"https:\/\/www.cassandraking.net\/wordpressapp\/wp-json\/wp\/v2\/media?parent=763"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cassandraking.net\/wordpressapp\/wp-json\/wp\/v2\/categories?post=763"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cassandraking.net\/wordpressapp\/wp-json\/wp\/v2\/tags?post=763"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}