What are the best practices for rapid prototyping using exclusively HTML/CSS/JS

If you're going to throw away the prototype and start over on the real app later, then I would suggest you use a tool like PowerPoint or Balsamiq or even paper. The low fidelity lets your users focus on the interaction and less on your colors or bubbly buttons. You actually get more kinks worked out faster with less investment like this.

If you're aiming at eventually using your code as the foundation for a real app, then I would suggest looking at something lightweight like Webmatrix or equivalent Ruby/Java IDE. Webmatrix is a free tool that is an IDE that'll help you design and mock up your site really quickly and even use SQL Express, IIS Express and the other pieces of the .NET web stack (all free) locally. Then if you decide to upgrade to Visual Studio later on, you can without doing anything to your app.

You can take a prototype to actual application pretty quickly if you choose the right tools. I recently prototyped an internal tool that will eventually replace an archaic collection of screens that manage internal data. The old system is not very intuitive and is extremely confusing for new hires.

My stack:

• HTML5 Boiilerplate
• Blueprint CSS for Grids & Layout
• jQuery and jQueryUI to handle JavaScript and Layout
• jQuery Validate for client-side form validation

Put this on top of an MVC framework and tie it to the server-side application code of your choice and you can be up and running within a day.

*HOW TO RAPIDLY PROTOTYPE*

Some people are confused by this. Please bear with me, there are differing levels of "velocity" when it comes to prototying, but there is only one that is the fastest - and it will always be the fastest, because it is closest to the level of interaction; and that is the browser.

How to rapidly prototype?

1 - Try to find all that there is to "Design-In-Browser" - Experts say that the best way to design front end is "to get to the code as fast as possible" - Chris Coyier.

2 - To be rapid means reuse. - Trick #1 to rapid prototyping is ~ "building components that can build onto the other component that you have already built."

Example: - This can be like Tabs proven in one page - Charts proven in another page - Then rich comboboxes proven in a third page

 - In a fourth page, the three prior prototypes combine into a complex-component.

 Mixing - Components together, is key. 

3 - For pete's sake, if you are rapid prototyping - IT CAN BE SLOPPY. Please don't kid yourself that formatting code is going to be necessary. Rapid Prototypes are thowaway code, or evolving code, in either case this can be addressed or automated long after the prototype is reviewed. The point of the prototype is to determine architectural vitality. We are talking about Minimum Viable Product in most cases, so get working code on the page as fast as possible. This is just the Proof of Concept, not the proof in the pudding.

4 - I mentioned automation, A good IDE is really important - one with lots of hotkeys. "To rapidly prototype - your fingers need to be flying, not your mouse." - But there is more. Many IDE's will format your code for you. Many will lint while you work, finding errors as they are made, some can update your browser on save. Syntax highlighting. It is simple but effective.

Conclusion: Rapid Prototyping is a compilation of these type of best-practice traits. None of us are immediately rapid out of the gate: so it is an evolution process to pick up your speed. This is measured in Agile as velocity. You must think - how to go faster, then lean forward more.

**Incorporate every development optimization that you can over time. **Build up libraries of prototyped widgets, technologies, and api graveyards. **Then when the time comes, duplicate them, and mix them together - maintaining the originals while evolving something new. **This is especially true for many JS frameworks.

Hope that helps.