Building your application

Whether it is standard HTML or dynamic code like PHP or ASP.NET, you need a good editor to put it all together. I have used a number of editors over the years, and the one I like and use daily is WebMatrix. The latest version is a free download and has everything you need to build prototypes and the final product. In addition, there are a variety of templates available to quickly build an application.

Although WebMatrix is a Microsoft offering, you are not restricted to Microsoft technologies, as it can be used for PHP-based applications and those using HTML/CSS/JavaScript standards. It only runs on Microsoft Windows, though I run it on my Mac in a Windows VM.

I know Microsoft doesn’t have the best reputation in the web development community, so if you choose to explore other options, you might start with Dreamweaver, Brackets, or a cloud-based tool such as Cloud9.

Browser tools

The latest version of Firefox offers some great tools, but I’m still a big fan of Chrome and its developer tools and the wide variety of extensions available. With a few clicks, you can easily access the JavaScript console and developer tools. The tools allow you to dig into every detail of a web page and its code: JavaScript, HTML DOM, CSS classes and elements, and so forth. One of my favorite features is the ability to edit CSS elements on the fly to quickly view how changes affect the interface.

A good foundation

There are freely available frameworks that provide the foundation for your own application; these frameworks utilize the latest techniques for full-featured web applications. My favorite is Bootstrap, and the latest version fully embraces responsive design and the mobile platform — the motto of Bootstrap 3 is mobile first.

Bootstrap allows you to build powerful interfaces that conform or respond to the user platform. It is a simple concept but, like anything, it takes time and patience to get acclimated with the framework (nothing beats diving into the code).

There are plenty of other options available, such as Foundation. The key is to utilize a framework that conforms to standards and allows you to concentrate on application design as opposed to the nitty gritty details of concepts like responsive design.

Plenty of options

Other tools you might want to check out are: Proto.io for quickly creating prototypes, PhoneGap for mobile development, BrowserStack for testing, and free JavaScript libraries such as Modernizr and Chart.js. The key is to find good tools and know how to use them; this allows you to focus on tackling your new project as opposed to figuring out how to use the tools.