Visual Studio Tips for HTML web or windows developers: ZenCoding

Whether its for HTML websites or Windows 8 apps, there are some nice features hidden in Visual Studio for HTML developers! Check out Zen Coding in Visual Studio 2012!

If you do a lot of HTML and haven’t discovered Zen Coding, read on! If you already know ZenCoding and all you want to know is how do I get this in Visual Studio because you know and love it. Just go to vswebessentials.com, download web essentials and off you go.

What is Zen Coding?

Zen Coding is a series of shortcuts that will generate HTML code for you and save you a lot of typing. It’s actually open source and you can find the code on GitHub if you are interested. But all you really need to do is install vs web essentials and try it yourself! The rest of this blog shows you some great zen coding examples to save you time.

Ideally you have Visual Studio open right now so you can install vs web essentials and try these examples out on an HTML page as your go through the post.

Let’s start with something simple. Type

div

now hit the <Tab> key and you get

  <div></div>

Nice eh? It always slows me down to type all the opening and closing tags.

Okay now try this followed by the <Tab> key

ul>li

You get

         <ul>
            <li></li>
        </ul>

Starting to see the potential? Imagine you wanted to build a table…

table>tr>td

becomes

   <table>
            <tr>
                <td></td>
            </tr>
   </table>

But wait, it gets better… because you can specify multiples, try this

table>tr*5>td*3

Now you get a table definition for 5 rows with 3 columns

     <table>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
         …
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>

You can even insert Lorem Ipsum text

ul>li*5>lorem

Becomes

 <ul>
         <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit nisl </li>
         <li>Tincidunt integer eu augue augue nunc elit dolor,aliquam sit amet justo nunc tempor, metus vel.</li>
         <li>Placerat suscipit, orci nisl iaculis eros,metus a risus iaculis scelerisque eu ac ante.</li>
         <li>Fusce non varius purus aenean nec posuere, sollicitudin interdum turpis nunc eget.</li>
         <li>Sem nulla eu ultricies orci praesent id augue nec at mattis purus dignissim fringilla.</li>
</ul>

How about adding ids and attributes? “#” creates an id attribute, “.” creates a class attribute, so

div#contentRegion.address

becomes

  <div id="contentRegion" class="address"></div>

There’s more, but rather than repeat it all here, I’ll refer you to a great blog post and examples courtesy of John Papa here. Zen coding allows you to create repetitive HTML code very quickly and efficiently and with vswebessentials you can do it with Visual Studio! 

Don’t forget as a student, you shouldn’t settle for Express versions of software, you can get the same software the professionals use. Download Visual Studio Professional today for free at DreamSpark your one stop shop for software!

Technorati Tags: Zen Coding,HTML5,HTML,Visual Studio,VS Web Essentials,Dreamspark,how to code HTML in Visual Studio