Teaching Solid HTML and CSS Production Work

comments edit

I want to teach a friend everything I know about HTML Production work (which won’t take long). By production work, I mean the process of receiving a Photoshop file, cutting it up, and producing nice clean semantic (X)HTML and CSS.

I’m not a master of such things (though I am pretty handy with CSS these days), but I do know there’s a difference in producing HTML for a static web page verse producing HTML for a dynamically rendered page such as an ASP.NET page. It’s those details that I feel I can teach her well that you don’t learn at many design shops.

However, in preparation, I have a few books and websites I want her to check out. Let me know what you think of this list and if you’d make any additions, deletions, etc...

Books

Websites

  • QuirksMode\ This is a great site for learning CSS and Javascript tips and how to deal with browser compatibility issues.
  • A List Apart\ This site sports insightful articles on web design and CSS. Looking at the code behind the site itself is quite educational.
  • Listamatic\ This is more of a reference and tutorial on how you can use CSS and the unordered list <ul> element to produce all sorts of lists, navbars, menus, etc....
  • 20 CSS Tips and Tricks\ Tips and tricks for achieving common tasks using CSS.   

Also, I asked some friends what applications they use to cut a photoshop file and one mentioned Macromedia Fireworks while another just uses Photoshop. Any tips?

Also, after learning the basics, the following links are important for understanding the box model problem between Firefox and IE.

Box Model Hacking

  • The IE Box Model and Doctype Modes\ Explains the Box Model problem and how the Doctype affects it.
  • BoxModelHack\ Explains some hacks to get around the Box Model problem.
  • Box Model Tweaking\ Discusses an upcoming CSS3 declaration that allows the browser to change its box model. This (and variants) are supported by some browsers already perhaps making it possible have them use the IE box model.

Comments