Tutorial PSD to HTML Full + Source Code

(53) Tutorial PSD to HTML Full + Source Code

Part 1 : Welcome http://youtu.be/6jPZoViUQFs Part 2 : Getting Setup Properly http://youtu.be/CcxxZ4H6y2s Part 3 : Analyze the Layout http://youtu.be/-1p51Ql2P_8 Part 4 : Isolate and Export Graphics http://youtu.be/GokP6bVDlTc Part 5 : Additional Export Considerations http://youtu.be/t7gMg8K4kP0 Part 6 : Isolating Button Graphics http://youtu.be/OwaODwVQNhA Part 7 : Export Button Graphics http://youtu.be/47fnEbpAhRM Part 8 : Next Steps http://youtu.be/ho_Zqe03ncc Part 9 : Getting Started http://youtu.be/2V0JpjJJTQ8 Part 10 : Calculating the Width http://youtu.be/CgXzDascy1A Part 11 : Adding the Background Image http://youtu.be/oZni7G16hXY Part 12 : Creating the Links http://youtu.be/QP-bI-gGg9Y Part 13 : Reviewing the F2FW ico Class http://youtu.be/3pdZR_Zr_Bo Part 14 : Creating the Social Icon Graphics http://youtu.be/3pdZR_Zr_Bo Part 15 : Displaying the Social Icons http://youtu.be/gttYV_gNvrs Part 16 : Coding the Header Structure http://youtu.be/p4ne9pBwQv8 Part 17 : Included F2FW ID's and Classes http://youtu.be/2j8Kf6097Mk Part 18 : Create the Gradient Background http://youtu.be/dp4lF7AfSAY Part 19 : Adding the Logo http://youtu.be/V_LB_OLhkjQ Part 20 : Adding the Menu http://youtu.be/kyW5pD6yHpA Part 21 : Creating the HTML Structure http://youtu.be/g6v7bNyTUHs Part 22 : Creating the Gradient Background http://youtu.be/wvTM6QIxzjU Part 23 : Adding the Border http://youtu.be/KYvPag80Gko Part 24 : Coding the Top Bar http://youtu.be/hr7FwbQqw9U Part 25 : Adding the Hello Button http://youtu.be/88eyLxMspj8 Part 26 : Creating the Article Text http://youtu.be/LJhMp16bbXk Part 27 : Adding the Custom Buttons http://youtu.be/brkBIEBNjHk Part 28 : Placing the Slider Image http://youtu.be/x5itwxkWELI Part 29 : Generating the Next and Previous Buttons http://youtu.be/8kfWcvXEtts Part 30 : Position Button and Create Image Files http://youtu.be/Cs8aiSbESdc Part 31 : Adding the Arrow Images http://youtu.be/ETRa94n4rug Part 32 : Coding the Thumbnails http://youtu.be/SYd2NgguoLc Part 33 : Adding Gray Surrounds and White Space http://youtu.be/754DdKDXD_Q Part 34 : Correcting Thumbnail Appearance http://youtu.be/fzJz6N4FKkk Part 35 : Styling the Hyperlinks http://youtu.be/VM7o08Js2R0 Part 36 : Adding the Icons to the Hyperlinks http://youtu.be/KWBWuN09GAU Part 37 : Coding the HTML for the Blog Section http://youtu.be/gpSQXK1TnL4 Part 38 : Styling the Blog Section http://youtu.be/vnOmUnQ7s9g Part 39 : Displaying Blog Post Icons http://youtu.be/0PLZcvMV8do Part 40 : Changing Icon Position http://youtu.be/D_pO2EiIv3Y Part 41 : Coding the HTML for the Footer http://youtu.be/PH03j3-5KY4 Part 42 : Styling the Footer http://youtu.be/tZny1FdcEFQ Part 43 : Testing in Safari, Chrome, and Opera http://youtu.be/K1rixkXPil4 Part 44 : Debugging Firefox Issues http://youtu.be/ABv5RfmUHmk Part 45 : Testing in Internet Explorer 9 http://youtu.be/BatDNhZG3xk Part 46 : Using Adobe Browser Lab http://youtu.be/Ljb2MW1Bm0M Part 47 : Adding the @font-face Declaration http://youtu.be/h2PJV00svwQ Part 48 : Correcting IE Bug 1 and 2 http://youtu.be/pf5EMND0PNs Part 49 : Correcting IE Bug 3 and 4 http://youtu.be/zZ0uwudMuj0 Part 50 : Correcting IE Bug 5 and 6 http://youtu.be/PWFkLn4akOk Part 51 : Conclusion http://youtu.be/-7iTFXdB88g Download Exercise Files / Example Projects  https://www.dropbox.com/s/lhnmbgg6604t2kd/PSD_to_HTML.zip