10 Best Articles to Learn PSD to HTML Conversion

This list article contains links of good resources where you can learn very best ways and methods of coding up a PSD into workable HTML/CSS templates. Target is for novice folks. Articles listed below will help you master in HTML/CSS crafting with industry best practices.


  1. Converting a clean magazine-style PSD template to HTML/CSS

  2. Converting a Design From PSD to HTML

  3. Brilliante Blog Layout – Coding The PSD File Into CSS and HTML

  4. From PSD to HTML: Building a Set of Website Designs Step by Step

  5. How to Code up a Web Design from PSD to HTML

  6. PSD/HTML Conversion: Code a Clean Business Website Design

  7. Minimal and Modern Layout: PSD to XHTML/CSS Conversion

  8. Slice and Dice that PSD

  9. Building a Website (2 of 3): HTML/CSS Conversion

  10. From PSD to HTML the easy way – Using Ultimate CSS Framework

Top 10 Best Tools to Test your Mobile & Responsive Websites

Top 10 Best Tools to Test your Mobile Websites

Mobile Web Design, Responsive websites are the hottest trend in the Web industry now. Experts have made forecast that future is Mobile Computing. Luke’s infographic says more iPhone are sold in one day than babies born in the world.

Considering the trend nowadays we are working more on mobile websites, which is great. But do you have enough resources to check you work across multiple devices? I don’t have much. Here I have listed top 1o best tools to check mobile and responsive websites.

  1. Ripple

  2. iPhoney

  3. Mobilify

  4. Iphone4Simulator

  5. The Responsinator

  6. Mobilizer

  7. Opera Mini Simulator

  8. dotMobi Emulator

  9. Nokia Mobile Browser

  10. Test iPhone


That’s all for today. Any one of your favorite? Or any good one I missed? List them in comment below or RT us @CSSJunction

Winner Announced – The Smashing Book #3 Book Giveaway

As we had promised, here we are announcing the Winner of ‘The Smashing Book #3’ single printed copy book  giveaway contest.  We have so far 66 participants for this contest.

Winner is being chosen randomly and this time winner is Heather Jurczyk (@bodaciousgirl) – Congratulations! Heather, please DM us your email address and we will ship you the printed single The Smashing Book #3. Thanking you all for your kind participation.

More Giveaways to go – keep you eyes on us.

5 Best Articles to Learn Metro UI Design

Learn Metro UI Design

Microsoft Windows 8 is about to release. It will bring a totally new way in computing experience. Microsoft has changed the UI from classic bar button pattern to Metro Design Pattern. I think this is one of the most trending news in web designers world now.

Have you had any chances to learn Metro UI Design language? If not, here are 5 good resources  where you can learn Metro UI Design.

Metro Design Principles

Article by Arturot, an architect – he talks about core principles behind the Metro Design Language.

Link to article

Metro design guide for developers, v1.00

He is a developer, who codes yet shares the learning from Windows Phone design.

Link to article

Designing Metro UI Apps

This article is about designing apps for Windows 8. Definitely you can not avoid talking about Windows because its the origin of Metro UI.

In this article, you will find a video, really descriptive for Metro UI apps designing fundamentals.

Link to article

8 traits of great Metro style apps

One more video to see, quite lengthy – BUT it will give you straight views on why you should consider Metro pattern. Must watch.

Link to article

More Metro UI Resources

Link to article

Here you will find two slides to download and more article links to go further.

You also have more links to learn great things about Metro UI? Please comment it down.

Win The Smashing Book #3

One of the most awaited book by worlds all web designers, The Smashing Book #3 has been released few days ago. How many of you have got your copy? Or planning to get one?

Win The Smashing Book 3

If not, how about getting one for free? Here we are announcing our first giveaway contest and bringing a chance for you to get a single printed copy of ‘The Great Smashing Book #3’ – for free.

Winner Update

Winner has been chosen randomly – check if it’s you: Winner Annoucement.

How to Win?

All you have to do is, follow these simple three steps to participate:

That’s it. Cool! right?

You’re all done.

Make sure you knock us back on May 29. We will be choosing a random winner based on entries mentioned above and announce the lucky one.

PS: Smashing Media is not associated with this event. 

Thank you for participating.

Product Showcase PSD Template

We have an excellent PSD template freebie today. It’s super cool design helps to showcase your product in very well manner. I must say, it is a most attractive psd template released under CSS Junction.

Product Showcase PSD Website Template

Images used in the template are creative common from Behance gallery and fonts are from Google Fonts. Heading type is Tenor Sans and body copy is Buenard.

This template has been designed by Nepalese Web designer Sanjay Shrestha, a young and talented creative. You can follow him @shresthasans and here is his portfolio.

Isn’t it awesome that you can get this template right away. Yes it is. Get it:

Download PSD

Have something to say, spread words about this in the comment section below. Don’t forget  to follow us @CSSJunction and Subscribe our RSS feed for more attractive free PSD templates.

More PSD Templates: