Teaching Solid HTML and CSS Production Work

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

7 responses

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.

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.

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.

CedarLogic • October 11th, 2005

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

Haacked • October 11th, 2005
Thanks for the tips! Keep them coming!

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.

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>