How can I use Visual Studio to create pure client-side web apps using HTML5, CSS3, and JavaScript?

The rising popularity of so-called “modern” web apps means that web developers are focusing on writing more and more front-end, or client-side code. Although back-end, or server-side, code still plays an important factor, the fact is that web developers are working more directly with HTML5, CSS3, and JavaScript.

I come from more of a C++ background, but lately my colleague David Hsu and I have been looking at web apps. Visual Studio has some great templates that are focused on back-end web development. But I wanted something for front-end web development using only HTML5, CSS3, and JavaScript.

That's why we created Pure HTML (purehtml.codeplex.com) – a basic Visual Studio project template for front-end web development using only HTML5, CSS3, and JavaScript. In a few clicks, you can have a purely client-oriented web site ready for you to extend. Our goal was to start small and get the basic groundwork going, and then build-out as we get feedback from you, the community. Although you can create a similar project template relatively easily, it enables you to more quickly get in to a new web project and start coding. It also provides a common framework for us to extend together.

I think this is an especially great opportunity for web developers who are less experienced with Visual Studio to see just how well integrated the coding, debugging, testing, and deployment experiences are with Visual Studio. This template works with the Professional, Premium, Ultimate, and Express for Web editions of Visual Studio 2012. But if you don't have Visual Studio, you can get Visual Studio 2012 Express for Web for free.

We have some improvements in mind that we’ll share in the coming weeks, but I wanted to share this now and get your feedback as well as ideas for future work.

I also want to thank Christopher Bennage from the patterns & practices team for advising us and getting us up to speed with some of what it means to be a “modern” web app.

Happy coding, and we look forward to hearing your feedback!