I finish up the design in part three of this series on coverting an Adobe Photoshop website mockup into an actual HTML\/CSS website. This one focuses on the main content area. I create the the columns including the “quick links” section. I also talk a little bit about typography.<\/p>\n
Links from video:<\/strong><\/p>\n In this series:<\/strong><\/p>\n I finish up the design in part three of this series on coverting an Adobe Photoshop website mockup into an actual HTML\/CSS website. This one focuses on the main content area. I create the the columns including the “quick links” section. I also talk a little bit about typography. Links from video: Download Photoshop File […]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":1283,"menu_order":0,"comment_status":"open","ping_status":"open","template":"video-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":1385,"url":"https:\/\/css-tricks.com\/video-screencasts\/2-converting-a-photoshop-mockup-part-2-of-3\/","url_meta":{"origin":1389,"position":0},"title":"#2: Converting a Photoshop Mockup (part 2 of 3)","date":"November 11, 2008","format":false,"excerpt":"In part two of this series on converting a Photoshop mockup to an HTML\/CSS Website I continue on with the header\/menu section of the site. I change the way in which the site is centered when I decide to wrap the entire site in a page-wrap div instead of centering\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1290,"url":"https:\/\/css-tricks.com\/video-screencasts\/1-converting-a-photoshop-mockup-part-1-of-3\/","url_meta":{"origin":1389,"position":1},"title":"#1: Converting a Photoshop Mockup (part 1 of 3)","date":"November 10, 2008","format":false,"excerpt":"In this first-ever video podcast, I start the conversion process of an Adobe Photoshop mockup of a website, into a real live CSS based website. This is pretty rough here folks, I'm sure these will get more focused with time. Please let me have it with criticisms at my contact\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1469,"url":"https:\/\/css-tricks.com\/video-screencasts\/12-converting-a-photoshop-mockup-part-two-episode-one\/","url_meta":{"origin":1389,"position":2},"title":"#12: Converting a Photoshop Mockup: Part Two, Episode One","date":"December 1, 2008","format":false,"excerpt":"There has been LOTS of great feedback on the first series of Converting a Photoshop Mockup into HTML\/CSS. So let's do it again! Every website is different will require different conversion technqiues so there will be plenty to learn this time around that will be different from last time. The\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1472,"url":"https:\/\/css-tricks.com\/video-screencasts\/13-converting-a-photoshop-mockup-part-two-episode-two\/","url_meta":{"origin":1389,"position":3},"title":"#13: Converting a Photoshop Mockup: Part Two, Episode Two","date":"December 2, 2008","format":false,"excerpt":"In Episode Two of this series, we continue on with the structure of the site. In Photoshop, we create the three different states of the menu, then slice them up and use the CSS sprites technique to create the rollover and \"on\" states for the tabs. We then create the\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1549,"url":"https:\/\/css-tricks.com\/video-screencasts\/16-creating-the-photoshop-mockup\/","url_meta":{"origin":1389,"position":4},"title":"#16: Creating the Photoshop Mockup","date":"December 5, 2008","format":false,"excerpt":"This episode is a prequal to episodes 12, 13, and 14. We go back to a blank Photoshop document and re-create it. There is no HTML\/CSS in this episode, just pure Photoshop work. Links from Video: View Demo Download Files Part One Part Two Part Three","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1475,"url":"https:\/\/css-tricks.com\/video-screencasts\/14-converting-a-photoshop-mockup-part-two-episode-three\/","url_meta":{"origin":1389,"position":5},"title":"#14: Converting a Photoshop Mockup: Part Two, Episode Three","date":"December 3, 2008","format":false,"excerpt":"We wrap up the mockup conversion here in Episode Three. We create the \"article area\" and the \"sidebar\" (semantic class naming!), and then we clear the float. We use Firebug to steal the typography from the live CSS-Tricks. Then we fix up the header a little bit in Photoshop and\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/1389"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=1389"}],"version-history":[{"count":6,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/1389\/revisions"}],"predecessor-version":[{"id":155789,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/1389\/revisions\/155789"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/1283"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=1389"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=1389"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\n
\n