Advertisement

Photoshop to HTML and CSS

9 Posts

In this series of tutorials you'll learn exactly how to convert a warm, cheerful web design into a standards-compliant HTML and CSS website. If you're just beginning to step into the web design and development world, this is the perfect introduction!

Photoshop to HTML
Posts in this series
  • Complete Websites
    Design a Warm, Cheerful Website Interface in Adobe PhotoshopTitle image updated
    38 shares
    Updated with the HTML Coding Tutorials! - Not long after Webdesigntuts launched, we posted this excellent tutorial that details the process of designing a warm and cheerful home page in Photoshop. After high demand, we’ve started taking that completed design and we're converting it into a standards-compliant HTML and CSS web page! Along the way, we’ll review a variety of nifty techniques that will help you to improve your own workflow. Even better, when Nettuts hits 80,000 RSS subscribers, Jeffrey has agreed to take things even further and convert the finished product into a custom WordPress theme. Check out our progress below.Read More…
  • HTML & CSS
    Convert a Warm, Cheerful Web Design to HTML and CSS: Chapter 2Title image
    Continuing on with our Photoshop to HTML session, in this lesson, we'll begin constructing the markup for our website. Read More…
  • HTML & CSS
    Convert a Warm, Cheerful Web Design to HTML and CSS: Chapter 3Title image
    Continuing on with our Photoshop to HTML session, in this lesson, we'll slice the PSD. Read More…
  • HTML & CSS
    Convert a Warm, Cheerful Web Design to HTML and CSS: Chapter 4Title image
    Continuing on with our Photoshop to HTML session, in this lesson, we'll learn how to use the 960 grid framework. Read More…
  • HTML & CSS
    Convert a Warm, Cheerful Web Design to HTML and CSS: Chapter 5Title image
    Continuing on with our Photoshop to HTML session, in this lesson - split into four videos - we'll use CSS to style our webpage. Read More…
  • HTML & CSS
    Convert a Warm, Cheerful Web Design to HTML and CSS: Chapter 6Title image
    2 shares
    Continuing on with our Photoshop to HTML session, in this lesson, we'll use jQuery to implement the tabbing functionality in the sidebar of our web site. Read More…
  • HTML & CSS
    Convert a Warm, Cheerful Web Design to HTML and CSS: Chapter 7Title image
    Continuing on with our Photoshop to HTML session, in this lesson, we'll work on form styling, with CSS. Read More…
  • HTML & CSS
    Convert a Warm, Cheerful Web Design to HTML and CSS: Chapter 8Title image
    Continuing on with our Photoshop to HTML session, in this lesson, we'll take a look at the dreaded Internet Explorer, and learn about ways to wrangle it into submission! Read More…
  • HTML & CSS
    Convert a Warm, Cheerful Web Design to HTML and CSS: Chapter 9Title image
    Finishing up our Photoshop to HTML session, in this lesson, we'll review all of the miscellaneous bugs and issues that need to be fixed before deploying our site. Along the way, we'll also learn about proper compression methods to make our site load as quickly as possible. Read More…