Teaching Solid HTML and CSS Production Work

0 comments suggest 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…



  • 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.
Found a typo or error? Suggest an edit! If accepted, your contribution is listed automatically here.



7 responses

  1. Avatar for Haacked
    Haacked October 11th, 2005

    My friend Dimitri from down under emailed me these tips:

    * Start with markup. Look at the comp, study the content elements of the template, then write code on how these should be represented as HTML.

    * Throw away anything that writes HTML for you. All it'll do is get in the way, although the new 8 from Macromedia is mighty nice -- just don't get into the WYSIWYG mode. Once you're there, you're dead as the markup developer ;)

    * Cut only what you need. You don't actually need to slice the entire template.

    * When you cut out a design element, cut to the absolutely smallest size you can cut, but make sure not to get onto the shadows or other color gradations.

    * When (if) developing comps, make sure to set aliasing to none for text that is supposed to be text. That would help avoiding client's unhappiness when the resulting page looks different from the comp.

    * Make sure the template passes "stretchy pants" test, i.e. all

    content areas accommodate content of varying sizes and constraints.

  2. Avatar for Scott Elkin
    Scott Elkin October 11th, 2005

    Eric Meyer on CSS II has been invaluable to me. (You don't have to read I before II).

    That would be the first thing I would read after I understood CSS basics.

  3. Avatar for Toby Henderson
    Toby Henderson October 11th, 2005

    http://www.htmldog.com is another good site for working wiht (x)html and css.

    Paint .Net http://www.eecs.wsu.edu/paint.net/ is a great free (not to bad) replacement for photoshop which supports layers otherwise use photoshop.

  4. Avatar for CedarLogic
    CedarLogic October 11th, 2005

    I want to teach a friend everything I know about HTML Production work (which won’t take long). By production...

  5. Avatar for Haacked
    Haacked October 11th, 2005

    Thanks for the tips! Keep them coming!

  6. Avatar for Christopher
    Christopher October 12th, 2005

    Photoshop has always (well, at least since 5.5) come with ImageReady which is a great tool for slicing up images and optionally generating some supporting html. It's also good for animated gifs, icons, and those nifty bitmaps that decorate your server controls in vs.net's toolbox.

  7. Avatar for Bryan Covington
    Bryan Covington October 13th, 2005

    The second book you chose is the textbook I use in my web design classes so obviously I think it's a good one. If I had a complaint it'd be that it includes too much on the "old ways".

    Fireworks is likely to be a dying product in my opinon. It was always a Photoshop wannabe and now that Adobe has purchased Macromedia I don't expect that it will live on much longer. Photoshop is the industry standard, if you have to pick one go with that.

    Bryan Covington

    <a href="http://www.admodumdigirati.com">Ad Modum Digirati</a>