Rey Bango

Web developer, honey badger

How to Create HTML5 Website and Page Templates for Visual Studio 2010

Now that I work at Microsoft, I’m using Visual Studio 2010 as my main editor. By default, an empty web page is created with an XHTML 1.0 doctype and it’s pretty barebones. Since I’m focusing on HTML5 & JavaScript development, having to constantly update the page with references to the new HTML5 doctype, jQuery, Modernizr and all of the other tags I use for my pages was becoming a drag.

Today, I noticed a blog post by Zander Martineau in which he added a lot of HTML5 goodness to the Coda IDE in the form of clips, which is the code snippet format supported by Coda. This got me inspired to find out how to do something similar in Visual Studio, so I pinged Damian Edwards of the Visual Studio team for advice. He pointed me to the following article which explained how to create “Item Templates” in Visual Stuido.

The gist of it is that you can take any page that you create and turn it into a re-usable template via the “File->Export Template…” wizard. It walks you through the process of choosing a specific file or entire project/website to use as a template.

Adding a Page Template

So here’s the basic HTML5 template I wanted to include:

<!doctype html>   
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title></title>
	<meta name="description" content="" />
	<meta name="keywords" content="" />
	<meta name="author" content="" />
	<meta name="viewport" content="width=device-width; initial-scale=1.0" />
	
    <!-- !CSS -->
    <link href="css/html5reset.css" rel="stylesheet" />
    <link href="css/style.css" rel="stylesheet" />
	
    <!-- !Modernizr - All other JS at bottom 
	<script src="js/modernizr-1.5.min.js"></script> -->

	<!-- Grab Microsoft's or Google's CDN'd jQuery. fall back to local if necessary -->
    <!-- <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js" type="text/javascript"></script> -->
	<!-- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> -->
	<script>	    !window.jQuery && document.write('<script src="js/jquery-1.4.2.min.js"><\/script>')</script>

</head>

<body>
	<div id="container">

	</div>
</body>

</html>

After I created and saved this page, I went to “File->Export Template…” and followed these steps:

Now, when I select “File->New File…” to add a new item, my template is available:

Adding a Web Site Template

Creating this page template was a huge help. I can now start with a fresh template that specifically works for my style of development but I didn’t want to stop there. I also wanted to create a skeleton that I could use as the basis for new websites and I wanted it to package all of the important files that I use from the get-go. In this case, I wanted:

  • My HTML5 basic page template
  • jQuery
  • Modernizr
  • HTML5 Reset CSS file
  • An empty CSS file called style.css
  • A consistent folder structure for all of these

The first thing I needed to do was to create a new website in Visual Studio. From there, I needed to create and/or organize all of the files that I wanted as the basis for my skeleton. Using the same Export Template wizard, I followed the following steps to create my project skeleton:

So now when I select “File=>New Web Site” I see my new template:

and when I choose that, here’s what gets loaded for my new site:

Download the Templates

Note: The templates in this article have been updated to support jQuery 1.5.1 & Modernizr 1.7. Check it out here.

This is a huge time-saver for me and I want to share this. I’ve made both templates available for download so you can drop them into Visual Studio yourself. Just grab the specific file and drop the zip into the folder I specified:

HTML5 Page Template

Drop this into “Visual Studio 2010 > Templates > ItemTemplates” folder

HTML5 Web Site Template

Drop this into “Visual Studio 2010 > Templates > ProjectTemplates” folder

Category: HTML5, jQuery, Microsoft, Web Development

Tagged:

38 Responses

  1. alex says:

    Why do you have a closing html tag, but no opening one. Why do you sometimes explicitly close meta-tags and sometimes not. Two years ago we called this bad coding style, now we simply have to call it HTML5 :-). But you know, that the W3C Validator already validates polyglott HTML5, if you put a xmlns-attribute at your missing html-element.

  2. Stanley says:

    I am curious as to why you would use the section “!– Grab Microsoft’s or Google’s CDN’d jQuery. fall back to local if necessary –“? Why try and grab it from someone else’s site when you have no control over what is there or weather or not it will be available? I see so many people doing this with JS files now. If their servers are down or busy your site just gets slower because it now has to wait for their site to timeout on the request before if fails over to your local copy.

    • Rey Bango says:

      @Stanley: The reason is because using a CDN version increases the odds that the version will have been cached prior to a user visiting your site and minimizes HTTP requests. It’s considered best practice based on the findings by Steve Souders while at Yahoo! and now at Google.

  3. What’s the purpose/benefit of including xmlns=”http://www.w3.org/1999/xhtml” in the html tag for an html5 document?

    Wondering if I’m missing something or if it’s just a holdover from a Ctrl+C/Ctrl+V operation…

  4. Rey Bango says:

    From what I’ve read and from the recommendation of Stanley (in the above comments), it helps the page validate. Remy Sharp also mentioned that it helped resolve a problem with Firefox 2 but that’s a lesser issue:

    http://remysharp.com/2009/04/14/html5-and-firefox2/

  5. HTML 5 has been the only exciting thing to look forward to for the past 2 years! Now that its here the push is on to make sure everybody upgrades their browser so they can take full advantage. Google, FF, IE, Safari – fix all your damn bugs and lets let pages look the same in all 3 browsers. Follow the standards PLEASE!

    • Downer Man says:

      Too bad HTML5 isn’t a standard yet.

    • Lee C. says:

      Follow the “standards” and implement a non-standard language? HTML 5 is a draft. Keep in mind, if it weren’t for browsers innovating (that is, *not* following the so-called standards), we might as well be stuck in 1999, because that is the last time any new HTML “standards”, which are actually recommendations, came from the W3C.

      • Rey Bango says:

        Hey Lee. Honestly, I’m not sure what your rant is about. I looked at the blog post and still didn’t get the context of your comment.

        • Lee C. says:

          Rey, it was not meant to be a rant. I replied to a comment. Michael Fever ended his comment with “Follow the standards PLEASE!”, as if that would automagically make the world a better place. I felt obligated to point out that not following the so-called standards has done much good for the world of the Web and Web dev, and that not including HTML5 in current browsers *is* following the “standards”. I appreciate your honesty and your blog.

          • Rey Bango says:

            @Lee: Ah ok. Thank you for coming back and clarifying it. Every so often I just get people blurting out comments which leave me scratching my head & I unfortunately though that was the case.

            I’m glad people are concerned about standards-based features and I’m hoping eventually we’ll all have solid browsers that make development easier. It’s coming but it’s going to take a bit. Thanks for commenting.

  6. Jim Lehmer says:

    Good stuff, although I will probably use the html5boilerplate for my actual VS2010 templates. :o)

    Question, since you’re a Microsoftie now – next time you talk with any VS2010 people, ask them when HTML5 is going to start validating in VS2010, or is there a way to get it to do so now? Right now when using the plain HTML5 it complains about every element, like this:

    Validation (): Element ‘html’ is not supported.

    Annoying!

  7. Jim Lehmer says:

    BTW, on my install of VS2010 Ultimate the only way I could get the project templates to show up is to copy them to a 1033 folder under each language, and even doing that I still can’t get the item templates to work.

  8. Abubakar says:

    this is great! i just started using vs 2010 and currently working on mvc 2 for a bulk SMS portal looking at how i can practise the project template

  9. Abubakar says:

    Hello really enjoy your explanation about project template
    i will try that and get back to you.

  10. Joel says:

    Thanks for the great tip! Awesome time saver to have everything included in the new site template.

  11. Ramakrishnan says:

    Hi Ray Bango, Excellent knowledge sharing. Thanks!

  12. […] Aquí tienes. Por otro lado, no tengas miedo de salir de Visual Studio de vez en cuando. […]

  13. Bouke says:

    After a long time i want to start again with programming and add html websites too (learned it in vs2003).

    I found out there is an option to add a html-website to youre project.
    I dont understand what this templates will do. can you explain this in more simple words?

    second question: where can i find this folders? searched my computer and looked in vs2010.
    – HTML5 Page Template –> Drop this into “Visual Studio 2010 > Templates > ItemTemplates” folder
    – HTML5 Web Site Template –> Drop this into “Visual Studio 2010 > Templates > ProjectTemplates” folder

    thanks in advanced.
    (could you also sent a copy to my email?)

    • Chris says:

      Bouke, user defined templates are installed in you documents folder. IE: ..My Documents\Visual Studio 2010\Templates

      Hope this helps…

  14. Yuthavong says:

    templates location:

    it’s here “\My Documents\Visual Studio 2010\Templates\ItemTemplates”

  15. krishna Reddy says:

    Rey Bango

    Hi Rey Bango i need the
    HTML 4 website template how to do that from your code

  16. Jon Roland says:

    Looks promising but I don’t use Visual Studio. I use Quanta Plus under Linux. Do you foresee any problems with using it instead?

    • Rey Bango says:

      @Jon: Not at all. The pages included are just HTML, CSS & JavaScript. You should be able to take the pages and use them as needed. In terms of having them integrate into Quanta, I couldn’t tell you if that would work since I’ve not used it.

  17. Rey Bango says:

    Hey everyone, I’ve updated the Visual Studio HTML5 templates to support jQuery 1.5.1 & Modernizr 1.7. Be sure to get them here:

    Link: My Visual Studio 2010 HTML5 Templates are Updated for jQuery 1.5.1 and Modernizr 1.7

  18. Anthony says:

    Hi Rey,

    Cool article. I’m about to make the jump from ASP.NET Web Forms to MVC. Any advice on the best approach to take?

  19. jinishans says:

    Hi

    I’ve placed it under My docs\vs2010\templates\visual C#\, still it doesnt appear under C# projects. anything else needs to be done..?

    Regards
    jinishans

  20. Fred Mathews says:

    I don’t understand from where you started. You said you were using VS2010 as your editor, so when you say you “created and saved this page”, did you start with a new website and add an HTML Page and delete the default aspx page? If not, where did you save the html form, under Item Templates? Can you provide more information about how you started this in VS2010? Thanks.

  21. Henry says:

    If you edit inside mytemlpate.vstemplate (in the zip) line from c# to VisualBasic

    And in ProjectName.webproj remove the first lien with C# ….

    It can become a VB web project template

    Thanks!!!!!!!!11

  22. olin says:

    Great stuff! What if I want to update one item from my project template, for example the jquery or modenizr to get the latest version, how will I do that? Do I need to delete the template? How will I do that?

Learn JavaScript!

What to Read to Get Up to Speed in JavaScript.

The best books & blogs for learning JavaScript development. Broken down by experience levels!


My BIG LIST of JavaScript, CSS & HTML Development Tools, Libraries, Projects, and Books.

Constantly updated with the latest and greatest tools. Check it out!

Categories

Rey Bango is Stephen Fry proof thanks to caching by WP Super Cache