Home/ Questions/Q 328779
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-12T09:31:37+00:00

I’m a sometime developer who is trying to get up to speed on customer-facing

  • 0

I’m a sometime developer who is trying to get up to speed on customer-facing sites. I have a designer (who has years of experience, but it’s all been print, so she’s also ramping up on web design) so I’m not looking for design or usability tips. What I am interested in hearing about is the step-by-step process of doing the actual coding for a page. I want to make sure I get off on the right foot and build the pieces up in a logical order.

So please share your thoughts on what things you generally do first, second, etc. in your style sheets and HTML. I mean after you already have mockups (in Photoshop, or whatever) and are sitting down to create your code.

For example, do you first think about all the sections on your page (header, nav bar, content, rss feeds), and then add appropriate DIVs to your style sheet? And then go in and work on each section in detail?

(I know there have been other posts for web design tips/best practices, but I haven’t found any that focus on the step-by-step coding process.)

Thanks!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here is the correct way to do this by the numbers:

    1) Write your HTML. Do not do anything but write it. Do not render it in a browser to see what it looks like most importantly. Focus on semantics, brevity, and accessibility. At this point nothing else matters. If you get this step wrong nothing else will matter.

    2) Validate your HTML. If your HTML fails validation then fix it before doing anything else.

    3) Write CSS for your HTML. At this point your will have to render your HTML in a browser to see the impacts of your CSS. Do not make changes to the structure of your HTML to fit the demands of presentation. That is why you write your HTML first. The only things you should be altering in your HTML at this point are the class, id, and title attributes of your tags. CSS is referenced from the head section of the HTML using a link tag with an attribute of rel=”stylesheet”. Do not attempt to include a stylesheet using a style tag or the @import rule.

    4) After the CSS is complete and everything looks pretty then create any background images required of the CSS.

    5) Only after the CSS and everything required from the CSS is complete should you work on JavaScript. JavaScript does not ever go into your HTML. JavaScript always goes into an external js file. JavaScript is referenced by use a script tag that occurs directly prior to the closing body tag only.

    6) Upon completion of your JavaScript pass it through the JSLint tool. Rewrite your JavaScript exactly like it says.

    When I have worked with designers that have migrated from print to web I have encountered problems. Print designers typically fail to leave the print world behind when they attempt to adapt their experience of layout to the web. The web is not print. Print has different limitations and freedoms than does the web. Even grid layouts sometimes do not fail to convert from print to web design.

    • 0