HTMLcut blog

About PSD to HTML Conversion and More

3 Questions to Web Design Pros: Resources for Mastering HTML/CSS Coding

Resources for mastering PSD to HTML/CSS coding recommended by prosThere are a lot of collections of HTML/CSS resources and PSD to HTML conversion tutorials on the Internet, but sometimes they just express the personal opinion of the author or are composed on the basis of hazy criteria. In this post we have interviewed web designers who are known in the web community and whose recommendations can be helpful to both beginners and experienced web designers when they master HTML/CSS coding.

We have asked them these 3 questions:

  • Which resources (books, tutorials, websites, forums, etc.) helped you to learn HTML/CSS coding? Which of them would you recommend to beginner web designers to read first of all?
  • Which HTML/CSS coding resources do you prefer now? For example, when you need to refresh something or learn new HTML/CSS standards or techniques?
  • Are there HTML/CSS reference resources (cheat sheets, etc.) you use most often in your day-to-day work?

Here are the answers.

Veerle Pieters

Veerle Pieters, graphic and web designer
duoh.com, veerle.duoh.com

  • When I started to learn HTML/CSS the right way (without tables) there weren’t many books around. One good one that was around at that time was “The Zen of CSS design” by Dave Shea & Molly Holzschlag. It helped me in understanding what could be accomplished visually through a CSS-based design. Another important one that influenced me that web standards were important was the famous book by Jeffrey Zeldman “Designing with Web standards.” Most learning was done by looking at the source of web sites that I admired to figure out how it was done.
    A good one that I would recommend for beginners is “Build Your Own Website The Right Way Using HTML & CSS” by Ian Lloyd. Another is “Beginning CSS Web Development: From Novice to Professional” by Simon Collison.
  • My favorite resource to learn the new stuff is Treehouse. The movies are really a good way to learn at your own pace and you can go back and forth. You learn by earning badges.
  • To look something up I sometimes use dochub.io. Other regulars are 456 Berea Street by Roger Johansson and CSS-Tricks by Chris Coyier.

Paul Boag

Paul Boag, web guy, writer, speaker and polymath
boagworld.com

  • I have been building websites since 1994 and so had to learn as I went along. I have always learned by experimentation and looking at the code on other people’s websites. That said, I can recommend Ian Lloyds book for those starting out “Building websites the right way with HTML and CSS”. For those a little further down the line I would recommend “Advanced CSS” by Andy Budd.
  • Sitepoint has a reasonable HTML reference resource that I use from time to time. CSS-tricks is a superb resource for keeping up on the latest CSS techniques. I also find Quirksmode browser compatibility tables invaluable.
  • Not really. The vast majority I do from memory and anything else is a quick Google way.

Josh Johnson

Josh Johnson, web designer, editor of DesignShack.net and Mac.AppStorm

  • I’ve leaned heavily on two resources in the past few years: NetTuts and CSS-tricks. From NetTuts I learned to convert PSDs into HTML/CSS from phenomenal teachers such as Jeffrey Way and Collis Ta’eed. I actually work with these guys now despite the fact that I’m completely intimidated by how awesome they are (don’t tell them :) ). From there, Chris Coyier’s regular screencasts at CSS-Tricks taught me the finer points of CSS and how flat out fun it is to work with.
  • The two sites that I just mentioned are still places that I visit regularly. Obviously, design blogging giants like Smashing Magazine and Six Revisions have been a major influence on my career as well. Lately I’ve been blown away by the advanced tutorials at Codrops and the always insightful posts at Impressive Webs.
  • Chris Coyier’s almanac and snippets library are pages that I reference almost daily. I usually start with a Google search but the man must be an SEO wizard of sorts because the top result almost always leads me to his site. On top of that my two new favorite resources are CanIUse and HTML5 Please, both of which are invaluable in navigating the murky waters of browser support for fancy new CSS and HTML techniques.

Steven Bradley

Steven Bradley, website design and marketing
vanseodesign.com

  • The only book I’ve ever read on HTML is HTML & XHTML: The Definitive Guide. I’ve read 2 books on CSS: Eric Meyer on CSS and Cascading Style Sheets Developer Guide 2.0.
    I’d recommend any of the above. I also wrote a post with more detail about all 3 as well as other development books I’ve read.
    The only website I ever used while learning is the one at W3Schools. It’s a very basic and introductory site, but probably still worthwhile for beginners to look through.
  • I don’t have to go to resources today. For the most part I don’t really need one anymore. When I forget exactly how a tag works or what values a CSS property has I just do a search for the tag or property. I do end up back at W3Schools through those searches.
    Two sites I find myself going to a lot are: HTML5Doctor.com and CanIUse.com.
    Beyond that I’m subscribed to a lot of blogs and pick up new things here and there.
  • I never use cheat sheets. I prefer a quick search or the resources above.

Holly Reynolds

Holly & Jason Reynolds, web designers
hollyreynolds.net

  • W3C schools, searching on Google, asking friends who were designers/developers (over and over and over), O’Reilly “In A Nutshell” books, the “For Dummies” books and just pure hands-on experience. I’d recommend they check out Lynda first now.
  • Codrops, A List Apart, Smashing Magazine, The Tuts (NetTuts, WPTuts, etc) sites and still good old searching on Google :).
  • Among my usual tools are some frameworks such as 960 grids, reset.css, as well as Lipsum.com.
     

Some Other Resources

We have also interviewed some HTMLcut‘s developers. Almost all of them mentioned CSS-tricks, this site is an absolute leader in our list of the best websites about CSS/HTML coding and PSD to HTML conversion:

CSS-Tricks

Among other resources which have not been noted before are HTML5Demos.com and Safari Web Content Guide.

Conclusion

To become a successful web designer or developer, you have to continuously learn. Fortunately, there are a lot of useful resources on the Internet that can help you in mastering HTML/CSS and keeping track of the latest news in this field. Hope this post will give you some guides on which of them may be the most appropriate for you.

If you know books, websites or tutorials on PSD to HTML coding which may be interesting to other people, you are welcome to write about them in comments.

 

Comments (12)

  1. I’m very disappointed to see several people mention W3Schools. If you’re at all interested in that site, please also see http://w3fools.com to understand why you can’t believe everything you read.

    Dale Cruse

  2. I feel the same about W3Schools. Also check out http://www.htmldog.com for good intro to HTML/CSS. The Opera Web Standards Curriculum is worth a gander, too.

    Xandor Schiefer

    • Thanks a lot for your contribution!

  3. Yeah, another -1 for W3Schools: at best it’s full of outdated information and shouldn’t be used, especially by beginners.

    Instead Mozilla have an amazing resource at https://developer.mozilla.org/ that I would definitely recommend.

    MicroAngelo

  4. Pingback: Questions aux pros de l’accessibilité: les ressources pour maîtriser l’accessibilité du Web | Accessiblog.fr

  5. Pingback: Fast, Easy Web Design! » Blog Archive » HTMLCSS Coding Resources Recommended by Pros PSD to …

  6. Wonderful collection.

    Andrea

  7. Nice and informative post. Thank you

    Webdesign Belgium

  8. I’m satisfied to find a lot of useful info right here within the post, we’d like work out more techniques in this regard, thank you for sharing.

    Convert HTML site to Wordpress

  9. I have just visited to your site and got some creative job. Very fabulous job you are performing. Thanks for this elegant stuff. Great post!

    psd to html

  10. I agreed with Dale Cruse… In this survey many web designers gave many resources… I would like to recommend that for beginners… go through the tutorial in tutorialspoint.com… Through this you can learn the basics(i mean alphabets) of html and css.

    lakshmikanth

  11. Some of the best methods is to simply view source or get a hold of FireBug. You can see how everything changes, what works and how its done.
    Chris
    Founder
    hirelogo.com

    Chris

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>